Nx

A Smart, Fast and Extensible Build System for ...

Be aware, this presentation might contain flashy giphy's...

...CJIB

What is        ?

Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations.

For

With out of the box

And build in support for...

But also community plugins for

A little bit of History

nrwl.io founded in december 2016

Angular / WEB consultancy at large scale

A little bit of History

  • ex Angular Core team
    • Angular Mobile
    • Http Client
  • RxJs (5)
  • Angular Show Podcast
  • NgConf organizer
  • Crazy about his pigs

Jeff Cross

  • ex Angular Core team
    • Dependency Injection
    • Forms
    • Router
  • Still big contributor to Angular
  • NgRx core contributor

Victor Savkin

A little bit of History

  • Nx version 1.0.1 released on 24 april 2017
  • At first custom CLI based on Angular CLI
  • Later as an extension / schematic on Angular
Fun Fact: Angular has schematics thanks to Nx
  • Nowadays it's a custom CLI again

       Actually much more than just a CLI

  • Nx version 20.3.1 released Yesterday

A little bit of History

  • NRWL / Nx core team is now > 20 strong
    • A lot of ex Angular team members
  • Clients mostly big (fortune 500) companies
  • Consultancy, training, workshops, plenty more
  • December 2021:     1M downloads per week
  • June 2022:                2M downloads per week
  • Dec 2024:                 5M downloads per week

A little bit of History

  • Used by more and more big companies
  • But also..
    • More and more Open Source projects / libraries

A little bit of History

  • In 2023 16M investments
  • Nx devtools === FREE

 

How do they make money?

  • Consultancy (Fortune 500)
  • Nx Cloud

    ...is the end-to-end solution for smart, efficient and maintainable CI

  • Nx Powerpack

    A suite of paid extensions for the Nx CLI specifically designed for enterprises, built and supported by the Nx core team.

Why        ?

Toolset

Yeah, but I can do this with the Angular-CLI as well!

-- a random developer

Toolset

  • Angular-CLI +++++++

         (Angular-cli is not meant for Enterprise applications)

  • Default:
    • Typescript, ESLint, Prettier, Jest / Vitest, Cypress / Playwright
    • Local computation caching!
  • Library/Framework agnostic 
    • Angular, React (native), Vue, Svelte, Solid, Lit, Node (Nestjs, ExpressJs)
    • Nextjs, Remix
  • Plugins:
    • semver, spring/java, go, rust, flutter, .NET

Toolset

  • Perfect for mono-repos

         (But works, perfectly for small(er) (open-source) projects as well

  • Build in support for MFE

        (Module Federation)

  • But just as wel for
    • ​Open source projects
    • Standalone applications
  • The development/build process is continuously improved
  • ​ESBuild
  • Vitejs
  • SWC
  • RSPack

dependency management

  • One `package.json` to rule them all

dependency management

nx migrate latest
  • Handles migrations/upgrades for major libraries
    • Angular, Storybook, Eslint, Cypress, Jest, Playwright, Vitest, etc

Architecture / structure

  • Helps / opinionates to create a loosely coupled and highly cohesive structure
  • Organize code easily by domain and/or feature
  • Add restriction per domain/feature/type with special ESLint rules

Developers new to Nx are initially often hesitant to move their logic into libraries, because they assume it implies that those libraries need to be general purpose and shareable across applications.

This is a common misconception, moving code into libraries can be done from a pure code organization perspective.

  • Add custom generators/plugins

Architecture / structure

apps/
   expo                                          <---- App (shell) folder, lazy-loads the needed domains
   d&i (rpp)                                     <---- App (shell) folder, lazy-loads the needed domains
libs/
   persoon/                                      <---- Domain / grouping folder
     data-access/
     feature/
        persoon-details/                         <---- feature -> usually a page which can be accessed via routes
     ui/
        persoon-list/                            <---- dumb component, which can be used in the features in persoon
   shared/                                       <---- shared / grouping folder -> can be used in each domain
     ui/
        button/                                  <---- dumb component, which can be used in ALL features
        card/
        details-summary/
        dialog/
   zaak/                                         <---- grouping folder

     vonnis/                                     <---- Domain
        data-access/
        feature-raadplegen/                      <---- feature -> usually a page which can be accessed via routes
        feature-opvoeren/
        feature-beoordelen/
  gedragsaanwijzing/                           <---- Domain (509hh)

Console

Affected & dep-graph

Affected & dep-graph

  • Only build what's affected!
# see what's been affected by changes
nx affected:graph

# run tests for current changes
nx affected:test

# run e2e tests for current changes
nx affected:e2e

# run linting for current changes
nx affected:lint

# run your custom commands like generate for current changes
nx affected:generate

# show the dep-graph for current changes
nx affected:dep-graph
  • Faster CI pipelines!

Plugins

  • Configure tooling
  • Configure caching
  • Develop generators and executors to simplify cumbersome tasks and enhance their robustness.
  • Plugins
    • @nx/angular
    • @nx/playwright
    • @nx/vite
    • @expo/openapi-zod !!!

What

bij het CJIB?

bij het CJIB?

  • EXPO - ​mono-repo inclusief component-library
  • Commons - ngx-commons
  • TOS
  • DLV (digitaal-loket-verkeer)
  • BAS
  • PGD
  • Rinias2
  • Tera (Terwee)

Op dit moment wordt het gebruikt bij:

bij het CJIB future

3 ?? mono-repo's

bij het CJIB future

bij het CJIB future

  • EXPO mono-repo als basis (hernoemen?)
  • Alle nieuwe interne applicaties / modules in 1 repo
  • Inclusief de (nieuwe) component-library voor interne applicaties
    • Gebaseerd op het (interne) CJIB Design System (nu EXPO)
  • In 1e instantie alleen nieuwe modules/applicaties
    • EXPO
      • Zaak: Vonnis / Gedragswijziging
      • Persoonsdossier / Persoonsbeeld
      • Medewerker dashboard
    • D&I (RPP uitfaseren en nieuwe applicatie/modules voor D&I)
    • HIEP (Beheer applicatie)

Medewerker (new)

bij het CJIB future

Medewerker (legacy)

  • applicaties die gebaseerd zijn op ngx-commons
  • huidige applicaties 1 voor 1 overzetten naar 1 mono-repo
    • nadat ze in eigen repo al over zijn naar Nx

Hoe?

Zorgen dat gedeelde configs hebben voor

  • Prettier
  • ESLint
  • TypeScript (tsconfig)

bij het CJIB future

  • Zowel voor burgers als keten-partners
  • Component library
  • Gebaseerd op het (externe) CJIB Design System

Portalen (extern

bij het CJIB future

bij het CJIB future

Hoe

  • Incrementeel per applicatie/repo
npx nx init
  • Paralellization & Caching
nx run-many --parallel=3 -t=build

bij het CJIB future

Migrate existing projects into nx workspace

  • In bestaande (mono)-nx-repo
npx nx import [my-project]

bij het CJIB future

(custom) CI/CD - advantages

Nx provides several key advantages when integrated with a custom CI/CD pipeline

Improved Build Times: 

Nx's intelligent build system analyzes project dependencies and only rebuilds the necessary parts of your application, resulting in significantly faster build times compared to traditional build systems

On Premise:

Everything is handled by the CI/CD team and not in the cloud

 

(custom) CI/CD - disadvantages

Increased Maintenance: Setting up and maintaining a custom CI/CD pipeline can require significant effort and expertise

Lack of Specialized Features: Compared to Nx Cloud, a custom setup may lack specialized features like distributed task execution and advanced caching

Integration Challenges: Integrating Nx with your chosen CI/CD tools can present challenges

Potential for Inconsistency: Potential for inconsistencies in build environments across different machines

Security Risks: Managing your own CI/CD infrastructure introduces security responsibilities

(custom) CI/CD - best practices

Caching: Implement effective caching strategies to store and reuse build artifacts. Nx has a built-in caching mechanism that can be further optimized by configuring your CI/CD system to store and retrieve cached artifacts. This can drastically reduce build times by avoiding redundant computations (.nx, .cache, node_modules, artifacts)

Parallelization: Utilize parallelization to run multiple build tasks concurrently. Nx supports parallel execution of tasks, allowing you to take advantage of multi-core processors and significantly reduce build times

Dependency Analysis: Leverage Nx's dependency graph to identify and build only the affected parts of your application. This can be achieved using the nx affected command, which analyzes changes and determines which projects need to be rebuilt

Optimize CI/CD Configuration: Fine-tune your CI/CD configuration to minimize unnecessary steps and optimize resource allocation. This could involve optimizing Docker image builds, streamlining testing processes, and efficiently distributing tasks across build agents

 

(custom) CI/CD - Nx features

Task Scheduling: Nx allows you to define and schedule tasks in a declarative manner, making it easier to manage complex build processes and ensure that tasks are executed in the correct order

Affected Command: The nx affected command is a powerful tool for optimizing CI/CD pipelines. It allows you to target specific projects for building, testing, and deployment based on the changes made in a given commit or branch

Distributed Task Execution: While not using Nx Cloud, you can still implement distributed task execution by configuring your CI/CD system to distribute tasks across multiple build agents. This can further improve build times by parallelizing tasks across available resources

 

 

Powerpack

- better CODEOWNERS

- Self host remote-caching

  - S3, Azure, Google Cloud Storage

  - Network drive

- conformance

 

$ 375,- per dev per jaar

- unlimited repos

- https://cloud.nx.app/powerpack/purchase

(inbegrepen bij Nx Enterprise (cloud + powerpack)

 

 

 

Powerpack

Cloud

  • Nx based Distributed Task Execution & Remote Cache
  • Automatic task splitting
  • Flaky task detection
  • Aims to accelerate build times, reduce CI costs, and improve developer productivity
  • Private Cloud / Nx Enterprise
  • For the moment the best integrations are with github /gitlab

Cloud - Advantages

Reduced CI Costs:

  • Optimizes resource utilization and minimizes redundant computations 
  • Only rebuilds affected applications, leading to significant cost savings

Faster Build Times:

  • Distributes tasks across multiple machines to run in parallel
  • Drastically reduces overall build time, especially for large projects

Improved Reliability:

  • Automatically identifies and re-runs flaky tests
  • Ensures builds are not broken by intermittent test failures

Enhanced Collaboration:

  • Provides a centralized platform for managing and sharing build artifacts and test results
  • Improves communication and coordination among team members

 

Cloud - Disadvantages

Security Concerns:

  • Storing build artifacts in the cloud raises security concerns
  • Risk associated with storing sensitive information in a third-party environment

Complexity:

  • Integrating Nx Cloud can introduce complexity
  • Setting up and configuring may require effort and expertise

Vendor Lock-in:

  • May be challenging to switch to alternative solutions in the future
  • Migrating to a different platform might involve significant effort

Cloud - Data storage

Build artifacts: Compiled code, test results, and other build outputs

 

Cache entries: Cached build artifacts and task results to speed up builds

 

Metadata: Information about the project, tasks, and build configurations

 

Important: Nx Cloud does not store your source code

Cloud - Security measures

Encryption: All communication with the Nx Cloud API is encrypted

 

Access control: Restricts access to sensitive data

 

Immutable cache entries: Ensures cache entries cannot be tampered with

 

End-to-end encryption: Provides an additional layer of security for task artifacts

Cloud

Are there no drawbacks?

Are there no drawbacks?

  • You have to type nx instead of ng
  • In the beginning there a lot of concepts to grasp / Another layer of complexity?

But most are needed for proper usage of the tooling(s) you are gonna use anyway:

  • ​ESLint, Cypress, Jest, Storybook
  • Proper architecture  / smart and dumb components / loose coupling - high cohesion
  • You will have to write custom scripts to maintain those. And who will understand/maintain them when you are gone?
  • Setting up a proper CI (Jenkins) Pipeline is pretty hard

But again, this is the same when you are NOT using Nx

  • You will have to do it The           Way!

First input of information is always https://nx.dev (also for Playwright, Cypress, Vitest, Jest, Storybook, etc)

Resources

Nx

Twitter

20 reasons to do Angular in Nx

Resources

Resources

Questions? / Discussion

Nx devtools @CJIB

By Arjen

Made with Slides.com

Nx devtools @CJIB

  • 102

More from Arjen