Angular : les bénéfices | TECHNOCompétences

Angular : les bénéfices

Il était une fois des librairies comme jQuery …

Si vous développez avec une librairie telle que jQuery, vous savez que les limites en sont rapidement atteintes. Ces librairies sont simples d’approches, mais n’offrent pas une expérience de développement très riche.

Des librairies comme jQuery UI tentent de pallier aux problèmes de la librairie de base. Prenons en exemple l’utilisation d’un calendrier qui requiert la mise en place d’un gabarit HTML dans la page:

    <div>
       <label for="datepicker">Date de début:</label>   
       <input type="text" id="datepicker">   
    </div>
    $( "#datepicker" ).datepicker();

Ce gabarit est répété chaque fois que vous désirez utiliser un widget de type calendrier. Le code JavaScript de l’application est orienté sur la structure de la page, ce qui rend les scripts peu réutilisables.

La maintenance d’une application basée sur une librairie comme jQuery peut s’avérer difficile sur le long terme:

  • Une librairie telle que jQuery n’offre pas un cadre logiciel complet ni de façon de faire;
  • Répétition de code HTML et JavaScript;
  • Le code HTML n’est pas facile à tester;
  • Le code JavaScript n’est pas facile à tester puisqu’il manipule le DOM, il faut mettre en place des fixtures HTML.

Les origines d’Angular

Origines Angular

Les origines d’Angular remontant à 2009. La première version AngularJS, basée sur le langage JavaScript, a été mise en ligne sur GitHub au mois octobre 2010.

La version 2.0+, considérablement différente, a été annoncée en 2014 lors de la conférence ng-europe. Initialement, cette version a été mal reçue par la communauté. Je crois que cela est dû au fait que la nécessité d’une nouvelle version a été mal expliquée.

Il faut se remettre dans le contexte, les technologies web en 2009 n’étaient pas ce qu’elles sont aujourd’hui. La spécification HTML5 n’en était qu’à ses débuts.

AngularJS a révolutionné le développement web. Mais pour rester pertinente au cours des prochaines années, une réécriture s’imposait basée sur les technologies introduites dans HTML5: composants web, API d’historique, etc.

Cette réécriture d’Angular offre une expérience de développement amélioré:

  • Elle est basée sur le langage TypeScript (compilé) plutôt que le JavaScript (interprété);
  • Elle est basée sur le concept de composants;
  • Elle est plus performante, car il est possible de précompiler le code et les gabarits HTML;
  • Les erreurs de programmation sont moins fréquentes grâce à la compilation;
  • L’outil Angular CLI vous rend plus productif;
  • Et bien d’autres avantages.

Une architecture orientée vers les composants

L’approche d’Angular est de diviser la complexité pour la conquérir. Angular supporte plusieurs types d’objets qui ont une responsabilité, ce qui facilite l’écriture de tests unitaires et fonctionnels.

Architecture

Composants

Les composants servent à gérer le DOM, à le rendre dynamique. Un composant est un objet, visuel la plupart du temps, qui est réutilisable.

Des exemples de composants: un widget de type calendrier, un combo box intégrant un champ de recherche, etc. Un composant peut être éclaté en plusieurs sous-composants, ce qui favorise la réutilisation.

Les composants utilisent des expressions, délimitées par les caractères {{ }}, pour effectuer le rendu:

    <div>
              {{ uneVariable }}
    </div>

Chaque fois qu’uneVariable est modifiée, le changement est reflété automatiquement dans la vue HTML. C’est ce que l’on appelle une liaison de propriété (communément appelé binding).

Directives

Une directive sert à attacher des fonctionnalités, transformer l’apparence ou le comportement d’un élément HTML ou d’un composant.
Pour maquiller dynamiquement un <div> vous utiliserez, par exemple, les directives NgClass et/ou NgStyle.

Routage

Les services constituent la couche de données et modèle de l’application. Bref, tout ce qui n’est pas visuel. Cela inclut les classes métiers, les classent qui interagissent avec un API, etc.

Les services sont utilisés par les composants. Angular utilise le principe d’injection de dépendance pour lier les services aux composants.

Si vous avez déjà utilisé des cadres d’applications comme Spring (Java), Ninject (.NET) ou PHP-DI vous savez de quoi il en retourne. Sinon ne vous inquiétez pas, les concepts seront couverts dans le cours.

Routage et Single Page Application

Ce système interprète l’URL du document et effectue un mappage avec des routes virtuelles qui ont été définies. 

Une application nécessite au moins une route pour fonctionner. Mais elles en possèdent généralement des dizaines, voir plus.

Il est même possible de définir des hiérarchies de routes.

En conclusion

Un cadre logiciel comme Angular facilite le développement d’application complexe, notamment:

  • En favorisant la séparation des responsabilités
  • En synchronisant votre modèle de données avec la vue automatiquement (basé sur les des liaisons / binding)
  • En optimisant le rendu en maximisant la précompilation
  • En offrant un outil en ligne de commande qui réduit l’écriture de code de type boilerplate.

Article composé par Patrick Lafleur pour la formation CSS3-Angular-HTML5 offerte en mars à Montréal et en mai à Québec.

Voir le plan de cours

Testez vos connaissances