Introduction

État des lieux du développement web

Depuis sa création, dans les années 1990, jusqu’à nos jours, le Web a énormément évolué.

Initialement conçu pour partager des documents statiques sur Internet, on peut aujourd’hui utiliser de vraies applications directement depuis notre navigateur. Utilisation sans connexion, notifications push, interactions avec le device (accès à l’orientation, accès à la caméra), etc., la majorité des fonctionnalités disponibles historiquement sur les applications clients lourds le sont maintenant en Web.

Pour cela, les moteurs JavaScript des navigateurs et les API HTML ont dû évoluer. Les navigateurs proposent maintenant des moteurs extrêmement optimisés permettant d’exécuter du code JavaScript de manière rapide même sur des devices bas de gamme. Les API HTML sont devenues plus complètes, notamment avec l’arrivée de HTML 5 qui a apporté énormément (stockage dans le navigateur, animations CSS 3, etc.). Ceci permet de proposer beaucoup plus de fonctionnalités.

Les outils ont également changé. JavaScript étant devenu un langage prédominant, alors qu’avant il n’était utilisé qu’avec parcimonie, de nombreux frameworks et IDE ont vu le jour afin de proposer une meilleure expérience de développement. Node.js, créé en 2009, permet d’exécuter du code JavaScript en dehors d’un navigateur et est vite devenu un outil indispensable dans le développement front. Des frameworks comme React, Angular, Vue.js et bien d’autres ont été créés afin de faciliter la création d’applications web.

Angular

Angular est un framework permettant de créer des applications clientes web. Plus qu’un framework, Angular se présente même comme une plateforme de développement permettant de créer des applications web et mobiles.

Aujourd’hui, la version d’Angular est la 12. Ce livre a été initialement écrit pour Angular 4, puis une seconde édition pour Angular 8, quelques semaines après sa sortie. Les propos de ce livre se basent sur la version 12, et quelques changements pourraient survenir encore pour les versions suivantes.

Les efforts faits par l’équipe d’Angular pour les versions allant de la 8 à la 12 sont principalement axés sur Ivy, le nouveau moteur de rendu de l’application, améliorant les performances. L’objectif est de rester à jour avec les technologies web du moment tout en améliorant la qualité de vie du développeur.

Ce framework s’appuie sur plusieurs principes présentés dans les sections suivantes.

1. Organisation par composants

L’organisation d’une application Angular se fait par composants. Un composant correspond à un élément réutilisable, indépendant et responsable d’une seule action métier.

De cette manière, une application sera faite de l’assemblage d’un ensemble de composants. Cela permet une meilleure organisation, une meilleure testabilité et donc une meilleure maintenabilité.

2. TypeScript

Bien qu’il soit possible de développer son application en pur JavaScript, Angular est écrit en TypeScript et il est conseillé de faire son développement d’applications également en TypeScript.

Ce langage, développé par Microsoft, open source et se transcompilant en JavaScript, apporte du typage et une phase...

AngularJS vs Angular

AngularJS est un framework web créé en 2009.

À l’époque, le développement web était totalement différent de ce qu’on connaît de nos jours. Les API HTML 5 étaient en cours de spécifications (terminées en 2014), Node.js venait à peine de sortir une première release et n’était pas aussi populaire et implanté qu’aujourd’hui, etc. Niveau architecture, les sites web étaient très majoritairement rendus uniquement côté serveur. Côté client, pour dynamiser les pages, des librairies comme jQuery étaient utilisées.

AngularJS a révolutionné le développement de site web. Ce framework a apporté toutes les briques techniques nécessaires au développement d’applications s’exécutant totalement côté client : Templating, binding, navigation sans rafraîchissement du navigateur, etc. Mais ce framework n’est plus optimisé pour le Web d’aujourd’hui et ne tire pas parti des différentes possibilités apportées ces dernières années.

S’est alors posée la question des nouvelles versions d’AngularJS. L’équipe de Google a décidé de repartir d’une feuille blanche afin de développer un nouveau framework adapté aux nouvelles spécificités du Web, sans avoir à payer le prix de la maintenance et de la rétrocompatibilité.

Migrer une application AngularJS vers Angular

Initialement, l’équipe de Google n’avait pas prévu de fournir un chemin de migration d’une application AngularJS vers une application Angular.

Face aux réactions négatives de la communauté utilisant AngularJS, cette décision a...