Angular Schematics: Criando geradores de código

Angular Schematics: Criando geradores de código
Oi Ricardo,

Por aqui tudo bem meu caro, espero que tudo bem contigo também.

A de
O Schematics é uma ferramenta que permite a criação de geradores de código utilizando o CLI do Angular. Nesta palestra, abordamos como ele pode automatizar o workflow e padronizar a estruturação do código nos nossos projetos, além de como criar um Schematics do zero.

Ricardo Mello de França

Transcript

1. TODOS OS DIREITOS RESERVADOS
   Angular
   Schematics
   Agosto /2020
   /Criando Geradores de Código
   

   View Slide

2. 2
   Ricardo
   Mello
   Lead Front-End Engineer at TOTVS
   Community Manager at Angular Rio
   

   View Slide

3. View Slide

4. View Slide

5. 5
   Tarefas
   Repetitivas
   01
   Quantas tarefas você já faz
   no modo automático?
   

   View Slide

6. 6
   Tarefas Repetitivas - CRUD
   • Gerar um módulo
   • Importar o SharedModule
   • Setar as Rotas
   • Gerar os componentes
   • Layoutar a lista
   • Layoutar o form
   

   View Slide

7. 7
   E se?
   • Gerar um módulo
   • Importar o SharedModule
   • Setar as Rotas
   • Gerar os componentes
   • Layoutar a lista
   • Layoutar o form
   

   View Slide

8. View Slide

9. 9
   O que fazem, onde vivem?
   O que são
   Schematics
   02
   

   View Slide

10. 10
    O que são
    Schematics
    Um gerador de código
    baseado em templates que
    suporta lógica complexa.
    

    View Slide

11. 11
    O que são
    Schematics
    É um conjunto de instruções
    para modificar um software
    gerando ou modificando
    código.
    

    View Slide

12. 12
    Como
    funciona
    03
    

    View Slide

13. 13
    Como funciona
    

    View Slide

14. 14
    Gerando um projeto
    npx schematics blank --name=my-schematics
    

    View Slide

15. 15
    Collections
    Uma coleção de Schematics.
    Ex.: @schematics/angular
    

    View Slide

16. 16
    Collections
    

    View Slide

17. 17
    RuleFactory
    RuleFactory é uma função que define uma Rule.
    A Rule recebe uma Tree, e a retorna modificada.
    

    View Slide

18. 18
    RuleFactory
    

    View Slide

19. 19
    Compilando
    npm run build
    

    View Slide

20. 20
    Executando
    schematics .:my-schematics --name=awesome
    

    View Slide

21. 21
    Mãos a
    obra
    04
    

    View Slide

22. 22
    Exemplos
    http://bit.ly/tdc-sp-2020-schematics
    

    View Slide

23. 23
    Perguntas?
    05
    

    View Slide

24. #SOMOSTOTVERS
    • Tecnologia + Conhecimento são nosso DNA.
    • O sucesso do cliente é o nosso sucesso.
    • Valorizamos gente boa que é boa gente.
    totvs.com
    @totvs
    /totvs company/totvs
    totvs.store
    @totvs
    OBRIGADO
    Ricardo Mello
    Lead Front-End Engineer
    http://github.com/ricardo-mello
    https://www.linkedin.com/in/ricardomello1
    

    View Slide