Distributed Caching, improved dependency detection, better support for buildable libraries, and more in Nx 8.12

Today, we are happy to announce the release of Nx 8.12 that includes Distributed Caching!

Nx is a set of Extensible Dev Tools for Monorepos, which we developed at Nrwl based on our experience working at Google and helping Fortune 500 enterprises build ambitious applications at scale.

If you aren’t familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.

Distributed Caching

The productivity, and workflow of developers can be impacted in many ways. One of those ways is the time spent waiting on a particular task to finish, such as an application build, running tests, or lint checking for code consistency. The time it takes for these tasks to finish across an organization is amplified locally, and in a Continuous Integration(CI) environment. Nx now includes a distributed caching mechanism that takes on this problem. Each time you run a build, test, or lint command, those tasks are run against a given set of inputs, and produces an output. The inputs and outputs of those commands are stored in a cache. Nx uses this cache of inputs to intelligently determine whether to reuse the existing artifacts from the cache, and re-run only the required tasks based on your changes. We’ve already tested distributed caching against a couple of production codebases, and you can see the results in the graphic below.

Distributing caching is currently available on an invite-only basis. Learn more about how using a local cache can speed up your development workflow within an Nx workspace.

Automatic Workspace Refactoring

In some cases, you need to restructure the code within your Nx workspace. This involves moving folders, as well as updating configuration files. To make this process less manual, a new move schematic has been added to the @nrwl/workspace package.

nx g @nrwl/workspace:move --projectName my-feature-lib --destination shared/my-feature-lib

By running the schematic with a project name and destination, all the necessary folders, and configuration is moved to its new location within the workspace. For Angular projects, the @nrwl/angular:move schematic also updates the module name, and the import references. You can also preview the changes by using the --dry-run flag with the schematic.

We will be looking at adding more capabilities to make refactoring tasks less manual in an Nx workspace.

Better support for buildable libraries

Nx is well known for its monorepo structure consisting of apps and libs. Applications are split into a variety of libraries, which are directly consumed from within one or many different apps within the monorepo. Sometimes however, it’s necessary to share libs with the outside world, be it within your organization or directly on npm.

Nx already had built-in support for generating, building, and publishing libraries by using thepublishable flag. However, the experience of building libraries that depend on other buildable libraries within your workspace wasn’t an optimal experience. In this release, you’ll automatically be notified of which dependent libraries you need to build first. Nx will then automatically adjust the tsconfig path mappings and precompile your package.json dependencies with the correct version of your dependent library.

Future versions of Nx will also automatically figure our the dependency graph, and automatically precompile all of the required libraries in order. In order to build your dependencies today, use the run-many command:

nx run-many --target=build lib1,lib2,lib3

React support enhancements

Updates to the React ecosystem libraries were also updated with notable improvements including:

  • Babel is updated to version 7.8.0 enabling ES2020 features such as optional chaining, null coalescing, and more.
  • The styled-component library was also updated to version 5.0.0, providing the following improvements: 19% smaller bundle size, 18% faster client-side mounting, 17% faster updating of dynamic styles, 45% faster server-side rendering, RTL support, and more. Read about the latest release on the styled-components release page.
  • Added SVGR support so that SVG files can be imported as React components. This change makes SVG integration into React projects easier and more seamless. (See https://github.com/gregberge/svgr)
  • Added --js option to React schematics so files will be generated as JS files rather than TS files. This option is useful for teams that choose not to use TypeScript for their projects.

Smarter Affected Commands

Nx uses code analysis to construct a dependency graph of all projects in the workspace. It then uses the dependency graph to determine what needs to be rebuilt and retested. We have improved how this dependency analysis works with workspace projects by detecting which npm packages your projects depend on as part of building the dependency graph. This allows you to make updates to your package.json, and Nx will intelligently only rebuild, and retest affected projects instead of the entire workspace.

Nx Plugins

The Nx ecosystem is growing with the capability to build custom plugins in an Nx workspace. To enhance this capability, Nx now includes a special command that allows you to create a plugin for Nx, and run end-to-end(E2E) tests for it. To create a new plugin, invoke the command below.

npx create-nx-plugin my-plugin

Detailed documentation and videos are coming soon.

UI and additional improvements

In addition to the new features, releases of the Angular framework, Angular CLI, Cypress, React, and NgRx libraries were also updated.

New video course for Nx Workspaces!

We also recently launched a brand new premium video course on advanced practices for Nx workspaces. You can get it here!

We also have a free Nx workspaces course on youtube, where you’ll find all you need to know to get started with Nx! Instructor and Nrwl consultant, Isaac Mann, takes you through 5-minute video sessions on specific topics for a total of 30 minutes of learning time. You’ll learn how an Nx workspace enables you to do more with your Angular and React apps and take advantage of the tool:

  • Out-of-the-box configuration for modern frameworks and tooling
  • Easy code-sharing with enforced API boundaries
  • Dependency-graph-aware tooling that allows you to run commands only on the code affected by a particular change
  • Ensure that Angular and React apps and their backend code all live happily in the same monorepo

How to Update Nx

Each release of Nx also contains additional minor features, and bug fixes.

Updating Nx can be done with the following commands, and will update your dependencies and code to the latest version:

yarn update

Or for npm

npm run update

As always, if you are looking for enterprise consulting, training and support, you can find out more about how we work with our clients here.

If you liked this, click the 👏 below so other people will see this here on Medium. Follow Brandon Roberts and @nrwl_io to read more about Nx and Nrwl. Also follow Brandon, Nx, and Nrwl on Twitter!

Get our new course at nxplaybook.com!

Nrwl

At Nrwl we build dev tools for monorepos and help companies use them.

Brandon Roberts

Written by

Web dev, tech writer, Angular Engineer at @nrwl_io , NgRx maintainer, GDE, sports fan, recovering gadget addict, and still learning. Gif game 💪🏿

Nrwl

At Nrwl we build dev tools for monorepos and help companies use them.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade