Robots Don't Cry: Automation with Schematics

It is not a secret that robots are better at tedious, repetitive tasks than humans. Angular CLI took care about code scaffold and significantly improve DX (developer experience) for Angular. Tooling used behind it was exposed as the separate package. It gave us the ability to create new generators collections like NgRx. You can and should create your schematics to reduce copy-paste development style. During this talk, I am gonna to show how to implement custom schematics and make machines work for us.

Transcript

1. Robots Don’t Cry Automation with Schematics
2. Vitalii Bobrov • experienced FE developer • open-source contributor • ❤ Angular community • ngGirls mentor @bobrov1989 https:/ /vitaliy-bobrov.github.io
3. Finding the truth from the source https:/ /blog.angularindepth.com/
4. Be a Human Let machines work for you
5. Robot • fast • make no errors • doing boring stuff
6. • creative • unpredictable • controls robots Human
7. @angular-devkit/schematics
8. NOT only for Angular Schematics for REACT components https:/ /github.com/vitaliy-bobrov/schematics-react
9. Terminology Just to be align in concepts
10. Collection { , , }
11. Schematics
12. Schematic
14. Rule 1. ~-+~= 2. -_*^^ 3. $#~_!
15. Included rules • chain • branchAndMerge • template • filter • noop • move • schematic • externalSchematic
16. Tree Schematic
17. memory updated tree
18. Guide How to create a schematic?
19. Schematics for Schematic
20. Install CLI
21. Pro Tip Use the SAME version as Angular CLI uses
22. Generate Collection
23. Collection with examples
25. Reference
26. Schematics listing
27. Define rule factory
28. Schema
29. Test It should just word, but to be sure…
30. Unit tests
31. Local run
32. Pro Tip Add a DEBUG argument to see FILES output
33. Project run
34. Pro Tip Commit ALL changes BEFORE schematic run
35. Demo Words are cheap, show me the code!
36. Seems we created robots
37. Credits http:/ /www.robotsdontcry.com
38. Thank You! @bobrov1989 https:/ /vitaliy-bobrov.github.io