octobre 19, 2018

Quoi de neuf dans Angular 7

Angular 7 est là et ce n’est pas du tout effrayant! Post Cet article présente les dernières fonctionnalités et améliorations de Angular 7, notamment les mises à jour CLI, de meilleures performances et de fausses nouvelles à surveiller. Nous expliquerons également le lien entre tout cela et l’interface utilisateur de Kendo.

En plus du temps froid, l’automne a également soufflé dans la version angulaire 7.0.0! Cette publication est attendue depuis longtemps et mes collègues de l'équipe de Kendo UI et moi-même sommes ravis de l'accueillir. Comme Stephen l'a déclaré dans le poste officiel :

"Il s'agit d'une version majeure couvrant l'ensemble de la plate-forme, y compris le cadre de base, Angular Material, et la CLI avec versions majeures synchronisées."

Si Stephen Fluin l'a dit une fois, il l'a répété cent fois: «gérer les attentes des développeurs». Cette version n'est pas différente. Vitesse et fiabilité seront les maîtres mots du jeu lorsque nous examinerons certaines de ces fonctionnalités à venir.

Vous aussi, vous pouvez être sur la version 7 TODAY

Comme pour tout ce qui s’est passé après la v6, dans l’application Angular de votre choix, Il vous suffit simplement d’exécuter la commande suivante:

ng update @ angular / cli @ angular / core

Après avoir mis à jour quelques applications moi-même, je dois dire que c’est une mise à jour rapide et sans douleur.

Invite d'interface de ligne de commande AWESOMENESS

Il y a tellement de fois que j'oublie un indicateur pour les commandes CLI (par exemple, comment créer un nouveau projet à l'aide de SASS). La nouvelle invite CLI est tout simplement fantastique pour les commandes telles que ng new ou ng add. Vous pouvez installer la dernière version de la CLI de manière globale:

`npm install -g @ angular / cli @ latest`

Ensuite, essayez de créer une nouvelle application en tapant simplement ng new + enter.

Parallèlement à l'invite, Angular.io maintenant inclut la documentation pour le CLI!

Angular Elements

Un petit mais passionnant changement:

«Les éléments angulaires prennent désormais en charge la projection de contenu à l'aide de normes Web pour les éléments personnalisés.»
– Stephen Fluin

Des mises à jour mineures pour Angular Material

Les mises à jour mineures pour Angular Material ont été nombreuses cette année, y compris la nouvelle page d'accueil pour matériel, material.io . Ici, vous pouvez obtenir des conseils de conception, des composants de développement, des outils et vous tenir au courant des dernières nouvelles.

Si vous êtes un utilisateur de Angular Material, à partir de la v7, vous devriez remarquer quelques petites différences visuelles, comme la bibliothèque s'aligne sur les spécifications mises à jour de Material Design.

Meilleure accessibilité pour les sélections

Le matériau angulaire améliore également l'accessibilité pour les sélections. Vous pouvez maintenant utiliser la sélection native dans mat-form-field. Étant donné qu’il s’agit d’un élément natif, il est plus accessible et plus performant que le mat-select. Vous pouvez maintenant choisir soit sélectionner ou mat-select à utiliser. Les deux sont maintenant disponibles!

CDK — Maintenant avec défilement virtuel et glisser-déposer

Défilement virtuel

Le CDK dispose désormais de fonctionnalités de défilement virtuel que vous pouvez utiliser en important le module `ScrollingModule`! Le défilement virtuel consiste à charger / décharger des éléments DOM en fonction de l'emplacement de l'utilisateur dans une liste d'éléments. Cela signifie que vos énormes listes défilantes vont beaucoup plus vite!

<cdk-virtual-scroll-viewport itemSize = "20">
<div * cdkVirtualFor = "let dog of dogsArray"> {{dog}}

Voici le StackBlitz d'Angular Material qu'ils ont créé pour jouer avec le défilement virtuel. Vous pouvez voir les éléments changés dans le DOM lorsque nous faisons défiler!

Drag & Drop

Le CDK prend également en charge le glisser-déposer, qui inclut les fonctionnalités astucieuses suivantes:

Rendu automatique lorsque l'utilisateur déplace des éléments
Méthodes auxiliaires de réorganisation / transfert d'éléments dans des listes: moveItemInArray et transferArrayItem

Amélioration des performances des applications

Définition des budgets pour les nouvelles applications

J'aime beaucoup les protections qui nous préservent de nous-mêmes. C'est précisément ce que fait la prochaine fonctionnalité en avertissant les nouveaux créateurs d'applications lorsqu'ils dépassent le budget avec la taille de leur lot! Les valeurs par défaut sont un avertissement à 2 Mo et une erreur à 5 Mo. Mais ne soyez pas effrayé! Ces valeurs par défaut peuvent être facilement modifiées dans votre fichier angular.json. Il vous suffit d’ajouter quelques mots sur les budgets ainsi que sur les tailles d’avertissements et d’erreur que vous préférez:

"budgets": [

{

"type": "initial",

"maximumWarning": "2mb",

"maximumError": "5mb"

}

]

Vérification de la taille de votre bundle d'application

. ] Si vous souhaitez vérifier la taille de votre paquet, il vous suffit de vous servir de votre application Angular:

Suppression du polyfill reflect-metadata in Production

En ce qui concerne les sauvegardes, dans Pour améliorer les performances, l'équipe Angular a découvert que de nombreux développeurs (sans nommer aucun nom) utilisaient un polyfill reflect-metadata, destiné au développement, en production. Ils suppriment cela du fichier polyfill dans les versions de production par défaut.

Ivy

À des fins de clarification, le rendu angulaire Ivy ( sur lequel nous avons écrit précédemment ) n'a PAS été publié. La version actuelle est disponible pour permettre aux utilisateurs de l'essayer plus tôt, mais Angular ne l'utilise pas encore officiellement.

J'étais sur un podcast il y a quelques semaines avec Uri Shaked et de nombreux autres joueurs angulaires sympas. vous le reconnaîtrez peut-être, et nous avons parlé en détail du moteur de rendu Ivy et de ses pouvoirs. Regardez l'émission ici .

Dans l'émission, Uri a expliqué comment vous pouvez essayer Ivy tôt pour vous-même. Donc, bien qu'Ivy ne soit pas encore dans la version angulaire actuelle, je suis tellement excitée pour le moment où elle fera ses débuts.

Rumeurs et fausses nouvelles ⚠️

En avril, un article contenant de fausses nouvelles concernant ce qui se prépare dans Angular 7 est une blague d'avril. Malheureusement, tout le monde n'a pas la blague et ces «fonctionnalités» ont commencé à apparaître dans d'autres articles des mois plus tard. Voici certaines des fausses fonctionnalités. Sachez donc que si vous les voyez dans le futur, elles ne sont pas réelles. Passez le mot!

«PAS DE CARACTERISTIQUES REELLES»

Nouveau compilateur ng.
@ Fractionnement angulaire / cœur.
@aiStore. Il s'agit d'un stockage basé sur l'intelligence artificielle qui est rétrocompatible avec la base de code ngrx créée précédemment.
@ angular / mine. Dernier point mais non le moindre, angular / mine. Un autre package npm, à l’aide duquel vous pouvez exploiter bitcoin lors de la performance de votre application! 1965

Cela affectera-t-il le Kendo UI?

J'ai commencé à tester TOUTES LES CHOSES avec le Kendo UI pour Angular une fois que le dernier RC a été publié. Jusqu'à présent, je n'ai rencontré que quelques problèmes particuliers:

Les versions obsolètes de la v1.4.2 de kendo-intl ne fonctionnent pas, mais c'est OK, il suffit de mettre à jour au plus tard et vous serez prêt à partir!
Les notifications ne fonctionnent pas encore avec la v7. N'ayez crainte, nous sommes dans le cas ?
Vous trouverez quelques avertissements sur les dépendances entre pairs nécessitant une version plus basse de Angular. C’est correct, cela signifie simplement que nous n’avons pas encore testé la v7 avec chaque package et que, par conséquent, nous n’avons pas mis à jour les dépendances entre homologues sur npm.

Je teste nos composants dans Angular v7

Nous voici. L'équipe angulaire de Kendo UI est on ne peut plus ravie de cette version v7 excitante! Nous avons deux choses à régler (voir ci-dessus), mais dans l’ensemble, nous sommes ravis du nombre de nos composants qui fonctionnent simplement et qui fonctionnent avec la v7. Nous remercions l’équipe Angular pour son travail acharné et nous attendons avec impatience cet avenir brillant pour Ivy. Découvrez nos composants stellaires de l'interface utilisateur de Kendo pour Angular ici et codez-les avec plaisir!

Les commentaires sont désactivés en mode Prévisualisation.

Source link