Angulaire: statut en 2019

L'été est maintenant la période de l'année où diverses conférences et autres événements sont organisés dans le monde entier. À l'heure actuelle, les programmeurs débordent littéralement de nouvelles informations, qui sont généralement assez difficiles à assimiler.

L'univers de développement frontal ressemble à un train qui se déplace sans arrêt. Nous savons tous combien il est difficile de suivre ce train. Regarder des vidéos de conférences prend beaucoup de temps, par conséquent, la raison est claire: nombre d'entre nous, après le travail de bureau, préfèrent regarder des films sur Netflix.



L'auteur du matériel, dont nous publions la traduction, explique pourquoi il a décidé d'aider tous ceux qui veulent comprendre les innovations d'Angular. Ici, nous parlerons de l'état actuel d'Angular, des nouvelles fonctionnalités de ce cadre, des tendances actuelles.

À propos de la mise à l'échelle angulaire

Selon les données fournies au ng-conf 2019 par Brad Green, membre de l'équipe de développement Angular, la portée d'Angular a augmenté d'environ 50% au cours de l'année!

Il est clair que ces données pourraient être affectées par le fait que de nombreux projets sont en train de passer d'Angular 1.X à des versions plus récentes du framework. Mais 50% reste un indicateur impressionnant.

Angular ne grandit pas aussi vite que Svelte ou Vue. Ce cadre n'est pas utilisé aussi largement que React. Mais, contrairement à ce que vous pouvez lire sur d'autres frameworks sur des ressources comme Reddit ou Twitter, Angular est en bonne santé et est utilisé par des millions de développeurs et d'équipes.

Angular possède une infrastructure large et dynamique.

Même si Angular possède de nombreux outils intégrés utiles créés par une équipe de développement principale, son écosystème, une communauté de passionnés contribuant à son développement, est extrêmement vaste. Elle est en outre représentée par des projets de très haute qualité.

Avec le cadre de base, vous pouvez utiliser de nombreux outils intéressants. À savoir, nous parlons de ce qui suit:

• Intégration profonde avec d'excellents outils à développement dynamique. Parmi eux, on peut noter TypeScript et RxJS. Le développement de ces technologies a un effet positif direct sur Angular.
• Différents types de bibliothèques pour gérer l'état de l'application.
• Outils d'analyse et d'amélioration de la qualité du code. Tels que Codelyzer .
• Bibliothèques d'éléments d'interface utilisateur, composants, directives, pipelines, etc.
• Large sélection de plugins pour divers IDE.
• Bibliothèques et frameworks pour tester les applications.
• Documentation détaillée de haute qualité sur laquelle travaillent les membres de la communauté et l'équipe Angular. Cela comprend des directives pratiques, des guides, du matériel de formation, des livres et des cours vidéo. Bien qu'il s'agisse du dernier élément de cette liste, il est néanmoins aussi important que les autres.

Dans les sections suivantes, nous nous concentrerons sur certains outils particulièrement intéressants que vous pouvez utiliser lors du développement de projets Angular.

CLI angulaire

CLI angulaire et processus de mise à jour angulaire extrêmement simple

Ce ne sont pas des mots vides. Vous trouverez ici une bonne histoire sur la façon dont le projet BlueWeb, qui dessert chaque année un demi-milliard d'utilisateurs, a été mis à niveau d'Angular 7 vers Angular 8 en une journée de travail. Il s'agit d'une réalisation impressionnante, étant donné que la transition de la deuxième à la quatrième version d'Angular a pris 30 jours à partir du même projet.

Cela prouve la grande valeur de la CLI angulaire. L'utilisation de cet outil peut augmenter la productivité à un niveau que je n'ai jamais rencontré auparavant.

De nos jours, il devient très difficile d'imaginer travailler sans la CLI angulaire.

▍ Outil schématique

L'outil Angular Schematics est quelque chose que les développeurs Angular sont susceptibles d'utiliser quotidiennement. Par exemple, je suis sûr que vous utilisez souvent cette commande:

ng generate component my-component 

Il est basé sur l'outil Schematics intégré à la CLI angulaire.

Il est peut-être nouveau pour vous que les développeurs aient la possibilité de créer leurs propres règles schématiques. Leur utilisation facilite le travail avec des fragments de code fréquemment utilisés.

▍API Builders

Les constructeurs d'API vous permettent d'agrandir ou d'élargir des équipes existantes . Par exemple, vous pouvez créer une équipe qui exécute des tests en utilisant Jest et Cypress, plutôt qu'en utilisant Jasmine et Protractor. Vous pouvez, par exemple, utiliser un autre linter.

Nouvelles fonctionnalités intéressantes du framework

Au moment de la rédaction de ce document, la version 8 d'Angular était déjà sortie, contenant diverses améliorations et nouvelles fonctionnalités.

Rien ici ne changerait sérieusement la façon dont ce cadre est utilisé. Une déclaration similaire concernant une nouvelle version d'un outil est généralement perçue comme une bonne nouvelle. Mais dans Angular 8, il existe de nombreuses améliorations qui ne sont pas visibles, pour ainsi dire, à l'œil nu. Grâce à eux, les projets Angular deviennent plus petits et plus rapides. Ces améliorations rendent le processus de développement d'applications angulaires encore plus agréable qu'auparavant. De plus, la nouvelle version du framework dispose d'un nouveau système de rendu qui est presque prêt pour une utilisation complète.

▍ Charge différentielle

Le «chargement différentiel», à en juger par le nom de cette technologie, peut sembler quelque chose de très compliqué, mais en fait ce n'est pas le cas. En un mot, grâce à cette fonctionnalité, le compilateur génère deux bundles. L'une concerne les navigateurs modernes. Il n'y a aucun code polyfill dedans. La seconde concerne les anciennes versions des navigateurs.

Les navigateurs les plus récents téléchargent des bundles modernes. Et les navigateurs plus anciens qui ont besoin d'assemblages de téléchargement polyfill spécialement conçus pour eux.

Il s'agit d'une innovation très utile. Étant donné que la plupart des utilisateurs sont très susceptibles de travailler dans les dernières versions des navigateurs, cela conduit au fait que les bundles avec polyfill, plus grands que les bundles modernes, ne sont utilisés que par un petit nombre d'utilisateurs.

▍Travailleurs Web

Vous avez probablement déjà entendu parler des travailleurs du Web, nous ne traiterons donc pas de l'explication de l'essence de cette technologie. Mais vous ne savez peut-être pas combien il est facile d'intégrer des travailleurs Web dans des applications dans la nouvelle version Angular. Ici, vous pouvez en savoir plus à ce sujet.

▍ Boîte à outils CDK

CDK est une boîte à outils publiée par une équipe qui développe des composants angulaires. Vous y trouverez des abstractions utilisées par le matériau angulaire , qui sont indépendantes des styles.

Par exemple, grâce au CDK, le développeur dispose de directives qui vous permettent d'implémenter les fonctionnalités suivantes:

• Travaillez avec des objets dans le style de "glisser-déposer".
• Utilisez des zones de texte qui se redimensionnent automatiquement.
• Pop-ups.
• Défilement virtuel.

CDK est un outil extrêmement utile car la plupart des applications peuvent utiliser des abstractions répandues de haute qualité, chacune d'entre elles n'implémentant que des fonctionnalités limitées. C'est bien mieux que l'utilisation répandue et pas toujours justifiée de composants à part entière. Angular Material est un merveilleux ensemble de composants, mais la puissance de CDK est qu'il permet au développeur de créer ses propres composants à partir des blocs de construction de base.

▍ Moteur de rendu Ivy

Ivy est un nouveau développement très intéressant, qui est un moteur de rendu. Le travail sur Ivy n'est pas encore terminé, par défaut ce moteur est désactivé. Mais, à partir d'Angular 7, il peut déjà être activé et utilisé. Ivy devrait être le principal moteur de rendu d'Angular 9.

Voici ce que vous pouvez attendre d'un moteur Ivy complet:

• Réduire la taille des paquets.
• Modèles de débogage.
• Assemblage de projet plus rapide, tests plus rapides.
• Correction d'erreurs existantes.

Si nous parlons de débogage, voici une capture d'écran où vous pouvez voir le déclenchement du point d'arrêt dans la console Chrome.


Débogage de code

Comme vous pouvez le voir, la directive ngForOf nous donne des informations sur la valeur passée.

Plateformes angulaires et mobiles

▍Ionique

Ionic est un cadre de développement d'applications mobiles. Bien que ses composants de base soient créés à l'aide de Stencil, ils fournissent au développeur des abstractions qui permettent à Ionic d'être utilisé avec des cadres Angular et autres.

▍NativeScript

NativeScript est un framework de développement d'applications mobiles natives similaire à React Native. Il présente une intégration profonde avec Angular - avec le support de Vue et la possibilité de l'utiliser pour le développement en JavaScript pur. Malheureusement, mon expérience avec lui n'a pas été particulièrement réussie. Je ne peux pas le mettre au même niveau que React Native. Cependant, si vous souhaitez vraiment développer des applications mobiles, essayez NativeScript.

Test

▍Jasmin et rapporteur

Le jasmin et le rapporteur n'ont pas besoin d'être présentés. Ce sont des outils standard pour tester les applications angulaires. Ils sont bien testés par le temps, régulièrement mis à jour et ils fonctionnent très bien avec Angular.

▍Jest et cyprès

Le test d'applications angulaires avec Jest et Cypress a été rendu possible grâce à de nouveaux outils basés sur les constructeurs d'API qui font partie de la CLI angulaire.

Jest est un framework de tests unitaires basé sur Jasmine. Il est développé sur Facebook. Il s'agit d'un cadre standard pour tester les projets React, il est largement distribué en raison de sa rapidité. Beaucoup de gens préfèrent l'utiliser plutôt que du jasmin. Si vous êtes également enclin à Jest - vous pouvez maintenant l'utiliser pour tester des applications angulaires.

Cypress est un framework de test d'applications de bout en bout très respecté. Ce n'est pas un hasard si la communauté du développement le traite très bien. Il est indépendant de Selenium ou de WebDriver. Cypress vous permet de travailler avec les journaux d'équipe, sait gérer le trafic réseau. Il est assez stable, vous pouvez donc vous attendre à ce que les résultats obtenus avec son aide soient tout à fait compréhensibles et prévisibles.

▍ Boîte à outils de la bibliothèque de tests angulaires

La bibliothèque de tests angulaires est un ensemble d'outils pour tester les composants de l'interface utilisateur en mettant l'accent sur la reproduction des actions de l'utilisateur.

Cela signifie que cette bibliothèque pousse le programmeur à s'assurer qu'il ne fonctionne pas avec des composants par programmation. Il vise à tester le comportement des composants. La bibliothèque effectue les actions que les utilisateurs effectuent habituellement.

Par exemple, lorsque vous travaillez avec des outils de cette bibliothèque, de telles constructions ne sont pas utilisées:

 myComponent.onClick(); 

Au lieu de cela, le comportement naturel de l'utilisateur est simulé:

 const { getByText, click } = await render(CounterComponent, {    componentProperties: { counter: 5 } }); click(getByText('+')); 

Gestion de l'État

▍NgRx

NgRx est une bibliothèque de gestion de l'état des applications, créée sous l'influence d'idées intégrées dans Redux. NgRx est probablement la bibliothèque de gestion d'état la plus utilisée dans le développement angulaire. Le nom de la bibliothèque suggère qu'elle utilise sérieusement les flux RxJs.

▍NGXS

NGXS est une bibliothèque alternative pour la gestion de l'état dans les applications angulaires, similaire à Redux. Si vous comparez NGXS et RxJS, il s'avère que les caractéristiques de NGXS sont qu'il utilise beaucoup de classes et de décorateurs. Ceci est fait pour réduire la quantité de code passe-partout. Probablement, cette fonctionnalité de NGXS peut être décisive lors du choix d'une bibliothèque pour gérer l'état si quelqu'un qui recherche une telle bibliothèque est habitué à utiliser des classes.

▍Akita

Akita est une bibliothèque de gestion d'État développée par Datorama. Cette bibliothèque est également basée sur RxJS. Si vous le comparez avec les deux bibliothèques précédentes, il s'avère que sa caractéristique est qu'il peut être utilisé dans des projets dans lesquels Angular n'est pas utilisé. Cela signifie que le choix à long terme de la bibliothèque Akita peut améliorer les possibilités de réutilisation du code de projet.

▍ Peut-être juste prendre des RxJ?

Je peux donner une réponse positive à la question posée dans le titre de cette section. Tout dépend si vous aimez les bibliothèques qui rappellent Redux et si le projet a besoin d'une bibliothèque pour gérer l'état. Si vous le souhaitez, vous pouvez créer des services qui stockent l'état à l'aide des outils RxJS standard.

Bibliothèques de composants d'interface utilisateur

▍StoryBook

StoryBook n'est pas vraiment une bibliothèque de composants d'interface utilisateur. Il s'agit d'un outil qui vous permet de créer des composants isolés et permet d'étudier les composants et leurs variantes.

Ceci est un excellent outil. Auparavant, il n'était disponible que pour les développeurs de React. Je les enviais alors. Mais maintenant, les développeurs Angular peuvent l'utiliser, donc je ne peux pas m'empêcher de le mentionner.

MaterialMatériau angulaire

Ici, nous dirons quelques mots sur la célèbre bibliothèque de matériaux angulaires , qui donne aux mains d'un développeur moderne un bel ensemble de composants conçus pour la dernière version d'Angular.

Backends pour applications angulaires

▍Firebase

Firebase est une plateforme de développement d'applications détenue par Google. La conséquence de cela est qu'il existe une bibliothèque officielle pour Firebase et Angular - AngularFire . Cette bibliothèque utilise des observables RxJS pour diffuser des données. Il est profondément et efficacement intégré à Angular.

▍GraphQL

Vous pensez peut-être que le plaisir de travailler avec GraphQL n'est disponible que pour les programmeurs React. Si oui, alors vous vous trompez. Il existe également une version de la bibliothèque Apollo pour Angular. Ce que vous pouvez créer avec cette bibliothèque est une excellente alternative à Firebase. Apollo est pour ceux qui préfèrent travailler avec GraphQL.

▍NestJS

NestJS est un cadre Web pour Node.js conçu pour développer des applications serveur. À partir d'exemples, nous pouvons conclure que les concepts de base d'Angular y ont eu une grande influence. Ce sont des modules, des contrôleurs, des convoyeurs, etc. Si vous aimez Angular, vous aimerez probablement aussi NestJS.

Si vous utilisez Nx Workspaces , la création d'une infrastructure pour une application à pile complète basée sur Angular et NestJS consiste à exécuter une commande dans la console.

Résumé

En conséquence, nous pouvons dire que le vaste écosystème qui s'est développé autour d'Angular offre à tous ceux qui veulent des outils fiables et de haute qualité pour résoudre un large éventail de problèmes.

Bien sûr, je ne peux pas parler ici de dizaines de mes bibliothèques et outils préférés. Si j'avais fait cela, ce matériel aurait été sans fin. Mais j'espère que cet article vous a donné un aperçu du phénomène du développement web moderne appelé Angular. J'espère qu'ici vous avez trouvé quelque chose que vous pourrez utiliser à l'avenir dans vos projets.

Chers lecteurs! Qu'est-ce que vous préférez (ou n'aimez pas) dans Angular 8?