Apprendre Angular en vidéos, ça te tente?
Angular 5 : vous avez dit performances?

Angular 5 : vous avez dit performances?

On se retrouve pour parler d’une grande nouvelle dans la communauté Angular, la sortie d’une nouvelle version majeure : la 5.0.0.
Comme vous vous en doutez, cette version majeure va apporter des nouvelles fonctionnalités ainsi que des corrections de bugs.

Bon allez c’est parti, on commence toute de suite par un changement lié aux performances :

Build Optimizer

Le Build Optimizer est un outil que Google a intégré par défault dans Angular CLI. Cet outil permet de faire des bundles plus petits tout en gardant une sémantique compréhensible.

Bon, comme son nom l’indique le Build Optimizer va optimiser une bonne partie de votre code compilé, notamment par :

  • Marquer des parties de votre application comme “pure”
  • Supprimer des parties qui n’étaient pas utiles à votre application

Le Build Optimizer va aussi supprimer des decorators dans l’application.

Tout ces changements permettent de diminuer fortement la taille des bundles, et d’augmenter la vitesse de boot de l’application pour les utilisateurs.

 

Angular Universal State Transfer API et DOM Support

Dans cette version, deux modules ont été ajoutés, ServerTransferStateModule et BrowserTransferStateModule. Ces modules permettent de ne pas régénérer  des informations venues du serveur.

Pour résumer, lorsque vous allez faire une requête au serveur pour récupérer vos données et que vous voulez actualiser vos données, vous n’avez plus besoin de refaire une requête pour actualiser les données du serveur.

L’objectif est d’améliorer le server side rendering (SSR) des applications Angular. Nous aurons l’occasion d’en parler plus en détail et plus limpidement par la suite.

Améliorations à la compilation

Ils ont amélioré le compilateur Angular pour qu’il puisse supporter la compilation au niveau de l’incrémentation. Ce changement va améliorer la compilation  de la vitesse des rebuilds, surtout en production et avec AOT.

TypeScript

Au niveau TypeScript, la version 2.3 va être disponible en même temps que la version 5 d’Angular. Ce qui implique l’utilisation de la compilation pipeline TypeScript. Croyer moi, ça va vous changer la vie.

Pour utiliser la compilation pipeline TypeScript, il faut utiliser la commande ng server avec le flag AOT

ng serve --aot

Les gains sont juste hallucinants. En buildant de cette façon, votre temps de build va passer de ~50 45 secondes à ~2 3 secondes.. Je vous laisse imaginer le temps que vous allez gagner sur une journée de dev. Ce type de compilation se fera automatiquement dans la prochaine release d’Angular CLI.

 

Whitespace

Comme dit précédemment, la suppression et l’optimisation des whitespaces va se faire automatiquement. Il est quand même possible de garder l’ancienne méthode de compilation.

Il suffira d’ajouter la propriété preserveWhitespaces dans le décorateur du composant où vous voulez l’appliquer :

 

@Component({
    templateUrl: 'about.component.html',
    preserveWhitespaces: false
}
    export class AboutComponent { }

Il est aussi possible de mettre cette propriété dans le fichier tsconfig.json pour qu’il puisse s’appliquer à toute votre application :

{
    "extends": "../tsconfig.json",
        "compilerOptions": {
        "outDir": "../out-tsc/app",
            "baseUrl": "./",
                "module": "es2015",
                    "types": []
    },
    "angularCompilerOptions": {
        "preserveWhitespaces": false
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

 

Internationalized Number, Date et Currency Pipes

Oui, ils l’ont fait et ça fait très plaisir. C’est fini l’utilisation des polyfills i18n pour pouvoir utiliser les dates, les numbers et les currency pipes sur tous les navigateurs.

Dans la version 5.0.0, Google utilise directement l’API i18n. La langue par défaut est en-US mais elle est facilement changeable.

Il est toujours possible d’utiliser les anciens pipes avec DepreceatedI18NPipesModule :

import { NgModule } from '@angular/core';
import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule,
        // import deprecated module after
        DeprecatedI18NPipesModule
    ]
})
export class AppModule { }

 

Remplacer ReflectiveInjector par StaticInjector

Ils ont remplacé ReflectiveInjector avec StaticInjector ce qui permet la suppression de beaucoup de polyfills. Cela réduit de beaucoup la taille de l’application.

Avant

ReflectiveInjector.resolveAndCreate(providers);

Après

Injector.create(providers);

 

Améliorations de la vitesse de ngZone

La création des zones est plus rapide par défaut. Il est aussi possible de bypass des zones pour augmenter encore plus les performances de votre application.

Pour bypass les zones, il suffit de bootstrapper votre application avec noop dans ngZone :

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

 

exportAs

Avant, il n’était pas possible de donner plusieurs noms à vos composants ou à vos directives. Maintenant, c’est possible. Je vais être honnête avec vous je ne comprend pas trop l’intérêt. J’ai fait des recherches pour vous donner la plus-value de cette ajout.

L’intérêt principal est de pouvoir migrer plus facilement vos composants ou directives. Par exemple si les préfixes changent, vous pouvez migrer facilement tout vos composants. Cela permet de maintenir votre code si jamais le noms changent.

Vous pourrez ainsi appeler vos composants avec l’ancien nom (et donc pas de faire de modifications partout) et avec votre nouveau nom pour vos prochains développements.

Un exemple d’utilisation : 

@Component({
    moduleId: module.id,
    selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
    exportAs: 'matButton, matAnchor',
    .
    .
    .
}

 

HttpClient

Déjà dans la version 4.3, ils avaient transféré le HttpClient de @angular/http à @angular/common en le rendant moins volumineux, plus puissant et plus facile d’utilisation.

Dans cette nouvelle version, ils ont encore update le HttpClient. Il faut remplacer le module HttpModule par HttpClientModule depuis @angular/common/htpp dans chacun des modules. Il également faut injecter le service HttpClient et supprimer les map(res => res.json()) qui ne servent plus à rien.

 

Nouveau Router Lifecycle Events

Ils ont ajouté un nouveau lifecycle events pour le router. Il va permettre de traquer le cycle du router depuis le début des guards jusqu’à leurs fins.

Les events sont dans l’ordre : GuardCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd,Resolve Start, ResolveEnd, ActivationEnd, ChildActivationEnd.

Un exemple d’utilisation :

class MyComponent {
    constructor(public router: Router, spinner: Spinner) {
        router.events.subscribe(e => {
            if (e instanceof ChildActivationStart) {
                spinner.start(e.route);
            } else if (e instanceof ChildActivationEnd) {
                spinner.end(e.route);
            }
        });
    }
}

 

Résumé

Pour faire très synthétique, beaucoup d’améliorations au niveau des performances, surtout au niveau de la compilation.

Voilà, vous en savez un peu plus sur la nouvelle mise à jour majeure d’Angular. Je ne suis pas rentré dans le détail mais il y a également des mises à jour importantes sur :

  • RxJS 5.5
  • Angular CLIv1.5

J’en parlerai potentiellement dans un autre article, un peu plus en détail et avec des exemples concrets.

J’espère que cet article vous a plu, si c’est le cas n’hésitez pas à le partager et a laissé un commentaire.

Amusez-vous bien, et à la prochaine.

Partagez, si vous aimez

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

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