Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

We may fail at deciding what is a common dependency.

Slide 4

Slide 4 text

We may fail at finding effective naming conventions.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

We may not leverage tooling, enough.

Slide 7

Slide 7 text

We may repeat ourselves. A LOT.

Slide 8

Slide 8 text

We may not document or communicate well enough our defs.

Slide 9

Slide 9 text

Photo by Fati Laraí Lará on Unsplash

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Photo by Lucas Hein on Unsplash

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Photo by Gabriel Sollmann on Unsplash

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

$ ng generate application client-app-one

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

$ ng generate application apps/client-app-one

Slide 20

Slide 20 text

SCHEMATICS VOCABULARY schematics Descriptive code generators that transform the workspace

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

SCHEMATICS VOCABULARY collection Definition of our schematic(s)

Slide 23

Slide 23 text

SCHEMATICS VOCABULARY schema Schema that validates the input and its description

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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