Premiers pas avec AngularJS

J’ai commencé à m’intéresser il y a peu à AngularJS, un framework JavaScript “client-side” orienté MVC/MVVM dont j’entends beaucoup parler en ce moment. Angular est parfait pour créer des SPA (single pages apps), voire même des sites complets. J’ai voulu tester son potentiel en créant pour l’occasion une app de A à Z.


Attention, cet article n’est pas un tutoriel. Je cherche simplement à décrire ici l’app que j’ai créée, sa mise en place ainsi que les obstacles que j’ai rencontrés.

Angular, c’est quoi ?

Angular est comme précisé plus haut un framework JS MVC. Il est développé en open-source par Google. L’explication donnée par Wikipédia me paraît excellente pour mieux saisir son concept :

Angular adapte et étend le HTML traditionnel pour servir le contenu dynamique de façon améliorée grâce à un data-binding bidirectionnel qui permet la synchronisation automatique des modèles et des vues.

Pour résumer cela : la vue mettra à jour le modèle, et vice-versa. Angular a baptisé ça “Two-way Data Binding”.

De plus, grâce à l’injection de dépendances, beaucoup de fonctionnalités traditionnellement gérées côté serveur vont pouvoir l’être côté client, allégeant ainsi le code du premier pour des applications plus légères et rapides.

Moovies

L’idée que j’avais en tête était de créer Moovies, une app qui permettrait de lister les films que ma copine ou moi souhaitions voir ainsi qu’un lien renvoyant vers la fiche de chaque film. Moovies devait remplir les critères suivants :

  • recherche par titre parmi la liste des films affichés
  • possibilité de les trier alphabétiquement ou par catégorie
  • espace d’administration avec authentification par mail/mot de passe
  • ajout, édition ou suppression des films via l’admin.

Le tout étant entièrement managé via Angular, et sans gestion côté serveur. Le résultat est disponible ci-dessous :

Par où commencer ?

Pour ceux qui comme moi débutent totalement avec Angular, je pense que l’idéal est de commencer par le tutoriel officiel. Je l’ai trouvé très clair et détaillé; il permet également de comprendre la philosophie d’Angular ainsi que de saisir ses concepts basiques.

Le site egghead.io propose aussi des leçons vidéo, allant de cours basiques à des cours avancés. Todd Motto, un spécialiste du sujet, a écrit un article très poussé sur son site, “Ultimate guide to learning AngularJS in one day”.

En revanche, j’ai trouvé que la documentation officielle n’était pas si bien documentée que cela en fin de compte. J’ai dû pas mal fouiller, notamment sur Stackoverflow, pour trouver les réponses à certains problèmes complexes que j’avais pu rencontrer.

La tentation jQuery

Une fois lancé dans la création de mon app, j’ai très vite été tenté de passer par jQuery pour me simplifier la vie lors la manipulation du DOM. En fait, il s’avère que 90% du temps - voire plus - jQuery n’est pas nécessaire, Angular proposant déjà un très large choix de solutions maison (ng-click, ng-hide, ng-show et j’en passe).

Ceci dit, je dois avouer que j’y ai quand même eu recours à 2-3 reprises. Mais avec le degré de compréhension que j’ai maintenant d’Angular, je pense que pour mon prochain projet ça ne sera même plus nécessaire.

Par ailleurs, pour info Angular embarque par défaut jQuery lite.

Les bases de données

Angular utilise des données au format JSON comme structure de bases. C’est très pratique, car il est du coup facile d’exporter par exemple des données Excel vers son app.

Pour Moovies, la première piste que j’ai suivie a été de créer un tableau de données sur Google Spreadsheets, puis de lier l’un et l’autre (oui, Angular permet de faire ça :)). En fin de compte, cela s’est avéré moyennement intéressant, car pour ajouter ou supprimer un film il fallait à chaque fois repasser par Spreadsheets. Ca s’accordait peu avec mon envie de tout centraliser sur une page.

La deuxième piste a été de passer par Firebase, un backend externalisé qui a en plus développé spécifiquement un module pour Angular : AngularFire. L’avantage de cette solution, c’est qu’il n’y presque aucun code à écrire, ni aucune gestion à effectuer côté serveur. Son énorme atout, c’est qu’elle permet de créer du “Three-way Data Binding”, en ajoutant au Binding d’Angular ses propres données backend. Pour faire simple, une modification dans l’app mettra à jour les bases de données et réciproquement. En gros : surpuissant :)

Une question de sécurité

Moovies contient des données qui n’ont rien de sensible, mais je voulais quand même tester à quel point son niveau de sécurité pouvait être fiable.

La première étape a été de créer un système d’authentification, lié à la base de données que j’avais créée sur Firebase. Une fois ce système mis en place, les options d’édition, d’ajout et de suppression de films ne deviennent disponibles que lorsque l’on est connecté.

Le souci, c’est que n’importe quelle personne ayant une connaissance relative d’Angular aurait pu télécharger localement les fichiers puis modifier mon code pour afficher par défaut les options d’administration, gérées via des directives spécifiques.

Heureusement, AngularFire apporte un degré de protection supplémentaire puisqu’il permet de définir des autorisations de lecture et/ou d’écriture selon le fait que l’utilisateur est authentifié ou non. Avec les paramètres que j’ai définis, sans authentification aucune manipulation des données n’est possible.

Pour finir…

En guise de conclusion, je trouve que Moovies, même si elle reste assez simple en tant qu’app, a été une excellente expérience pour découvrir et comprendre la façon dont Angular fonctionne. Il me reste encore beaucoup à apprendre sur le sujet, mais je suis en tout cas pleinement rassuré sur son potentiel. Le fait qu’il supporte également les Web Components est très prometteur pour l’avenir.

De plus, comme cette app a été développée pour un usage personnel, j’ai décidé de laisser tomber le support des navigateurs obsolètes et j’ai pu m’amuser au niveau de mon code, par exemple avec du calc pour certaines propriétés CSS. Et c’est vraiment rafraîchissant de coder uniquement pour le futur, en oubliant les polyfills :)