Améliorez votre expérience de développement avec Nx.io

Avec Nx, vous pouvez utiliser les pratiques de développement efficaces mises au point par Google et Facebook. Vous pouvez utiliser le développement de style monorepo en développant plusieurs applications dans un espace de travail et en utilisant des bibliothèques réutilisables dans les applications React, Angular et Node. Avec Nx, vous êtes sûr d’utiliser des frameworks et des outils modernes pour des processus de développement efficaces.

Au début, vous ne pouviez pas imaginer que le projet dépasse quelques lignes de code pour le frontend. Avancez rapidement vers dix demandes de fonctionnalités plus tard, et vous avez un backend fonctionnant séparément et votre frontend est maintenant un monolithe. Vous avez du mal à intégrer de nouvelles bibliothèques et à apporter des modifications aux deux applications. Vous rencontrez désormais des bogues à chaque tournant car votre configuration vous empêche de les découvrir tôt.

Cela ressemble à un film d'horreur, mais cette expérience n'est pas un peu fictive. Presque tous les développeurs ont eu cette expérience lors de la construction de projets personnels ou professionnels. La gestion d'un projet au fur et à mesure de l'augmentation de la quantité et de la complexité des fichiers est un peu difficile, c'est pourquoi un outil comme NX est important.

Nrwl Extensions (Nx) est un projet open-source créé par une équipe de développeurs Google qui fournit des outils utile pour construire des monorepos robustes et extensibles . Alors que précédemment ne fournissaient que des commandes pour gérer des projets Angular complexes et robustes, Nrwl Extensions a maintenant une prise en charge étendue pour d'autres bibliothèques et technologies frontales comme React et Web Components. Il peut également être utilisé pour créer des projets full-stack en prenant en charge des technologies de backend telles que Express, Nest.js et Next.js .

Avec Nx, vous pouvez surmonter les problèmes suivants pendant le développement:

• Gestion des modifications dans plusieurs référentiels à mesure que le projet se développe
• Manque de collaboration car le partage de code est difficile et coûteux
• Manque de tests et de linting, ce qui conduit à la découverte tardive des bogues

Nx fournit une structure organisationnelle avisée et un ensemble d'outils pour la génération, les tests et le peluchage. Il utilise TypeScript pour la vérification de type statique, ce qui permet de connaître certaines des bases de TypeScript telles que les annotations de type et les interfaces.

Premiers pas avec Nx – Workspaces

Pour commencer à utiliser Nx, vous devez créer un espace de travail . Nx utilise des espaces de travail pour stocker des applications et des bibliothèques, ainsi que des échafaudages pour aider à la construction, au peluchage et aux tests.

Pour créer un espace de travail Nx, vous devez exécuter la commande suivante:

Using Yarn:

 yarn create nx-workspace

Utilisation de npm:

 npx create-nx-workspace

Vous obtiendrez une invite pour un nom d'espace de travail . Entrez la chaîne de votre choix comme nom de l'organisation. Le nom de l'espace de travail est utilisé par Nx pour définir la portée de nos bibliothèques, tout comme packages de portée npm .

L'invite suivante sera de sélectionner un préréglage. Nx est livré avec sept préréglages parmi lesquels vous pouvez sélectionner:

• empty [an empty workspace]
• Web components [a workspace with a single app built using web components]
• angular [a workspace with a single Angular application]
• angular-nest [a workspace with a full-stack application (Angular + Nest)]
• react [a workspace with a single React application]
• react-express [unespacedetravailavecuneapplicationfull-stack(React+Express)
• next.js [un espace de travail avec une seule application Next.js]

Un espace de travail Nx est un dossier simple avec des configurations pour peluchage, test et exécution de code. Pour commencer à développer dans l'espace de travail nouvellement créé, vous devez créer un projet dans l'espace de travail. Consultez la section suivante où nous sélectionnons l'un des préréglages et construisons dessus.

Projets

Une application ou une bibliothèque dans l'espace de travail, une application est un package qui utilise plusieurs bibliothèques pour former un programme exécutable. Une application est généralement exécutée dans le navigateur ou par Node. Pour créer un projet, nous sélectionnerons l'un des préréglages disponibles. Utilisons le préréglage react-express .

La sélection de ce préréglage affichera une invite demandant le Nom de l'application ; entrez un nom simple de votre application et passez à l'invite suivante. L'invite suivante demandera le format de feuille de style par défaut ; vous pouvez faire votre choix dans la liste fournie ou vous en tenir à la sélection par défaut si vous n'êtes pas familier avec les options proposées. Après cela, votre projet sera amorcé et les dépendances de chaque projet seront installées et disponibles pour l'exécution.

Lorsque la commande s'exécute, vous devriez voir une structure de dossier similaire à celle présentée ci-dessous:

     /
    ├── applications /
    │ ├──  /
    │ └── <nom de l'application-e2e /
    │ └── <api /
    ├── libs /
    ├── outils /
    ├── nx.json
    ├── package.json
    ├── tsconfig.json
    └── tslint.json

Si vous ne souhaitez utiliser aucun des paramètres prédéfinis ou si vous souhaitez ajouter une nouvelle application à l'espace de travail, vous pouvez utiliser l'une des commandes suivantes pour installer une nouvelle application:

Pour ajouter un site Web application de composants, exécutez:

 yarn add --dev @ nrwl / web

nx g @ nrwl / web: application myapp

 npm   install  --save-dev @ nrwl / web

nx g @ nrwl / web: application myapp

Pour ajouter une application Angular, exécutez:

 yarn add --dev @ nrwl / angular

nx g @ nrwl / angular: app myapp

 npm   install  --save-dev @ nrwl / angular

nx g @ nrwl / angular: app myapp

Pour ajouter une application React, exécutez:

 yarn add --dev @ nrwl / react

nx g @ nrwl / react: appli myapp

 npm   install  --save-dev @ nrwl / react

nx g @ nrwl / react: appli myapp

Utilisez : yarn nx g @ nrwl / web: app myapp ou npm run nx - g @ nrwl / web: app myapp if the nx La commande g échoue.

Pour démarrer et servir une application générée, utilisez la commande suivante:

 nx serve  < application name > 

Dans la section suivante, nous verrons comment nous pouvons créer des bibliothèques et les partager entre des applications dans l'espace de travail.

Bibliothèques

Une bibliothèque dans ce contexte est constituée d'un ensemble de fichiers qui traitent de problèmes connexes. Nous pouvons créer une bibliothèque et l'ajouter à notre application. Avant de créer une bibliothèque, examinons les différents types de bibliothèques disponibles pour une utilisation dans Nx.

Types de bibliothèques

Dans un espace de travail, les bibliothèques sont généralement divisées en quatre types différents:

• Bibliothèques d'utilitaires: contiennent des utilitaires communs qui sont partagés par de nombreux projets
• Bibliothèques de fonctionnalités: implémentent des interfaces utilisateur
• Les bibliothèques d'interface utilisateur: contiennent uniquement composants de présentation c'est-à-dire des composants qui rendent uniquement à partir de leurs accessoires et appellent des gestionnaires de fonctions lorsqu'une interaction se produit
• Bibliothèques d'accès aux données: peuvent être utilisées pour interagir avec des services externes comme la communication avec services de backend et autres points de terminaison externes

Pour générer des bibliothèques dans votre application, vous pouvez utiliser l'une des commandes suivantes:

React Libraries:

 nx g @ nrwl / react: library mylib

Bibliothèques angulaires:

 nx g @ nrwl / angular: library mylib

Bibliothèques TypeScript:

 nx g @ nrwl / workspace: library mylib

La création d'une nouvelle bibliothèque aboutira à quelque chose comme ceci:

    
    ├── applications
    ├── libs
    │ └── mylib
    │ ├── src
    │ │ ├── lib
    │ │ └── index.ts
    │ ├── jest.conf.js
    │ ├── tsconfig.app.json
    │ ├── tsconfig.json
    │ └── tsconfig.spec.json
    ├── workspace.json
    ├── nx.json
    ├── package.json
    ├── outils
    └── tsconfig.json

Quel que soit le type de bibliothèque, vous pouvez exécuter:

• test nx pour tester la librairie
• nx lint pour pelucher la bibliothèque

Par défaut, les bibliothèques ne peuvent être construites que dans le contexte d'une application. Pour pouvoir construire une bibliothèque indépendamment, vous pouvez passer - publiable lors de sa création. Vous pouvez ensuite exécuter nx build mylib pour le créer, puis publier les résultats dans un registre npm.

Comprendre votre espace de travail Nx

Un espace de travail Nx peut contenir des dizaines (ou des centaines) d'applications et bibliothèques. Il peut être difficile de comprendre comment elles dépendent les unes des autres et les implications d'une modification particulière.

Avec Nx, vous pouvez voir comment vos applications sont liées en utilisant la commande suivante: nx dep-graph . L'exécution de cette commande générera un diagramme de dépendances actuel de l'espace de travail: les applications et bibliothèques disponibles et comment elles dépendent les unes des autres. Nx exécute une analyse de code dans l'espace de travail pour collecter ces informations.

L'image ci-dessous montre à quoi ressemble un espace de travail lorsque la commande nx dep-graph est exécutée:

Cela ne s'arrête pas là – Nx fournit également une commande pour inspecter visuellement quelles applications seront affectées par un changement dans une bibliothèque réutilisable. Cela garantira qu'une modification de code dans une bibliothèque utilisée par deux ou plusieurs applications ne sera pas affectée négativement par une modification apportée. Ceci est réalisable car Nx comprend comment nos applications sont liées au sein de l'espace de travail. Pour vérifier les applications concernées après une modification, utilisez l'une des commandes suivantes.

 nx affecté: applications

nx affecté: build

nx affecté: test

nx affecté: e2e

nx affecté --target  =  peluches

Nx triera topologiquement les projets et exécutera ce qu'il peut en parallèle. Vous pouvez en savoir plus sur la façon dont Nx gère votre espace de travail ici .

Test et formatage de code

Nx fournit non seulement des outils pour mieux gérer un espace de travail monorepo, mais il fournit également des outils pour garantir la qualité du code, lisibilité et outils de test modernes.

Test

Pour les tests, Nx utilise deux des meilleurs outils de test pour les applications Web modernes. Cypress est choisi comme testeur e2e; il possède les caractéristiques suivantes pour garantir le bon test des applications:

• Voyage dans le temps
• Recharges en temps réel
• Attente automatique
• Espions, stubs et horloges
• Contrôle du trafic réseau
• Captures d'écran et vidéos

Par défaut, lors de la création d'une nouvelle application Web, Nx utilisera Cypress pour créer le projet de tests e2e. Pour exécuter des tests e2e après avoir apporté une modification à votre application, exécutez l'une des commandes suivantes:

 -  ` nx e2e frontend-e2e `   pour exécuter les tests e2e

-  ` nx e2e frontend-e2e --watch `   pour exécuter les tests e2e  en  le mode  watch 

-  ` nx e2e frontend-e2e --headless `   pour exécuter les tests e2e  dans  le mode sans tête  ( utilisé  dans  CI ) 

Jest est un charmant cadre de test JavaScript de Facebook qui nécessite une configuration zéro et exécute des tests isolés (dans leurs processus pour maximiser les performances). Par défaut, Nx utilise Jest pour les applications Web et Node.js.

Certains des avantages de Jest en tant que cadre de test sont les suivants:

• Zero configs: Jest vise à fonctionner directement, sans configuration, sur la plupart des projets JavaScript.
• Tests isolés: Les tests sont parallélisés en les exécutant dans leurs processus pour maximiser les performances.
• Grande API: De il à attendez Jest a toute la boîte à outils en un seul endroit. Bien documenté, bien entretenu, bien et bon.

Pour exécuter des tests pour vos applications, exécutez la commande suivante:

  npm  run  test 

Code Formatting

Souligner les problèmes de formatage du code lors de la révision du code n'est pas la meilleure façon pour revoir le code. C’est pourquoi Nx est fourni avec le support Prettier. Prettier est un formateur de code avisé qui prend en charge plusieurs langues. Avec Nx, vous pouvez utiliser Prettier pour vérifier le formatage de vos fichiers d'application et également les formater. Vous pouvez utiliser les commandes suivantes pour vérifier et formater votre code dans un espace de travail Nx:

 nx format: write

format nx: vérifier

En savoir plus ici .

Résumé

Avec Nx, vous pouvez utiliser les pratiques de développement efficaces mises au point par Google et Facebook. Vous pouvez utiliser le développement de style monorepo en développant plusieurs applications dans un espace de travail et en utilisant des bibliothèques réutilisables dans les applications React, Angular et Node. Avec Nx, vous êtes sûr d'utiliser des cadres et des outils modernes pour des processus de développement efficaces.