Principales fonctionnalités de Angular 10

Dans cet article, nous examinerons un aperçu de cette dernière version d'Angular, v 10.0.0, et de tous les changements et dépréciations qui l'accompagnent.

Angular, le framework JavaScript (TypeScript) de Google pour la création d'applications Web mobile ou de bureau, a plus de 55 000 étoiles sur GitHub . Géré par l'équipe angulaire de Google et une foule de membres de la communauté et d'organisations, Angular Version 10 a été publié officiellement ce printemps .

Ivy

Il y a quelques mois, juste au moment où la pandémie a commencé, un des choses les plus attendues dans la communauté Angular se sont produites: La plate-forme Angular a sorti le moteur de rendu Ivy et en a fait le moteur par défaut pour la compilation. Cette version d'Angular, 9.0.0, était la première version majeure d'Angular après l'annonce officielle d'Ivy. Il est venu avec beaucoup de grandes choses que nous avons abordées dans notre article "Quoi de neuf", et à un moment où il y avait tant d'incertitude dans le monde et où tout le monde était verrouillé.

Le moteur de rendu Ivy a apporté une très grande amélioration au framework Angular, comme une réduction drastique de la taille du bundle Angular, de plus de 40% par rapport à la dernière version. Cela garantit qu'il est plus efficace, prend moins de place et, en même temps, exécute le plus rapide Angular jamais.

Version 10 déjà?

Il peut sembler surprenant qu'Angular ait lancé une autre version majeure seulement 4 mois après le Libération de lierre. Il est plus petit qu'une version classique, mais couvre toute la plate-forme angulaire, du framework au matériau angulaire en passant par la CLI. De plus, l'équipe prévoit une mise à jour vers la version 11.0.0 à l'automne!

Prenons un moment pour explorer la dernière version d'Angular, v 10.0.0.

Nouveau sélecteur de plage de dates

Les interfaces utilisateur angulaires avaient une grande mise à niveau dans Angular Material, le sélecteur de date a maintenant un excellent ajout, ce qui le rend très important. Auparavant, chaque bibliothèque d'interface utilisateur avait un sélecteur de date, et maintenant la bibliothèque de matériaux angulaires a un sélecteur de plage de dates. Tout comme vous le verriez sur Expedia ou booking.com, le composant de plage de dates a maintenant été ajouté à Angular Material.

Pour commencer à utiliser le nouveau sélecteur de plage de dates, vous pouvez utiliser les composants mat-date-range-input et mat-date-range-picker dans Angular Material. Vous pouvez voir comment cela fonctionne avec cet exemple sur StackBlitz . Vous pouvez également en savoir plus sur la sélection de la plage de dates ici .

Avertissements concernant les importations CommonJS

Pour une efficacité et une rapidité maximales, le regroupement ECMAScript est conseillé sur CommonJS. Minko Gechev dans cet article web.dev souligne que pour s'assurer que le bundler peut optimiser avec succès une application, les développeurs devraient éviter de dépendre des modules CommonJS et utiliser la syntaxe du module ECMAScript dans toute leur application.

L'équipe Angular constaté que lorsque vous utilisez une dépendance fournie avec CommonJS, les applications se chargent plus lentement et la taille est souvent plus grande. Avec cette nouvelle version d'Angular, chaque fois que votre build a un bundle CommonJS, la croyance est que voir ces avertissements commencera à pousser les développeurs vers l'option la plus optimale d'utiliser un bundle de module ECMAScript (ESM). Les avertissements ressembleront à ceci:

Mises à jour de l'écosystème

L'écosystème JavaScript est en constante évolution et à chaque version d'Angular, l'équipe essaie de s'assurer qu'il reste à jour. Avec la nouvelle version 10 d'Angular, les dépendances suivantes ont été mises à jour et synchronisées:

• La version TypeScript a été mise à jour vers TypeScript version 3.9
• La version TSLib a également été mise à jour vers TSLib version 2.0
• TSLint a été mise à jour vers version 6.0

La présentation du projet a également été mise à jour, donc avec cette nouvelle version il y a un nouveau fichier tsconfig.base.json . Celui-ci prend en charge la manière dont les IDE et les outils de construction résolvent mieux les configurations de type et de package que le précédent.

Options pour appliquer des paramètres plus stricts

Ainsi, lorsque vous souhaitez créer un nouveau projet Angular, vous utilisez la nouvelle syntaxe ng et maintenant vous pouvez ajouter un indicateur strict à cela comme ceci:

 ng new nameOfApp --strict 

Et le projet créé aura une configuration de projet stricte avec quelques nouveaux paramètres qui facilitent la maintenance de votre projet, le rendent plus facile à attrapez les bogues à l'avance et donnez même à votre CLI Angular des super pouvoirs comme l'accès pour effectuer des optimisations avancées sur votre application Angular. Certains de ces paramètres sont:

• Activation du mode strict pour vos fichiers TypeScript
• Définition de la vérification du type de modèle sur Strict
• Réduction du budget de votre bundle par défaut de 75%
• Configuration des règles de linting pour aider à éviter déclarations de type [any]
• Configuration de votre application sans effets secondaires pour permettre un tremblement d'arbre plus avancé

Angular Team Update

L'équipe Angular a également été en place et en cours d'exécution ces derniers temps, comme vous pouvez le constater, les problèmes en suspens sur le projet Angular ont été réduits de plus de 700 problèmes entre les composants, les outils et le cadre. Plus de 2 000 problèmes ont été abordés, ce qui témoigne de l'engagement envers le projet et plus particulièrement envers les développeurs utilisant le projet, ce que je trouve vraiment admirable. L'équipe promet de garder le rythme et même de s'engager à en faire plus dans un proche avenir.

Default Browser Config

À partir de la nouvelle version 10 d'Angular, la configuration du navigateur a été mise à jour pour exclure certains navigateurs. Dans Angular 9, nous avions Chrome 80, 81, 83; Edge 81, 81; Firefox 68, 75, 76; Safari 13.2, 13.3, 13.4; Navigateur UC 12; Andriod 81; Baidu 7.12; tous les navigateurs Opera Mini et autres.

Dans la version Angular 10, les anciens navigateurs ne sont plus pris en charge par défaut. Seuls les navigateurs répertoriés ci-dessous sont désormais pris en charge:

Cela signifie que ES5 est désactivé par défaut pour les builds pour les nouveaux projets utilisant la version 10. Cependant , vous pouvez le réactiver avec la capacité de chargement différentiel en ajoutant les navigateurs que vous souhaitez prendre en charge dans le fichier .browserslistrc .

Obsolescence

À partir de la nouvelle version 10, le format de package angulaire ne comprend plus Bundles ESM5 ou FESM5. Cela permet aux développeurs d'économiser près de 120 Mo de temps de téléchargement et d'installation lorsqu'ils exécutent leur gestionnaire de packages préféré. De plus, après avoir consulté la communauté Angular, la prise en charge d'Internet Explorer 9 & 10 et d'IE Mobile est désormais obsolète. Vous pouvez en savoir plus sur toutes les dépréciations et suppressions ici .

Mise à jour vers la version 10

Pour mettre à jour depuis n'importe quelle version Angular vers la version 10, visitez update.angular.io pour des informations détaillées sur la mise à jour spécifique dont vous avez besoin. Pour bénéficier de la meilleure expérience de mise à jour, il est recommandé de toujours mettre à niveau une version majeure à la fois. Cela signifie que si vous utilisez Angular 8, mettez à niveau vers la version 9 avant de faire 10.

Pour mettre à jour à l'aide de la CLI, exécutez la commande ci-dessous:

 ng update @ angular / cli @ angular / core 

Conclusion

] Voici un aperçu rapide de toutes les améliorations notables livrées avec la nouvelle version Angular 10. Il y a quelques nouvelles fonctionnalités, et le sélecteur de plage de dates dans Angular Material est mon préféré. Qu'est-ce qui est à toi? N'oubliez pas de rester en sécurité et de continuer à pirater!