En attendant la sortie imminente de la version stabilisée d'Angular 6, Jennifer, développeuse Full Stack Web & Mobile chez ESENS, nous donne un petit avant-goût des fonctionnalités de la nouvelle version du framework JavaScript de Google.

Dans la version précédente d'Angular 5, nous avions eu : 

• L'intégration de la progressive Web App, avec les Services Workers (Voir l'article d'Andrès dans la newsletter de Mars 2018 !), pour stocker l'application en local afin de pouvoir fonctionner en offline.

• Les build optimizer, qui sont des optimisations très avancées pour que vos builds de production soient le plus légers possible.

• Les pipeable operators, une meilleure syntaxe pour l'import des opérateurs.

• L'Angular Material, ou l'UI, qui est un material design prêt à l'emploi pour l'interface utilisateur, désormais disponible en version stable.

La popularité du framework JavaScript ne cesse de croitre. Notamment depuis l'arrivée d'Angular 2. Sa structure proposant une navigation plus fluide pour le visiteur et sa gestion d'un contenu plus dynamique font qu'Angular fait partie de la nouvelle vague de frameworks JavaScript portée par Google.

Le nouveau paradigme de nommage souhaite que les premières version (1.x) soient nommés AngularJS, et qu'à partir de la V2, on l'appelle tout simplement Angular - suivi du numéro de version.

Voici à présent les nouveautés d'Angular6 ! :

Angular Elements

C'est un nouveau package révolutionnaire qui permet de convertir les composants Angular en Web Components standards et natifs. Le but étant de réutiliser vos composants Angular dans d’autres projets qui tournent sous d’autres technologies (React, Vue.js, JavaScript natif, etc…).

Progressive Web Apps

Déjà amorcée par Angular 5, la génération d’une PWA est désormais intégralement automatisée, y compris la création du manifest.json, qui est un fichier formaté à la manière du JSON, et le seul fichier que chaque extension utilisant les API WebExtension doit contenir. Ce fichier fournit des informations (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. De plus, une fois installées, ces applications peuvent être utilisées sans connexion internet et sont capables de recevoir des push notifications.

(Lire notre article sur les PWA)

RxJS 6

RxJS, pour Reactive Extensions Library for JavaScript, est une réécriture de Reactive-Extensions, prête pour la production. Cette librairie réécrite est censée avoir de meilleures performances, une meilleure modularité, de meilleures piles d'appels déboggeables, tout en restant pour la plupart rétro-compatible, avec quelques changements qui réduisent la surface de l'API.
RxJS se refait une beauté dans la version d'Angular6 en proposant des imports plus simples et mieux organisés.

Tree-shakable providers

Angular 6 propose une nouvelle façon plus simple et plus performante de déclarer les services: Le Tree-shakable provider.
Le Tree Shaking est la capacité de supprimer le code qui n'est pas référencé dans une application, lors de son déploiement. Les Tree-shakable providers permettent à Angular de supprimer les services qui ne sont pas utilisés dans votre application à partir de la sortie finale. Cela réduit considérablement la taille de vos bundles.

Constant-named properties

TypeScript, qui est un sur-ensemble typé de javascript compilant en javascript simple, propose dans sa version 2.7, un support pour la déclaration des propriétés nommées en constante sur les types et les symboles ECMAScript.

Enfin, les versions d'Angular 2, 4, 5 et 6 sont rétro-compatibles !

Pour avoir une vue d'ensemble de l'historique des releases, ainsi que leur date de sortie, c'est par ici!

Article rédigé par Jennifer | Retrouvez tous nos articles sur le Blog ESENS !

Vous êtes à la recherche d'un nouveau challenge ? Rejoignez l'équipe ESENS en postulant à nos offres d'emploi !