Unleashing Schematics v7+

Unleashing Schematics v7+

Gerard Sans

@gerardsans

Gerard Sans

@gerardsans

ย 

SANS

GERARD

Google Developer Expert

Google Developer Expert

International Speaker

Spoken at 112 events in 27 countries

๐ŸŽ‰ย  ย ๐ŸŽ‰

Blogger

Blogger

Community Leader

900

1.6K

Trainer

Master of Ceremonies

Master of Ceremonies

#cfpwomen

Introduction

Schematics

  • Created by Angular CLI Team
  • Part of Angular Developer Kit
  • Scaffolding Tool

  • Code Generation

  • Independent from Angular

Angular CLI

Features within Angular CLI

  • Configurable prompts

    • ng new myProject

    • ng add @angular/material

  • Angular updates

    • ng update @angular/cli @angular/coreโ€‹

Usage

ngrx Commands

> ng generate $type $options

> $type: store st, feature f, effect ef, container co
         reducer r, action a, entity en 

> $options: --flat (default) --group --spec

Generate Options

> $name: counter

// same folder no specs
> ng generate action $name
create src/app/counter.actions.ts

// separate actions folder + specs
> ng generate action $name --group --spec
create src/app/actions/counter.actions.ts
create src/app/actions/counter.actions.spec.ts 

// same folder + specs
> ng generate action $name --spec
create src/app/counter.actions.ts
create src/app/counter.actions.spec.ts 

ngrx/schematicsย 

  • Scaffolding templates for ngrx
  • Provides commands for
    • Setting initial Store and Effects
    • Actions, Reducers, Entities, Features
    • Containers (injected Store)
  • Automates creation and registration

Demo

Creating a ngrx App

Transforms

Definitions

  • Collection: Set of schematics (Rules)

    • โ€‹@ngrx/schematics

  • Schematic (Rule): set of actions

    • โ€‹โ€‹ng new, ng update

  • Action: transform of the file tree

Add Files

Source

Output

Action

Remove Files

Source

Output

Action

Move File

Source

Output

Action

File Changes and Renames

Source

Output

Action

a

b

cย 

c'

Transforms Properties

  • Atomic: All or nothing
  • File Transforms are isolated
  • Code Transforms via AST
  • Composable
    • โ€‹A extends B extends Cโ€‹

Getting Started

npm install -g @angular-devkit/schematics 
  @angular-devkit/schematics-cli

schematics blank --name=basic

CREATE /basic/README.md 
CREATE /basic/package.json 
CREATE /basic/tsconfig.json 
CREATE /basic/src/collection.json 
CREATE /basic/src/basic/index.ts
CREATE /basic/src/basic/index_spec.ts
app/my.component.ts

Creating an Empty Collection

Demo

schematics schematic --name=sample

CREATE /sample/src/collection.json 
CREATE /sample/src/my-full-schematic/index.ts 
CREATE /sample/src/my-full-schematic/schema.json
CREATE /sample/src/my-full-schematic/files/test2
CREATE /sample/src/my-full-schematic/files/test__INDEX__ 
CREATE /sample/src/my-other-schematic/index.ts
CREATE /sample/src/my-schematic/index.ts
app/my.component.ts

Creating a Sample Collection

Demo

Your Firstย 

Schematics

schematics blank --name=basic
cd basic
npm run build
npm run test

npm link
> usr/local/lib/node_modules/basic -> <path>/basic

schematics --help
schematics .:basic --dry-run=false
app/my.component.ts

Building your Collection: basic

ng new test-basic
cd test-basic
npm link basic
> /test-basic/node_modules/basic 
  -> usr/local/lib/node_modules/basic 
  -> /basic

ng config cli.defaultCollection basic
ng g basic

schematics basic:basic
app/my.component.ts

Testing your Collection: basic

schematics schematic --name=sample
cd sample
npm i
npm run build
npm run test

npm link
> usr/local/lib/node_modules/sample -> <path>/sample
app/my.component.ts

Building your Collection: sample

ng new test-sample
cd test-sample
npm link sample
> /test-sample/node_modules/sample 
  -> usr/local/lib/node_modules/sample 
  -> /sample

ng config cli.defaultCollection sample
ng g my-schematic

schematics sample:my-schematic
app/my.component.ts

Testing your Collection: sample

Wrap-up

Why use Schematics?

  • Better Developer Experience
    • Adopt Best Practices
    • Less boilerplate
    • No manual Setup
  • Consistency within Teams/Projects
    • Follow conventions
  • Reusability

More

github.com/rangle/schematics-angular

@hanslatwork

@filipematossilv

@Brocco

Filipe Silva

Hans Larsen

Mike Brocchi

@jakeherringbone

Alex Eagle