Actualités

[22/03/2017] Smile participe au salon Cloud Computing World Expo

Smile interviendra ce mercredi 22 mars au salon Cloud Computing World Expo pour présenter notre projet collaboratif OCCIware (plateforme standard outillée de connecteurs Cloud).

[22/03/2017] Smile vainqueur des IoT Awards 2017 !

Lors de l'IoT World à Paris, Smile a remporté l'IoT Award dans la catégorie "High-tech" pour son projet de cabine connectée avec Coved.

[17/03/2017] Smile dans le Journal de l'Emploi sur Demain TV

Géraldine Moreau-Luchaire, notre Responsable Recrutement, nous parle des 350 postes à pourvoir en 2017 !

Toutes les actualités picto
       

Vous avez besoin de mettre à jour votre Lecteur Flash Flash 7

Guillemet ouvrant l'actualité des solutions
et des technologies open source Guillemet fermant
picto

AngularJS : vainqueur de la fameuse guerre des frameworks ?

Le javascript a toujours occupé une place de choix sur nos navigateurs. Ces dernières années ont ainsi vu une forte émergence des frameworks le concernant.

Depuis Dojo Toolkit, qui a posé la première pierre en proposant tout un ensemble d’outils (widgets, bibliothèques, etc.) facilitant la création d’applications en Javascript, du chemin a été parcouru et on trouve aujourd’hui toute une batterie de frameworks JS de plus en plus performants.
Parmi les plus connus : Backbone.js, Ember.js, Knockout.js et AngularJS.

Choose your background

Un framework JS, oui, mais pour quel contexte ? Ce que nous cherchons, avant tout, est un framework capable de s’acclimater à un environnement mobile. Il doit être facile à prendre en main et à maintenir, permettre un gain de temps au niveau du développement, être suffisamment mature et avoir une bonne communauté.

Ready… Fight!

Backbone.js - Le sage

Beaucoup plus verbeux qu’AngularJS, il s’impose comme le papa des frameworks JS.
Il est simple, léger (60ko) et bien documenté. Toutefois, il a les inconvénients de ces avantages. Il est vite limité et parfois pas assez structurant.

Ember.js - Le barbare

Ember.js se rapproche le plus d’AngularJS en terme de performance. Néanmoins, il s’avère très complexe et très lourd, ce qui est, pour une application mobile, un réel désavantage.
Par ailleurs, la solution a eu du mal à se stabiliser entraînant une fuite de ses utilisateurs et un  affaiblissement de sa communauté.

Knockout.js - Le spécialiste

Knockout.js se révèle très pratique, simple et intuitif. Mais cette solution n’est pas un framework à part entière mais plutôt une bibliothèque de data-binding. A ce titre, les autres outils qu’elle propose sont limités surtout en ce qui concerne les appels aux serveurs. Il y a bien la possibilité de charger et de sauvegarder des données au format JSON mais on est bien loin de ce qu’offre le service $http d’AngularJS.

AngularJS - Le magnifique

En plus d’être développé par Google, AngularJS apporte de nombreuses fonctionnalités très intéressantes aux développeurs dont deux principales qui font sa particularité et sa force : le data-binding bidirectionnel et les directives.
Tandis que la première facilite le code, amoindrit les manipulations du DOM (structure HTML) et donc les erreurs ; la seconde permet d’étendre la syntaxe HTML. Explications…
La notion de data-binding bidirectionnel n’est pas une singularité d’AngularJS puisqu’elle est aussi proposée par Ember.js. Elle a en revanche le mérite de mêler POJO (Plain Old Javascipt Object) et attributs HTML (directives) ce qui est une qualité.

Mais qu’est-ce que le data-binding bidirectionnel ? Il crée un va-et-vient entre les views et les models. Dès qu’une view est modifiée, l’information est envoyée au model associé qui rafraîchit celle-ci juste après. Concrètement, si un utilisateur remplit un champ texte, la valeur qu’il tape peut s’afficher à un autre endroit de la page et ce sans rechargement de la page ni soumission au préalable du champ.
Si vous voulez tester par vous-même : http://docs.angularjs.org/api/ng/directive/ngBind.

Les directives permettent de créer des éléments et des attributs HTML spécifiques afin de manipuler proprement le DOM. Bien que ce concept soit nouveau et demande de réfléchir autrement, cela rend les applications extensibles et très modulaires. Il devient alors très facile d’ajouter, de modifier ou de supprimer une directive.
Les templates Angular s’écrivent ainsi entièrement en HTML, contrairement à Ember.js et Backbone qui demandent d’apprendre respectivement les syntaxes Mustache, HandleBars et Underscore.
Elles peuvent par ailleurs être partagées, ce qui fait entre autre la popularité d’AngularJS. Il existe ainsi des outils comme AngularUI qui angularisent des bibliothèques populaires comme jQueryUI et Bootstrap.

Un autre avantage d’AngularJS, plus sous-jacent, se trouve dans les injections de dépendances et surtout dans sa méthode d’inférence des dépendances qui repose sur un hack javascript. Angular arrive ainsi à déduire, d’après les noms donnés en argument d’une fonction, de quel module il s’agit. Aux premiers abords rien d’extraordinaire mais c’est là le génie d’Angular : faire paraître quelque chose de non trivial pour quelque chose de naturel rendant ainsi le code que plus agréable à écrire.
 

Figure 1 - Graphe Google Trends illustrant les tendances pour les termes angularJS, knockout.js, ember.js et backbone.js sur les 12 derniers mois

And the winner is…

Vous l’aurez compris AngularJS met au tapis ses principaux adversaires. Il est performant, intuitif, agréable à utiliser, complet et correspond aisément aux plateformes mobiles. Cette dernière tendance se confirme avec la récente annonce d’AngularJS v2.0 qui sera “mobile first” (http://blog.angularjs.org/2014/03/angular-20.html). 

Le principal frein à l’utilisation de cette solution, mais qui est commune à toutes les autres, est le référencement. Cette technologie ne permet pas aux moteurs de recherche d’indexer les sites l’utilisant (single page). Mais ceci devrait s'améliorer. Google et Bing font de gros efforts dans ce domaine, d'autant plus que le géant de Mountain View porte le projet.

AngularJS n’est donc pas à considérer comme la solution ultime. Il convient dans de nombreux cas mais pas tous. Pour en revenir sur le référencement, il semble évident qu’Angular ne soit pas la solution la plus appropriée pour les sites de e-commerce.

A noter, tout de même, qu’AngularJS est certainement le framework qui s’inscrit le mieux dans les problématiques futures du web. L’avenir des architectures web se tourne de plus en plus vers les Web Components, c’est-à-dire les composants HTML modulaires et réutilisables. Avec les directives, Angular entre dans cette dynamique laissant ainsi encore de beaux jours au Javascript…

Quelques projets réalisés par nos équipes

France Galop – Pro (https://mobile.france-galop.com)

 

La Croix (http://m.la-croix.com/)
  

Emeline Esteves
picto

Commentaires

Soyez la premiere personne à ajouter un commentaire sur cet article.
Ecrire un nouveau commentaire