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
ounpm run nx - g @ nrwl / web: app myapp
if thenx 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écuternx 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.
Source link