Durable and modular Frontend applications
with Nx
Luca Del Puppo
Luca Del Puppo
- Senior Software Developer
- JavaScript enthusiast
- TypeScript lover
- “Youtuber”
- “Writer”
Love sport: running, hiking
Love animals
What is Nx?_
Nx is a build system with built-in tooling and advanced CI capabilities.
It helps you maintain and scale monorepos, both locally and on CI.
-
build system
optimized for monorepos -
built-in tooling
for code scaffolding, module boundary enforcement, automated updates -
advanced CI capabilities
with caching and distribution
Nx is a CLI with many commands
Run Task_
Cache task results_
Run task only affected code_
Graph_
- Automated update
- Module Boundaries
- Nx Release
- Nx Replay
- Nx Agent
Who can run with Nx?_
- Angular
- WebComponent
- React
- NextJs
- Node
- Fastify
- Express
- NestJs
And many others
Frontend
Backend
Styles_
Styles_
- Standalone Apps
A repository with a single application - Package-Based Repos
A repository with multiple projects that depend on each other via package.json and often have nested node_modules - Integrated Repos
A repository with multiple projects that depend on each other via typescript imports and often employ a single version policy
How to choose your style_
Standalone application
For when you want a single project that can be nicely structured and modularized. It's a good starting point if you're not looking into a monorepo but with the option to expand later
Package-based repos
Ideally when you already have a monorepo (e.g. yarn/npm/pnpm workspace) and you want Nx primarily for speed and task scheduling. Also, when you want Nx to stay mostly out of your way and you set up everything on your own
Integrated repos
When you want more help from Nx. It takes away the configuration burden by developing a pre-configured setup that scales well, and provides scaffolding support and automated code migrations. Organizations choose this approach if they are bought into monorepos and want to scale up. Integrated repos might restrict some choices to allow Nx to help you more but result in better maintainability and more value in the long run.
Nx itself doesn't care which style you choose
How Integrated repo
works_
Applications
Applications are the glue(containers) of our libraries
Types_
- Angular
- VanillaJs
- React
- NextJS
- Fastify
- Playwright
- Cypress
Real Applications
E2E Applications
Libraries
Libraries are
the containers of specific business domains or utilities
Library types_
Publishable
Buildable
Workspace
How to split your workspace_
- 20% applications
- 80% libraries
80%
20%
💡_
Nx Graph/Tasks_
Graph_
- Creates the deps graph in a Tab of the Browser
- Shows the affected libraries
- Helps to monitor the structure of the codebase
nx graph
Automated update_
Automate Updating Dependencies_
nx migrate
- package versions in your package.json
- configuration files (e.g. your Jest, ESLint or Nx config)
- your source code (e.g. fixing breaking changes or migrating to new best practices)
Tooling_
- Jest
- Vitest
- Storybook
- Playwright
- Cypress
- EsLint
- Prettier
- Nx Console
Testing
Linting
Extensions
Conclusion_
- Give you more control over the structure of your codebase
- Help to split into libraries/modules your codebase
- Mono-repo is not mandatory
- Run task only if effected
- Extensible
- Configurable
Pros_
- You have to study and understand how it works
- You have to configure your own rules (optional)
Cons_
About this presentation_
About demo_
Luca Del Puppo
@puppo92
Luca Del Puppo
Puppo_92
@puppo
We are hiring
