👨🏻‍🚀 🕤 🛀🏻 6 concepts qu'un architecte d'applications angulaires doit maîtriser 👷🏻 👩🏽‍✈️ 🎂

Angular est l'un des plus grands frameworks web existants. Il comprend de nombreuses fonctionnalités intégrées. Et cela signifie que pour le développement complet d'Angular, vous devez gérer une bonne quantité de concepts. L'auteur du matériel, dont nous publions la traduction aujourd'hui, estime qu'il existe six concepts dont les développeurs Angular doivent disposer de connaissances approfondies pour créer des applications bien conçues. Cependant, il ne parle pas d'étudier le code source pour la mise en œuvre de ces concepts, bien qu'il doive lui-même parfois se pencher sur le code. Il s'agit de comprendre les mécanismes pertinents et la capacité de les mettre en pratique.

1. Architecture, modules et bibliothèques

Dans le monde du développement Web, l'architecture modulaire d'Angular est quelque chose de spécial. Probablement, c'est l'une de ces idées qui sont pires que d'autres adoptées par les débutants.

La partie la plus difficile ici est que le développement Web utilise déjà une architecture modulaire. Bien sûr, je parle des importations ES6.

Étant donné que les modules angulaires ajoutent un niveau supplémentaire de regroupement logique au système, il est important que leur structure corresponde le mieux possible aux tâches résolues avec leur aide.

Savoir séparer et combiner des fonctionnalités d'application à l'aide de modules bien conçus est un élément fondamental de la création d'une architecture d'application angulaire.

▍Divers types de modules angulaires

Il existe différents types de modules angulaires à connaître:

Module Déclarations / Widget. Modules avec déclarations de diverses entités. Un exemple de tels modules est l'ensemble des composants de l'interface utilisateur, des directives, des canaux.
Module de services. Modules de service Par exemple - HttpClientModule.
Module de routage. Modules de routage
Module de fonctionnalité de domaine. Modules qui implémentent les tâches clés de l'application.
Module de base / partagé. Un module principal est un module de déclaration de services globaux. Un module partagé est un module dans lequel les composants sont déclarés pour le partage.

Voici le matériel où vous pouvez trouver des détails sur les modules angulaires.

▍ Bibliothèque ou module?

Je dirais que la distinction ci-dessus entre les modules peut être étendue aux bibliothèques. Avec cette approche, il s'avère qu'il peut y avoir une bibliothèque contenant uniquement des services, une bibliothèque représentant l'itinéraire, etc.

Mais la création d'un module ou d'une bibliothèque dépend du type de projet et de la représentation du projet par un mono-référentiel ou plusieurs référentiels.

▍ Questions à se poser avant de créer un module

Voici quelques questions à poser avant d'écrire un module:

? — , . , . , .
, ? . , , . , , .

2. ,

Le partage des responsabilités est, en théorie, simple. Mais en pratique, c'est déjà plus difficile. Les développeurs, depuis l'époque d'Angular.js, savaient que les composants devaient être aussi compacts que possible et que les services devaient être élargis. Dans les nouvelles versions d'Angular, ces idées n'ont pas beaucoup changé.

Et aujourd'hui, il est important d'avoir une idée de ce qui devrait exactement faire partie des composants, de ce qui fait partie des services, et de prendre également en compte le fait que les directives sont probablement une caractéristique très sous-estimée d'Angular.

▍Condition

La réponse à la question de savoir exactement où stocker l'état du composant dépend de l'endroit où les données correspondantes sont nécessaires. A savoir, ils peuvent être nécessaires uniquement dans le composant, étant locaux et encapsulés, ou ils peuvent être nécessaires en dehors du composant.

Si les composants partagent l'état ou si l'état doit être accessible à partir des services, l'état doit être stocké dans le service. De plus, si l'état est stocké dans le service, les outils de gestion d'état particuliers utilisés ne jouent pas un rôle particulier.
Si l'état est local (par exemple, nous parlons de la forme) et n'est utilisé qu'à l'intérieur du composant, l'état doit simplement être enregistré dans le composant.

▍Travailler avec le DOM

La plupart des manipulations DOM devraient probablement être effectuées dans des directives. Imaginez que l'un des composants soit équipé de la fonctionnalité glisser-déposer.

Je suis sûr que dans cette situation, vous pouvez créer un composant et en lier les événements correspondants, mais si vous le faites, deux phénomènes seront mélangés:

Description de l'apparence du composant.
Détermination du comportement des composants.

Les directives sont une fonctionnalité angulaire qui vous permet de décrire des mécanismes réutilisables. Dans presque tous les projets sur lesquels j'ai travaillé, j'ai remarqué l'utilisation insuffisante des directives. Les directives peuvent assumer une part considérable de la responsabilité des composants.

Voici un exercice pour vous: trouvez le plus grand composant de votre projet actuel par le nombre de lignes de code. Y est-il utilisé Rendererou ElementRef? La logique correspondante, très probablement, peut être transférée à la directive.

3. Changer la détection et le rendu

Lorsqu'il s'agit de restituer l'interface utilisateur, dans Angular, tout se fait comme par magie, en utilisant les mécanismes internes du framework.

Mais si vous avez besoin d'optimiser l'application pour que l'interface ne soit restituée que lorsque cela est nécessaire, vous devez faire face à cette «magie». Et, pour améliorer le rendu, vous devez vous fier non seulement à la connaissance, mais aussi à l'intuition.

Un architecte d'application angulaire doit probablement être conscient qu'une stratégie de détection des modifications est utilisée pour optimiser les performances de rendu onPush. Mais au cours du travail, tout ne se passe pas toujours comme prévu. Surtout lorsque les modèles n'utilisent pas d'objets observables et de canaux asynchrones.

▍ Amélioration de la détection des changements

Afin d'améliorer le processus de détection des changements utilisé dans le projet, il est logique de commencer par les idées suivantes:

Il est nécessaire de considérer toutes les données comme immuables. Les bibliothèques de gestion d'état basées sur Rx peuvent être très utiles ici.
Pour sortir des données dans des modèles, il vaut la peine d'utiliser uniquement (ou principalement) des objets observables. Lorsque vous utilisez un état local, cela vaut la peine de postuler BehaviorSubject.

Si vous souhaitez développer des applications angulaires hautes performances, il vous suffit de bien gérer les problèmes de détection des modifications. Le fait est que les hautes performances ne sont même pas «la mise à jour de l'interface quand elle est nécessaire». Il s'agit de «mettre à jour l'interface uniquement lorsque cela est nécessaire».

▍ Surmonter les limitations de performances angulaires

La réduction du nombre de re-rendus de l'interface d'application est l'un des secrets qui vous permet de créer des applications rapides et efficaces. Mais parfois, les performances des applications doivent dépasser les limites définies par le périphérique angulaire lui-même. Parmi ces applications, on peut citer les jeux, les projets dont les données sont souvent mises à jour, les pages qui affichent des listes volumineuses et complexes, etc.

Si vous avez vraiment besoin d'extraire le maximum absolu des performances angulaires, cela signifie que vous devez recourir à une technique qui consiste à se débarrasser de Zone.js et à mettre à jour l'interface avec précision en utilisant les dernières fonctionnalités Ivy. Voici le matériel à ce sujet.

4. Acheminement

Le routage n'est pas seulement une représentation de SPA sous la forme de nombreuses pages virtuelles. Il charge également des ensembles d'applications à la demande en utilisant les capacités de chargement paresseux des matériaux du sous-système de routage angulaire.

Si vous travaillez sur une grande application et que la taille de l'ensemble de cette application dépasse 1 Mo, vous savez probablement déjà pourquoi cela est important. En effet, personne ne trouvera la perspective de télécharger d'énormes quantités de données pour travailler avec une certaine application.

Le routage doit être utilisé non seulement pour séparer les itinéraires de niveau supérieur, mais également pour organiser le travail avec les parties moins profondes et plus profondes de l'interface.

Cela vous permet de diviser le contenu des bundles par itinéraires principaux et aide à diviser les applications en petites parties qui n'ont pas besoin d'être transférées aux utilisateurs jusqu'à ce qu'une demande explicite soit faite pour les télécharger.

▍ Exemple: composant à onglets

Supposons que nous développons une interface utilisateur qui utilise des onglets. De plus, chaque onglet est indépendant des autres. Il s'agit d'une situation idéale dans laquelle chaque onglet peut être affecté à son propre itinéraire et organiser le chargement de données paresseux, au cours de laquelle seules les données de l'onglet sélectionné sont transmises au client.

Vous voulez un autre exemple? Qu'en est-il des fenêtres contextuelles et des fenêtres modales? Leur code n'a absolument pas besoin d'être inclus dans les matériaux inclus dans le bundle d'origine du projet. Le code de ces fenêtres n'a de sens de se charger que lorsqu'elles sont nécessaires, mais pas avant.

Si vous voulez quelque chose d'inspiré avant d'appliquer de telles idées, je vous suggère de jeter un œil à la documentation du composant @ angular / material / tabs , qui implémente le modèle ci-dessus.

5. Formulaires

La plupart des applications CRUD sont essentiellement constituées de nombreuses formes. Il est très probable que vous passiez beaucoup de temps à créer des formulaires. Par conséquent, il est important pour quelqu'un qui veut être un architecte angulaire de maîtriser correctement le travail avec les formulaires.

La plupart de vos formulaires sont susceptibles d'utiliser un module ReactiveFormsModule. Et s'ils ne consistent pas en un seul contrôle, alors en les utilisant, ngModelune liaison de données bidirectionnelle sera implémentée.

L'API angulaire pour travailler avec des formulaires est assez facile à apprendre. Afin d'atteindre l'excellence dans l'utilisation de cette API, en général, il suffit d'étudier correctement la documentation et de savoir quels problèmes peuvent survenir lors de l'utilisation des formulaires.

Le principal problème à savoir est que les formulaires dans Angular ne sont pas liés aux types de données qui les sous-tendent. C'est probablement la chose la plus désagréable de travailler avec des mécanismes qui sont par ailleurs très bien conçus. En conséquence, il s'avère que le développeur doit surveiller attentivement que les formulaires correspondent aux structures de données utilisées lors de leur utilisation.

6. RxJS

Et la dernière de notre liste, bien que non la moindre, est la technologie RxJS.

Je suis convaincu que l'une des fonctionnalités les plus puissantes d'Angular est l'intégration profonde de ce framework avec Rx et la programmation réactive fonctionnelle.

Afin de vraiment maîtriser Angular, ouvrant la voie à la conception d'applications de haute qualité, vous devez d'abord étudier Rx, ou au moins les opérateurs les plus importants. Il est difficile d'être un développeur Angular vraiment avancé sans passer beaucoup d'heures à comprendre Rx.

Il y a deux raisons d'apprendre Rx pour vous aider à développer des applications angulaires: les performances et le traitement asynchrone des données.

Le traitement asynchrone des données est une tâche particulièrement difficile dans les applications modernes et hautement interactives. Par conséquent, vous devez oublier les promesses, oh setTimeoutet oh setInterval, et commencer à travailler dans le style Rx.

Une autre raison sérieuse d'apprendre Rx est d'optimiser les performances des applications. Bien sûr, pour commencer, il suffit d'utiliser des canaux asynchrones, mais parfois cela ne suffit pas. Par exemple, vous pouvez contrôler le nouveau rendu des composants en passant uniquement ces événements via le canal, dont l'occurrence implique la nécessité d'un nouveau rendu.

Rx fournit au développeur de nombreux opérateurs qui peuvent l'aider à mettre en cache quelque chose ou à intégrer quelque chose dans des packages. Et cela, par conséquent, conduit à des performances d'applications optimisées. Ici matériel sur les motifs RxJS.

Sommaire

J'ai donné ici une courte liste de sujets qui méritent d'être explorés pour quelqu'un qui veut devenir un développeur Angular haute performance, ou quelqu'un qui veut être un architecte d'application Angular.

Vous pouvez ajouter beaucoup plus à cette liste. Mais, entre autres, je propose de ne pas oublier que pour vraiment apprendre quelque chose sur le monde du développement web, il faut commencer par les bases. Il s'agit de JavaScript, CSS, des modèles de conception, des techniques d'écriture de code propres, des outils et bien plus encore.

Et que conseilleriez-vous d'étudier à ceux qui souhaitent apprendre à concevoir des applications angulaires de haute qualité?

6 concepts qu'un architecte d'applications angulaires doit maîtriser