Scalable development through monorepos at React Summit Remote Edition
The 2020 COVID pandemic caused many of our favorite development conferences to be canceled or postponed. However, a few of them were able to adapt to the new remote methodology that has taken the world by storm over the last few months. This was the case with the React Summit. The conference had its remote edition last April and, in this article, we’ll focus on one of the conference’s talks about monorepos: Scalable React Development for Large Projects by Jason Jean. But first, let’s give you a bit of context.
About the React Summit Remote Edition
The React Summit is a two-tier conference: one of the tiers focuses on React and the other on React Native. This year’s edition was to be held in Amsterdam, but had to be postponed until September 11 due to the pandemic. However, a remote edition was organized and held via Zoom on April 17. This conference included talks, Q&As and workshops, as well as an advice lounge and networking opportunities. There were even several afterparty options, including a QuakeJS tournament. Speakers included Guillermo Rauch from Next.js, Sangeetha KP from Amazon, and Haris Mahmood from Shopify. Meanwhile, topics ranged from artificial intelligence and virtual reality with React, to AHA programming and bringing Ionic to React.
About the speaker
Jason Jean is a Senior Angular Architect at Nrwl in Canada. Nrwl is a development company that consults with fortune 5000 companies and specializes in monorepo development. They create development tools to accelerate app development and their main goal is to help companies work faster and more efficiently.
Jean works as part of the core team for Nx, a set of open-source development tools specially created for monorepos. In his talk, he explains what monorepos are—and what they are not—and discusses their benefits. He also goes into detail about Nx as a tool to help developers implement a monorepo workflow.
What are monorepos?
A monorepo is a single repository with multiple projects commonly used by big companies such as Facebook, Microsoft, Google and Twitter. Jean describes a monorepo as a warehouse for code. Just like in a warehouse, where items are stored together, but packed and shipped separately, projects in a monorepo are stored together, but apps or features are developed separately and each project is deployed independently. Jean also emphasizes that a monorepo is not a monolithic app and that using one doesn’t mean you have to build or deploy all projects at once.
What are the differences between using multiple repositories and monorepos?
Apps are usually developed by sharing code in multiple repositories. This implies duplicated tooling, separate workflows and testing, less analyzable dependencies, and out of sync internal and external dependencies (with possibly different versions being used for each project or feature). This system is not only complex, but it is also usually more cumbersome and time-consuming.
In contrast with multiple repositories, monorepos use unified tooling, their dependencies are analyzable, they let you run all tests at once and they include a single version of dependencies (both internal and external). Therefore, using a monorepo considerably simplifies the development process.
What does Nx bring to the table?
Nx is an open-source toolkit that enables you to scale development through multiple teams—which means multiple applications and both front and back end—by helping you implement a monorepo workflow.
Jean highlights three main benefits of working with Nx: you can develop like Facebook, it has an intelligent build system and it supports the use of modern tools. He then goes into detail about the perks of each of these features:
1. Develop like Facebook
Using Nx allows you to incorporate some of the best coding practices from a tech giant like Facebook. This means you can share code and collaborate between multiple teams, thus creating a holistic development experience. It also lets you create a workspace with no manual setup, as well as add shared functionalities very easily. Other benefits are that you can generate a redux state without writing boilerplate and add Next.js without doing much setup.
What happens if you don’t like what Nx generates? Well, you can write custom code generation to suit your organization. This has the added benefits of achieving consistency and enforcing best practices. Nx also helps you enforce standards and best practices by tagging different projects and creating module boundaries to make sure there are no incorrect dependencies. Finally, it infers dependencies and lets you visualize all your dependencies with an interactive view.
2. Intelligent build system
Nx’s intelligent build system means you can build only the affected projects, build in parallel, distribute builds across many agents and cache previous builds. As Jean states, the idea is that you never have to build the same thing twice.
3. Supports the use of modern tools.
Nx’s default setup includes TypeScript (although, of course, you can also use plain JavaScript), Jest, Storybook—a tool that lets you develop UI components in isolation—and Cypress—and end-to-end testing experience.
However, you can install a variety of plugins for your favorite tools, such as React, Next.js, Express.js, Node.js, HTML, Angular and Nest.js. If you don’t find the tools you want among the selection, you still have two options: you can check out the community-created plugins or even create your own.
If you want to see how Nx works more closely, you can check out the live demo by Jean.
Why make the switch to monorepos?
In the Q&A section, one viewer asked about how to convince leadership and team members to make the switch from multiple to monorepo. Jean explains that monorepos improve collaboration and the perfect way to convince your team to make the switch is to focus on that. If dependencies don’t work together well, this creates frictions between different members of the team. A monorepo takes a lot of that stress away. Moreover, if you try out Nx and decide it’s not for you later on, you can move away from it easily. As Jean states, it doesn’t change how you write the code, it just works around it.
Final thoughts
Whether a monorepo is right for you will depend on the size, budget and requirements of your development company. However, it definitely has many benefits, particularly if working on large projects or several projects that overlap. -You can also watch the rest of the videos from the React Summit Remote Edition here.
