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

3e partie de ma suite d’articles sur la conférence ngEurope 2014

 

Jour 2 - matin

 

Keynote : AtScript

 

La keynote de ce 2e jour commence fort en nous présentant AtScript, le super-ensemble Javascript de Google construit, le but avoué étant de ne pas proposer un é-nième langage pour le web (Dart ??) mais bien des évolutions à celui-ci comme Microsoft a commencé à le faire avec Typescript. La fin de la keynote sera d’ailleurs très claire à ce sujet, aujourd’hui nous en sommes à la version 5 d’ECMAScript, et la version 6 est en cours de finalisation. Cette version 6, apporte un nombre important de modifications au langage, dont les classes et la définition de modules. Typescript lui, apportera les types, et enfin AtScript viendra rajouter les annotations et l’introspection (via la définition de métadonnées grâce aux premières).

Cela permettra de rendre bien plus expressif le langage et permettra d’implémenter des abstractions et des patterns bien plus facilement et sans erreurs grâce à ce nouvel ensemble. La vérification des types au runtime puis à l’écriture dans l’IDE apporteront enfin l’aide précieuse que les développeurs attendaient, et qui était avouons l’une des plus grosse faiblesse du langage. Le tout fera l’objet d’une proposition pour être adopté plus tard en standard dans une nouvelle version d’ECMAScript. Ne croyez pas qu’il va falloir attendre bien longtemps avant de le voir arriver, car Angular 2.0 sera écrit avec et générera les sources en ECMAscript 5 et Dart grâce au compilateur Traceur qui est déjà le compilateur qui permet de transformer du code ECMAScript 6 en 5, en attendant son implémentation native dans les navigateurs. Cela signifie que nous aussi développeurs pouvons commencer à écrire en AtScript et le voir tourner sur nos navigateurs.

Je vous laisse regarder les slides pour que vous puissiez mieux appréhender les nouveautés apportés, et les différences en terme de code que cela apporte.

Lien vers la présentation:

https://docs.google.com/presentation/d/1hr2IM-8G-0RzpB-WY8pLHvxqNggKPzUO0KvEv1IKPws/edit#slide=id.p

 

Lien vers la spec AtScript:

https://docs.google.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit#heading=h.c5wfaadh5aor

 

Document sur Atscript +Traceur

https://docs.google.com/document/d/1uhs-a41dp2z0NLs-QiXYY-rqLGhgjmTf4iwBad2myzY/edit#heading=h.qbaubqkoiqds

 

Angular 2.0 Core

 

La conférence qui suit enchaîne direct sur ce qui nous intéresse tous l’avenir d’Angular. Autant dire que cette présentation ne laissera personne indifférent et beaucoup sera écrit dessus dans les jours, semaines qui viennent. Mais avant toute chose, l’équipe de Google tient à nous  rappeler que tout dans la spec n’est encore pas arrêté et qu’il reste encore pas mal de choses en fin de mûrissement. Cependant ce qu’ils ont choisi de nous présenter ne semble pas être amené à changer. Dans les faits, Angular 2.0 se résume au dernier slide de sa présentation, à savoir :

Une nouvelle syntaxe sur le markup HTML pour la définition d’évènements et l’affectation de propriétés.

La suppression des controllers dont la logique sera dorénavant définit dans des directives. Ces directives justement voient leur définition (DDO) (allambiquée et à rallonge) totalement revues pour laisser la place à 3 classes de directives :

  • DecoratorDirective, comme les ngClass, ngShow

  • TemplateDirective, comme ngRepeat

  • ComponentDirective, comme celles qui décrivent des composants (template + logique de fonctionnement)

La définition nous est présentée avec la nouvelle syntaxe AtScript et l’utilisation d’annotations pour définir le type de Directive créé, ainsi que la définition des dépendances à d’autres directives éventuellement.

Avec la fin des controllers vient la fin des $scope, et avec eux ce que certains auront appelé le $scope hell à cause de l’imbrication  des données dans des $scope enfants. Le rôle du $scope est délégué au contexte d’exécution des directives.

La fonction angular.module disparait aussi, remplacée par la gestion de module natif à ECMAScript 6. Enfin suite à plusieurs benchmarks pour améliorer les performances du framework l’équipe d’Angular a décidé de supprimer le wrapper jqLite. Dorénavant il faudra  utiliser directement les implémentations natives des navigateurs, mais rien ne vous empêchera d’inclure jquery pour faire le boulot.

Toujours dans un effort de fournir un framework véloce, l’équipe d’Angular compte proposer un nouvel outil de profiling “Angular-aware” nommé Web Tracing Framework. Le but est de vous indiquer à quels endroits se situent les goulets d’étranglement, ce qui était difficile à identifier avec l’outil de profiling de Chrome.

 

Au final, on se rend bien compte qu’avec tous ces changements Angular 2.0 ne sera pas compatible avec Angular 1.3. Ce n’est finalement pas étonnant, quand on sait qu’Angular 2.0 est le fruit des réflexions sur AngularDart, qu’un nouveau langage de script a été créé pour s’en rapprocher et que la construction d’une application devient de plus en plus de la composition de composants web (les fameux web components), il faut bien reconnaître que Angular 2.0 sera probablement LE framework JS client-side le plus à la pointe des technos web disponibles à sa sortie. Sa date de sortie justement, n’est pas annoncée non plus, mais ce n’est clairement pas pour tout de suite. A mon avis ce ne sera pas avant début 2016, donc d’ici là on codera encore longtemps en 1.x. Pendant ce temps-là, on ne verra pas grand chose arriver en nouveautés puisque toute l’équipe d’Angular (qui n’a jamais été aussi nombreuse depuis la V1.0 au dire de Brad Green) a entièrement basculé sur le dévelopement de la version 2.0. Tout au plus, aurons-nous droit au nouveau moteur d’Angular 2.0 et pourrons jouer bientôt avec AngularMaterial.

Lien vers la présentation :

https://docs.google.com/presentation/d/1XQP0_NTzCUcFweauLlkZpbbhNVYbYy156oD–KLmXsk/preview?sle=true#slide=id.p

ES6 in Angular 2.0 (Erik Arvidsson & Vojta Jina)

 

Erik & Vojta nous présentent les bénéfices en termes de code de ce qu’apportera ECMAScript 6, et qu’on retrouvera notamment dans Angular 2.0.

Ils commencent par la définition des classes qui réduira le nombre de ligne de code pour implémenter cette notion actuellement.

Le support de la définition des modules. Aujourd’hui 2 solutions existent, AMD pour le web et CommonJS (pour le serveur avec NodeJS). Demain cette notion de module sera unifiée et répondra indifféremment aux 2 contextes. Cela permettra d’avoir des dépendances claires, qu’on pourra charger en asynchrone sans crainte d’avoir des erreurs de dépendances cycliques ou autres.

L’introduction de l’arrow function pour remplacer l’utilisation de fn.bind(this) (quand on fait des appels de callback notamment) et enfin l’ajout des paramètres par défaut.

Un dernier focus sera mis sur Traceur, le “transpileur” qui permet actuellement de transformer du code écrit en ECMAScript 6 en 5 pour qu’il soit exécutable sur les navigateurs d’aujourd’hui. Son fonctionnement nous a été brièvement expliqué et on retiendra surtout la possibilité d’étendre celui-ci pour parser d’autres langages. C’est d’ailleurs grâce à lui que le “transpilage“ de AtScript sera réalisé.

Lien vers le tableau de compatibilité ES6

http://kangax.github.io/compat-table/es6/

Lien vers le projet traceur

https://github.com/google/traceur-compiler

 

Restangular 2.0 : The future and beyond

 

Restangular est un petite bibliothèque créée pour améliorer le requêtage d’API REST proposé actuellement par le service $resource d’Angular. L’auteur estime qu’il manque encore plusieurs fonctionnalités dans sa version 1.0 et nous présente donc celles à venir. Cela passe par le refactoring de la lib en la création de plusieurs fichiers pour améliorer la séparation des responsabilités, et faciliter son évolution. Parmi les nouveautés en cours d’élaboration, on retrouve :

  • l’extension de modèle pour rajouter des fonctions métiers à la volée une fois la ressource chargée

  • l’ajout d’intercepteurs avant l’envoie d’une requête ou à la réception de sa réponse

  • la gestion de sous-ressources REST

  • de la customisation de config et services

  • S’abstraire d’Angular pour avoir être intégré par d’autres frameworks / lib

Au final, j’avais l’impression de me retrouver devant un mini-hibernate pour resources REST, mais dans le bon sens du terme. A suivre donc.

Lien vers la présentation:

http://mgonto.github.io/restangular20-ngeurope-talk/

Lien vers le projet

https://github.com/mgonto/restangular/tree/2.0-wip

 

Angular Animations:

Cette 2e journée fut aussi marquée par un certains nombre de talks tournant autour des animations web. N’étant pas un spécialiste du sujet, mes remarques seront donc assez succintes et peut-être imprécises.

Famous Angular (Zack Brown)

 

Cette présentation sur le sujet de l’animation web est celle qui m’aura le plus marqué. Elle commence par un postulat : les animations sur devices mobiles sont légion mais on ne les retrouve que sur des applications natives ! Pourquoi le web mobile est-il tellement à la traîne sur ce sujet ? Les réponses sont assez simples mais pas facile à résoudre. La création d’animations via les CSS est difficile pour des choses un peu complexes, et surtout le CSS n’est qu’un langage déclaratif peu adapté à la description d’animations (en même temps CSS n’a jamais été créé pour adresser ce genre de problématique au départ). Enfin si on décide de réaliser ses animations en Javascript, nous allons nous heurter à de gros problèmes de performances surtout sur les mobiles.

La solution proposé par Famo.us est de fournir un nouveau moteur de rendu entièrement basé sur  le modèle des moteurs 3D. Et pour permettre une plus grande intégration avec les standards du web, les auteurs du framework ont créé le projet Famo.us Angular qui fourni toute une série de directives pour décrire ses propres animations que l’on peut personnaliser ou enrichir en javascript sans avoir la limitation du CSS. Dans les exemples de code, on nous montre ce qui ressemble à une définition d’une CSS avec une media-query mais dont l’un des attributs du sélecteur est valorisé sous la forme d’une fonction javascript. Il nous suffit ensuite de déclarer cette  “classe CSS” dans notre markup HTML pour voir s’exécuter l’animation. Cette “magie” est réalisée grâce à Sheet une lib Angular créée spécialement pour associer des fonctions Javascript à des éléments du DOM en mode définition déclarative (comme en CSS donc).

Le résultat est en tout cas assez bluffant, reste à voir s’il est si facile de créer ses propres animations, mais çà donne envie d’essayer.

A l’avenir, le projet sera réécrit en AtScript pour s’intégrer à Angular 2 comme un module de premier rang pour le rendu IHM. Des optimisations sont en cours de réalisation et un portable du moteur sur les API WebGL est prévu.

 

Lien vers la présentation:

http://thomasstreet.com/ngeurope/

Lien vers le projet Famo.us Angular

https://github.com/Famous/famous-angular

Lien vers le projet Sheet

https://github.com/zackbrown/sheets

 

Yet another way to animate in Angular (Douglas Duteil)

Douglas Duteil nous raconte sont retour d’expérience pour implémenter des animations dans un projet Angular avant l’arrivé et sa prise de connaissance du module ngAnimate. Cela passe par une lecture de tous les documents de spec du W3C, à l’expérimentation de codes réel. Puis quand il maîtrisa enfin le sujet, il s’attatelera à la création d’un module Angular pour créer plus facilement ses même animations. Une petite démo de ses travaux nous est montré en fin de slides.

Lien vers la présentation

https://docs.google.com/presentation/d/1W-0qR2LDmdeAv_3uGC1w6HyB-8Zc6ANwx1WM5wJrsx0/edit

 

Animations (sequencer, web animations)

 

Maias Niemela, nous raconte la genèse du module ngAnimate, pour ensuite nous parler de toutes les nouveautés apportées dans la version 1.3:

  • beaucoup de correctifs

  • beaucoup d’optimisations

  • des fonctions entièrement basé sur des promesses $q pour permettre des mise à jours dans le DOM dans le scope Angular.

Enfin, il nous montre comment la problématique d’enchaîner plusieurs animations les unes à la suite des autres sera possible grâce au module ngAnimateLayout (ng-animate-sequence).