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
   

   View Slide

2. Vitalii Bobrov
   • experienced FE developer
   • open-source contributor
   • ❤ Angular community
   • ngGirls mentor
   @bobrov1989
   https:/
   /vitaliy-bobrov.github.io
   

   View Slide

3. Finding the truth from the source
   https:/
   /blog.angularindepth.com/
   

   View Slide

4. Be a Human
   Let machines work for you
   

   View Slide

5. Robot
   • fast
   • make no errors
   • doing boring stuff
   

   View Slide

6. • creative
   • unpredictable
   • controls robots
   Human
   

   View Slide

7. @angular-devkit/schematics
   

   View Slide

8. NOT only for Angular
   Schematics for REACT
   components
   https:/
   /github.com/vitaliy-bobrov/schematics-react
   

   View Slide

9. Terminology
   Just to be align in concepts
   

   View Slide

10. Collection
    { , , }
    

    View Slide

11. Schematics
    

    View Slide

12. Schematic
    

    View Slide

13. View Slide

14. Rule
    1. ~-+~=
    2. -_*^^
    3. $#~_!
    

    View Slide

15. Included rules
    • chain
    • branchAndMerge
    • template
    • filter
    • noop
    • move
    • schematic
    • externalSchematic
    

    View Slide

16. Tree
    Schematic
    

    View Slide

17. memory updated tree
    

    View Slide

18. Guide
    How to create a schematic?
    

    View Slide

19. Schematics
    for
    Schematic
    

    View Slide

20. Install CLI
    

    View Slide

21. Pro Tip
    Use the SAME version
    as Angular CLI uses
    

    View Slide

22. Generate Collection
    

    View Slide

23. Collection with examples
    

    View Slide

24. View Slide

25. Reference
    

    View Slide

26. Schematics listing
    

    View Slide

27. Define rule factory
    

    View Slide

28. Schema
    

    View Slide

29. Test
    It should just word, but to be sure…
    

    View Slide

30. Unit tests
    

    View Slide

31. Local run
    

    View Slide

32. Pro Tip
    Add a DEBUG argument
    to see FILES output
    

    View Slide

33. Project run
    

    View Slide

34. Pro Tip
    Commit ALL
    changes BEFORE schematic run
    

    View Slide

35. Demo
    Words are cheap, show me the code!
    

    View Slide

36. Seems we created robots
    

    View Slide

37. Credits
    http:/
    /www.robotsdontcry.com
    

    View Slide

38. Thank You!
    @bobrov1989
    https:/
    /vitaliy-bobrov.github.io
    

    View Slide