Angular 9
Angular

Angular 9 : nouvelle version et améliorations du framework

Nous allons parler d’angular 9 et de ses nouveautés dans cet article. Google est vraiment entrain de se rattraper et a réussi à stabiliser le framework Angular (On se souvient de la catastrophe entre Angular 1 et Angular 2). Une chose est quasiment sûre, c’est qu’avec une nouvelle version tout les 6 mois, Google annonce clairement son intention de faire d’Angular un framework stable et mature.

Nous n’allons pas parler de tout dans cet article mais uniquement ce qui me semble pertinent.

Angular Ivy

Nous allons parler maintenant d’Angular Ivy. Si vous suivez le framework depuis un certain temps, vous avez du en entendre parler. Ivy est le moteur de rendu et de compilation. Ils nous l’avaient annoncé en preview dans les précédentes versions. Si ma mémoire est bonne, ils nous assuraient une comptabilité bonne sur Angular 8, mais il ne s’agissait pas du choix par défaut.

A partir de la version 9, vous allez utiliser ce nouveau moteur de rendu et de compilation ce qui va grandement améliorer vos performances entre autre. Pour rappel avant, on était obligé de faire ceci pour l’activer :

  "angularCompilerOptions": {
    "enableIvy": true
  }

Pour en savoir plus : https://angular.io/guide/ivy#opting-out-of-ivy-in-version-9

i18n avec Ivy

Une des nouveautés majeure est l’ajout de i18n avec le moteur Ivy. Pour rappel i18n permet de gérer l’internationalization de votre application. Passer facilement d’une langue à une autre, si vous voulez plus de détails sur le fonctionnement de i18n : https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/Internationalization

Angular 9 fournit au moteur Ivy de quoi utiliser i18n directement. Vous pouvez même générer vos fichiers de ‘gestion’ d’i18n directement avec Angular CLI :

ng xi18n

Je vous invite à aller voir le détail dans la documentation Angular : https://angular.io/guide/i18n#deployment-for-multiple-locales

Injection de dépendances

Pour l’injection de dépendances des services, il était possible de le définir avec providedIn : root, comme ceci :

@Injectable({
  providedIn: "root"
})
export class MyService {}

Il est maintenant possible de le définir soit avec plateform, soit avec any :

@Injectable({
   providedIn: "any"
 })
 export class MyService {}

Any permet de créer un service qui sera totalement isolé. Il sera alors uniquement possible de l’utiliser dans les enfants.

@Injectable({
   providedIn: "plateform"
 })
 export class MyService {}

Plateform va permettre à votre service d’être utilisable entre plusieurs applications ou Angular elements

Piste d’amélioration

En effet, le gros problème d’Angular sont ses tailles de fichiers assez volumineuses. Si on compare les bundles générés par VueJs ou ReactJs, il n’y a pas photo. Les bundles d’Angular sont beaucoup plus gros. Qui dit bundles plus gros, dit plus de temps de chargement pour vos clients. J’espère qu’ils vont améliorer cela en version 10 (même si Ivy améliore la chose). Vu le nombre d’outils que proposent le framework, on peut les pardonner :).

Si vous voulez commencer votre apprentissage du framework Angular, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/apprendre-angular-rapidement-8-etapes

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *