Custom Schematics: An Angular Application by the push of a Button with the CLI's code generator

Custom Schematics: An Angular Application by the push of a Button with the CLI's code generator

Slides from my talk at ngVikings in Helsinki, March 2018.

# Source Code:
- https://github.com/manfredsteyer/schematics-ngVikings-2018
- https://www.npmjs.com/package/angular-crud

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

March 03, 2018
Tweet

Transcript

  1. 1.

    ManfredSteyer Custom Schematics and CLI: An Angular Application by the

    push of a Button Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. 2.

    ManfredSteyer About me… • Manfred Steyer • Blog: SOFTWAREarchitekt.at •

    Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
  3. 3.

    ManfredSteyer Have you ever tried to … … setup a

    modern JavaScript project manually? • Compiler/ Transpiler • Package manager and packages • Build chain optimized for bundle size, performance, etc. • Testing tools including code coverage • Linting tools
  4. 7.

    ManfredSteyer Contents • What is Schematics? • How to create

    custom schematics? • How to use parameters? • How to use templates? • How to scaffold whole projects?
  5. 9.

    ManfredSteyer Schematics Scaffolding Tool used by Angular CLI Schematics: The

    whole project Schematic: Code Generator Collection: Set of Schematics
  6. 13.

    ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D E C F Your Project Staging Area Tree Object
  7. 14.

    ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F Your Project Staging Area Tree Object
  8. 15.

    ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F G Your Project Staging Area Tree Object
  9. 16.

    ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F G Your Project Staging Area Tree Object
  10. 17.

    ManfredSteyer Schematics are atomic (like db transactions) A B D'

    E C F G A B D' E C F G Your Project Staging Area Tree Object
  11. 22.

    ManfredSteyer Surviving Schematics: Rule 1 ;-) "devDependencies": { "@angular-devkit/core": "0.0.29",

    "@angular-devkit/schematics": "0.0.52", "@schematics/angular": "0.1.17", […] } Use the same versions as your CLI-generated project! + npm install Versions used in CLI 1.6.8
  12. 25.

    ManfredSteyer Rule Factory export function helloWorld(options: any): Rule { return

    (tree: Tree, _context: SchematicContext) => { _context.logger.debug('Manfred was here!'); tree.create('hello.txt', 'Hello World!'); return tree; }; } Rule
  13. 27.

    ManfredSteyer Testing in Demo App npm install hello-world or npm

    link ..\hello-world schematics hello-world:hello-world
  14. 28.

    ManfredSteyer Testing in Demo App npm install hello-world or npm

    link ..\hello-world ng generate hello-world:hello-world
  15. 35.

    ManfredSteyer Option Class in schema.ts export interface MenuOptions { name:

    string; appRoot: string; path: string; sourceDir: string; menuService: boolean; […] } provided by the CLI custom stuff
  16. 36.

    ManfredSteyer Rule Factory gets Parameter Object export default function (options:

    MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
  17. 37.

    ManfredSteyer Rule Factory gets Parameter Object export default function (options:

    MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
  18. 40.

    ManfredSteyer Template export interface <%= classify(name) %>Item { title: string;

    iconClass: string; } passed property passed function
  19. 43.

    ManfredSteyer Rule calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { […] } }
  20. 44.

    ManfredSteyer Rule calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { const templateSource = apply(url('./files'), [ filterTemplates(options), template({...stringUtils, ...options}), move(options.sourceDir) ]); […] } } passed properties passed functions
  21. 45.

    ManfredSteyer Rule calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { const templateSource = apply(url('./files'), [ filterTemplates(options), template({...stringUtils, ...options}), move(options.sourceDir) ]); const rule = chain([ branchAndMerge(chain([ mergeWith(templateSource), […] ])) ]); return rule(host, context); } }
  22. 49.

    ManfredSteyer Needed Steps Example covering all cases Finding Variation Points

    Define Model to Describe Variation Points Write and Test Generator Take time for Reviews! Refactor to use Libraries and Components
  23. 52.

    ManfredSteyer Further information • Great introduction in Angular Blog •

    https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 • My Tutorial/ Case Study (3 articles so far) • https://goo.gl/kGS6L5 • Angular-Crud (Generator) • https://www.npmjs.com/package/angular-crud
  24. 53.

    ManfredSteyer Conclusion Automate boring tasks! Official Solution in ng world

    CLI, Nx, Ngrx, … Staging Area, Templates, Rules Create own or tweak existing ones Try it out!