Keynote NgEurope 2016 with Miško Hevery

Suite à la conférence de NgEurope à Paris du 24 au 26 Octobre 2016 , j'ai commencé à rédiger des compte-rendus pour les confs auxquelles j'ai assisté (au moins celles que j'ai apprécié :) ).

Je vous propose un retour rapide sur la keynote de Miško Hevery fondateur du framework Angular.

La communité d'Angular 2 grandit continuellement. En effet, en Octobre 2016, elle est estimée à +700K users tandis que pour Angular 1 elle reste au niveau de 1.2M users. Cela prouve qu'il y a un vrai mouvement pour adopter la nouvelle Plateforme d'Angular .

Framework to Platform

Angular répond à un besoin global de développer une application cross-plateforme [ web application , mobile application {Ionic} , desktop application {Electron} ].

Angular est constitué de plusieurs types de briques :

• Briques de base :

  • Compile : Une application en Angular contient des composants développés en ES6, Dart ou TypeScript et leur template HTML. Pour que le browser puisse afficher l'application , le code et les templates doivent être transpiler en exécutable Javascript optimisé en utilisant Angular compiler.
  • Change: Synchronisation entre les classes et les formulaires (notion du binding)
  • Render: Cross-plateform render
  • Dependency Injection
  • Decorators: Utiliser la force des décorateurs pour ajouter des comportements aux composants en quelques lignes de code.
  • Zones: le scope de l'utilisation.

• Au-dessus de cette brique , on trouve Material design , Angular Mobile Toolkit et Angular Universal (Server-side Rendering for Angular 2 apps).

• La dernière couche contient Angular CLI, Language Service (demon pour parser les templates) & Augury (outil de debugging pour Angular)

• Les modules annexes disponibles pour developper des applications (i18n, router, Animation).

Performance

L'équipe Angular a beaucoup travaillé sur l'amélioration des performances des différents modules. La performance ne se résume pas dans un seul indicateur car quand on parle de performance ça implique le temps de chargement de la 1ere page, de refresh , changement de route mais aussi la gestion de la mémoire, etc... :

Les tests de performances d'Angular 2 montre qu'il est 5x plus rapide que Angular 1 pour le Rendering .

Des optimisations pour mieux gérer la taille des données qui sont transmises vers le client :

• Ahead of time compilation (AoT) apporte une nouvelle approche pour minimiser la taille des données transmises coté client grace à des phases de build prédéfinies qui évite d'envoyer le compiler , parser etc... coté client et l'optimisation de l'injection des dépendances.
• Lazy loading des composants avec le nouveau module Router.

D'autres optimisations sont faites pour rendre l'exécution de l'application plus rapide notamment l'optimisation du code Javascript généré et le typage du code.

Concernant les applications développées pour le mobile, on peut profiter des Web worker surtout pour optimiser son exécution et surtout prendre l'avantage des multi-cpu.

L'équipe Angular utilise benchpress un framework de bench pour évaluer les performances des différents modules développés.
Ce dernier est disponible comme module de Angular 2 pour les développeurs qui veulent tester aussi les performances de leur applis .

Benchpress se connecte à l'application comme un debugger pour inspecter les éléments , la mémoire utilisée , etc ..

En plus d'Angular, plusieurs d'autres framework ont fait leur apparition pour faciliter les dévloppements des applications :

• Angular CLI et qui permet de créer une squelette de projet en quelques lines de commandes.
• Language Service est un hook qui aide les IDE à implementer l'autocompletion et le parsing du code pour détecter des erreurs.
• Augury un outil qui est développé par la communauté pour debugger les composants Angular.
• Angular Universal qui peut faire tourner tout coté server en AoT et préparer les templates pour les envoyer ensuite coté client