Tweet
Tweet

Slide 1

Slide 1 text

Lerna and Monorepo architecture for JavaScript

Slide 2

Slide 2 text

Who am I Chathu Vishwajith Auth0 Ambassador Co-Founder of a startup Colombo JS Meetup Co-organizer @iamchathu Lerna and Monorepo architecture for JavaScript

Slide 3

Slide 3 text

Let's go on a journey together Lerna and Monorepo architecture for JavaScript

Slide 4

Slide 4 text

Lerna and Monorepo architecture for JavaScript

Slide 5

Slide 5 text

Project Lynx Lerna and Monorepo architecture for JavaScript

Slide 6

Slide 6 text

Project Lynx → Fullstack Javascript Lerna and Monorepo architecture for JavaScript

Slide 7

Slide 7 text

Project Lynx → Fullstack Javascript → Node.js/Typescript Backend Lerna and Monorepo architecture for JavaScript

Slide 8

Slide 8 text

Project Lynx → Fullstack Javascript → Node.js/Typescript Backend → React Frontend Lerna and Monorepo architecture for JavaScript

Slide 9

Slide 9 text

V 0.0 Lerna and Monorepo architecture for JavaScript

Slide 10

Slide 10 text

Multiple Projects (Multi-repo) Lerna and Monorepo architecture for JavaScript

Slide 11

Slide 11 text

Multiple Projects (Multi-repo) → Create separate projects for each. Lerna and Monorepo architecture for JavaScript

Slide 12

Slide 12 text

Multiple Projects (Multi-repo) → Create separate projects for each. → Separate CI tools. Lerna and Monorepo architecture for JavaScript

Slide 13

Slide 13 text

Multiple Projects (Multi-repo) → Create separate projects for each. → Separate CI tools. → Teams divided to each project. Lerna and Monorepo architecture for JavaScript

Slide 14

Slide 14 text

Lerna and Monorepo architecture for JavaScript

Slide 15

Slide 15 text

Shared Package Lerna and Monorepo architecture for JavaScript

Slide 16

Slide 16 text

Shared Package → Create another project. Lerna and Monorepo architecture for JavaScript

Slide 17

Slide 17 text

Shared Package → Create another project. → Add as a git dependancy. Lerna and Monorepo architecture for JavaScript

Slide 18

Slide 18 text

Shared Package → Create another project. → Add as a git dependancy. → yarn add https://gitlab.com/lynx/lynx-shared.git Lerna and Monorepo architecture for JavaScript

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

New updates! Lerna and Monorepo architecture for JavaScript

Slide 21

Slide 21 text

New updates! → Update version. Lerna and Monorepo architecture for JavaScript

Slide 22

Slide 22 text

New updates! → Update version. → Push new changes. Lerna and Monorepo architecture for JavaScript

Slide 23

Slide 23 text

New updates! → Update version. → Push new changes. → Update the dependency on the dependent packages. Lerna and Monorepo architecture for JavaScript

Slide 24

Slide 24 text

Lerna and Monorepo architecture for JavaScript

Slide 25

Slide 25 text

Nightmares Lerna and Monorepo architecture for JavaScript

Slide 26

Slide 26 text

Nightmares → Forgot to update. Lerna and Monorepo architecture for JavaScript

Slide 27

Slide 27 text

Nightmares → Forgot to update. → Duplicate dependacies. Lerna and Monorepo architecture for JavaScript

Slide 28

Slide 28 text

Nightmares → Forgot to update. → Duplicate dependacies. → Testing became hard. Lerna and Monorepo architecture for JavaScript

Slide 29

Slide 29 text

Nightmares → Forgot to update. → Duplicate dependacies. → Testing became hard. → Report issues in multiple places. Lerna and Monorepo architecture for JavaScript

Slide 30

Slide 30 text

Nightmares → Forgot to update. → Duplicate dependacies. → Testing became hard. → Report issues in multiple places. → Productivity went down! Lerna and Monorepo architecture for JavaScript

Slide 31

Slide 31 text

V 1.0 Lerna and Monorepo architecture for JavaScript

Slide 32

Slide 32 text

Monorepo Lerna and Monorepo architecture for JavaScript

Slide 33

Slide 33 text

Monorepo → Javascript has modules. Lerna and Monorepo architecture for JavaScript

Slide 34

Slide 34 text

Monorepo → Javascript has modules. → Local dependent modules. Lerna and Monorepo architecture for JavaScript

Slide 35

Slide 35 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. Lerna and Monorepo architecture for JavaScript

Slide 36

Slide 36 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. → One places to report issues. Lerna and Monorepo architecture for JavaScript

Slide 37

Slide 37 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. → One places to report issues. → Easy to test cross-modules. Lerna and Monorepo architecture for JavaScript

Slide 38

Slide 38 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. → One places to report issues. → Easy to test cross-modules. → Cross package changes. Lerna and Monorepo architecture for JavaScript

Slide 39

Slide 39 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. → One places to report issues. → Easy to test cross-modules. → Cross package changes. → Test across modules. Lerna and Monorepo architecture for JavaScript

Slide 40

Slide 40 text

Monorepo → Javascript has modules. → Local dependent modules. → Share common dependancies. → One places to report issues. → Easy to test cross-modules. → Cross package changes. → Test across modules. → Easy to publish Lerna and Monorepo architecture for JavaScript

Slide 41

Slide 41 text

Monorepo a Monorepo is a single repository holding the code of multiple projects which may or may not be related in some way. The projects managed in a Monorepo can be dependents of each other or they can be completely unrelated. Lerna and Monorepo architecture for JavaScript

Slide 42

Slide 42 text

Myths about Monorepo Lerna and Monorepo architecture for JavaScript

Slide 43

Slide 43 text

Myths about Monorepo → Anybody can change any file. Lerna and Monorepo architecture for JavaScript

Slide 44

Slide 44 text

Myths about Monorepo → Anybody can change any file. → Hard to scale. Lerna and Monorepo architecture for JavaScript

Slide 45

Slide 45 text

Myths about Monorepo → Anybody can change any file. → Hard to scale. → Big repository size. Lerna and Monorepo architecture for JavaScript

Slide 46

Slide 46 text

What are the tools Lerna and Monorepo architecture for JavaScript

Slide 47

Slide 47 text

What are the tools → Lerna. Lerna and Monorepo architecture for JavaScript

Slide 48

Slide 48 text

What are the tools → Lerna. → Yarn Workspace. Lerna and Monorepo architecture for JavaScript

Slide 49

Slide 49 text

What are the tools → Lerna. → Yarn Workspace. → Lerna with Yarn Workspaces. Lerna and Monorepo architecture for JavaScript

Slide 50

Slide 50 text

What are the tools → Lerna. → Yarn Workspace. → Lerna with Yarn Workspaces. → Nx. Lerna and Monorepo architecture for JavaScript

Slide 51

Slide 51 text

Who use Lerna Lerna and Monorepo architecture for JavaScript

Slide 52

Slide 52 text

Who use Lerna → React. Lerna and Monorepo architecture for JavaScript

Slide 53

Slide 53 text

Who use Lerna → React. → Babel. Lerna and Monorepo architecture for JavaScript

Slide 54

Slide 54 text

Who use Lerna → React. → Babel. → ZendDesk Garden. Lerna and Monorepo architecture for JavaScript

Slide 55

Slide 55 text

Lerna and Monorepo architecture for JavaScript

Slide 56

Slide 56 text

Lerna and Monorepo architecture for JavaScript

Slide 57

Slide 57 text

Nightmares Lerna and Monorepo architecture for JavaScript

Slide 58

Slide 58 text

Nightmares → Deployment. Lerna and Monorepo architecture for JavaScript

Slide 59

Slide 59 text

Nightmares → Deployment. → Project safety. Lerna and Monorepo architecture for JavaScript

Slide 60

Slide 60 text

Nightmares → Deployment. → Project safety. → Learning curve. Lerna and Monorepo architecture for JavaScript

Slide 61

Slide 61 text

Summary https://github.com/iamchathu/lerna-monorepo-test Lerna and Monorepo architecture for JavaScript

Slide 62

Slide 62 text

Summary → Mono repo is way of organizing multiple projects in single code reporsioty. https://github.com/iamchathu/lerna-monorepo-test Lerna and Monorepo architecture for JavaScript

Slide 63

Slide 63 text

Summary → Mono repo is way of organizing multiple projects in single code reporsioty. → Monorepo or Lerna are not silver bullets. https://github.com/iamchathu/lerna-monorepo-test Lerna and Monorepo architecture for JavaScript

Slide 64

Slide 64 text

Lerna and Monorepo architecture for JavaScript