Revolutionize Your React dev flow with Nx
Building, Scaling, and Optimizing React Applications Made Simple
Katerina Skroumpelou
Product Advocate at Nx
+
+
=
❤️⚡️
slides: react-nx.netlify.app
Hello, I’m Katerina! 💅
👩💻 Product Advocate + Engineer at Nx - nx.dev
🎯 Google Developer Expert for Angular & Maps
👥 Women Techmakers Ambassador
🎤 Speaker + Instructor
❤️ Loves:
🐱 Cats
⛰️ Mountains
🍫 Chocolate
Find me at:
🐦 @psybercity - 🦋 @psyber.city - 💻 psyber.city
Scaling and Optimizing React Apps Isn't Easy
Developers often rely on many external tools to manage builds, dependencies, and workflows.
Webpack
Jest
Vite
ESLint
Babel
npm
Nx: The Missing Piece for React Developers
Nx brings cohesion to the React ecosystem, simplifying development with powerful automation and tooling integration.
React
Vite
Vitest
Next.js
Playwright
Remix
my babies
Why React Developers Love Nx
Code Generators
> nx g @nx/react:app_
Automatic Migrations
Workspace Insights
Briefly: What Nx Brings
Run Tasks
Cache Task Results
Explore Your Workspace
Generate Code
Automate Updates
Enforce Boundaries
Manage Releases
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024
Nx Supercharges React Development
Next.js
Remix
Vite
Jest & Vitest
Playwright
Streamline Development with Nx
Testing Made Simple
$ nx test
$ nx e2e
Seamless Jest and Cypress integration for unit and E2E testing
Optimized Builds
$ nx build
$ nx release
Build deployable apps or publishable libraries with ease
SSR & Module Federation
$nx g @nx/react:setup-ssr
$nx serve host-app
$nx g @nx/react:remote
Generate SSR apps and federate modules effortlessly
Code Generators That Save Time
Speed up development with powerful generators
Applications
$ nx g @nx/react:app my-app
Libraries
$ nx g @nx/react:lib shared-ui
Components
$ nx g @nx/react:component button
Hooks
$ nx g @nx/react:hook use-auth
Generate
Build
Test
Deploy
Taking Your Project to the Next Level: Nx Cloud
Built for Scale
Lightning Fast
Intelligent Insights
Run Only Affected Tasks
Optimize builds by running only tasks affected by a PR.
Smart Task Execution
- Analyzes dependency graph
- Identifies affected projects
- Skips unnecessary builds
Dependency Graph Example
Pink nodes indicate affected projects
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024
Remote Caching (Nx Replay)
Accelerate Team Development
Key Benefits
- Share task results across teams
- Eliminate redundant operations
- Reduce CI/CD pipeline times
Distributed Task Execution (Nx Agents)
Distribute tasks across machines for faster builds
my babies #2
Atomizer: E2E Test Optimization
Automatically split and parallelize E2E tests.
Smart Test Distribution
- Automatic test splitting
- Parallel execution
- Optimal resource usage
Original Test Files:
src/e2e/app1.cy.ts
src/e2e/app2.cy.ts
src/e2e/app3.cy.ts
src/e2e/app4.cy.ts
Atomizer Split:
e2e-ci--src/e2e/app1.cy.ts
e2e-ci--src/e2e/app2.cy.ts
e2e-ci--src/e2e/app3.cy.ts
e2e-ci--src/e2e/app4.cy.ts
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024
Atomizer in Action
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024
Auto-Rerun Flaky Tasks
Identify and re-run flaky tasks to ensure build stability.
Automatic Recovery
- Detects flaky tests
- Automatic retries
- Failure analysis
Failed
Retrying
Success
AI Enhancements
Use AI to explain errors, allocate resources efficiently, and save costs.
Error Analysis
Intelligent error explanations and solutions
Resource Optimization
Smart allocation of computing resources
Cost Savings
AI-driven cost optimization
@psybercity - @NxDevTools - 🦋 @psyber.city - 🦋 @nx.dev - Katerina Skroumpelou - React Africa 2024