Angular et le développement Web

Angular est l’un des framework de développement les plus populaire au monde. Son utilisation est massive dans des pans entiers du secteur informatique ! 

Nous effectuerons tout d’abord un rapide historique de présentation du langage. Nous nous immiscerons dans ses forces et points faibles, et comment ceux-ci influent sur ses applications pratiques ! 

Histoire d’Angular

Comment Angular est passé de projets interne à Google à (l’un des) framework le plus populaire pour le web ? 

Penchons-nous sur sa jeune histoire ! 

Tout démarre en 2010 quand Misko Hevery, alors jeune ingénieur chez Google, travaille sur un projet interne visant à faciliter les développements web réalisés au sein de l’entreprise ! Ce projet s’appelle AngularJS. 

Pourquoi Angular ? Le nom est trouvé par Adam Abrons, qui travaille lui aussi sur le projet, en référence au fait que les balises du langage HTML sont écrites entre des chevrons angulaires (angular brackets en VO ! < >)

Après avoir été utilisé pour son but premier : faciliter quelques développements web interne à Google, AngularJS est publié comme framework Open Source sur le Github de Misko ! 

Les années passent et l’évolution des standards dans le développement informatique rend AngularJS de plus en plus difficile à adapter aux projets modernes… La décision est donc de passer à Angular 2.0 ! 

Angular 2.0 : tabula rasa et développement long 

L’une des meilleures évolution de l’honorable AngularJS est l’intégration du versionnage sémantique. Sans lui, impossible donc de faire évoluer la solution ! Car tous les types de problèmes rencontrés doivent être traités dans la version 1.xxx. Pour résoudre ce gros souci, les équipes décident de reposer toutes les fondations et d’entamer un grand tournant avec Angular 2.0 ! 

 En partant de zéro (“From scratch”, comme on dit dans le jargon), Angular 2.0 ambitionne d’adopter des normes fortes. Par exemple ? La sémantique de versionnage ! 

La Sémantique de versionnage, c’est quoi ?

Il s’agit de la méthode de numérotation des logiciels par les entreprises qui les mettent sur le marché. Elles sont utiles aussi bien en interne pour les chefs de projets, qui ont une feuille de route à tenir, que pour les utilisateurs qui peuvent s’assurer qu’ils disposent bien des dernières versions disponibles de leurs outils. 

En général, le versionnage sémantique fonctionne comme suit  : 3 chiffres séparés par des points. Le premier chiffre représente les changements de version majeurs, le second des changements dû à l’ajout de nouvelles fonctionnalités, et enfin le troisième concerne les correctifs de bugs publiés a posteriori. 

L’excellent blog Code Garage explique ceci de manière très claire dans un billet de blog rédigé par Nicolas Brondin-Bernard. On ne fera pas mieux alors nous vous partageons ce résumé : 

Un identifiant minimal de version qui ressemble à 0.0.1 se lira tout simplement MAJOR.MINOR.PATCH

Major : Le chiffre « MAJOR » est le plus critique, c’est le seul qui indique une évolution de l’API tellement importante que la rétrocompatibilité n’est plus assurée, indiquant donc que cette version ne sera pas forcément compatible avec les versions précédentes.

Minor : Ce chiffre permet d’indiquer que des fonctionnalités ont été ajoutées (ou que des fonctionnalités ont été dépréciées) mais que l’API reste compatible avec les anciennes versions.

Patch : Ce dernier indique que des bugs ont été corrigés mais que la rétro-compatibilité est assurée.

L’autre but de passage à Angular 2.0 était de tirer profit des composants Web, mais pas que ! Il y avait également des nouvelles normes ES2015 qui ajoutent une quantité importante de fonctionnalités à JavaScript.

Cette évolution permet aux langages basés sur ces normes (comme JavaScript) soit de plus en plus optimisés et de plus en plus puissants. Chaque version ajoute des fonctionnalités, simplifie la syntaxe…. 

C’est l’organisme ECMA International qui édite ces normes. (European association for standardizing information and communication systems, anciennement European Computer Manufacturers Association). Leur but est de promouvoir des standards communs, principalement en matière de langage de script et de programmation. 

Découvrez en plus sur la nature de leur activité sur leur site internet. 

Une refonte couronnée de succès ?

Cette refonte totale du Framework n’a pas reçu un accueil critique favorable. Pourquoi ? En lançant Angular 2.0, la rétrocompatibilité n’était pas assurée ! 

Les développements effectués sur Angular.JS n’étaient pas portables sur Angular 2.0 ce qui, théoriquement, forcerait la totalité des applications à se refonder “From scratch” ! 

C’est pourquoi il existe encore des applications en 2022 fonctionnant encore sur Angular.JS ! Il est plus prudent de ne pas développer aujourd’hui sur Angular.JS. Ses technologies datent. Il n’est également plus maintenus depuis cette année. Après 12 ans de bons et loyaux services ! 

Il va donc devenir très difficile de l’utiliser, la faute à des soucis techniques et de sécurité qui vont se multiplier et peuvent s’avérer inévitables…  

Après 2 ans de gestation, Angular 2.0 sort en version stable en 2016. Certains voient d’ailleurs dans ce laps de temps, le facteur principal de l’émergence lors de la même période de React ! Autre langage basé sur du JS. (Découvrez en quoi React est lui aussi un langage très populaire grâce à notre article !) 

Depuis le 23 janvier, Angular en est à sa version 15.1. Grâce à une mise à jour majeure tous les 6 mois et 2 à 3 mises à jour mineures par majeur ! Ce qui signifie que le projet est très actif, populaire et soutenu. 

TypeScript, l’autre point fort ! 

Nous vous en parlions également dans notre papier sur React, mais TypeScript est également très ami avec Angular ! 

Si Queen Britney le dit, c’est que c’est vrai !

Qu’est-ce que TypeScript ? 

TypeScript est une sur-ensemble de JavaScript qui facilite la production et la sécurisation du code. TypeScript est « transpilé » en JS pour pouvoir être interprété par n’importe quel navigateur ou moteur JavaScript. 

C’est un langage de programmation libre et open source !

Angular est un Framework Typescript (qui se « transpile » en Javascript) alors que la plupart de ses concurrents majeurs sont des librairies Javascript.

Framework et Library, quelles différences ?

Il y a une différence importante à noter entre un « Framework » et une « Library », cependant ces termes sont souvent mélangés dans l’informatique. Un développeur va utiliser le code déjà existant d’une bibliothèque (library en anglais), alors que le rôle du framework (cadre de travail en français) sera lui d’exécuter le code du développeur dans son cadre technique. Le framework est vraiment la maquette en fil de fer de votre développement, qui cadre et donne une structure, alors que la librairie vous offrira un ensemble de fonctionnalités codées, parfois sans rapport les unes avec les autres, qu’il conviendra d’intégrer de manière adaptée dans le cadre applicatif du framework !

Pour l’anecdote, TypeScript est développé par Microsoft, ce qui rend Angular assez singulier car il fonctionne grâce aux efforts de Google et Microsoft, souvent concurrents.

Pourquoi c’est essentiel ? 

Javascript ne dispose pas nativement d’un typage fort. C’est donc théoriquement au développeur de se rappeler ce qu’il a mis dans son code ! Si cela peut-être acceptable sur des petits scripts simples, c’est inopérationnel dès lors qu’on complexifie l’approche technique. S’il fallait donc impérativement TypeScript pour avoir un typage précis des variables auparavant, ce n’est plus le cas, car d’autres sur-couches existent aujourd’hui.  

Avec des variables déjà typées, l’éditeur de code est capable de détecter des erreurs beaucoup plus facilement ! Cela aide également les IDE dans leur autocomplétion. 

Typescript dans son approche POO (Programmation Orientée Objet) s’accommode donc parfaitement à la programmation fonctionnelle d’Angular. De plus, TypeScript se rapproche fortement des langages comme Java dans le sens ou il est possible faire de l’héritage, des classes abstraites, de « vrais » objets. 

Si certains de nos experts techniques remarquent les fortes similarités entre TypeScript et d’autres langages fortement typés tel que le JAVA, il reste des différences d’approches importantes. Notamment sur la manière de rentrer des variables ou des types. De plus, Java est un langage compilé alors que Typescript est un langage transpilé !

Par exemple, en typescript un nombre décimal ou entier sera typé en number alors qu’en java on peut avoir des Double ou des BigDecimal en fonction du besoin. 

Angular est plein de surprises !

Fun Fact !En mars 2017 Angular a sorti sa version 4.0… sans avoir jamais sorti la 3ème ! Pourquoi donc ? Google a fait ça pour aligner toutes les versions des paquets Angular : dans la V2 Angular, le routeur était déjà en V3, donc en passant à la V4 direct, ils ont pu tout mettre au même niveau ! 

La roadmap d’Angular est très claire : Une mise à jour majeure tous les 6 mois, 1 à 3 mineures par majeure, et 1 patch par semaine environ !

Les équipes tiennent remarquablement leur calendrier de publication, malgré des objectifs très ambitieux ! 

Angular, poid (trop) lourd ? 

Conçu d’abord pour les applications complexes, Angular peut avoir l’inconvénient d’être lourd ! 

Très structuré, il permet de bâtir une architecture de site solide et pérenne, mais au prix d’une certaine lourdeur globale de votre édifice. Globalement, la pertinence de son usage sur de petites applications se pose réellement. 

Cette lourdeur s’associe à une prise en main et une montée en compétence qui peuvent être un peu rigide et lente comparée aux autres framework JavaScript. 

Si chaque version d’Angular se veut plus légère, le Build est globalement lourd ! Et même si les packages s’affinent avec le temps, ils restent plus volumineux que sur d’autres frameworks. 

Tout n’est pas noir, et Angular a quelques solides arguments à faire valoir ! 

Angular, solide et structuré…

Il n’est pas l’un des frameworks les plus populaires pour rien !

Il sera plus facile à prendre en main pour les développeurs ayant déjà une expérience en C++ ou en JAVA. 

Angular est pertinent pour les applications complexes grâce à sa structure solide. Si on peut toujours “tordre” angular pour convenir à ses besoins, c’est moins le cas qu’avec d’autres Framework. Mais c’est ici un vrai choix, car cela évite justement de sortir du cadre, au prix d’une restriction des possibilités. 

Le modèle d’Angular repose sur une programmation basée sur les composants, il est facile de réutiliser son code dans diverses parties de l’application.

… mais il reste malléable !

Malgré sa structure rigide, Angular est flexible dans la façon d’organiser cette structure. L’avantage ? Cela facilite la maintenance et la scalabilité future ! 

Angular permet d’empiler des briques applications jusqu’à faire une app, cela le rend plus modulaire, scalable, testable et réutilisable ! Par exemple, un bloc de code “sélecteur de date” réutilisable sur d’autres applications par la suite. 

Angular est idéal pour les apps complexes, car il permet de tout faire. Il possède un outil de routing pour naviguer et en plus il gère le HTTP. Pas besoin donc d’ajouter une libraire ou un module pour faire des requêtes. 

Angular se base sur le principe des Single Page Application (SPA). Ce qui permet de charger directement un index avec un bundle associé, ce qui lui permet de charger seulement une partie de la page. Le fichier HTML ne charge qu’une seule fois, et Angular choisira d’afficher ou non telo composant selon les pages consultées. Cela améliore grandement la performance et donc l’expérience utilisateur ! 

Attention cependant ! Le bundle initial peut-être contre-performant s’il met trop de temps à s’afficher. D’autant plus si la connexion de l’utilisateur n’est pas puissante. 

Angular dispose d’une Architecture MVVM pour une meilleure flexibilité !

L’architecture MVVM (Model-View-ViewModel) est une façon de concevoir des logiciels qui vise à séparer les informations d’une application (le modèle) de la manière dont elles sont présentées (la vue).
Pour réaliser cette séparation, on utilise un élément appelé ViewModel, qui fait le lien entre le modèle et la vue. Le ViewModel fournit une interface que la vue peut utiliser pour accéder aux informations du modèle de manière appropriée.

En utilisant cette architecture, les vues deviennent moins dépendantes du modèle, ce qui rend la maintenance et l’évolution de l’application plus facile. En d’autres termes, si vous devez apporter des modifications au modèle ou à la façon dont les données sont présentées, vous pouvez le faire sans avoir à modifier directement la vue.
Cela permet de mieux organiser le code et de le rendre plus modulaire, ce qui facilite la collaboration entre les développeurs et rend l’application plus flexible et évolutive.

Angular 16, le petit dernier !

Angular 16 est disponible depuis mai 2023 ! Il apporte des changements qui pourraient faire rougir son principal concurrent, Reactjs !Avec une nette amélioration de ses performances sur son modèle de réactivité ainsi que l’arrivé des signaux, Angular comble un de ses principaux point faible ainsi qu’un manque fonctionnel par rapport à son principal concurrent. Si vous avez encore une dizaine de minutes devant vous n’hésitez pas à aller faire un tour sur le blog officiel !

Des questions ou un avis sur Angular ? Contactez-nous ! 

Notre article soulève chez vous des questions ou vous souhaitez nous donner votre avis ? CTA : Contactez-nous ! N’hésitez pas non plus à découvrir le reste de nos expertises sur notre Tech’Place ou sur notre site !