Slide 1

Slide 1 text

Monorepos in JavaScript & TypeScript

Slide 2

Slide 2 text

HypeTech Jobs Job opportunities at hype tech companies hypetechjobs.com | hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev

Slide 3

Slide 3 text

Monorepo?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

A monorepo is a project which contains smaller projects -- whereas each project can be anything from individual application to reusable package (e.g. functions, components, services).

Slide 6

Slide 6 text

The practice of combining projects dates back to the early 2000 when it was called a shared codebase.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Often a monorepo is mistaken for a monolith

Slide 10

Slide 10 text

In a monolithic application all smaller projects are combined into one large project. A monorepo can combine its smaller projects into multiple projects. source: robinwieruch.de

Slide 11

Slide 11 text

source: robinwieruch.de

Slide 12

Slide 12 text

Monorepos are popular for large scale codebases used by large companies such as FANG

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Monorepos become popular for any codebase which has multiple applications with a shared set of (in-house) packages ...

Slide 15

Slide 15 text

monorepo.tools

Slide 16

Slide 16 text

Monorepo advantages

Slide 17

Slide 17 text

1 - Re-usability of common code, configurations, components, etc. 2 - Better Developer Experience 3 - Ease of new project setup

Slide 18

Slide 18 text

Shared packages can be used in multiple applications on a local machine without an online registry (e.g. npm).

Slide 19

Slide 19 text

Improves collaboration across codebases. Teams working on different projects can improve the codebases from other teams without working on multiple repositories.

Slide 20

Slide 20 text

Monorepo Structure

Slide 21

Slide 21 text

A monorepo can contain multiple applications (here: apps) whereas each application has access to shared set of packages.

Slide 22

Slide 22 text

A package, which is just a folder, can be anything from UI components (e.g. framework specific components) over functions (e.g. utilities) to configuration (e.g. ESLint, TypeScript)

Slide 23

Slide 23 text

source: robinwieruch.de

Slide 24

Slide 24 text

A package can be a dependency of another package.

Slide 25

Slide 25 text

The apps are usually not dependent on each other, instead they only opt-in packages.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Questions

Slide 28

Slide 28 text

Is Lerna monorepo tool?

Slide 29

Slide 29 text

Are there Monorepos for Frontend and Backend?

Slide 30

Slide 30 text

Are there Monorepos for Microfrontends?

Slide 31

Slide 31 text

Documentation in Monorepos?

Slide 32

Slide 32 text

Summary

Slide 33

Slide 33 text

Monorepos are becoming more popular these days, because they allow you to split your source code into multiple applications/packages (opinionated monorepo structure) while still being able to manage everything at one place.

Slide 34

Slide 34 text

The first enabler for having a monorepo in the first place are Workspaces. yarn workspaces can be considered default, but npm and pnpm come with workspaces as well.

Slide 35

Slide 35 text

Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf

Slide 36

Slide 36 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 37

Slide 37 text