Communauté AngularJS France, et rédacteurs pour FrAngular

Je me suis dit qu'il manquait un espace pour les échanges et les annonces concernant AngularJS en France. Les rencontres, soirées ou conférences sur notre framework préféré commencent à se multiplier, et il devient difficile de savoir ce qui a lieu en France, ou comment avertir le public intéressé.

Du coup je viens de créer une communauté sur Google+ intitulée - après une longue réflexion - “AngularJS France”. Ce n'est peut-être pas hyper original, mais on moins on comprend assez vite de quoi il s'agit. Elle est toute fraîche, les pixels ne sont pas secs, et j'en suis encore le seul membre mais j'imagine que ça ne va pas durer. Elle n'a pas pour but de concurrencer la communauté AngularJS officielle, mais simplement de permettre de trouver facilement les infos locales sur le sujet.

Comment aborder AngularJS ?

Si vous avez lu les articles publiés sur FrAngular qui détaillent des aspects techniques du framework, c'est que vous avez peut-être déjà dépassé le stade de l’initiation. Néanmoins, pour ceux qui découvrent AngularJS, je vais expliquer comment on peut aborder ce framework dont l’apprentissage risque de s’avérer quelque peu déroutant.

Commencez par JavaScript

JavaScript est certainement le langage le plus mal connu de ses utilisateurs de toute l’histoire de l’informatique. Combien de développeurs qui font du JavaScript ont vraiment pris le temps de l’apprendre ? On y reconnaît une syntaxe familière parce qu’on a déjà fait du Java, du C++, du PHP, enfin quelque chose qui y ressemble de très loin, et du coup en tâtonnant on arrive à écrire du code JavaScript qui fonctionne à peu près. Mais du très mauvais code JavaScript. Je suis passé par là, comme presque tout le monde.

Les concepts de JavaScript - un langage objet sans classes et avec un forte composante fonctionnelle - sont complètement différents des autres langages objets les plus répandus. Il y a plus de ressemblance entre Java, C#, Python, Ruby, et même PHP en version objet, qu’entre n’importe lequel de ces langages et JavaScript.

Le langage d'expressions d'AngularJS

Voici un article qui tient du paradoxe, puisque je vais y décrire les possibilités du langage d'expressions d'AngularJS, tout en expliquant qu'il faut les utiliser au minimum.

Avec AngularJS, on utilise des expressions pour le binding, et avec de nombreuses directives. Elles ressemblent à des expressions JavaScript, mais n'en sont pas. Elles ne sont pas directement évaluées par l'interpréteur JavaScript, mais parsées et exécutées par AngularJS. Du coup on ne peut utiliser qu'un sous-ensemble des opérateurs et des mots-clefs de JavaScript, et elles divergent aussi de JavaScript sur quelques aspects.

AngularJS, ce n'est pas pour jouer

De nombreux messages ont circulé hier sur Twitter annonçant un jeu en ligne, Bombermine, réalisé avec AngularJS. Étonnant... mais erroné. J’ai moi-même rediffusé un de ces messages, avant de regarder de plus près et de voir qu’AngularJS n’est utilisé que pour l’interface utilisateur, mais que le jeu lui-même est écrit avec GWT.

AngularJS est particulièrement efficace pour la réalisation d’application web, mais pas du tout adapté à la création de jeux.

CRUD... au sens large

Les développeurs d’AngularJS le présentent comme un framework destiné à la réalisation d’applications de type “CRUD” (Create - Read - Update - Delete), c’est-à-dire des applications web affichant des données, et permettant de les saisir ou de les modifier.

C’est effectivement le cas, si l’on ne prend pas le terme CRUD dans un sens trop restrictif, voire péjoratif. Il ne faut pas imaginer des applications réduites à l’affichage de trois pauvres formulaires, bien au contraire.

Les fonctionnalités de Twig avec AngularJS: angular-twig-pack

Depuis que je travaille avec AngularJS, j'ai entendu beaucoup de gens comparer le Framework avec divers moteurs de template... Et il en existe! La liste (non-exhaustive) de wikipedia: Template_engine_(web) en est la preuve. Malheureusement, Wikipedia ne nous numérote pas ce tableau, heureusement que la console est là:

> document.querySelectorAll('.wikitable tbody tr').length

89

Bon ... Trêve de plaisanterie, passons aux choses sérieuses. Je me suis dit pourquoi ne pas prendre un moteur de template existant et créer un pack de directives, filters et services pour ne pas trop dépayser les puristes.

Kezako

Pour cet exercice, j'ai choisi le Framework Twig (uniquement car je l'ai déjà utilisé et surtout car j'adore les couleurs du site: http://twig.sensiolabs.org/).

Un outil de présentation en AngularJS

Pour une fois je ne vais pas vous détailler un aspect technique du framework, mais présenter une petite application qui peut être utile. Mais si je la présente ici, c'est bien sûr parce qu'elle est écrite avec AngularJS, et qu'il y a quelques exemples dans le code qui peuvent vous intéresser.

J'avais besoin d'un outil pour présenter des slides sur AngularJS en début de semaine prochaine : lundi 18 février à LyonJS, et mardi 19 février au Marseille JUG. Bien sûr il existe maintenant des outils pour faire des présentations en HTML avec plein d'effets spéciaux impressionnants. Mais je dois être de la vieille école, parce que j'ai toujours l'impression que ces effets qui en mettent plein la vue détournent l'attention du contenu. En fait je ne mets jamais d'animations dans mes présentations ; sans pousser aussi loin le minimalisme, je penche plus vers la “méthode Lessig”. Donc tout ce dont j'avais besoin c'était d'un outil comme ShowOff, permettant d'écrire rapidement les styles dans une syntaxe markdown.

Mais ShowOff c'est une application serveur, en Ruby, avec une liste de dépendances presque aussi longue que le bras. Du coup j'ai écrit ce week-end une version simplifiée avec AngularJS, une simple application cliente sans côté serveur. Je l'ai mise sur GitHub : angular-showoff. Il y a un lien vers la démo dans le descriptif.

Solution simple pour des formulaires avec données différées

Je ne suis pas sûr d'avoir trouvé un titre très vendeur pour cet article, mais vous y trouverez un exemple qui peut être très utile. C'est une solution hybride entre les $resource et les promises du service $q d'AngularJS. Elle est très simple à mettre en oeuvre, pour utiliser avec des formulaires travaillant sur des données chargées en asynchrone, un besoin somme toute très fréquent.

AngularJS fournit en standard le service $resource, qui permet de gérer facilement des entités chargées en asynchrone, mais il est prévu pour fonctionner avec une API serveur de type REST. Il n'est pas nécessaire que ce soit une API strictement RESTful, mais il ne faut pas qu'elle s'en éloigne trop pour que l'utilisation du service $resource soit pertinente.

Drag & Drop avec AngularJS

Le drag & drop est revenu à la mode avec l'arrivée des tablettes et des smartphones. Un temps boudé par les développeurs web, il est de bon ton d'offrir de tels mécanismes dans nos applications web. A l'image de Trello et de ses fameuses colonnes, nous allons voir comment rendre des éléments html draggable et droppable.

Google Chart Tools avec AngularJS

Pouvoir inclure un graphique dans une application AngularJS par la simple utilisation d'une directive, l'idée est séduisante. Et bien sûr, pour respecter la philosophie du framework, le graphique doit se mettre à jour quand les données changent.



Voici un exemple de directive qui permet exactement ça, pour un graphique de type camembert, en l'occurrence le “Pie Chart” de Google Chart Tools. L'utilisation est toute simple :

<pie-chart data="chartData" title="My Daily Activities" 
           width="500" height="350"
           select="selectRow(selectedRowIndex)"></pie-chart>

Dans les attributs, on fournit simplement les données (ici "chartData", c'est le nom d'une propriété du scope, comme avec ng-bind), le titre du graphique, ses dimensions, et éventuellement une expression qui est exécutée lorsque l'utilisateur sélectionne une portion du camembert.

De JSF à AngularJS

Ce matin j’ai partagé sur Twitter cet article en anglais qui fait une comparaison entre AngularJS et JSF. D’autres que moi l’ont partagé aussi, mais il y a eu quelques réactions étonnées, du genre : “c’est une blague ?”.

Pour moi la comparaison n’a rien d’absurde, et mérite de plus amples explications que ce qu’on peut écrire dans un tweet de 140 caractères.

Tout comme l’auteur de l’article, je viens du monde Java et j’ai travaillé avec JSF pendant 5 ans, certes surtout comme architecte et en support à mes collègues qui l’utilisaient au quotidien, mais j’ai aussi fait ma part de développements. Et moi aussi en découvrant AngularJS, j’ai forcément constaté des ressemblances entre les deux frameworks.

AngularJS: Service de gestion de raccourcis clavier

A l'image des applications Google, Twitter et autres grosses applications Web du moment, il est très "user-friendly" (convivial pour les franglophobes !) de mettre en place une série de raccourcis clavier pour utiliser de manière optimisée l'application.

Les raccourcis clavier sont une touche ou une combinaison de deux ou plusieurs touches à presser simultanément afin d'éviter une action de pointage par la souris. Le fait de ne pas déplacer en permanence la main entre le clavier et la souris fait déjà gagner un temps précieux pour les gens qui travaillent toute la journée sur une application. De plus, à chaque action de la souris, il faut un temps de pointage pour déplacer le curseur sur l'endroit voulu.

Comment centraliser la gestion de ces raccourcis dans une application AngularJS ?

Nous allons voir comment utiliser un service AngularJS pour rendre cette gestion de raccourcis clavier générale.

Tableaux complexes avec AngularJS : ng-repeat et tbody

[Ajout du 12/01/2013] J'ai modifié la solution proposée à la fin de l'article pour utiliser une directive ng-switch plutôt que ng-show, ce qui est beaucoup plus pertinent.

On m'a demandé plusieurs fois ce qui peut être compliqué à faire avec AngularJS. Il y a une chose qui parfois s'avère contraignante, surtout pour présenter des tableaux complexes, c'est le fait que les templates d'AngularJS doivent être du HTML, sinon forcément valide, du moins compris par le navigateur.

AngularJS compile le template à partir du DOM chargé par le navigateur. Il ne travaille pas sur le fichier source HTML, mais sur le DOM construit par le navigateur à partir du source, et ça fait une grosse différence. Ce fonctionnement est un des principaux atouts d'AngularJS, mais dans quelques rares cas, il peut s'avérer contraignant.

AngularJS : Scopes et évènements

Le scope d'AngularJS n'est pas très différent de la notion de scope du langage JavaScript, ce contexte qui pose parfois problème, lorsque le mot clé this ne pointe plus vers le bon contexte dans un callback. On utilise $scope ou $rootScope, en les injectant dans un contrôleur, pour faire référence respectivement au contexte local du contrôleur ou au contexte global de l'application.

Si les scopes d'AngularJS peuvent être créés manuellement, ils vont surtout être créés automatiquement par le framework lors de l'utilisation de certaines directives ou la déclaration d'un nouveau contrôleur. Ils sont reliés sous la forme d'un arbre hiérarchique avec héritage par prototype. Cette organisation en arbre peut être gênante lorsque l'on veut effectuer une communication directe entre des scopes qui ne sont pas reliés par une relation père/fils.

Comment faire passer des informations d'un scope à un autre quand il n'existe pas de relation directe entre eux?

Nous allons voir comment utiliser l'API des scopes fournie par AngularJS pour envoyer et intercepter des évènements personnalisés.

Initialisations avant le routage avec la propriété resolve

On peut avoir besoin dans une application AngularJS de faire des initialisations avant de charger une vue, et surtout avant que le framework instancie son contrôleur. Par exemple si on fait appel à une API nécessitant une authentification, et renvoyant un token pour les requêtes suivantes, on peut vouloir s'authentifier avant tout chargement de vue, pour être sûr d'avoir récupéré le token au préalable.

Comment faire en sorte que le routage d'AngularJS attende la récupération du token d'authentification, qui est bien sûr une opération asynchrone ? C'est ce que permet la propriété resolve du second paramètre de la méthode $routeProvider.when().

L'API Promise d'AngularJS

Les services standards d'AngularJS $timeout et surtout $http renvoient tous deux des promises, qui sont très pratiques pour gérer des opérations asynchrones. Cette notion de promise existe dans d'autres frameworks, comme jQuery, et AngularJS intègre une implémentation de cette API. Elle peut être utilisée par les développeurs dans l'écriture des leurs propres services pour simplifier la gestion des actions asynchrones. C'est très important de bien comprendre comment fonctionne cette API, qui est probablement la partie la plus ardue d'AngularJS, pour tirer profit de toute la puissance du service $http, et pour gérer facilement les enchaînements d'opérations asynchrones dans une application.

Décrire en français le fonctionnement de l'API de promises ne va pas être simple, car il est difficile de traduire de façon élégante les notions qu'elle recouvre sans s'éloigner des termes anglais utilisés comme noms de méthodes. Donc tant pis pour l'élégance, je vais m'en tenir aux termes anglais ou à des traductions mot-à-mot, pour coller au plus près aux noms des méthodes disponibles.

Qu'est-ce qu'une promise ? 

Une promise (une “promesse” en anglais) est un objet JavaScript correspondant au résultat différé d'une opération asynchrone.

Imaginons une fonction qui doit déclencher une opération prenant un certain temps, et qui pourra soit réussir et fournir un résultat, soit échouer et balancer une exception. Ça peut être une fonction synchrone, mais elle va devoir bloquer l'exécution jusqu'à ce que l'opération soit terminée, pour selon le cas renvoyer la valeur de retour ou balancer l'exception.

Dans un langage multi-thread on peut envisager éventuellement de bloquer ainsi l'exécution, pas en JavaScript. Du coup on va préférer un fonctionnement asynchrone : la fonction va juste démarre l'opération, et renvoyer immédiatement une promise, une promesse de résultat différé, qui sera résolue ultérieurement comme une valeur de retour ou comme une cause d'erreur, l'équivalent d'une exception.