Histoire du Frontend

4.1 Histoire du développement web : de HTML à HTML5 et CSS3

Au début des années 1990, le monde a assisté à la naissance du développement web grâce à Tim Berners-Lee. Il était en fait le premier développeur Frontend : il a lui-même inventé HTML et a écrit avec, il a lui-même créé le premier navigateur. Un véritable développeur frontend ne s'arrête même pas en l'absence de navigateur.

Même si CSS et JavaScript n'existaient pas encore, donc créer des sites était plus simple. On peut dire que Tim Berners-Lee — c'est le premier développeur oldschool, qui s'occupait du Frontend avant vos JavaScript et CSS.

En 1995, l'Internet Engineering Task Force (IETF) a approuvé HTML 2.0 comme premier standard officiel HTML. Cette version comprenait les balises et attributs de base, permettant de créer des pages web simples. HTML 2.0 a posé les bases du développement futur du web.

HTML 3.2 et HTML 4.0 : extension des capacités

1997 fut une étape importante dans l'histoire de HTML. Cette année-là, HTML 3.2 a été publié par le consortium W3C. Cette version incluait le support des tables, des applets Java et des formules mathématiques, ce qui a considérablement élargi les possibilités des développeurs web.

Plus tard cette même année, HTML 4.0 est apparu, apportant des améliorations significatives. L'inclusion du support des styles CSS, la sémantique améliorée et de nouveaux éléments ont fait de HTML 4.0 un outil puissant pour créer des pages web plus complexes et structurées. L'introduction des styles CSS a permis aux développeurs de séparer le contenu de son apparence, simplifiant la gestion des styles et la mise en œuvre du design.

CSS : révolution dans la stylisation des pages web

Le premier standard CSS (Cascading Style Sheets) a été publié par le W3C en 1996. CSS a permis aux développeurs de styliser les documents HTML, en séparant les éléments visuels de la structure de la page. CSS1 a proposé des fonctionnalités de base pour la stylisation du texte et des images de fond.

En 1998, CSS2 a été présenté, ajoutant de nouvelles capacités, telles que le support des media queries, le positionnement absolu et relatif, ainsi que des styles plus complexes pour l'impression.

CSS3, qui a commencé à apparaître en 2011, a introduit une architecture modulaire. Cela a permis d'implémenter de nouvelles fonctionnalités progressivement, y compris les animations, les gradients, les transformations et les mises en page améliorées.

HTML5: nouvelle ère du développement web

HTML5, développé par les efforts conjoints de WHATWG et W3C, a été une mise à jour importante et a été officiellement présenté en 2014. HTML5 a ajouté le support multimédia (vidéo et audio), de nouveaux éléments pour une sémantique améliorée (tels que <article>,<section>,<header>,<footer>), des formats améliorés pour les formulaires web et de nouvelles API pour travailler avec le graphisme et le multithreading.

HTML5 a considérablement élargi les possibilités des développeurs web, permettant de créer des applications web plus interactives et dynamiques. Le support des éléments multimédias et des nouvelles API a rendu les applications web plus puissantes et fonctionnelles.

4.2 De jQuery à Angular et React

Plus l'internet devenait rapide, plus les pages web devenaient lourdes. Plus elles contenaient de CSS et JavaScript. Pour simplifier la rédaction de ce dernier, différentes bibliothèques ont commencé à être utilisées. L'une des plus populaires est devenue jQuery.

jQuery : Simplification du travail avec JavaScript

jQuery a été créé par John Resig et publié en janvier 2006 lors de la conférence BarCamp à New York. L'objectif de jQuery était de simplifier l'interaction avec les documents HTML, le traitement des événements, les animations et l'interaction Ajax pour un développement web rapide.

jQuery est rapidement devenu populaire grâce à ses méthodes simples et intuitives, qui masquaient les complexités du travail avec JavaScript et les problèmes de compatibilité entre navigateurs. Ses principales fonctions incluent :

• Sélecteurs, permettant de trouver et de manipuler facilement les éléments du DOM
• Travail simple avec les événements
• Animations et effets
• Intégration avec Ajax pour créer des pages web interactives

jQuery a changé l'approche du développement web, le rendant plus accessible et pratique pour les développeurs.

Angular : Introduction aux applications web dynamiques

Une autre réponse à la complexité croissante des pages web fut l'apparition du framework Angular. AngularJS a été d'abord présenté par Google en octobre 2010. Le projet a été créé par Miško Hevery et Adam Abrons pour simplifier le développement d'applications mono-page (SPA) dynamiques.

AngularJS a fourni des outils puissants pour le développement côté client, notamment :

• Liaison de données déclarative via des directives
• Services intégrés pour travailler avec les requêtes HTTP
• Liaison de données bidirectionnelle, permettant de mettre à jour automatiquement la vue lors de changements des données du modèle
• Modularité et testabilité du code

En 2016, Google a présenté une version complètement repensée d'Angular (Angular 2 et plus), qui est devenue une plateforme pour le développement d'applications web évolutives et performantes utilisant TypeScript.

React : Révolution dans le rendu des UI

React a été créé par Jordan Walke de Facebook et publié pour la première fois en mars 2013. React est devenu une réponse aux besoins de Facebook pour améliorer les performances et supporter des interfaces utilisateur complexes.

React a introduit une nouvelle approche pour le développement d'interfaces utilisateur, basée sur les composants et le DOM virtuel :

• Architecture par composants, permettant de créer des composants réutilisables et isolés
• DOM virtuel, qui optimise la mise à jour de l'interface, la rendant plus rapide et efficace
• Liaison de données unidirectionnelle, simplifiant le débogage et la gestion de l'état de l'application

React a rapidement gagné en popularité et est devenu le fondement du développement de nombreuses applications web modernes grâce à sa performance et sa flexibilité. Il est également devenu la base d'autres bibliothèques et frameworks, tels que React Native pour les applications mobiles.

Ces trois technologies — jQuery, Angular et React — ont joué des rôles clés dans l'évolution du développement web, chacune apportant ses approches et outils uniques, qui ont considérablement simplifié la création d'applications web modernes.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 sont devenus des technologies si puissantes que le Web a débordé des limites du navigateur et est devenu une technologie Frontend Fullstack à part entière. Et le backend l'a ressenti en premier.

Node.js : conquête du backend

Node.js a été créé par Ryan Dahl et publié pour la première fois en mai 2009. Le principal objectif de Node.js est de fournir un environnement d'exécution pour JavaScript en dehors du navigateur, permettant d'utiliser JavaScript pour le développement côté serveur. Node.js est construit sur le moteur V8 de Google, ce qui assure des performances élevées et une vitesse d'exécution.

Node.js utilise des entrées/sorties non bloquantes, permettant de traiter de nombreuses connexions en même temps sans bloquer le thread principal d'exécution. De plus, il dispose d'un vaste écosystème de modules disponibles via npm (Node Package Manager), ce qui simplifie le développement et l'intégration de différentes bibliothèques et outils. Et grâce au moteur V8, Node.js assure un traitement rapide et efficace des requêtes.

Electron : conquête des desktops

Écrire une interface utilisateur cool pour le desktop est un défi, et là il y a HTML5+CSS3 juste à côté. Ce serait bien de l'utiliser... C'est pourquoi les programmeurs ont inventé un hack : votre application ouvre une fenêtre principale, dans cette fenêtre est intégré un navigateur (composant WebView), et dans ce navigateur est chargé du code en HTML5, CSS3 + JavaScript.

La bibliothèque Electron, initialement connue sous le nom de Atom Shell, a été créée par GitHub pour l'éditeur de code Atom. La première version d'Electron a été publiée en juillet 2013. L'objectif d'Electron est de permettre aux développeurs de créer des applications de bureau en utilisant des technologies web telles que HTML, CSS et JavaScript.

Electron permet de créer des applications qui fonctionnent sur Windows, macOS et Linux avec la même base de code. Electron combine les capacités des technologies web et la puissance de Node.js, permettant l'accès au système de fichiers et à d'autres ressources système. Les développeurs peuvent utiliser les frameworks et bibliothèques web existants pour créer des interfaces et des fonctionnalités.

React Native : applications mobiles

React Native a été développé par Facebook et présenté pour la première fois en mars 2015. L'objectif de React Native est de permettre la création d'applications mobiles natives pour iOS et Android en utilisant JavaScript et React.

React Native utilise des composants natifs, ce qui assure une performance comparable aux applications natives. En même temps, les développeurs peuvent écrire du code qui fonctionne à la fois sur iOS et Android, simplifiant considérablement le développement et réduisant le temps de maintenance.

Tout comme avec Electron : sur toute la fenêtre de l'application mobile s'ouvre un WebView, où est chargé un "site", écrit en HTML5, CSS3 et JS. Tout le monde s'attendait à ce que les applications mobiles remplacent les sites web sur les téléphones, mais c'est exactement le contraire qui s'est produit : les sites ont commencé à remplacer les applications natives.

Aujourd'hui, Frontend Fullstack Software Engineer est le métier IT le plus recherché au monde. Donc la décision de devenir développeur Frontend est correcte et clairvoyante!