NgRx Schematics

NgRx Schematics

NgRx is the great way to manage complex app state. Unfortunately, it is not a silver bullet and as the downside, it requires so much boilerplate code. Developers are lazy and machines must work for us. NgRx Schematics is a huge time-saver. It will automate NgRx code generation and give you the ability to focus on application business logic.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

April 19, 2018
Tweet

Transcript

  1. NgRx Schematics

  2. Vitalii Bobrov • 5 years in front-end • NgRx projects

    last 2 years • ngGirls mentor • open source contributor • Ex Rock Star @bobrov1989 https://vitaliy-bobrov.github.io/
  3. Creativity

  4. Boring Environment Setup

  5. What are Schematics?

  6. NgRx State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions,

    Effects, Selectors, Container, State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects, Selectors, Container, State, Reducer, Actions, Effects…
  7. ❞ Abstractions Cost

  8. Two Types of Tasks BORING CREATIVE

  9. Human vs Machine

  10. Angular CLI

  11. @angular-devkit/schematics

  12. Schematic files update Schematic

  13. Schematic files update Schematic

  14. @ngrx/schematics •Action •Container •Effect •Reducer •Store •Feature

  15. How to use NgRx Schematics?

  16. ToDo List?

  17. Counter?

  18. The Knowledge Base we will build…

  19. Star Wars Knowledge Base

  20. Scaffold

  21. Add NgRx dependencies

  22. Initialize store and effects

  23. Create NgRx feature

  24. app.module.ts

  25. reducers/index.ts

  26. heroes.module.ts

  27. None
  28. heroes.actions.ts

  29. How to extend Schematic?

  30. ❞ We use Schematics to create Schematics

  31. Create custom schematic

  32. collection.json

  33. Rule factory

  34. templates

  35. template

  36. templates

  37. test

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