Automating boring Tasks with the Angular CLI and Schematics

Slides from my talk at frontendlove in Amsterdam, February 2018

Transcript

1. ManfredSteyer Automating boring Tasks with the Angular CLI and Schematics Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
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. ManfredSteyer "All it takes is one bad project setup to reduce the sanest man alive to lunacy." -- based loosely on: Alan Moore, Batman: The Killing Joke, 1988
5. ManfredSteyer Angular CLI
6. ManfredSteyer Using the CLI ng new my-project cd my-project ng generate component my-component
7. ManfredSteyer Vision ng new my-project --collection my-kick-a**-templ cd my-project ng generate my:menu-component side-menu
8. ManfredSteyer Contents • What is Schematics? • How to create custom schematics? • How to use parameters? • How to use templates?
9. ManfredSteyer What is Schematics?
10. ManfredSteyer Schematics Scaffolding Tool used by Angular CLI Schematics: The whole project Schematic: Code Generator Collection: Set of Schematics
11. ManfredSteyer Angular Labs Experimental :: Breaking Changes ahead Give it a try!
12. ManfredSteyer Nrwl Nx
13. ManfredSteyer
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
15. 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
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
17. 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
18. 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
19. ManfredSteyer How to Create Custom Schematics?
20. ManfredSteyer You can create a schematic … … with a schematic!
21. ManfredSteyer Scaffold Collection npm install -g @angular-devkit/schematics-cli schematics blank --name=hello-world schematics schematic --name=hello-world Contains sample schematics
22. ManfredSteyer
23. 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
24. ManfredSteyer Project Structure Schematic Rule- Factory
25. ManfredSteyer Rule Factory export function helloWorld(options: any): Rule { […] }
26. 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
27. ManfredSteyer Testing npm run build schematics .:hello-world
28. ManfredSteyer Testing in Demo App npm install hello-world or npm link ..\hello-world schematics hello-world:hello-world
29. ManfredSteyer Testing in Demo App npm install hello-world or npm link ..\hello-world ng generate hello-world:hello-world some-name
30. ManfredSteyer DEMO
31. ManfredSteyer How to use Parameters?
32. ManfredSteyer Case Study
33. ManfredSteyer Result Optional
34. ManfredSteyer Execution ng g nav:menu side-menu --menu-service
35. ManfredSteyer Project Structure Parameters Rule- Factory
36. 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
37. ManfredSteyer Rule Factory gets Parameter Object export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
38. ManfredSteyer Rule Factory gets Parameter Object export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
39. ManfredSteyer How to use Templates?
40. ManfredSteyer Project Structure
41. ManfredSteyer Template export interface <%= classify(name) %>Item { title: string; iconClass: string; } passed property passed function
42. ManfredSteyer Template names are templates! passed property passed property passed function
43. ManfredSteyer Rule calling Templates export default function (options: MenuOptions): Rule { […] }
44. ManfredSteyer Rule calling Templates export default function (options: MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
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) ]); […] } } passed properties passed functions
46. 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); } }
47. ManfredSteyer DEMO
48. ManfredSteyer Outlook: Idea
49. ManfredSteyer Scaffold Angular Apps
50. ManfredSteyer Result
51. ManfredSteyer Result
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
53. ManfredSteyer Conclusion Automate boring tasks! Currently: Labs Project Official Solution in ng world CLI, Nx, Ngrx, … Staging Area, Templates, Rules Create own or tweak existing ones Try it out!
54. ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer