Angular : de l’avant-vente à la maintenance

Angular est un framework frontend développé et maintenu par Google, permettant le développement de SPA (Single Page Application).

Si AngularJS est largement connu sur le marché et adopté depuis 2009, il a fallu attendre 2016 pour qu’une nouvelle version plus complète et plus performante, Angular, voie le jour. Google affiche désormais son ambition de faire évoluer le framework avec un rythme de développement impliquant la sortie d’une nouvelle version tous les 6 mois, et met tout en œuvre pour faciliter le développement des applications à chaque phase du projet, de l’avant-vente à la maintenance.

 

Dès l’avant-vente

Le choix d’Angular doit être réfléchi. S’il est possible de l’intégrer à un site déjà existant à l’aide d’Angular Element, le framework s’illustre surtout dans le cadre du développement complet d’une application, qu’elle soit web ou mobile.

Au-delà du choix de l’orientation se pose la question des ressources humaines nécessaires. Angular exige de développer avec le langage Typescript de Microsoft, ce qui constitue un avantage lorsqu’on envisage de faire monter un développeur orienté backend sur un projet, car ce langage se rapproche de concepts connus dans les langages objets comme Java ou .Net. Cependant, des connaissances HTML et CSS restent indispensables. Malgré tout, Angular offre un filet de sécurité au développeur grâce à l’isolation de chaque composant, évitant ainsi les impacts que peuvent avoir les règles CSS sur d’autres parties de l’application.

Ce n’est pas le seul avantage : le framework ne nécessite aucune librairie extérieure pour effectuer les développements les plus communs. En effet, Angular embarque toutes les briques essentielles telles que la gestion des appels HTTP. Si la solution facilite les développements, elle met également à disposition de nombreuses librairies comme Angular Material.

La pérennité d’une application est un critère primordial à prendre en compte lors d’une avant-vente. Angular coche la case ! Google maintient un rythme constant des versions et assure un support de longue durée (LTS) d’environ 18 mois pour chaque version majeure. Enfin, la compatibilité d’Angular avec les navigateurs est très haute, comprenant évidemment les derniers navigateurs, mais également de plus anciens comme Internet Explorer 9 ou 10.
 

L’initialisation d’un projet

L’initialisation d’un projet est une source de coûts non négligeable. Grâce à Angular CLI (Command Line Interface), nous pouvons initialiser un projet en quelques lignes de commandes : cette solution, aisée et rapide, limite donc les coûts de démarrage. Les paramètres par défaut embarquent déjà une architecture de base pour une application fonctionnelle et prête à la production. En plus des bonnes pratiques dictées par Angular, un développeur expérimenté ne perdra pas de temps à préparer son architecture et pourra entrer rapidement dans le développement de fonctionnalités à valeur ajoutée pour son client.
 

La phase de développement

Lors de la phase de développement, le point majeur à considérer est la facilité à développer, aussi bien grâce aux outils qu’au framework lui-même.

Au niveau des outils, il est à noter que les IDE Web actuels (Visual Studio Code et Webstorm par exemple) embarquent tout le nécessaire pour développer efficacement une application Angular, allant jusqu’à l’autocomplétion dans les templates de méthodes de composants par exemple. De plus, l’utilisation d’Angular CLI permet de créer des éléments Angular en respectant les bonnes pratiques : en une ligne de commande, un composant est créé avec tous les fichiers qu’il nécessite et importé dans le module correspondant, le rendant prêt à l’emploi immédiatement. Les IDE n’hésitent pas à s’appuyer sur Angular CLI afin de proposer des fonctionnalités d’aide aux développements.

Côté framework, l’architecture se base sur des composants qui, correctement développés, peuvent être pleinement réutilisables sur d’autres modules. De même, toujours dans cet objectif de réutilisabilité, il est possible de développer ses propres librairies de composants afin de les déployer sans difficulté dans différents projets. Nous parlons alors des Angular Librairies.

Angular met l’accent sur un principe bien connu des développeurs qui aiment la qualité : le SRP (Single Responsibility Principle) séparant chaque élément dans un fichier différent (template, composant, feuille de style, service, module, etc.). Cette fonctionnalité est d’autant plus mise en avant qu’elle s’appuie sur un système d’injection de dépendances faciles à utiliser.

Si Angular est un framework très complet couvrant la quasi-totalité des besoins d’un projet frontend, il est également complexe et l’acquisition de sa documentation est indispensable. Google pense à tout… Qu’il s’agisse de la montée en compétences d’un nouveau venu dans l’univers Angular ou du support fourni à un développeur expérimenté, mais confronté à une difficulté, la documentation disponible sur le site officiel couvre l’ensemble des fonctionnalités. Elle est en outre accompagnée de nombreux exemples, d’une API détaillée, et de tutoriels !

Angular met à disposition toutes les fonctionnalités courantes, mais aussi certaines fonctionnalités qui demandent parfois plus de recherche, comme le Server Side Rendering (SSR) permettant aux crawlers tels que Google d’indexer facilement une application Angular, la mise en œuvre des PWA offrant une disponibilité hors ligne d’une application, ou encore la mise en place facilitée d’animations.
 

Qualification et testing

Un projet initialisé avec Angular CLI met à disposition tous les outils nécessaires aux tests end-to-end et aux tests unitaires permettant d’assurer un haut niveau de qualité du code, et donc la stabilité et la sécurité de la plateforme.
 

Performance

Les performances ne sont pas en reste ! En effet, l’application peut être découpée de telle sorte que seul le module consulté soit chargé : on parle de Lazy Loading. De plus, l’équipe de Google a renforcé ce point avec son compilateur Ivy, sorti en version 9, qui améliore encore le tree shaking afin de supprimer toute trace de code ou dépendances inutilisés. Enfin, il est possible de mettre en place du chargement différentiel pour que les navigateurs les plus récents profitent de performances accrues et que les anciens navigateurs puissent faire tourner l’application. Ainsi, plusieurs bundles sont générés lors du build de l’application, l’application distribuant le bundle approprié en fonction du navigateur qui la requête.
 

Intégration & DevOps

L’intégration et le déploiement continus sont au cœur de nos activités et sont facilités encore une fois par Angular CLI, qui simplifie la construction de l’application et son intégration dans un environnement DevOps.
 

Maintenance

Etant donné l’architecture imposée par le framework, prévisible et consistante, il est facile pour un développeur ayant déjà développé une application Angular de se retrouver dans un projet codé par un autre, facilitant le turn-over des équipes. Enfin, les montées de version sont facilitées par l’utilisation conjointe du site https://update.angular.io/ et d’Angular CLI, ce dernier réalisant quasiment tout le travail de montée de version à la place du développeur.
 

En conclusion, le choix d’un environnement frontend est complexe et les choix d’une solution technique sont souvent guidés en ne prenant en compte que la phase de développement. Si Google fait tout pour faciliter le développement des applications, il a aussi pensé à toutes les autres phases d’un projet, de sa création à sa maintenance. Ainsi, Angular s’affiche comme un framework de premier choix, un véritable facilitateur à chaque étape d’un projet.