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_

  1. Standalone Apps
    A repository with a single application
  2. Package-Based Repos
    A repository with multiple projects that depend on each other via package.json and often have nested node_modules
  3. 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_

https://slides.com/puppo92/durable-and-modular-frontend-application-with-nx

About demo_

https://github.com/Puppo/building-durable-and-modular-frontend-applications-with-Nx

Luca Del Puppo

@puppo92

Luca Del Puppo

Puppo_92

@puppo

We are hiring

Thank you!_

Durable and modular Frontend application with Nx

By Luca Del Puppo

Durable and modular Frontend application with Nx

  • 661

More from Luca Del Puppo