Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Managing Monorepos with Nx - Nrwl/Nxの近況 -

puku0x
February 19, 2020

Managing Monorepos with Nx - Nrwl/Nxの近況 -

puku0x

February 19, 2020
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Managing Monorepos with Nx
    - Nrwl/Nxの近況 -
    ng-japan OnAir #12

    View full-size slide

  2. Noriyuki
    Shinpuku
    ng-fukuoka organizer
    VEGA corporation Co., Ltd.
    @puku0x
    2

    View full-size slide

  3. Monorepo? Nx?
    3

    View full-size slide

  4. Monorepo
    ● A single repository containing multiple projects
    ○ Monorepo !== Monolith
    ● Used by
    4
    ...

    View full-size slide

  5. 5
    https://nx.dev/

    View full-size slide

  6. Nx
    ● Developed by Nrwl
    ● Monorepo management tool
    ○ Modern web development
    ○ Effective change detection
    ○ Automated migration
    6
    “Develop like Google, Facebook and Microsoft”

    View full-size slide

  7. Version histories
    ● v1.x〜(April, 2018)
    ○ Extensions for Angular CLI
    ● v6.x
    ○ Jest support
    ● v7.x
    ○ Cypress and Nest support
    ● v8.x
    ○ React, Next.js and Storybook support
    ● v9.x
    ○ Angular v9 support
    7

    View full-size slide

  8. $ npx create-nx-workspace
    :
    ? Workspace name (e.g., org name) workspace
    ? What to create in the new workspace angular-nest
    ? Application name web
    ? Default stylesheet format SASS(.scss)
    Creating a workspace
    8

    View full-size slide

  9. Nx workspace
    ● Similar to Angular workspace
    ● Single version policy
    ○ package.json is a single
    source of truth
    9

    View full-size slide

  10. Scaffolding
    ● Applications
    ○ nx g @nrwl/angular:app
    ● Libraries
    ○ nx g @nrwl/angular:lib
    ● Schematics
    ○ nx g workspace-schematic
    10

    View full-size slide

  11. Testing
    ● Jest
    ○ nx test
    ● Cypress
    ○ nx e2e
    11

    View full-size slide

  12. $ npm i -D @nrwl/storybook
    $ npm i -D @storybook/angular @storybook/addon-knobs
    $ nx g @nrwl/angular:storybook-configuration
    # Run storybook
    $ nx run project-name:storybook
    # E2E with Cypress
    $ nx e2e project-name-e2e
    Storybook
    12

    View full-size slide

  13. Linting/Formatting
    ● ESLint/TSLint
    ○ nx lint
    ○ nx workspace-lint
    ● Prettier
    ○ nx format:write
    ○ '--uncommitted' option for lint-staged
    13

    View full-size slide

  14. enforce-module-boundaries
    ● Dependency constraints
    https://nx.dev/web/guides/monorepo-tags
    14

    View full-size slide

  15. Dependency visualization
    ● nx dep-graph
    ● nx affected:dep-graph
    15

    View full-size slide

  16. Effective change detection
    ● nx affected:lint
    ● nx affected:test
    ● nx affected:build
    ● nx affected:e2e
    16

    View full-size slide

  17. Distributed caching for faster CI
    17
    https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0

    View full-size slide

  18. Nx ecosystem
    ● Nx Console
    ○ VS Code extension
    ● Nx Plugin
    ○ Custom builder
    ● Nx Cloud
    ○ Cloud distributed caching
    18
    https://nx.dev/nx-console

    View full-size slide

  19. Nx v10
    ● https://github.com/nrwl/nx/issues/2152
    ○ Stability
    ○ Smarter affected
    ○ Distributed caching by default
    ○ Mixing monorepo and polyrepo
    19

    View full-size slide

  20. Recap
    ● Nx makes managing monorepos easy!
    ○ Supports
    ○ https://nx.dev/
    ● Try it now!
    20
    $ npx create-nx-workspace

    View full-size slide

  21. Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide