Logo JavaScript

AngularJS, le framework MVC par Google

Flattr this!

Salut à tous,

Alors pour ceux qui ne suivent pas mon Twitter (ou n'ont rien lu depuis une semaine), je me suis mis à AngularJS et EmberJS pour un projet au boulot mais aussi par plaisir. Les deux technos ont subi un développement en parallèle pendant quelques jours avant de choisir celle avec laquelle on continuera. J'ai la chance d'avoir un chef qui me laisse plutôt les mains libres pour décider de mes technos. C'est rare mais tellement appréciable. Je vais donc vous parler d'AngularJS dans ce billet et je vous ferai un court billet sur EmberJS plus tard.

Qu'est-ce que c'est AngularJS ?

C'est un framework JavaScript développé et utilisé par Google depuis quelques temps, et qui a été récemment mis à disposition du public sous licence MIT.

Qu'est-ce que ça apporte de nouveau, d'intéressant ?

La plupart des frameworks MVC fournissent souvent des objets plus ou moins complexes qu'on peut ensuite enrichir et instancier x fois. Du côté des vues, la plupart propose de définir des templates hors-DOM pour ensuite être compilés et affichés là où on le souhaite. Rien de bien folichon et ça nous semble plutôt logique.

Google a voulu aller plus loin que ça.

C'est simple, vous avez une seule vue, qui est votre DOM. Google part du postulat que parmi les prochaines innovations des navigateurs, nous disposerons du templating intégré en natif. En tant qu'éditeur du navigateur le plus populaire du moment, cette idée ne semble pas trop tirée par les cheveux. Rien qu'avec ça, la complexité de votre appli est fortement réduite.

Ensuite, les contrôleurs. Ils ont taillé dans le gras. Jusque là, la majorité des contrôleurs JS (si ce n'est tous ?) étaient des objets riches et complexes, capables d'agir sur la génération de DOM pour la vue, sur les modèles, d'effectuer des requêtes au serveur ou encore de gérer des côtés de l'appli non propres à elle-même. Genre un contrôleur pour afficher des notifications à l'écran.

Là aussi, ils ont décidé de faire simple en ne fournissant pas de contrôleurs.

Hell ?!

En fait, votre contrôleur AngularJS est une fonction tout ce qu'il y a de plus simple avec un seul argument, et c'est cet argument qui contient votre modèle MVC. Votre contrôleur peut y modifier les données, y ajouter des fonctions de "business" mais ça s'arrête à ça. Et tant qu'à faire, quitte à être dans un environnement "statique" (à moins de changer complètement de page, votre appli n'est pas rechargée) , pas besoin que vous ayez à gérer les instances de vos contrôleurs, Angular s'en charge pour vous.

Quand au modèle, c'est encore une fois très simple. N'importe quel objet JS est un modèle. Vous pouvez aussi dans le DOM déclarer qu'un champ de formulaire est un modèle.

Avec un système aussi simpliste, vous n'êtes donc pas très contraint par le framework. Ce qui n'est pas toujours le cas. EmberJS m'a pas mal frustré sur ce point.

Mais alors pour le reste, on fait comment ?

Genre pour manipuler mon DOM, je fais comment ? Pour ça, Angular a enrichi le modèle MVC en y ajoutant un certain nombre de concepts.

Les directives

Celles-ci permettent de manipuler le DOM de façon plus intelligente. Sur le coup, on a dû mal à comprendre l'intérêt, moi le premier, j'ai pesté contre ce système quand j'ai essayé de le prendre en main et finalement, c'est plus cohérent. Je reviendrai plus tard sur ce point assez complexe dans un article dédié.

Les services

Ce sont des systèmes proposés par Angular et qui sont indépendants de l'état de votre appli. Par exemple, le service $http qui est une sorte de similaire au $.ajax de jQuery ou au Ajax de MooTools. Il crache lui aussi un objet Deferred d'ailleurs.

Ces services sont gérés via l'injecteur de dépendances natif à AngularJS. Du coup, vous n'avez pas à géré ça non plus. Dans les services intégrés de base, il y a donc notamment $http, mais aussi un assistant à l'objet window, logiquement appelé $window. Ou encore $route.

Et donc ?

Côté performances, je ne me plains pas, le système de binding n'est pas moins efficace que les autres frameworks. Arrivé à quelques centaines de références dans la page, ça commence à ralentir. Après j'ai pas une bête de course non plus. Donc tranquille aussi de ce côté.

Vous pouvez récupérer AngularJS (version 1.0.1, la dernière stable) ici :

 http://code.angularjs.org/1.0.1/angular-1.0.1.min.js

La documentation est ici :

 http://docs.angularjs.org

Attendez vous à avoir d'autres articles sur le sujet. Je suis notamment en train d'écrire un plugin à Twitter Bootstrap avec Angular pour gérer des notifications. Les notifications fonctionnent bien mais ça manque encore de fonctionnalités pratiques comme cacher toutes les notifications courantes d'un seul coup.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • DjebbZ

    Je viens également de tester AngularJS, en jouant avec l’appli Angular dans TodoMVC. Tout comme toi, j’ai testé Ember.js en même temps, et clairement AngularsJS est (pour l’instant) l’outil js MVC avec lequel je me sens le plus à l’aise. J’aime beaucoup la richesse des templates, la séparation du code métier (les contrôleurs sont 100% métiers) et du code infrastructure (déclarer de nouvelles directives, nouveaux services, etc.). Et le tutoriel est l’un des meilleurs que j’ai jamais vu.

    Allez un tweet en cadeau, pour te motiver à en parler d’avantage et partager (si possible) ton plugin Bootstrap :)

    • http://www.mathieurobin.com/ Mathieu

      On est bien d’accord. Merci pour les encouragements ! Le plugin sera partagé la semaine prochaine (teasing :p), j’ai eu le temps d’ajouter le fait de virer toutes les notifs d’un coup, je voudrais juste qu’on puisse coller un timer sur les notifs pour éviter d’avoir à les fermer à la main. En gros, je veux concurrencer l’excellent jGrowl 😉

  • http://www.metalorgie.com Eric

    Bonne intro à Angular. Je suis aussi à la recherche d’infos sur les framework MVC JS, c’est un peu la folie en ce moment sur ce sujet avec plein de beau projet. Mais Angular semble un peu différent et très prometteur.

    En tout cas ça donne surtout envie d’en lire plus cet article!

    • http://www.mathieurobin.com/ Mathieu

      Je suis en train de rédiger la suite. Le plus compliqué étant de construire quelque chose de cohérent sur plusieurs articles. Exercice dont je ne suis pas encore un habitué malheureusement.
      Sachant qu’en même temps j’en profite pour faire une « vraie » présentation AngularJS, j’ai un peu de mal à m’y retrouver. Mais content que ça plaise ! :)

  • Nicolas P

    J’attends impatiemment la suite ! J’ai envie de me lancer dans les framework MVC JavaScript mais pas facile de choisir parmi la multitude de choix pour commencer.

    • http://www.mathieurobin.com/ Mathieu

      Si t’as le temps d’en tester plusieurs, il faut le faire, je ne regrette pas. Si t’as pas le temps, tu devras me faire confiance. Comme à l’école quand tu m’as suivi pour jouer avec GWT 😉

  • http://www.itaware.eu/ Seb

    Pour ceux que ça intéresse je consacre une série d’articles sur AngularJS. J’essaye d’y mettre un max d’exemples. J’en ai encore plusieurs dans la pile que je publierais bientôt.
    Si ça peut vous aider à vous mettre dans le bain plus rapidement 😉
    http://www.itaware.eu/tag/angularjs/

  • http://forresst.github.com forresst

    Vivement les exemples, je débute avec Angular et j’avoue que le démarrage est simple lorsqu’on connait déjà Backbone, je parle de toutes les notions : MVC, template, model, etc … Mais la comparaison s’arrête là, je n’ai pas assez gratter dans Angular pour me permettre de faire une comparaison.
    Donc toutes infos complémentaires sont attendus avec impatience !
    Merci Mathieu

    • http://www.mathieurobin.com/ Mathieu

      Je devrais avoir assez de temps ce weekend pour avancer ma présentation/cours. En tout cas, ça donne envie de le faire quand il y a autant de demande :)

  • http://www.mickael-andrieu.fr mickael andrieu

    J’hésite beaucoup entre angular et backbone, du fait que backbone on me le vend comme étant très compatible avec jQuery (que je maîtrise, un peu ^^).

    Est ce qu’angular.js acceptera du code jQuery sans broncher? Est il plus facile à apprendre (et à maintenir) qu’un backbone ?

    • http://www.mathieurobin.com/ Mathieu

      Backbone repose même énormément sur jQuery pour gérer son DOM (bien qu’ils suggèrent souvent zepto, même API). Cependant AngularJS possède un truc nommé angular.element qui est en fait un alias de jQuery.element. En fait, pour être encore plus précis, AngularJS peut être vu comme une surcouche de jQLite (version allégée de jQuery, sans Sizzle ni quelques autres modules). Donc AngularJS est plus que compatible avec jQuery vu qu’il en embarque le composant d’élément.

      L’un comme l’autre ne sont pas très compliqués à apprendre, mais personnellement, je recommande AngularJS qui est quand même bien plus élégant et cohérent concernant la philosophie du web. Au passage, il ramène le DOM et le JS natif au centre des attentions. Forçant ainsi les développeurs à éviter la majorité des pièges de performance qu’on retrouve trop souvent avec jQuery.

  • http://blog.nicolas-juen.fr Rahe

    On peut correspondre par émail si ça t’arranges cf conversation sur twitter :-)

  • http://www.pikock.com chan tsifei

    On a tester AngularJS pour faire un générateur de thèmes Bootstrap :
    http://pikock.github.com/bootstrap-magic/
    Vraiment intéressant comme Framework. La phase d’apprentissage est un peu complexe (la doc n’est pas au top ) mais le résultat est impressionnant et en très peu de ligne.

    • http://www.mathieurobin.com/ Mathieu

      Intéressante comme appli, j’ai partagé le lien sur mon Twitter. Un retour d’expérience un peu plus complet serait d’ailleurs le bienvenu.

Articles liés