JSConf Korea 2020 Developing in a Large Monorepo 

Jai Santhosh Engineering Manager @jaisanth 

Microsoft Search 

Re-using Components They are the user’s most important, cross-app and cross-platform interactions in the Office Suite. High-Value Experiences These experiences must feel familiar across apps and platforms, but also look and feel consistent within a platform and within an app. Coherence 

People Card 

People Card 

People Card Card Conversations Documents Events Organization Analytics Contact 

Write new code Test locally Create a PR Receive Peer Review Verify build and test reports Merge PR with main Checkin new code Deploy through rings to production Listen and measure for feedback Propose next steps Write new code Agility Inner Loop Outer Loop 

Web Win32 UWP iOS Mac Android src src src src src src Agility 

Web Win32 UWP iOS Mac Android src Agility 

Agility & Coherence 

Monorepo 

What is a Monorepo? A repository with multiple packages or projects • Other repositories can re-use small parts of our code • Better code re-use unit (better tooling) Singularity across multiple packages • Developer agility • Code consistency as conventions are shared • Unified processes, versioned centrally • Code discoverability • ... Why in one repository? • Various projects or packages can co-exist. • Micro platform with an entire application stack in one place. Not necessarily a monolith 

Using separate packages Re-using can be made easier with singular responsibility packages. Can be published easily. Enables cross-team usage of required packages. Can manage releases easily. 

You need reliable tooling! Package Management Linters Build system / Infrastructure Testing Tools Cross-package orchestrators and more… Package Management Cross-package orchestrators 

Package Management 

JavaScript package JavaScript Repo Repo’s external dependencies 

package.json NPM Yarn Files on disk NodeJS require() is read by which writes is resolved by which finds 

require("react") • /User/../git/Monorepo/packages/people-core/node_modules/react • /User/../git/Monorepo/packages/node_modules/react • /User/../git/Monorepo/node_modules/react • /User/../git/node_modules/react • /User/../node_modules/react • /node_modules/react Node Module Resolution 

package-1 package-2 Repository 1 Repository 2 

package-1 package-2 Repository mono monorepo 

package-1 package-2 Repository mono monorepo A (1.0) C (1.0) B (1.0) B (2.0) B (1.0) 

package-1 package-2 monorepo A (1.0) C (1.0) B (1.0) B (2.0) node_modules packages package-1 package-2 node_modules symlinks https://yarnpkg.com/blog/2018/02/15/nohoist/ Package Hoisting 

rush yarn workspaces pnpm workspaces Lerna Package Management - Tools Multiple popular tools for package management, let’s check how yarn workspaces works. 

• Set "private": true • Add workspace packages • Optionally, you can add a nohoist list of packages as well • Run yarn from the root of the monorepo. • Package installation time for about 150+ packages came down from ~20mins to ~6mins. monorepo/package.json Yarn Workspaces 

Cross-package Orchestration 

rush Lerna Shell scripts Gulp Cross-package Orchestration - Tools Perform operations on files across multiple packages, usually from the root folder 

monorepo/lerna.json • Add "packages": [<>] • Specify npmClient • Set useWorkspaces value. • lerna run [script] - Run the script across packages Lerna 

Lerna - Example 

Lerna - Example 

• We use test dev apps for each of the experiences for quick dev validation. • lerna run --scope [] [script] Lerna - Scoping 

• lerna publish - create new release versions of packages that have been updated. • lerna diff [package?] - Diff package(s) since the last release. • lerna changed – Check which packages have been changed since last release. • lerna version – Bump version of packages changed since the last release. Lerna - Versioning 

• Brought down our build times by more than 5x. • Good community adoption • babeljs • create-react-app • react-router • jest • and many more... Lerna - Wins 

Summing it up… • Pick the right tools for your monorepo, based on the complexity of the packages, to improve the developer experience. • For linting, unit/functional/perf testing you can combine it with tools like lerna to easily run these commands across packages. • If you are using TypeScript, you will have to handle TS compilation and for a better developer experience, manage typings for better Intellisense. 

References https://medium.com/@vincentbailly/evolving-a-large-typescript-repository-4a32c61e94fd https://rushjs.io/ https://lerna.js.org/ https://yarnpkg.com/lang/en/docs/workspaces/ Image courtesy: @redbadgerteam, Adobe Stock images 

Thank you! Jai Santhosh Engineering Manager @jaisanth