Retours sur la conférence ng-europe 2016

À sa sortie en 2012 (version 1.0), AngularJS est applaudi par la communauté. Il est devenu en peu de temps le framework front le plus populaire et quasiment standard jusqu’à l’arrivée de React.

Trois ans plus tard arrive la bêta d’Angular 2. L’écosystème Web est bien plus mature et la nouvelle version du framework n’a plus grand chose à voir avec Angular 1. Google décide de ne pas assurer de rétro-compatibilité : l’équipe de développement explique son choix par la trop grande divergence de philosophie entre les deux versions du framework.

Cette annonce passe plutôt mal dans la communauté technique et l’arrivée d’un concurrent solide, React, oblige Google à revenir sur sa position. Après de nombreuses Releases Candidates, Angular 2 débarque le 14 Septembre 2016 (version 1.0) en position de challenger.

Cette édition 2016 de ng-europe, tenue à Paris les 24 et 25 octobre, a été l’occasion de présenter en détail la version 2.0 du framework ainsi que les différentes technologies gravitant autour. Toutes les vidéos des conférences sont disponibles sur la chaine Youtube de ng-europe.

Déroulement

La conférence s’étalait sur deux journées, débutant par une keynote de Miško Hevery (co-fondateur d’Angular). Les talks étaient tous d’une durée fixe (30 min dont 5-10 minutes de questions) et une pause de 45 minutes séparait deux présentations successives. Alors que 30 minutes suffisaient amplement pour certaines présentations, pour d’autres plus techniques cela paraissait un peu juste. Les pauses étaient en contrepartie un peu longues.

Concernant le fond

La keynote fut particulièrement intéressante pour ceux qui ne connaissaient pas Angular 2. On a eu droit à une présentation des différentes briques du framework (compilation, bindings, rendu, décorateurs, zones) mais surtout à l’explication des atouts majeurs par rapport à Angular 1 (performance, bindings, taille, lazy loading…). Beaucoup de sujets ont été abordés au cours de ces deux journées. Je vais vous faire des retours sur les présentations qui m’ont le plus intéressées.

TypeScript

Il est difficile de parler d’Angular 2 sans parler de Typescript. Pour rappel il s’agit d’un sur-ensemble de Javascript qui introduit des notions très intéressantes pour le développement : typage statique, interfaces, décorateurs… Ces fonctionnalités permettent d’avoir un code plus lisible, une auto-complétion plus poussée et des erreurs avant le runtime.

Daniel Rosenwasser nous a présenté de façon très pédagogique comment migrer un fichier d’exemple de Javascript vers Typescript, le tout en live coding.

RxJS

RxJS était l’autre gros sujet technique. Qu’est-ce que la programmation réactive ? Beaucoup de définitions sont erronées sur Internet. Pour faire simple, il s’agit de programmer avec un flot de données asynchrones (on parle aussi de programmation événementielle). Le sujet était tellement vaste que l’on a eu droit à trois présentations :

• La première, par Rob Wolmard, présentait les RxJs et son utilisation dans un projet Angular2.
• La seconde, par Tero Parviainen, était une présentation d’un projet réalisé à l’aide de la bibliothèque. Excellente présentation aussi bien sur le fond que sur la forme.
• La dernière, par André Saltz, était un live coding dont le but était simple : expliquer les concepts de RxJS en partant d’un code Javascript natif.

Server side rendering (Angular Universal)

Depuis quelques temps on parle beaucoup de Single Page Applications (SPA) mais il est important de garder à l’esprit qu’elles ne répondent pas à tous les besoins. Des exemples où une SPA ne convient pas ?

• Nécessité d’avoir de bonnes performances sur mobile, notamment au premier chargement de la page sur un réseau lent
• Avoir votre site indexé correctement via les SEO (Seach Engine Optimization)

Le talk de Wassim Chegham présente la réponse à ces problématiques côté Angular 2 : Angular Universal. Cette librairie permet de construire une application côté serveur en manipulant différents Renderers: le client front manipulera le navigateur alors que le client back manipulera son propre renderer (il ne peut pas accéder au navigateur…).

Sécurité et tests

Le talk de Vikram Subramanian nous a présenté comment réaliser des tests unitaires avec Angular2. Le but du framework est de proposer une syntaxe simple, efficace, permettant de tester à la fois des composants, des services, des routes ou encore des composants imbriqués. Tous les cas de test n’ont pas été abordés mais Vikram nous a néanmoins montré comment tester des actions asynchrones à l’aide de fakeAsync et tick Versus Async.