Age of monorepos (Armada JS 2022)

Transcript

1. The Age of Monorepos
   Miroslav Jonas / @meeroslav / nx.dev / nrwl.io
   

   View Slide

2. @meeroslav
   WARNING!
   Bad design
   Flickering colors
   Life-changing features
   

   View Slide

3. @meeroslav
   Miroslav

   Jonaš
   @meeroslav
   

   View Slide

4. @meeroslav
   

   View Slide

5. @meeroslav
   STATIC WEB

   (pre JS era)
   

   View Slide

6. View Slide

7. @meeroslav
   

   View Slide

8. @meeroslav
   successfully confusing
   recruiters since 1995
   

   View Slide

9. @meeroslav
   Age 

   of

   Scripting
   

   View Slide

10. View Slide

11. @meeroslav
    Age
    of
    jQuery
    

    View Slide

12. Age of SPAs
    

    View Slide

13. @meeroslav
    Age
    of
    JAMStack
    

    View Slide

14. View Slide

15. @meeroslav
    Age
    of
    Monorepos
    

    View Slide

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

    View Slide

17. 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
    v1 v3 v2_beta
    v1.0.1
    ~2.15.0 > 3.0.0
    

    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
    Homepage App
    (framework X)
    Admin Portal App
    Auth
    

    View Slide

20. @meeroslav
    Just collocation
    NOT
    

    View Slide

21. Affected graph + deploy
    admin store api
    

    View Slide

22. admin store api
    Deploy every second week
    Deploy on Tuesdays
    Deploy on every change
    Affected graph + deploy
    

    View Slide

23. Workspace analysis
    

    View Slide

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

    View Slide

25. View Slide

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

    View Slide

27. Distributed task execution
    Main agent
    

    View Slide

28. Distributed task execution
    Idle time
    Idle time
    

    View Slide

29. Distributed task execution
    

    View Slide

30. Distributed task execution
    

    View Slide

31. @meeroslav
    Agent utilization
    Optimal idle time
    

    View Slide

32. @meeroslav
    

    View Slide

33. Code constraints
    

    View Slide

34. Code constraints
    store
    checkout sales coupons
    core
    shared
    admin
    

    View Slide

35. @meeroslav
    But I have only one project…
    

    View Slide

36. Powerful generators
    

    View Slide

37. Consistent tooling
    

    View Slide

38. View Slide

39. @meeroslav
    Migrate existing
    Create new
    

    View Slide

40. @meeroslav
    Migrate existing
    Convert existing
    

    View Slide

41. @meeroslav
    Migrate existing
    Convert existing
    

    View Slide

42. @meeroslav
    Monorepos bring clarity
    - workspace analysis
    
    - graph visualization
    

    View Slide

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

    View Slide

44. @meeroslav
    Monorepos make it easy
    - code sharing
    
    - code collocation
    
    - powerful generators
    
    - consistent tooling
    
    - code constraints
    

    View Slide

45. @meeroslav
    - developer mobility
    
    - collaboration as default
    
    - can change the organization
    
    - greater confidence
    
    - velocity increase
    Not just a fancy tool
    

    View Slide

46. @meeroslav
    

    View Slide

47. @meeroslav
    nx.dev / nrwl.io
    Use
    

    View Slide

48. WHY BE A 10X 

    WHEN YOU CAN BE
    AN NX DEVELOPER?
    @meeroslav /
    

    View Slide

49. @meeroslav
    

    View Slide

50. Thank you
    Miroslav Jonas / @meeroslav / nx.dev / nrwl.io
    

    View Slide