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

SUPER Scalable and Reusable Structures w/Angular Schematics

SUPER Scalable and Reusable Structures w/Angular Schematics

Design and implement super scalable Angular enterprise size monorepo structures, and reuse them across many workspaces, with the power of the schematics cli, by writing your own custom schematics.

REPO: -> https://github.com/anfibiacreativa/plat-schematics

Natalia Venditto

May 22, 2019
Tweet

More Decks by Natalia Venditto

Other Decks in Technology

Transcript

  1. SUPER
    Scalable &&
    Reusable
    Write it once and write
    it no more!
    Natalia Venditto @ voxxeddays.com/frontend

    View Slide

  2. Photo by Annie Spratt on Unsplash
    Common Deps,
    Vendor,
    State Mgm,
    ...
    Project 1 Project 2
    Project n

    View Slide

  3. We may fail at deciding
    what is a common
    dependency.

    View Slide

  4. We may fail at finding
    effective naming
    conventions.

    View Slide

  5. We may fail at sticking
    to methodologies that
    help stay modular.

    View Slide

  6. We may not leverage
    tooling, enough.

    View Slide

  7. We may repeat
    ourselves.
    A LOT.

    View Slide

  8. We may not document or
    communicate well enough
    our defs.

    View Slide

  9. Photo by Fati Laraí Lará on Unsplash

    View Slide

  10. View Slide

  11. Photo by Lucas Hein on Unsplash

    View Slide

  12. $ npm install -g
    @angular/cli
    @angular-devkit/core
    @angular-devkit/schematics
    @angular-devkit/schematics/c
    li @schematics/schematics

    View Slide

  13. $ ng new client-platform
    --create-application=false

    View Slide

  14. Photo by Gabriel Sollmann on Unsplash

    View Slide

  15. $ ng generate library
    client-corelib
    --prefix=corelib

    View Slide

  16. ARCHITECTURE
    SOLUTION
    + client-platform
    --+ projects
    ----+ client-corelib
    ------+ src
    --------+ lib
    --+ node_modules
    - tsconfig.json
    - package.json
    - angular.json

    View Slide

  17. $ ng generate application
    client-app-one

    View Slide

  18. ARCHITECTURE
    SOLUTION
    + client-platform
    --+ projects
    ----+ client-corelib
    ----+ client-app-one
    ----+ client-app-one-e2e
    --+ node_modules
    - tsconfig.json
    - package.json
    - angular.json

    View Slide

  19. $ ng generate application
    apps/client-app-one

    View Slide

  20. SCHEMATICS
    VOCABULARY
    schematics
    Descriptive code generators
    that transform the workspace

    View Slide

  21. SCHEMATICS
    FEATURES
    Defining and
    enforcing
    conventions
    Preserving solid
    patterns and best
    practices
    Preventing code/
    tasks repetition or
    copy-pasting. AKA,
    promotes DRY

    View Slide

  22. SCHEMATICS
    VOCABULARY
    collection
    Definition of our schematic(s)

    View Slide

  23. SCHEMATICS
    VOCABULARY
    schema
    Schema that validates the input and
    its description

    View Slide

  24. SCHEMATICS
    VOCABULARY
    Rule
    Function that takes a tree (or source)
    and returns a tree (or a
    Observer)

    View Slide

  25. SCHEMATICS
    VOCABULARY
    Tree
    Virtual representation of the file
    system*, that also integrates a
    staging area

    View Slide

  26. SCHEMATICS
    VOCABULARY
    Actions
    Transformations that come in four
    types -> create(), rewrite(),
    overwrite(), delete()

    View Slide

  27. SCHEMATICS
    VOCABULARY
    schematics
    A collection of descriptive and deterministic code
    generators, that grab a virtual file system (tree:
    Tree), apply some transformations (Actions) in a
    staging area, based upon a Rule, applied via a
    RuleFactory, to then return that modified tree

    View Slide

  28. SCHEMATICS
    FEATURES
    Schematics features
    Safe: they run on dry-run mode by default
    Extensible: you can chain as many schematics,
    as input to the next. Again, safe.

    View Slide

  29. View Slide

  30. STRUCTURE
    OBJECTIVE of
    our EXERCISE
    Folders
    Dedicated folder for every symbol type, such
    as component, service, pipe, etc
    Effective imports by using an alias

    View Slide

  31. Leverage tools.
    Prevent code repetition.
    Avoid inconsistency across
    repos in a large orga
    Create in-code docs

    View Slide

  32. Thank you!
    Want to know more?
    @anfibiacreativa
    Clone the repo here!

    View Slide

  33. Additional credits
    ● Images are from unsplash.com
    ● Icons are Feather Icons
    (https://github.com/feathericons/feather/blob/master/LICENSE)

    View Slide