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

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