Accueil Le blog ebiznext
Angular + Europe = ngEurope 2014 (2/4)

Suite de ma série d’articles sur la conférence ngEurope 2014

Jour 1 - après-midi

 

Angular Material (Thomas Burleson & Max Lynch)

Certainement la présentation la plus enthousiasmante de la journée, appuyé par le petit effet “wahou” des exemples qui nous ont été montrés. Angular Material, se veut être un projet pour implémenter sur le web la nouvelle UX de Google introduite avec la dernière version d’Android 5.0 (alias Lolipop), à savoir Material Design. L’équipe souhaite ainsi offrir la même expérience IHM du natif au web. Aujourd’hui on faisait du Angular + Bootstrap (ou autre framework Responsive), demain, on pourra faire du Angular + Material Design, où on aura juste besoin de rajouter les bonnes directives sur notre markup HTML pour avoir un look & feel Android.

Cette nouvelle brique apporte bien sûr du Responsive avec différents layouts et un système de grilles avec un usage intensif des flexbox. Un effort tout particulier semble avoir été produit pour s’assurer que les différentes animations et donc l’expérience utilisateur soit bonne sur du mobile.

Reste maintenant à voir à quelle prix ? Au niveau performances, est-ce que les animations seront vraiment fluides sur tout device, tout navigateur ? enfin la question de la compatibilité navigateur n’a pas été évoquée. Est-ce que cela tournera proprement  sur les seuls ever-green browsers uniquement, ou des fallbacks seront proposés ? A tester donc.

Lien vers les slides :
http://angular-material.slides.com/tburleson/introducing-angular-material-design/#/

Lien vers le site :
https://material.angularjs.org/#/

Dgeni (Pete Bacon Darwin)

 

Cette présentation faisait le focus sur la documentation. Les développeurs aiment avoir de la doc à consulter, mais bien moins quand il s’agit de l’écrire, mais surtout de la mettre à jour. Aujourd’hui pour générer de la doc, on a jsdoc (pour le javascript standard) et ngdoc (pour créer de la doc spécifique Angular). Seulement générer de la doc avec ce dernier devenait difficile, et fortement lié à Angular. C’est pourquoi un nouveau projet est né, dont l’ambition est de pouvoir générer n’importe quel type de doc. Cette documentation se présente comme une mini application Angular. Vous pouvez déjà voir le résultat puisque c’est avec Dgeni que sont générées les documentations des projets suivants :

  • AngularJS

  • Protractor

  • Angular Material

  • Ionic Framework

L’outil fait usage de 3 concepts clés :

  • processors : pour traiter les tags spécifiques à chaque type de doc (ie: les annotations ngdoc)

  • injection de dépendances

  • packages : permet de packager tout l’ensemble processors / services / templates pour fournir un générateur de doc spécifique.

Il est donc possible de personnaliser sa documentation en rajoutant ses propres processors et en créant ses propres templates.

A l’adresse suivante https://github.com/petebacondarwin/dgeni-angular, vous retrouverez donc les packages dgeni pour générer plusieurs type de docs (jsdoc, ngdoc, exemples de code avec tests, etc).

Lien vers les slides :
https://docs.google.com/presentation/d/10ROq66kEpcB8eEgSYxmzUB82Ydt2oS2kaO-sNodEMoY/pub?start=false&loop=false&delayms=3000#slide=id.p
Lien github vers le projet :
https://github.com/angular/dgeni

Protractor and the Testability API  (Julie Ralph & Chirayu Krishnappa)

 

Julie et Chirayu nous présente Protractor le framework de tests utilisé pour exécuter les tests unitaires et “end to end” d’Angular. Ce dernier est passé en version 1.0 en juillet dernier, apportant ainsi une certaine pérennité à l’API. C’est donc l’occasion de revenir sur cet outil qui permet de valider techniquement vos applications Angular. Protractor est une couche supplémentaire qui vient s’ajouter au dessus de l’API Webdriver pour offrir un DSL basé sur la syntaxe Jasmine et dont le gros avantage est qu’il est “Angular-aware”. C’est à dire que vos tests vont pouvoir s’exécuter en prenant en compte le cycle d’exécution et autre boucles $digest. De plus vous pouvez requêter des éléments de l’interface directement via des notions Angular comme dans cet exemple avec le model :

element(by.model(‘todoText’)).sendKeys(‘write a protractor test’);

Toutes les requêtes sont désormais basées sur des “promises” et sont asynchrones. Angular fournit une nouvelle API de test (via angular.getTestability(doc.body)) qui permet de tester des mécanismes internes au framework comme l’inspection des bindings, mais permet aussi d’autre choses comme désactiver les animations pour accélérer l’exécution des tests. Enfin, on nous présente la fonction whenStable(callback) qui permet d’exécuter du code en ayant la certitude que toutes les opérations d’Angular (boucle $digest et autres opérations asynchrones) sont réellement terminé. Plus besoin d’utiliser des timeout.

On nous assure aussi qu’il est tout à fait possible débugger une application en production car les mécanismes qui collectent les infos de débuggage sont activés par défaut, que l’impact sur les performances est minime car ces opérations sont différés, mais qu’on peut toujours désactiver via la commande vu dans Angular 1.3 $compileProvider.debugInfoEnabled(false)

On termine sur les prochaines évolutions de l’outil :

  • amélioration l’expérience de debugging

  • fournir un moyen de déterminer les problèmes de latence

  • la création d’un proxy webdriver “SyncDriver

  • et plus d’exemples et tutorials

Liens vers le projet
http://angular.github.io/protractor/#/

https://github.com/angular/protractor

AngularJS new Router (Rob Eisenberg)

 

Rob nous explique qu’initialement le nouveau moteur de routage n’était destiné qu’à Angular 2.0, mais finalement il sera backporté en Angular 1.3. La présentation se focalise les nouvelles fonctionnalités de ce nouveau routeur. En vrac on peut noter :

  • définition de routes par convention

  • l’ajout d’un objet NavigationModel contenant toutes les routes dont l’utilité la plus évidente est la génération d’un fil d’ariane ou menu de navigation

  • La mise à jour automatique des titres des pages

  • Le chargement dynamique (et implique le chargement tardif des contrôleurs uniquement quand la route est accédée)

  • La notion de Child Apps qui permet de construire plus facilement de grosses applications modulaires, grâce à :

    • La possibilité de subdiviser la définition des routes (notion de sous-routeurs ou child routeurs)

    • la réutilisabilité des composants et de leurs états

    • l’introduction de contrôleurs parallèles (ex: une route => 2 contrôleurs sur une même vue)

  • Une meilleure gestion d’activation des vues avec :

    • la possibilité de s’insérer dans le cyle de vie de la nav via des hooks sur les contrôleurs permettant d’insérer de la logique supplémentaire (ex: afficher un message au changement d’écran si les données n’ont pas été sauvegardées)

    • Tous les opérations / fonctions retournent des promesses (gestions asynchrones de bout en bout)

    • L’introduction de Naviation Commands pour écrire sa propre logique de routage au-dessus du router. (ex: implémenter des redirect)

 

On nous montre ensuite, le nouveau pipeline de navigation en expliquant que tout est personnalisable selon nos besoins.

 Tout cela donne très envie, mais là encore pas de date sortie annoncée.

ui-bootstrap (Pawel Kozlowski)

 

L’auteur d’ui-bootstrap nous raconte son retour d’expérience quand il a voulu proposer une version “angularisé” des plugins jquery de la bibliothèque responsive Bootstrap. Après bien des péripéphies et moultes pull-request sur github, ce dernier nous livre ses propositions ;

  1. bien séparer le markup HTML du code JS. Ce dernier nous montre en effet un contre-exemple de ce qui est souvent réalisé avec jquery-ui (html noyé dans le code JS). Du coup avec Angular, c’est bien plus simple et il faut user et abuser des templates et templateUrl dans nos directives.

  2. Eviter d’écrire une énorme directive qui va essayer de prendre en compte tous les cas possibles. Généralement çà ne marche pas, les pulls-requests s’accumulent jusqu’au point où vous allez les refuser car vous ne souhaitez pas gérer telle exception. Du coup, cela devient vite un point négatif pour le projet car l’auteur de la PR devra soit internaliser une version custom de votre lib, soit la forker. La solution est donc de proposer des directives plus petites qui font moins choses mais facilement composables, et qui permettent l’extensibilité via les contrôleurs.

  3. Enfin parfois, les directives ne sont pas la bonne abstraction. L’auteur nous cite l’exemple de la directive modal (qui n’a jamais chercher dans google “modal directive” ??) qui finalement se retrouvera dans un service où on manipulera du DOM. Et puis cela va à l’encontre des bonnes pratiques Angular, mais parfois il faut savoir quand briser enfreindre les règles.

Cette présentation était vraiment très instructives, et m’a conforté dans certains choix que j’ai moi-même dû faire sur du code Angular.

 

Angular from scratch (Matthieu Lux)

Mathieu Lux nous propose une session de live-coding où il va tenter de réécrire les fondements du framework AngularJS en seulement 40 min. Il commence par implémenter les data-binding, puis s’attaquera à la compilation et exécution de directives avec toutes les notions qui vont bien ($watch, $digest, $parse, etc). L’exercice fut concluant et permet à ceux qui n’aurait pas encore mis le nez dans le code source d’Angular d’appréhender aisément les grands principes de fonctionnement du framework. Bien qu’intéressant, ce fut un peu une redite pour moi car j’avais déjà eu l’occasion de lire un billet de blog de l’auteur sur le même sujet que je vous met ici.

http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html

Lien vers le projet:
https://github.com/Swiip/angular-from-scratch

 

Responsive Takes Flight : Building the First Responsive Airline Website (Oliver Dore)
Avec cette présentation, nous avons eu le droit à un superbe retour d’expérience sur la refonte du site de réservation de vols en ligne de Virgin America. Leur but était de se différencier des autres compagnies aériennes proposant le même service et dont les sites avouons-le se ressemblent tous les uns les autres. Ainsi leur 3 critères d’améliorations étaient :

  • Augmenter le taux de conversion (nombre d’achats / nombre de visites)

  • Proposer un design responsive et donc une expérience utilisateur multi-devices

  • Augmenter la visibilité de la marque sur le web

Pour y arriver, ils ont monté une équipe agile et créé leur POC grâce à Angular. Leur choix s’est porté dessus car ils avaient besoin d’une IHM stateless, et parce qu’il leur offrait une bonne séparation des responsabilité (vues / logique métier), ainsi qu’une bonne productivité.

La problématique Responsive n’est pas en reste non plus et il nous explique qu’il ont réussi à développer des composants grâce aux méthodologie BEM & SMACS. Je ne connaissais pas ces accronymes et après les avoir taper dans google, cela a l’air fort intéressant. Pour des raisons de performance, ils ont du par exemple créer un service WindowService qui leur permettait de mutualiser tout le code leur permettant de répondre à la problèmatique responsive hors CSS. Il donne notamment l’exemple de liens en bas de page qui au lieu d’être transformé en listes de “ul li”, sera en réalité un template html uniquement chargé en mode mobile et qui s’affichera par dessus comme un nouvel écran. Ce sont toutes ces petites astuces qui permettent de rendre l’expérience Responsive.

Pour conclure, il nous fait part de son envie d’intégrer au plus vite le nouveau module d’accessibilité ngAria pour permettre au plus grand nombre d’utiliser leur site.

Bref ce talk fut vraiment très rafraîchissant, et un bel exemple de projet Angular Responsive en production. Lorque la vidéo sera disponible sur la chaine Youtube d’ngEurope je vous invite vivement à aller la regarder.

Lien vers les slides
http://t.co/HjLnP59Fa2http://fr.slideshare.net/workandco/vx-ng-europe

Site en question
https://www.virginamerica.com/

Un lien vers un résultat Google de BEM & SMACS
http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/

L’après-midi se terminera par une série de lightning talks, où l’on verra défiler des petits projets intéressants pour rendre la vie développeurs Angular meilleurs.