Technologies

AngularJS : le "petit" framework JavaScript (encore un?!) qui monte , qui monte!

Publié le : Auteur: Abdou BOYE 2 commentaires
technologies

Introduction

AngularJS , qu’est ce que c’est ?

AngularJS est un framework JavaScript, créé en octobre 2010 par des développeurs de chez Google et sous la licence MIT.
Il propose une architecture basée sur le pattern MVC (Model View Controller) pour des SPA (Single Page Application), autrement dit des applications web où la navigation se fait sur une même et unique page (exemple : Gmail, Dropbox, iCloud, etc.).
Il a été créé avec la philosophie suivante : le HTML est très bien pensé pour les documents statiques mais il n’est pas du tout adapté pour un usage dynamique tel qu’on le voit dans les applications web. AngularJS enrichit le HTML avec une grammaire similaire, spécialement conçue pour des RIA (Rich Internet Application). Le résultat est un code parfaitement expressif (on comprend chaque action effectuée à sa simple lecture), lisible (ça reste du HTML) et facile à écrire.
La principale caractéristique de ce framework est qu’un grand nombre d’actions effectuées sur le serveur tel que le rendu du moteur de template, la récupération des données, leur (pré) validation et la navigation dans une application, sont désormais déportés côté client. Le serveur se limite à traiter, vérifier, valider et envoyer les données aux clients dans un format générique (JSON, XML, etc.) Cela permet d’avoir une charge sur les serveurs nettement moins importante et une fluidité de navigation chez le client.

Angular est permet donc d’animer des pages Web (comprenez : ce n’est pas une bibliothèque de somptueux composants -comme Sencha-, les composants devront être rajoutés) et ce framework repose sur cinq principes architecturaux hyper connus :

  1. le MVC (Modèle Model-View-Controller)
  2. l’injection de dépendance (qui le rend très modulable)
  3. le « templating » (faculté de définir sa vue de façon déclarative, c’est-à-dire une page HTML)
  4. le « binding »  (faculté de lier un champ d’un objet Javascript avec un item graphique du template pour que toute mise à jour soit simultanée)
  5. l’usage de composants et la possibilité d’en créer de nouveaux

Comment je suis tombé dessus (ou dedans selon …;) ?

Changer d’employeur, quelle expérience enrichissante ! Plus sérieusement, je ne suis pas un « vieux routier » du monde de l’entreprise avec mes 6 années d’expériences professionnelles passées,  et Sodifrance n’est que la deuxième ssii où je passe, mais ce changement m’a permis de découvrir les joies… de trouver le temps de consolider mes acquis techniques, et surtout me mettre (enfin!) à la veille techno.

Bon je l’avoue : le sujet choisi  ici, AngularJS m’a plutôt été soufflé mais découvrir et expérimenter cette techno m’a permis de retrouver l’émerveillement (presque enfantin!) qu’on peut ressentir en prenant en main une nouvelle techno innovante et vraiment utile. Qui de plus est en train de se faire une place dans la jungle des frameworks JavaScripts à la mode.

Pourquoi choisir AngularJS  et pas un autre pour mon projet ?

Particularité :

AngularJS se différencie de ses concurrents par une gestion facultative du DOM application. Contrairement à Backbone.js et autres frameworks, AngularJS permet de développer une RIA sans devoir modifier les éléments HTML afin de rendre une application interactive. LA prise en main est certe fastidieuse mais les possiblités une fois à l’aise sont énormes.

Courbe d’apprentissage :

Ce dicton de Doyle Brunson (il faut dire que j’avais vraiment envie de le caser ici) « Le poker Texas Hold’em s’apprend en 5 minutes mais il faut toute une vie pour le maîtriser » s’applique tout aussi bien à AngularJS (bon, toute une vie j’exagère peut être pour AngularJS). En effet sa complexité à de quoi agacer comme le montre ce graphe titré « My feelings about AngularJS Over Time »  :

feelings_about_angularjs_over_time

(source : http://www.bennadel.com )

AngularJS arrive à se démarquer de ses concurrents malgré la forte concurrence qu’il existe entre les différents frameworks JavaScript. Tout d’abord, le projet est développé par des développeurs de chez Google et il est sponsorisé par leur entreprise, ce qui n’est pas négligeable pour la pérennité du projet. Ses fonctionnalités et leur mise en place font énormément gagner du temps aux développeurs. AngularJS propose aussi les modules qui permettent de découper son SPA en parties distinctes comme les namespaces et aussi les directives qui permettent de redéfinir et ainsi étendre leurs possibilités (ex : <calendar> remplacerait un widget complet en HTML, ce qui simplifie grandement la lisibilité du code).

Vous avez peu de code front end ?

Si vous avez très peu de JS, je ne pense pas que se lancer dans l’apprentissage d’Angular soit forcément une bonne idée, vous risquez en plus de n’être confronté qu’à des problèmes basiques et de ne pas l’utiliser correctement.

Vous avez déjà du code JavaScript ?

Ce n’est pas un vrai problème de refactorer son existant. Étant donné qu’Angular est structurant et découpe bien les différentes couches, il est assez simple de s’y retrouver et de savoir où placer son code dans les différents contrôleurs et directives. (Pour un apprentissage, il est quand même conseillé de ne pas utiliser jQuery. Angular est vraiment une autre forme de penser une application et il ne faut pas utiliser Angular comme une surcouche)

Vous  devez utiliser des plugins externes avec jQuery ?

Ce n’est pas du tout un souci. Angular n’est pas là pour remplacer jQuery (il a d’ailleurs dans son cœur un jQuery light) et il s’associe très bien avec ses plugins, il permet de structurer tout le code pas toujours propre et éparpillé qu’on doit coder pour les utiliser tout ça grâce aux directives.

Et la compatibilité avec les navigateurs ?

Probablement le point négatif suivant l’utilisation qu’on en a. Angular a voulu miser sur l’avenir et ne fonctionne pas sur les versions IE inférieures à la 8 et vivote sur cette version (n’est plus supporté dans la version 1.3 d’AngularJS).

Syntaxes, fonctionnalités et prise en main

Pas besoin d’apprendre une nouvelle syntaxe ou de lire un livre de 1000 pages. Un simple tour sur la doc puis GITHUB m’a permis de comprendre les principes fondamentaux d’AngularJS.

Dans la réalité, après une utilisation autre que les traditionnels getting started et autres todos,est magique ! Fini les

document.getElementById...

De plus, avec Angular les modèles ne sont que des objets JavaScript et ne sont pas gérés par des classes personnelles Angular mais par les classes de JavaScript.

Framework MVC :

La structure MVC d’AngularJS permet au développeur de trouver rapidement ses repaires avec cette séparation des couches si familière :

Modèle :

Rappel : modèle = structure donnée représentant une entité de l’application, généralement transmise en JSON.

Vue :

La vue est simple, c’est votre HTML et/ou la sortie générée. Lorsque vous utilisez un framework MVC, vous utilisez les données issues du Modèle pour mettre votre Vue à jour et afficher les bonnes informations dans votre HTML.

Contrôleur :

Comme son nom l’indique, cette couche contrôle des choses. Mais quelles choses ? Des données. Les contrôleurs permettent à votre serveur de communiquer avec la Vue, c’est le messager, vous pouvez donc mettre vos données à jour à la volée via ces canaux de communication entre le serveur et le client.

À la différence de jQuery, AngularJS est donc un véritable framework : il « impose » une certaine structure dans le code. Ce type de framework est parfois appelé un framework MVW (Model View Wathever), votre logique doit être englobée dans des contrôleurs et des directives.

Syntaxe

La syntaxe des templates de la vue se résume à du HTML, avec des attributs spécifiques (ng-*) et un affichage de variables à l’aide d’accolades. Exemple :

<h1>The sum of 2+3 = {{2 + 3}}!</h1>

Data-binding bi-directionnel

C’est la fonctionnalité phare d’AngularJS : elle permet de notifier tous les éléments qui font référence à une variable, de son changement. Ainsi sans coder explicitement du JavaScript, on peut mettre à jour en temps réel un titre qui fait référence à un champ texte.

&nbsp;<input type="text" ng-model="yourName"><h1>Hello {{yourName}}!</h1>

 (source : http://docs.angularjs.org/guide/databinding )

AngularJS par la pratique

Le codage en AngularJS revient, en général, à ajouter une déclaration ng-app, écrire un contrôleur pour parler à la vue puis l’inclusion d’Angular et un attachement au DOM. Voici l’essentiel :

– Une directive dans sa forme la plus simple, est un petit morceau de template HTML, utilisé de préférence à plusieurs endroits de l’application. C’est un moyen facile d’injecter sans effort du DOM dans votre application ou d’effectuer des interactions particulières avec le DOM. Les directives ne sont pas simples pour autant et la courbe d’apprentissage pour les maitriser est assez importante. Ce qui suit devrait tout de même vous donner un bon point de départ.

– Un peu d’HTML avec les déclarations ng-* :

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <!-- logique du contrôleur -->
  </div>
</div>

Module et contrôleur :

Le module Angular sert à placer toute notre logique. Il existe plusieurs manières de déclarer des modules. Voici la plus simple ainsi que l’implémentation de controleur :

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {
  // Magie du contrôleur
}]);

Il est important de noter que les contrôleurs ont pour but de gérer les données et de contenir des fonctions (ou événements) qui parlent au serveur pour envoyer/recevoir des données JSON. Aucune manipulation du DOM ne doit y prendre place, pas de jQuery ici donc. La manipulation du DOM se fait par les directives que nous allons voir ensuite.

Les services sont souvent une notion un peu floue. Ils sont plus un design pattern de style qu’un réel apport de fonctionnalité. J’ai lu le code source d’Angular et à priori ils sont très proches des factories. Ils passent par le même compilateur et semble avoir de nombreuses fonctionnalités en commun. Il semble que les services soient préférables pour singleton et les factories pour les fonctions plus complexes comme les Object Literals ou d’autres cas plus compliqués. Voici par exemple un service qui multiplie deux nombres :

myApp.service('Math', function () {
  this.multiply = function (x, y) {
    return x * y;
  };
});

Et voici l’appel dans le contrôleur :

myApp.controller('MainCtrl', ['$scope', function ($scope) {
    var a = 12;
    var b = 24;

    // outputs 288
    var result = Math.multiply(a, b);
}]);

Lorsque l’on crée un service (ou une factory) il faut utiliser l’injection de dépendance pour indiquer à Angular de le prendre en charge. Sans cela, on aura une erreur de compilation et notre contrôleur plantera.

Les filtres sont utiles avec les tableaux de données mais également en dehors des boucles. Si vous parcourez une collection de données et que vous souhaitez les filtrer, vous êtes au bon endroit. Les filtres peuvent également s’utiliser pour filtrer la saisie d’un utilisateur dans un champ <input> par exemple. Les filtres s’utilisent de deux façons : dans un contrôleur ou sous forme de méthode.

Les routes :

AngularJS est fourni avec un système de routing, qui permet de définir pour un certain pattern d’URL appelé, une certaine page à charger en AJAX et dont le résultat doit être rajouté dans une portion du DOM, défini grâce à la directive ng-view. On peut également y rattacher un contrôleur.

routage_AngularJS

(source : http://fr.slideshare.net/yacinerezgui/angularjs-prsentation-french)

myApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
    when('/test, {
      templateUrl: 'partials/test',
      controller: 'TestCtrl'
    })
}]);

Dans cet exemple on va rajouter une configuration sur notre application et quand on aura dans l’URL un appel sur /test, on devra récupérer le résultat de la page “partials/test” et le rattacher au contrôleur TestCtrl. Il nous suffit ensuite de définir l’endroit où on veut compléter le résultat récupéré.

<div ng-view></div>

En résumé :

Le routing est très pratique, surtout pour des SPA (Single Page Application) et facilite grandement la vie quand on ne veut pas charger toute la page quand on change de menu. A noter également que les directives présentes dans le résultat seront également automatiquement compilées.

Tests

En temps que développeur, je ne pouvais pas clôturer les fonctionnalités sans parler de la préoccupation première des développeurs : les tests! 😉

Les outils de test fournis avec Angular sont comme le reste, simples et efficaces. Les tests unitaires deviennent agréables et rapides à mettre en œuvre, on a tout de suite plus tendance à les concevoir (pour le plus grand bonheur du chef de projet!). Et les tests de bout-en-bout (end-to-end tests) ne sont pas en reste !

Conclusion

En conclusion , j’exprimerai plutôt mon ressentiment par rapport à ce framework. Ayant déjà manipulé pas mal d’outils pour dynamiser les interfaces dans les différents projets que j’ai effectués jusqu’à présent, partir à la découverte d’AngularJS m’a permis de voir à quel point il se détache du lot aussi bien sur la partie prise en main , que réponse à la tendance actuelle des RIA. Et j’espère avoir la chance de l’exploiter sur un futur projet. Donc vous qui avez le choix pour répondre à un besoin client, jetez y un œil, ça en vaudra (qui sait?) peut-être le détour.

Pour continuer

Pour finir de vous convaincre, vous pouvez lire ce court article sur Sitepoint 10 Reasons Why you should use AngularJs, ou vous pouvez consulter cette galerie de projets réalisés avec AngularJs.

La communauté AngularJS propose un tutoriel pour débuter qui permet de créer une application Phonecat qui affiche des informations techniques à propos de téléphones portables.

De plus, le support sur stackoverflow est très actif et réactif, ce qui est un point positif non négligeable quand on est dans une impasse !

Et enfin la communauté AngularJS en France sur faceb… (oups! pardon! ) Google+ est très active.

  • Angelo ZERR

    Merci pour cette présentation d’AngularJS. Pour les utilisateurs d’Eclipse, je profite de cet article pour vous faire connaître AngularJS Eclipse https://github.com/angelozerr/angularjs-eclipse un plugin Eclipse pour AngularJS qui fournit :

    * la coloration syntaxique dans le HTML, la complétion sur les modules, contrôleurs, directives, modèle javascript dans les expressions : voir https://github.com/angelozerr/angularjs-eclipse/wiki/HTML-Features

    * la complétion sur le modèle angular dans le Javascript : voir https://github.com/angelozerr/angularjs-eclipse/wiki/Javascript-Features

    Ce plugin Eclipse est basé sur le moteur d’inférence Javascript tern.js http://ternjs.net/ écrit en Javascript (et qui peut marcher dans un browser ! voir démo sur http://ternjs.net/doc/demo.html). Tern est extrêmement puissant et permet de gérer d’autres frameworks Javascript comme jQuery https://github.com/angelozerr/tern.java/wiki/Tern-&-jQuery-support

    Si AngularJS Eclipse vous intéresse je vous conseille de commencer par https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started
    et n’hésitez pas à créer des issues pour améliorer le plugin sur https://github.com/angelozerr/angularjs-eclipse/issues?state=open

  • Tchy MOUA

    Merci pour ce très bon article sur AngularJS. Pour ma part, je ne suis pas très familier avec les SPA, j’ai tendance à tout mettre coté serveur avec l’utilisation de Framework Web comme Spring et JSF.

    Grâce à cet article j’ai découvert une nouvelle façon d’entrevoir le développement coté web, ce qui m’étonne le plus est le MVC coté client. Pour faire le parallèle avec ce qu’on peut trouver sur des Frameworks axés serveur, on retrouve tout « controller », « validation »,« navigation », « templating » etc. donc je pense qu’il y a vraiment de quoi faire.

    Je me suis laissé tenter par le tutoriel proposé « Phonecat », excellent pour se faire la main (code et explication
    pas à pas), je le recommande à tous ceux qui souhaitent se mettre à AngularJS.

    Mais, j’ai quelques interrogations concernant ce type d’application :

    Ne risquons-nous pas de nous faire aspirer tout notre code source ?

    Le référencement de ce type d’application sera-t-il optimal ? Car il me semble que les scripts sont inactifs lors du passage du robot Google.

    Si mes doutes se confirment, quels types d’applications est la cible d’AngularJS ?