AngularJS : Le framework roi du JavaScript

À la découverte d'Angular JS

Dans le monde du développement web, de nombreuses solutions permettent la bonne conception d'un projet. Angular JS est un des moyens les plus connus pour développer des applications web et mobiles. Commençons donc cet article en vous présentant Angular JS et sa principale fonction.

Qu'est-ce que Angular JS?

Angular Js est un framework Javascript (bibliothèque de fonctions pré-écrites en JavaScript) libre et open source formé par le géant Google en 2009. Ses deux fondateurs avaient au départ un projet qui leur posait problème, contenu du manque de structure des codes qu'ils avaient élaborés et qui ne pouvaient être exploitables. En dehors de ce projet, Misko Hevesy un des fondateurs, avait commencé à travailler sur un framework Javascript. Cela lui a permis d'avancer sur son projet commun et de rendre plus malléable les lignes de codes. Ils sont donc passé de 17 000 lignes à 1 500 lignes. Cette solution plutôt convaincante a donné à son créateur une raison de finaliser ce fameux framework et de le présenter sous le nom d' Angular JS.

En quoi consiste Angular JS?

AngularJS est un framework, c'est-à-dire qu'il va structurer le code et y imposer une architecture. C’est un framework de type MVC (Modèle-vue-contrôleur). En effet, il utilise de nombreux langages de programmation pour apporter une certaine architecture à l'application. Une application conforme au motif MVC comporte trois types de modules: les modèles, les vues et les contrôleurs.

Un modèle qui contient les données. Il représente le milieu dans lequel adhère l'application en question.
Une vue qui contient la présentation de l'interface graphique. La vue se sert du modèle, et peut se présenter sous différentes formes comme un diagramme ou encore un formulaire. Elle contient différentes balises HTML.
Un contrôleur qui va traiter les actions effectuées par l'utilisateur, mais également modifier les données du modèle et de la vue.
Malgré l'indépendance de chacun des éléments, le modèle peut cependant envoyer des messages à la vue et au contrôleur.
Les concurrents :

Angular JS n'est pas seul dans son domaine. En effet, il existe d'autres alternatives comme Backbone.js et Ember.js qui peuvent être utilisés au même titre qu'Angular JS.
Backbone.js possède moins de fonctionnalités, il est donc beaucoup moins complet et nécessite davantage de code de liaison. Son point positif est qu'il donne plus de liberté au niveau de la structure et le choix des composants.
Ember.js est très similaire à AngularJS dans ses fonctionnalités. Mais sa puissance pour les tests n'équivaut pas au framework de Google.
Angular JS ressort gagnant à tout point de vu. En effet, sa communauté active lui permet d'être fréquemment mis à jour et fait donc de lui le framework le plus populaire et le plus utilisé par les concepteurs web.

Plus en profondeur, AngularJS concrétement :

Angular Js est un framework Javascript (bibliothèque de fonctions pré-écrites en JavaScript) libre et open source formé par le géant Google en 2009. Ses deux fondateurs avaient au départ un projet qui leur posait problème, contenu du manque de structure des codes qu'ils avaient élaborés et qui ne pouvaient être exploitables. En dehors de ce projet, Misko Hevesy un des fondateurs, avait commencé à travailler sur un framework Javascript. Cela lui a permis d'avancer sur son projet commun et de rendre plus malléable les lignes de codes. Ils sont donc passé de 17 000 lignes à 1 500 lignes. Cette solution plutôt convaincante a donné à son créateur une raison de finaliser ce fameux framework et de le présenter sous le nom d' Angular JS.

En quoi consiste Angular JS? Que vaut-il devant d'autres frameworks/bibliothéques ?

AngularJS est un framework, c'est-à-dire qu'il va structurer le code et y imposer une architecture. C’est un framework de type MVC (Modèle-vue-contrôleur). En effet, il utilise de nombreux langages de programmation pour apporter une certaine architecture à l'application. Une application conforme au motif MVC comporte trois types de modules: les modèles, les vues et les contrôleurs.

• Un modèle qui contient les données. Il représente le milieu dans lequel adhère l'application en question.
• Une vue qui contient la présentation de l'interface graphique. La vue se sert du modèle, et peut se présenter sous différentes formes comme un diagramme ou encore un formulaire. Elle contient différentes balises HTML.
• Un contrôleur qui va traiter les actions effectuées par l'utilisateur, mais également modifier les données du modèle et de la vue.
  Malgré l'indépendance de chacun des éléments, le modèle peut cependant envoyer des messages à la vue et au contrôleur.

Les concurrents

Angular JS n'est pas seul dans son domaine. En effet, il existe d'autres alternatives comme Backbone.js et Ember.js qui peuvent être utilisés au même titre qu'Angular JS.

Backbone.js possède moins de fonctionnalités, il est donc beaucoup moins complet et nécessite davantage de code de liaison. Son point positif est qu'il donne plus de liberté au niveau de la structure et le choix des composants.

Ember.js est très similaire à AngularJS dans ses fonctionnalités. Mais sa puissance pour les tests n'équivaut pas au framework de Google.

Angular JS ressort gagnant à tout point de vu. En effet, sa communauté active lui permet d'être fréquemment mis à jour et fait donc de lui le framework le plus populaire et le plus utilisé par les concepteurs web.

Une infrastructure Modèle-Vue-VueModèle pour gagner en productivité
En trois ans, la popularité d'AngularJS a explosé (cf. le graphique Google Trend ci-dessous). Mais qu'apporte AngularJS ? "C'est une infrastructure MVVM ou Modèle-Vue-VueModèle conçue pour construire des Web Apps, et moins des sites web", explique Damien Benoit, lead développeur chez CCM Benchmark (éditeur du JDN). Google parle même d'infrastructure MVW (pour Model-View-Whatever).
Le principe du MVVM est simple : les données que le client saisies engendrent une mise à jour du contrôleur qui met à jour par ricochet la vue. Et pas besoin de template temporaire de pré génération. AngularJS utilise directement la vue HTML d'origine pour répercuter ces mises à jour. Avec ce dispositif, "l'objectif est d'offrir une solution pour développer plus vite", résume Damien Benoit.

Ce qui fait sa force : un projet porté par Google

Reste que Knockout.js et Ember.js reposent sur le même principe qu'AngularJS. Alors qu'est-ce qui fait qu'Angular recueille autant d'engouement ? "Le fait que Google porte ce projet explique cette popularité. De fait, AngularJS bénéficie de la force marketing de Google, et de ses compétences", analyse Damien Benoit. Un investissement qui permettrait au framework JavaScript de faire la différence sur plusieurs points.

Un data-binding bidirectionnel mieux optimisé
D'abord, selon Jean Guillaume Dujardin et Pierre Vaidie de The Coding Machine, AngularJS offrirait un approche MVVM mieux optimisée. "Ce dispositif de data-binding bidirectionnel permet à un input de la page de s'afficher dans un autre endroit de la page, et donc facilite la vie des développeurs. En simplifiant le codage, il réduit aussi le risque de bugs", rappellent les deux experts (lire leur document de synthèse sur le sujet). "Mais cette manipulation du DOM est aussi proposée par les autres frameworks JavaScript", pondère Damien Benoit.

Autre point fort : les directives

Autre point fort, souvent évoqué, et rappelé par Jean Guillaume Dujardin et Pierre Vaidie : le Declarative binding. "Les directives permettent de développer des attributs et des éléments HTML spécifiques de manière à manipuler proprement le DOM", constate-t-on chez The Coding Machine. Facilitant l'ajout ou la modification de composants, ces directives permettent de définir des attributs, une liste particulière avec une image par exemple, ou de piloter des comportements, un événement par exemple. A la différence de l'approche composant d'Angular, "d'autres frameworks, comme Knockout.js, passent par un attribut de node, ce qui peut être un peu plus verbeux. Quant à Ember.js, il est orienté templating, ce qui peut être encore un peu plus complexe", reconnait Damien Benoit.
"Avec Angular, les directives peuvent se partager", résume-t-on chez The Coding Machine. Et Damien Benoit d'ajouter : "AngularJS s'intègre aussi mieux avec Polymer, en reprenant son approche orientée composants."

Qu'apporte AngularJS 2 ?

Une collaboration étroite avec Microsoft pour intégrer TypeScript
AngularJS 2.0 est désormais disponible. Cette nouvelle version est une réécriture complète de la première mouture du framework. La migration depuis AngularJS 1.x n'est donc pas aisée. Avec pour objectif de faciliter les développements multiplateformes, AngularJS 2.0 a aussi pour but d'améliorer les performances du framework. Dans cette optique, elle introduit la prise en charge d'Angular Universal (qui gère un pré-rendu de l'application côté serveur) et des Web Workers (qui permettent d'exécuter un code en tâche de fonds).

Autre évolution, AngularJS 2.0 est livrée avec une architecture plus modulaire. Mais aussi avec un nouveau langage de développement basé sur JavaScript : TypeScript. Conçu à l'origine par Microsoft, il ajoute un typage statique riche, ainsi qu'un modèle de classe orienté objets au code. Dans ses dernières versions, TypeScript reprend les points forts d'AtScript, le langage historique sur lequel AngularJS était historiquement basé (notamment ses capacités d'introspection, et les annotations).

Pourquoi Angular ?

Contrairement à l'un de ses principaux concurrents, React, Angular ne sert pas seulement à créer des composants. Il est au contraire un framework complet proposant au développeur tous les outils nécessaires au développement d'applications web, mobile et desktop. Incluant des outils de routing ou de gestion du http, Angular embarque tout ce dont une entreprise peut avoir besoin pour développer une application. Il permet en plus de les faire évoluer au fur et à mesure du développement des besoins d'une entreprise.

Autre avantage majeur, Angular se base sur des interfaces de programmation (API, pour application programming interface) natives du web, mais utilise également HTML et CSS. Tous ces éléments sont familiers des développeurs web et facilitent la prise en main et la compréhension du framework. En contrepartie, coder avec Angular n'est pas coder en JavaScript pure mais en TypeScript, ce qui le rend un peu plus complexe à apprendre.

Enfin, en plus de la communauté open source, l'équipe principale derrière Angular appartient au géant Google. Il dispose par conséquent de son support. Cela assure une technologie pérenne, régulièrement mise-à-jour et sécurisée, qui n'est pas prête d'être abandonnée. Angular présente donc tous les avantages pour prouver qu'il vaut l'investissement pour le développeur souhaitant l'apprendre comme pour l'entreprise ayant besoin d'une nouvelle application, qu'elle soit web ou mobile.

Conclusion : Un choix idéal, voir obligatoire

• Un framework complet avec une architecture élégante
• Une documentation très étoffée qui permet aux développeurs de trouver toutes les informations nécessaires rapidement
• Une grande communauté, qui permet toujours de pouvoir poser des questions en cas de blocage
• Des améliorations constantes et régulières (compilation inférieure à 3 secondes pour Angular 5)
• L’association bidirectionnelle de données, qui répercute les effets de chaque modification mineure des données, supprime le besoin de synchronisation supplémentaire des données de la vue et du modèle, et minimise les risques d’erreurs
• Modèle MVVM (Model – View- View Model), qui permet aux développeurs de travailler séparément sur la même section d’application en utilisant le même ensemble de données.
• Un moteur de DI (injection de dépendances)
• Les avantages du TypeScript : vérification statique et opérationnelle de la saisie, fonctions de saisie très performantes

Le pedigree de ce framework parle pour lui même