Angular 4.0
La version finale d’Angular 4.0 est disponible ! Dans cet article, nous aborderons les sujets suivants :
- Où est passé Angular 3.0 ?
- Quelles sont les nouveautés de cette version ?
- Migration d’Angular 2.0 vers Angular 4.0
- La politique de mise à jour du framework
Et Angular 3.0 alors ?
L’équipe Angular n’a pas décidé de sauter une version majeure seulement par plaisir. Cette décision peut paraître étrange aux premiers abords mais elle est en réalité plutôt cohérente.
Le framework angular est découpé en plusieurs paquets : @angular/core, @angular/router, @angular/common, etc. Avec Angular 2.0, tous ces paquets étaient alignés sur la même version… ou presque :
@angular/common: 2.4.0 @angular/core: 2.4.0 @angular/compiler: 2.4.0 @angular/forms: 2.4.0 @angular/http: 2.4.0 … @angular/router: 3.4.0 ????
Mettre à jour Angular vers une version 3.0 impliquait la montée en version de chacun de ces paquets, y compris @angular/router. Ne souhaitant pas faire persister ce décalage entre les différents paquets du framework, l’équipe Angular a décidé de sauter une version majeure afin de réaligner tous les paquets sur la même version (4.0) pour éviter toute confusion.
Les nouveautés
Le 23 Mars 2017, l’équipe d’Angular a annoncé seulement les principales nouveautés dans son communiqué. Il existe cependant d’autres changements un peu plus “camouflés” liés à cette nouvelle version comme par exemple le nouveau pipe titlecase, la création simplifiée d’URLSearchParams… Vous pouvez retrouver toutes ces nouveautés sur le ChangeLog d’Angular.
Plus petit, plus rapide
Le code généré par une compilation AOT peut être réduit jusqu’à 60% pour les applications complexes, améliorant également leurs rapidités. Ce gain important a été confirmé par plusieurs développeurs ayant migrés vers la version 4.0.
Module animation
Dans la version 2.0 d’Angular, les fonctionnalités liées aux animations étaient accessibles via le paquet @angular/core. Ces animations possèdent désormais leur propre paquet : @angular/animations. Cette séparation permet d’obtenir un code généré réduit si vous n’utilisez pas les animations dans votre application.
Amélioration des directives ngIf et ngFor
ngIf supporte désormais la syntaxe if/else :
Angular 2.0 :
<user-profile *ngIf=”user” [user]=”user”></user-profile> <spinner *ngIf=”!user” =”Loading ...”></spinner>
Angular 4.0 :
<user-profile *ngIf=”user; else loading” [user]=”user”></user-profile> <ng-template #loading> <spinner =”Loading ...”></spinner> </ng-template>
Cette fonctionnalité ne permet pas de réduire la taille du code. En revanche, j’y trouve personnellement un gain en lisibilité et en compréhension du code.
Il est également possible de créer une variable locale, notamment avec la syntaxe as :
<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user"></user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>
Typescript 2.1/2.2
Angular 4.0 est désormais compatible avec Typescript 2.1 et 2.2. En plus d’avoir une meilleure vérification des types Typescript, ces versions augmentent la rapidité de ngc, le compilateur d’Angular.
Angular Universal
Le projet Angular Universal permet d’exécuter Angular sur un serveur. Ce projet a initialement été créé par la communauté, et fait maintenant parti du framework. Les fonctionnalités d’Angular Universal sont disponibles dans le paquet @angular/platform-server.
Source Map pour les templates
Si une erreur est causée par un template, Angular génère désormais un source map lié à ce template.
Migrer vers Angular 4.0
Ne paniquez pas ! Pour une grande majorité des applications, la migration se déroule parfaitement bien, et aucun changement n’est à prévoir dans votre code.
Si vous utilisez les animations Angular dans votre application, vous devrez simplement importer le module BrowserAnimationsModule du paquet @angular/platform-browser/animations dans votre module principal.
Mise à jour :
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
L’équipe Angular travaille également sur un guide de migration interactif permettant d’accompagner les développeurs dans leurs mises à jour : angular-update-guide.
Et pour la suite ?
En Décembre 2016, l’équipe Angular a annoncé sa volonté de régulièrement mettre à jour Angular grâce à un planning rigoureux :
Une version patch par semaine (Correction de bugs)
Une version mineure par mois (Ajout de fonctionnalités)
Une version majeure tous les 6 mois (Mise à jour de l’écosystème, breaking changes).
Ces mises à jours sont basées sur la norme semver, un système de versioning fiable utilisé par exemple par Node.js.
Les auteurs du framework veulent être complètement transparents et prévisibles quant à l’évolution d’Angular. Les versions 5.0, 6.0 et 7.0 sont d’ailleurs respectivement annoncées pour Septembre 2017, Mars 2018 et Septembre 2018.
Quoi ??? Des migrations tous les 6 mois ?!
Avant tout, sachez que l’équipe Angular travaille à ce que ces migrations majeures soient le moins douloureuses possible pour les développeurs.
Angular possède un écosystème important et le framework doit pouvoir évoluer avec ses dépendances.
Par exemple, lorsque Typescript propose une nouvelle version majeure (comprenant des breaking changes), Angular doit être en mesure d’utiliser cette version.
Ces mises à jour ne ressembleront en rien à la rupture de compatibilité que nous avons pu connaître entre Angular 1.0 (aka AngularJS) et Angular 2.0. À ce sujet, le terme “Angular 2” est désormais périmé. Aujourd’hui nous devons seulement parler d’”Angular”, et éventuellement préciser la version avec le suffixe “X.0” ou “version X”.
Pour conclure, cette nouvelle version marque le début d’une série de mises à jour régulières qui ne sont, d’après l’équipe Angular, pas à craindre !
