Nx - The Easy Choice

We live in a world constantly being bombarded with choices. Choices that drain our time and energy.

How do you decide? Are you a randomizer, an analyst, or a follower? Who should you trust?

Let me enlighten you on what benefits you may reap by using Nx (and monorepos) in various project sizes and setups.
Let me show you the easy and obvious choice you were missing this whole time.
Let me save you time and energy.

Transcript

1. Miroslav Jonas / @meeroslav / nx.dev / nrwl.io
   The Easy Choice
   @viennajs / October 2021
   

   View Slide

2. CHOICES
   

   View Slide

3. View Slide

4. STAY FRESH
   LONGER
   

   View Slide

5. CHOOSE
   WISELY?
   How do you
   

   View Slide

6. 01 RANDOMIZER
   02 ANALYST
   03 FOLLOWER
   

   View Slide

7. ONE EASY
   CHOICE
   

   View Slide

8. IN YOUR
   SHOES
   

   View Slide

9. I’VE 

   SEEN THE CODE
   

   View Slide

10. MIROSLAV
    JONAŠ
    @meeroslav
    

    View Slide

11. WHY MONOREPOS?

    WHY NX?

    

    View Slide

12. WHY
    MONOREPOS?
    01 Atomic Changes
    02 Shared Code
    03 Single Set of Dependencies
    

    View Slide

13. ATOMIC CHANGES
    Homepage App
    Common UI
    Admin Portal App Mobile App
    Utils
    Helpers
    

    View Slide

14. ATOMIC CHANGES
    Homepage App
    Common UI
    Admin Portal App Mobile App
    Utils
    Helpers
    

    View Slide

15. ATOMIC CHANGES
    Homepage App
    Common UI
    Admin Portal App Mobile App
    Utils
    Helpers
    

    View Slide

16. SHARED CODE
    

    View Slide

17. SINGLE SET OF
    DEPENDENCIES
    

    View Slide

18. WHY NOT
    COLLOCATION?
    01 Running Unnecessary Steps
    02 No Code Boundaries
    03 Inconsistent Tooling
    

    View Slide

19. RUNNING UNNECESSARY
    STEPS
    

    View Slide

20. NO CODE BOUNDARIES
    

    View Slide

21. INCONSISTENT TOOLING
    

    View Slide

22. COMMON
    MISCONCEPTIONS
    01 I don’t need this
    02 Too opinionated
    03 A steep learning curve
    04 Too Angular-ish
    05 I don’t work on FAANG sized project
    

    View Slide

23. I DON’T NEED THIS
    

    View Slide

24. TOO OPINIONATED
    

    View Slide

25. A STEEP LEARNING CURVE
    01 Use just the stu
    ff
    you know (serve, build, lint…)
    02 Progress at your own pace
    03 Use Nx Console

    

    View Slide

26. View Slide

27. TOO ANGULARISH
    Angular
    Nest
    Web
    Node
    Next
    React
    

    View Slide

28. I DON’T WORK FOR
    FAANG
    

    View Slide

29. JUST A POC
    01 Powerfull create-nx-workspace
    02 Generators
    03 Easy to jump to next level
    

    View Slide

30. nx-create-workspace
    

    View Slide

31. BATTERIES INCLUDED
    REPO GENERATORS
    

    View Slide

32. BATTERIES INCLUDED
    PROJECT GENERATORS
    

    View Slide

33. OPEN SOURCE
    PROJECT
    01 Automated version migrations
    02 Default executors
    03 Publishing/deployment
    

    View Slide

34. CUSTOM EXECUTORS
    

    View Slide

35. STARTUP
    01 Free
    02 Best practices for scaling
    03 O
    ff
    i
    cial + community plugins
    

    View Slide

36. OFFICIAL PLUGINS
    Angular, React + Native, Gatsby, Web
    ESLint, Prettier
    Storybook, Jest, Cypress NestJS, NextJS, Node
    LESS, SASS, Styled Components, Emotion…
    

    View Slide

37. COMMUNITY PLUGINS
    …and many more…
    

    View Slide

38. BEAM ME UP, SCOTTY!
    01 Caching
    02 Boundaries
    03 Project graph

    04 Open source
    

    View Slide

39. CACHING
    Never { build, test, lint… } same code twice
    { build, test, lint,... }
    Nx
    Local cache
    { build, test, lint,... }
    Nx
    Local cache
    

    View Slide

40. BOUNDARIES
    store
    games sales coupons
    core
    shared
    admin
    type:app type:app
    type:feature type:feature type:feature
    type:util type:util
    scope:

    store
    scope:

    store
    scope:

    admin
    scope:

    admin
    scope:

    admin
    scope:

    shared
    scope:

    core
    

    View Slide

41. SETTING THE RULES
    type:app
    type:feature
    type:util
    only depend on
    only depend on
    scope:

    store
    scope:

    store
    scope:

    shared
    scope:

    core
    type:util type:util
    only depend on
    only depend on
    scope:

    admin
    scope:

    admin
    scope:

    shared
    scope:

    core
    type:util
    only depend on
    only depend on
    type:feature
    scope:

    core
    scope:

    shared
    only depend on
    scope:

    shared
    scope:

    shared
    

    View Slide

42. AFFECTED GRAPH
    store
    games sales coupons
    core
    shared
    admin
    

    View Slide

43. nx affected —target=deploy
    store
    core
    admin
    

    View Slide

44. OPEN SOURCE
    

    View Slide

45. NO TRICKS

    JUST TREATS
    

    View Slide

46. 01 MONOREPOS ROCK!
    02 NX GIVES SUPERPOWERS!
    03 ONE SIZE FITS ALL!

    04 NOT JUST FOR ANGULAR!
    

    View Slide

47. Miroslav Jonas / @meeroslav / nx.dev / nrwl.io
    WHY BE A 10X 

    WHEN YOU CAN BE
    AN NX DEVELOPER?
    

    View Slide

48. Miroslav Jonas / @meeroslav / nx.dev / nrwl.io
    The Easy Choice
    THANK YOU
    

    View Slide