Quoi de neuf dans Angular 6

Une brève revue de toutes les mises à jour intéressantes avec la nouvelle version d'Angular 6, y compris les améliorations Angular Elements, Service Worker et plus encore.

La version Angular 6 est PRETTY DANG EXCITING. Brad Green, Miško Hevery et Kara Erickson ont pris connaissance de tous les détails juteux de cette nouvelle version à l'occasion du discours d'ouverture pour ng-conf 2018 . Il y a beaucoup à couvrir dans la dernière version d'Angular. Dans cet article, nous aborderons les fonctionnalités les plus excitantes comme les éléments angulaires et les nouvelles commandes CLI.

Angular Elements ?

Angular 6 sera le premier version qui prend en charge pleinement les éléments angulaires! Angular Elements était l'enfant-cerveau de Rob Wormald aimé de Angular et c'est l'une des caractéristiques les plus attendues de cette version

Angular Elements nous donnera la possibilité d'utiliser nos composants angulaires dans d'autres environnements (comme une simple application jQuery ou une application VueJS). Il prendra un composant angulaire et l'enrobera à l'intérieur d'un élément personnalisé (aka élément DOM), nous permettant d'utiliser nos doux composants angulaires douces dans d'autres projets qui n'ont pas l'écosystème angulaire complet!

Pouvoir créer et publier un composant Web dans Angular et l'utiliser sur n'importe quelle page HTML va être révolutionnaire. Imaginez être en mesure d'emballer ce favori-sélecteur Angular que vous aimez et gifler dans l'application React de maman. Avec des éléments angulaires, vous pouvez!

Pour en savoir plus, vous pouvez regarder Rob parler des éléments angulaires à ng-conf

Nouveau moteur de rendu: Ivy ?

Ivy est la prochaine génération de l'angulaire rendu. Les développeurs ne devraient pas remarquer ce changement si ce n'est que leurs applications sont plus rapides et plus petites.

Ce sera le troisième moteur de rendu qu'Angular a vu. Le second était entre la version 2 et 4, appelée View Engine. Après qu'ils l'aient remplacé la première fois, ils ont constaté une augmentation de la vitesse et une diminution de la taille de l'application, tout en n'ayant presque aucun rapport d'incompatibilité. Ils espèrent voir le même genre de résultats cette fois-ci.

Kara Erickson a parlé en détail à ng-conf du nouveau moteur. Elle est dans l'équipe et a écrit plus de code pour le moteur de rendu que quiconque. Son discours était vraiment intéressant et nous vous suggérons de le vérifier, mais nous allons détailler les points forts du nouveau moteur pour vous ici, au cas où vous préféreriez lire en regardant. 😉

Mise à jour: Bien que nous puissions nous en réjouir aujourd'hui, Ivy sortira après la V6.

Ça a l'air bien! Mais une légère correction … Ivy arrivera dans une version ultérieure. Pas v6.

– Brad Green (@bradlygreen) 2 mai 2018

Localité

Lorsque le compilateur traduit votre template en JavaScript, il ne peut utiliser que les informations directement disponibles sur le composant et son décorateur (il ne peut pas regarder aux dépendances). Ceci est en contraste avec le compilateur actuel qui nécessite réellement une analyse globale pour s'exécuter. En d'autres termes, la localité signifie simplement que vous ne pouvez regarder que des fichiers / composants individuels à la fois lors de la génération de la sortie.

C'est une philosophie simple avec des impacts énormes. D'une part, il vous permet d'expédier le code précompilé AOT en npm. Ce qui signifie que les développeurs n'ont pas à se soucier de compiler une bibliothèque particulière dans AOT, car elle est déjà compilée!

Cela signifie aussi que metadata.json n'est plus nécessaire, ce qui facilite des outils pour traiter votre base de code et d'autres outils deviennent compatibles avec les paquets npm. Cela simplifie à la fois la création et la consommation de paquets! Et bien sûr, tout cela signifie que votre compilation aura un temps de recompilation plus rapide, un changement dans un composant est moins susceptible de déclencher une recompilation pour l'ensemble de l'application.

Tree shaking est une étape d'optimisation de build qui essaie de s'assurer que le code inutilisé Ne vous habituez pas dans votre dernier paquet. Le moteur de rendu Ivy fait bouger les arbres à un tout autre niveau. Kara l'explique magnifiquement dans son discours, alors assurez-vous de vérifier !

Au lieu de rendre les données du modèle et de le transmettre directement dans un interpréteur qui doit savoir tout faire, le nouveau moteur de rendu va générer des instructions de modèle directement. Cela signifie des paquets beaucoup plus petits et un temps de démarrage plus rapide. Un avantage secondaire que Kara a expliqué était que ces instructions générées sont beaucoup plus lisibles par l'homme et plus faciles à comprendre et à déboguer. Le moteur de rendu Ivy sera très cool, permettant des choses comme des points de rupture dans votre template, alias "stack trace heaven".

ng update & ng add

Cette commande très excitante mettra automatiquement à jour votre @ des dépendances angulaires dans votre fichier package.json :

 ng update

Il essaiera d'attraper des bugs partout où il le pourra pour mettre à jour son code et profiter des nouvelles API

[19659006L'équiped'Angularespèrequec'estledébutd'unemaintenancetrèsfaibletoutenrestantàjouravectoutesleschosescomme:

• mise à jour des dépendances npm
• mise à jour de votre code (où il peut trouver des changements de rupture)
• mise à jour de votre code RxJS et angulaire lorsque des dépréciations surviennent

Si vous êtes un fournisseur de bibliothèque, vous pouvez créer un schéma qui utilisera ng update pour mettre à jour votre bibliothèque pour les utilisateurs

 ] ng ajouter @ angular / pwa

ng ajouter @ angular / éléments

ng ajouter @ angulaire / matériel

ng add @ nativescript / schémas

ng add va être tellement incroyable! C'est un moyen d'ajouter facilement et en toute simplicité de nouvelles fonctionnalités à votre application. Dans les coulisses, il ajoute un peu de code ici et là, et change votre projet d'un smidge où il faut ajouter dans la chose que vous venez de lui dire d'ajouter. Par exemple, il y aura des schémas vous permettant d'ajouter des éléments comme des matériaux angulaires, des éléments angulaires, des applications Web progressives et des techniciens à votre application angulaire existante!

NativeScript crée également un schéma être capable de ng ajouter NativeScript dès le départ à votre application Angular 6! L'équipe Angular a travaillé main dans la main avec l'équipe NativeScript et fournira des schémas supplémentaires pour étendre l'interface CLI angulaire, créer des applications Native Mobile avec NativeScript et étendre les applications Web existantes en ajoutant l'environnement mobile.

Annuler l'inscription de ce travailleur de service! ?

Dans mon entretien Service Worker je mentionne comment vous devriez être très sûr avant de construire votre projet et de le déployer pour la première fois avec un travailleur du service. Aussi incroyable que soient les techniciens de service (pour des choses comme les notifications push et l'interception et la mise en cache du réseau), j'ai entendu dire qu'ils peuvent être difficiles à supprimer.

Dans l'Angular CLI 1.7 cependant, le @ angular / service-worker inclura un fichier safety-worker.js qui vous permettra de désactiver le Service Worker à tout moment! Yippee skippy! Pour ce faire, il vous suffit de renseigner le contenu du fichier safety-worker.js à l'adresse URL du service worker que vous souhaitez désinscrire.

Outre toutes les fonctionnalités incroyables Nous avons énuméré ci-dessus, Angular 6 prendra en charge TypeScript 2.7 avec des choses comme les déclarations de type conditionnel, les déclarations par défaut et l'initialisation de classe stricte. Il y aura aussi le support RXJS 6, ce qui réduira la taille des paquets! Chez SUPA, nous sommes emballés par sa sortie et anticipons des choses incroyables à venir! ???????