La norme HTML 5 a été finalisée en octobre 2014. Elle a mis beaucoup de temps à accoucher (pour mémoire, HTML 4 date de 1997), mais HTML 5 n’est pas une simple évolution du HTML mais plus une Révolution ! Il a permis d’étendre le HTML et ainsi de créer ses propres balises HTML. Une Révolution ? Mais oui, car cela ouvre la porte à un rêve pour les développeurs front : pouvoir créer des composants graphiques réutilisables et totalement indépendants. Et ces composants ont un nom : Les Web components.

 

Pour parvenir à ce miracle, plusieurs technologies du W3C sont utilisées :

• Les customs Elements : API permettant de déclarer de nouveaux éléments HTML
• Les imports HTML : permettent d’importer des fichiers HTML dans un autre
• Les templates : permettent de charger une portion de HTML sans l’afficher tout de suite
• Le shadow DOM : permet de masquer la complexité d’un composant et d’isoler plus facilement les composants entre eux via un système d’encapsulation.

 

C’est ce savant mélange qui permet la création de composants Web réutilisables et totalement étanches entre eux. 

 

 

Parallèlement aux travaux sur le HTML, le JavaScript a, lui aussi, subit de multiples transformations au fil du temps. La maturité du langage l’a fait passer de l’EcmaScript 3 à l’époque IE6 à l’ES6 en 2016. Avec les années, de nombreux frameworks JavaScript ont vu le jour.

 

 

Quelques années de démarques :

• 2006 fut une année charnière avec l’arrivée du Framework JQuery qui a permis de manipuler brillamment le DOM HTML.
• 2009 a été l’année d’introduction de framework AngularJS qui a introduit la démocratisation du data binding 2-way et de la SPA.
• 2013 signe l’entrée de Facebook dans l’open source JavaScript avec son Framework React.JS. 
• 2014 pose les fondations d’une nouvelle technologie  avec Polymer (année de finalisation du HTML 5).
• Et 2016 … c’est au tour d’Angular d’arriver.

Dans la suite des tutoriels, nous ne parlons plus d’Angular 2, mais d’Angular. La version d’Angular devrait changer deux fois par an et suivre le « semantic versioning ». Il ne faut donc par confondre AngularJS (le premier) et Angular (anciennement Angular 2).

 

 

Mais peut-on vraiment utiliser les Web Components aujourd’hui ? Et bien, pas forcément. A ce jour, tout n’est pas encore tout rose malheureusement. Peu de navigateurs supportent les Web Components, principalement à cause du shadow DOM qui n’est réellement supporté que par les navigateurs Chrome et Opera. Développer une application dans ces conditions ne serait pas réaliste aujourd’hui. 

Côté JavaScript, ça bouge plus rapidement et il y a quelques projets pionniers qui nous ont développé des polyfills afin de pallier aux lacunes des navigateurs, dont le projet initié par Google :

 

 

 

Ces polyfills permettent de s’abstraire des limitations liées aux navigateurs afin de proposer les fonctionnalités manquantes pour réaliser des Web components. Il s’agit donc du premier Framework JavaScript permettant de créer et manipuler les composants à la manière « Web Component ». Evidemment, si je vous parle de Web Component depuis le début, c’est bien pour introduire le framework Angular qui est résolument orienté Component.

 

Angular vous intéresse ? Lisez l’e-book Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes !