Monorepos with the open source toolkit Nx So..you might not necessarily be a large team and distributed across the globe. But do you have multiple different apps across your company, like backend & frontend maybe, that need to integrate with each other? Or do you have a library of reusable UI components shared with all your teams? Or maybe you don’t because publishing is hard, versioning even more and then there’s backward compatibility! In this talk, I’m showing you how big companies like Google, Facebook and Microsoft solve this, why a monorepo might be a good choice and how the open source toolkit Nx, in particular, can help you with that.

1. Beyond Basics
Scaling Development across large teams
Monorepos with the Open Source Toolkit Nx
@juristr • juri.dev • nrwl.io • nx.dev • nx.app
SFSCon - November, 2020

2. whoami?

3. Google Developers Expert
Web Technologies, Angular
JURI
STRUMPFLOHNER
Cypress Ambassador
Instructor
egghead.io

4. JavaScript Architect
Engineering Manager for Europe
nrwl.io
JURI
STRUMPFLOHNER

5. nrwl.io
Victor Savkin
@victorsavkin
Jeff Cross
@jeffbcross

6. Help your team
learn, grow & be successful.

7. Your Team
Our team
Plan
Priorities, roadmap, technical
constraints, ideal end state
Train
Angular, React, RxJS, Ngrx,
Nx and monorepos
Embed & Support
we work alongside your team; help with
difficult challenges & ongoing training
nrwl.io/services

8. some of world's most ambitious Fortune 500 work with us
@juristr
Working at scale

9. @nrwl_io @juristr

10. How?

11. with
Open Source

12. nx.dev • https://github.com/nrwl/nx

13. 👨‍💻👩‍💻 Modern tools and improved Dx
🏛 Drive & automate good architecture
🚀 Speed
@nrwl_io @juristr

14. Modern tools
Improved experience for Developers
👨‍💻👩‍💻

15. Modern tools
Angular, React, Ngrx, Storybook,...
TSLint, ESLint, Prettier
Protractor, Jest, Cypress
NestJS, NextJS, Node
@nrwl_io @juristr

16. Nx Architecture
@nrwl/workspace
Community
Plugins
Core Plugins
This is where you
come into play
https://nx.dev/web/guides/nx-plugin
@nrwl_io @juristr

17. Drive & automate
good architecture
🏛

18. Feature Boundaries
🏛 Drive & automate good architecture

19. @nrwl_io
Nx building blocks: Apps & Libs
app
core
shared
courses
sales
coupons
One big monolith
with a set of folders,
functioning as
feature boundaries
@juristr

20. @nrwl_io
Nx building blocks: Apps & Libs
courses sales
coupons
coreshared
@juristr
app

21. @nrwl_io
Nx building blocks: Apps & Libs
app
courses sales
coupons
coreshared
thin app
Lots of well
defined
“workspace”
libraries
@juristr

22. @nrwl_io
Nx building blocks: Apps & Libs
app
courses sales
coupons
coreshared
Libs
Shareable
(90% of your code)
Apps
Deployables
@juristr

23. @nrwl_io
Nx building blocks: Apps & Libs
public
courses sales
coupons
coreshared
Libs
Shareable
(90% of your code)
Apps
Deployables
admin
@juristr

24. @nrwl_io
Libraries represent stronger
boundaries compared to
folders and help you think
more about their APIs
��
@juristr

25. Restricting Access
with Nx Lint rules
🏛 Drive & automate good architecture

26. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
@juristr

27. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
type:feature
type:feature
type:feature
@juristr

28. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
type:feature
type:feature
type:feature
type:util type:util
@juristr

29. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
type:feature
type:feature
type:feature
type:util type:util
scope:
store
scope:
store
@juristr

30. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
type:feature
type:feature
type:feature
type:util type:util
scope:
store
scope:
store
scope:
admin
scope:
admin
scope:
admin
@juristr

31. @nrwl_io
public
courses sales
coupons
coreshared
admin
type:app type:app
type:feature
type:feature
type:feature
type:util type:util
scope:
store
scope:
store
scope:
admin
scope:
admin
scope:
admin
scope:
shared
scope:
core
@juristr

32. Defining Rules👮‍♀

33. @nrwl_io
Restricting dependencies
type:app
type:feature
type:util
only depend on
public admin
type:app
❌
@juristr
type:app

34. @nrwl_io
Restricting dependencies
type:app
type:feature
type:util
only depend on
type:util type:util
only depend on
coursesshared
type:featuretype:util
❌
@juristr

35. @nrwl_io
Restricting dependencies
type:app
type:feature
type:util
only depend on
only depend onscope:
store
scope:
store
scope:
shared
scope:
core
type:util type:util
only depend on
public sales
scope:
admin
scope:
store
❌
@juristr

36. @juristr@nrwl_io
Custom Lint Rules
// tslint.json
...
"nx-enforce-module-boundaries": [
...
{
"sourceTag": "scope:store",
"onlyDependOnLibsWithTags": [
"scope:store",
"scope:shared",
"scope:core"
]
},
]

37. Visualizing
Dependencies
🏛 Drive & automate good architecture

38. Nx Dependency
Graph
@juristr
Source: https://github.com/nrwl/nx-examples

39. Feature Reusability
🏛 Drive & automate good architecture

40. @nrwl_io
Nx building blocks: Apps & Libs
public
courses sales
coupons
coreshared
Libs
Shareable
(90% of your code)
Apps
Deployables
admin
@juristr

41. lib
app
app app
app
app
lib lib
lib
lib
@nrwl_io @juristr

42. Speed��

43. We strongly believe in
monorepos!

44. One codebase to rule them all!
@juristr
● One git repository
● All your frontend & backend apps and libraries
● All your teams
(you don’t strictly need one single company-wide one; also multiple monorepos possible)
@nrwl_io

45. What’s wrong with “multi repos”?
Why?

46. @juristr@nrwl_io
lib
app
app app
app
app
lib lib
lib
lib

47. @juristr@nrwl_io
lib
app
app app
app
app
lib lib
lib
lib
Shared code
Versioned,
deployed to some
repository (npm)

48. @juristr@nrwl_io
lib
Every library...
● Own Angular/React version
● Own TypeScript version
● Own Jest / Karma & Jasmine
● ...

49. At an
organizational level...

50. How difficult is it to
upgrade Angular/React?
(across all your apps)

51. How long does it take to
release security patches?

52. How difficult is it to
refactor cross-cutting code?

53. @juristr@nrwl_io
In a monorepo..
● 1 version of Angular/React
● 1 version of TypeScript
● 1 version of Jest / Karma &
Jasmine
● ...
● (one node_modules folder)

54. But!

55. Do you wanna always
{build, test, lint, ...} everything?

56. ThatWon’t scale!

57. Nx knows what
you’re building

58. Nx dependency graph
@juristr

59. Nx affected dependencies
@juristr

60. Nx affected dependencies
@juristr

61. Nx affected dependencies
@juristr

62. nx affected:{test,build,...}
@nrwl_io @juristr

63. { build, test, lint,... }
Nx
Local cache Local cache
Computational Cache
@nrwl_io @juristr
{ build, test, lint,... }
Nx

64. Never {build, test,...} twice
nx.app

65. distributed cache
{ build, test, lint,... }
Nx
{ build, test, lint,... }
Nx
upload/download
command result
Local cache
Local cache
Victor Savkin: How to never build or test the same code twice
Distributed
computational
cache
@nrwl_io @juristr

66. distributed cache
{ build, test, lint,... }
Nx
{ build, test, lint,... }
Nx
upload/download
command result
Local cache
Local cache
Victor Savkin: How to never build or test the same code twice
Distributed
computational
cache
@nrwl_io @juristr

67. distributed cache
{ build, test, lint,... }
Nx
{ build, test, lint,... }
Nx
CI Server
{ build, test, lint,... }
upload/download
command result
Local cache
Local cache
Victor Savkin: How to never build or test the same code twice
Distributed
computational
cache
@nrwl_io @juristr

68. @nrwl_io
Affected + Parallel + Nx Cloud
@juristr
Affected + Parallel + cloud
Affected + Parallel

69. So...

71. Scale React Development with Nx
by Juri Strumpflohner
🕑 1h 34m of video content
📚 Community notes
⁉ Learning Quizzes
💰 Completely free
https://egghead.io/playlists/scale-react-development-with-nx-4038

72. @juristr
Nrwl - Narwhal Technologies Inc.
https://nrwl.io
https://nx.app
https://nx.dev
https://github.com/nrwl/nx-examples

73. @juristr
http://bit.ly/juri-news
Questions?
Reach out to me later &
connect on Twitter
juri.dev
#protip
subscribe to my tech news
@nrwl_io
nx.dev