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
2. Photo by Annie Spratt on Unsplash Common Deps, Vendor, State Mgm, ... Project 1 Project 2 Project n
3. We may fail at deciding what is a common dependency.
4. We may fail at finding effective naming conventions.
5. We may fail at sticking to methodologies that help stay modular.
6. We may not leverage tooling, enough.
7. We may repeat ourselves. A LOT.
8. We may not document or communicate well enough our defs.
9. Photo by Fati Laraí Lará on Unsplash
11. Photo by Lucas Hein on Unsplash
12. $ npm install -g @angular/cli @angular-devkit/core @angular-devkit/schematics @angular-devkit/schematics/c li @schematics/schematics
13. $ ng new client-platform --create-application=false
14. Photo by Gabriel Sollmann on Unsplash
15. $ ng generate library client-corelib --prefix=corelib
16. ARCHITECTURE SOLUTION + client-platform --+ projects ----+ client-corelib ------+ src --------+ lib --+ node_modules - tsconfig.json - package.json - angular.json
17. $ ng generate application client-app-one
18. ARCHITECTURE SOLUTION + client-platform --+ projects ----+ client-corelib ----+ client-app-one ----+ client-app-one-e2e --+ node_modules - tsconfig.json - package.json - angular.json
19. $ ng generate application apps/client-app-one
20. SCHEMATICS VOCABULARY schematics Descriptive code generators that transform the workspace
21. SCHEMATICS FEATURES Defining and enforcing conventions Preserving solid patterns and best practices Preventing code/ tasks repetition or copy-pasting. AKA, promotes DRY
22. SCHEMATICS VOCABULARY collection Definition of our schematic(s)
23. SCHEMATICS VOCABULARY schema Schema that validates the input and its description
24. SCHEMATICS VOCABULARY Rule Function that takes a tree (or source) and returns a tree (or a Observer<Tree>)
25. SCHEMATICS VOCABULARY Tree Virtual representation of the file system*, that also integrates a staging area
26. SCHEMATICS VOCABULARY Actions Transformations that come in four types -> create(), rewrite(), overwrite(), delete()
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
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.
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
31. Leverage tools. Prevent code repetition. Avoid inconsistency across repos in a large orga Create in-code docs
32. Thank you! Want to know more? @anfibiacreativa Clone the repo here!
33. Additional credits • Images are from unsplash.com • Icons are Feather Icons (https://github.com/feathericons/feather/blob/master/LICENSE)