The Age of monorepos

The history of the web can be divided into evolutionary development leaps. The age of inline scripts, the age of jQuery, the age of SPAs, the age of JAMStack...

We are now entering the next stage that has been carefully prepared in the past few years. Let me invite you to the world of modern monorepo solutions and share with you the benefits you will reap by using them in every project size and setup. It's time you automate those boilerplate tasks and reduce the bottlenecks so you can focus on what truly matters.

Get ready for the next leap! Welcome to the age of monorepos!

Transcript

1. The Age of Monorepos
   Miroslav Jonas / @meeroslav
   agent.sh / monorepo.tools / nx.dev / nrwl.io
   

   View Slide

2. Miroslav Jonas
   engineer at
   @meeroslav
   

   View Slide

3. Mono- what?
   

   View Slide

4. View Slide

5. Static Web
   (pre JS era)
   

   View Slide

6. View Slide

7. View Slide

8. successfully confusing
   recruiters since 1995
   

   View Slide

9. Age
   of
   Scripting
   

   View Slide

10. View Slide

11. Age
    of
    jQuery
    

    View Slide

12. Age of SPAs
    

    View Slide

13. Age
    of
    JAMStack
    

    View Slide

14. View Slide

15. Age
    of
    Monorepos
    

    View Slide

16. Homepage App
    (framework X)
    Backend
    Every application*
    UI Components
    /
    Design system
    Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
    Admin Portal App
    Mobile App
    Utility
    

    View Slide

17. Main library
    Website / Docs
    Every open source*
    Demo 1
    Example 2 Showcase 3
    

    View Slide

18. Homepage App
    (framework X)
    Backend
    Collocate
    UI Components
    /
    Design system
    Service 1 Service 1 Service 1 Service 1 Service 1 Service 1 Service 1
    Admin Portal App
    Mobile App
    Utility
    

    View Slide

19. Code sharing
    

    View Slide

20. Just collocation
    NOT
    

    View Slide

21. Speed matters
    

    View Slide

22. Rule 2: Find affected graph
    store
    games sales coupons
    core
    shared
    admin
    

    View Slide

23. Workspace analysis
    

    View Slide

24. Task orchestration
    Test Build Lint
    Build
    Lint
    Test
    Build
    Lint
    Test
    

    View Slide

25. *A tool for managing JavaScript projects with multiple packages.
    
    

    View Slide

26. Modern monorepo tools
    

    View Slide

27. View Slide

28. Caching
    Never { build, test, lint… } same code twice
    { build, test, lint,... }
    Nx
    Local cache
    { build, test, lint,... }
    Nx
    Local cache
    

    View Slide

29. Distributed task execution
    10 tasks
    110 tasks
    100 tasks
    150 tasks
    10 tasks
    105 tasks
    5 tasks
    60 tasks
    35 tasks
    Agent 1
    Agent 2
    Agent 3
    Agent 4
    Agent 5
    

    View Slide

30. Code constraints
    

    View Slide

31. Code constraints
    store
    games sales coupons
    core
    shared
    admin
    

    View Slide

32. But I have only one
    project…
    

    View Slide

33. Consistent tooling
    

    View Slide

34. Powerful generators
    

    View Slide

35. Monorepos bring clarity
    - workspace analysis
    - graph visualization
    

    View Slide

36. - local & remote caching
    - task orchestration
    - detecting affected nodes
    - distributed task execution
    - remote execution
    Monorepos bring speed
    

    View Slide

37. - code sharing
    - code collocation
    - powerful generators
    - consistent tooling
    - code constraints
    Monorepos make it easy
    

    View Slide

38. View Slide

39. nx.dev / nrwl.io
    Use
    

    View Slide

40. Thank you!
    Miroslav Jonas / @meeroslav
    agent.sh / monorepo.tools / nx.dev / nrwl.io
    

    View Slide