React Conferences

React Summit US 2024

React Summit US 2024

English versionEN

Video: Define the Relationship with Monorepos

Philip Fulcher

From Author:

A monorepo might sound like a big, intimidating thing, but we're going to break it down to just the bare essentials. A monorepo helps you better manage the relationships that already exist between your projects. Once we understand those relationships, we can use tools to very quickly define them and pull them together into a more cohesive whole.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

React article version of this talk

Video summary

Monorepos are single repositories containing multiple distinct projects with well-defined relationships. Relationships in code are based on distance, where code in different files is the closest relationship. By importing code from one file to another, dependencies are established, allowing for changes in one file to immediately impact the other. This enables fast iteration and development. When we separate code into packages or APIs, it increases the distance between code pieces, making it slower to understand the impact of changes. However, when multiple projects are combined in a monorepo, the relationships between them are reduced, enabling faster development. Monorepos make relationships explicit and provide tools to understand their impact. To learn more, visit monorepo.tools or nx.dev for information on managing monorepos with NX.

FAQ

A monorepo is a single repository containing multiple distinct projects with well-defined relationships.

By reducing the distance of relationships between code components, monorepos allow for faster changes and immediate feedback, making iteration quicker.

A common misconception is that a monorepo is simply throwing all code into one repository without structure, which can lead to problems. It actually involves organizing multiple projects with well-defined relationships.

Reducing the distance between code components allows for faster understanding and testing of changes, as it minimizes the steps required to see the impact of a change.

Monorepos make dependencies between projects explicit and manageable, allowing developers to understand the impact of changes and trace affected areas effectively.

NX is recommended as a tool for managing monorepos, as it provides useful features to manage and understand the relationships between projects.

APIs increase the distance between code components, slowing down iteration speed due to the need for merging, packaging, and deployment before changes can be verified.

You can learn more about monorepos by visiting monorepo.tools and nx.dev for detailed information and resources.

Philip Fulcher

6 min

19 Nov, 2024

Comments

Sign in or register to post your comment.

Video transcription

Sign in to access video transcription and chapter summary.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces

DevOps.js Conf 2022

33 min

Levelling up Monorepos with npm Workspaces

Top Content

Ruy Adorno

Open-source maintainer, Node.js contributor, npm cli team member at GitHub

NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.

monorepos npm devops

End the Pain: Rethinking CI for Large Monorepos

DevOps.js Conf 2024

25 min

End the Pain: Rethinking CI for Large Monorepos

Juri Strumpflohner

Juri Strumpflohner

GDE in Web Technologies & Angular, core member of Nx

Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.

monorepos ci cd

Federated Microfrontends at Scale

React Summit 2023

31 min

Federated Microfrontends at Scale

Top Content

Watch video: Federated Microfrontends at Scale

Daniel Bolivar

Cozycore Engineer

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

monorepos micro-frontends architecture case study

Scale Your React App without Micro-frontends

React Summit 2022

21 min

Scale Your React App without Micro-frontends

Jonathan Wagner

Jonathan Wagner

Tech lead and coach at Theodo UK

This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.

web development monorepos team productivity best practices devops

The Age of Monorepos

JSNation 2022

25 min

The Age of Monorepos

Miroslav Jonas

Senior engineer @ Nrwl.io

Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.

Remixing Your Stack in a Monorepo Workspace

Remix Conf Europe 2022

22 min

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

Juri Strumpflohner

GDE in Web Technologies & Angular, core member of Nx

Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.

monorepos react typescript fullstack

Workshops on related topic

React at Scale with Nx

React Summit 2023

145 min

React at Scale with Nx

Top Content

Featured WorkshopFree

Isaac Mann

We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component

monorepos react react monorepo scalability nx react

Node Monorepos with Nx

Node Congress 2023

160 min

Node Monorepos with Nx

Top Content

WorkshopFree

Isaac Mann

Multiple apis and multiple teams all in the same repository can cause a lot of headaches, but Nx has you covered. Learn to share code, maintain configuration files and coordinate changes in a monorepo that can scale as large as your organisation does. Nx allows you to bring structure to a repository with hundreds of contributors and eliminates the CI slowdowns that typically occur as the codebase grows.
Table of contents:- Lab 1 - Generate an empty workspace- Lab 2 - Generate a node api- Lab 3 - Executors- Lab 4 - Migrations- Lab 5 - Generate an auth library- Lab 6 - Generate a database library- Lab 7 - Add a node cli- Lab 8 - Module boundaries- Lab 9 - Plugins and Generators - Intro- Lab 10 - Plugins and Generators - Modifying files- Lab 11 - Setting up CI- Lab 12 - Distributed caching