TechTalk 2o22 - Monorepos in JavaScript & TypeScript

Monorepos are there in existence for many years - the reasons for any frontend/web team to opt for monorepo may be different but boil down to mainly these points: Re-usability of common code, configurations, components, etc. Ease of new project setup and no explicit yarn linking of different packages OR switching between repos while doing development. Let's explore some common use cases and tools used for this purpose and discuss potential problems with this approach.

Transcript

1. Monorepos in JavaScript & TypeScript
2. 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
3. Monorepo?
4. A monorepo is a single repository containing multiple distinct projects, with well-defined relationships
5. 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).
6. The practice of combining projects dates back to the early 2000 when it was called a shared codebase.
9. Often a monorepo is mistaken for a monolith
10. 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
11. source: robinwieruch.de
12. Monorepos are popular for large scale codebases used by large companies such as FANG
14. Monorepos become popular for any codebase which has multiple applications with a shared set of (in-house) packages ...
15. monorepo.tools
16. Monorepo advantages
17. 1 - Re-usability of common code, configurations, components, etc. 2 - Better Developer Experience 3 - Ease of new project setup
18. Shared packages can be used in multiple applications on a local machine without an online registry (e.g. npm).
19. Improves collaboration across codebases. Teams working on different projects can improve the codebases from other teams without working on multiple repositories.
20. Monorepo Structure
21. A monorepo can contain multiple applications (here: apps) whereas each application has access to shared set of packages.
22. 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)
23. source: robinwieruch.de
24. A package can be a dependency of another package.
25. The apps are usually not dependent on each other, instead they only opt-in packages.
27. Questions
28. Is Lerna monorepo tool?
29. Are there Monorepos for Frontend and Backend?
30. Are there Monorepos for Microfrontends?
31. Documentation in Monorepos?
32. Summary
33. 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.
34. 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.
35. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
36. As everything good in life, knowledge is great only when shared hypetech.io/education
37. contact@reactweek.dev