Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Schematics: Criando geradores de código

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

TOTVS Developers

August 27, 2020
Tweet

More Decks by TOTVS Developers

Other Decks in Programming

Transcript

  1. TODOS OS DIREITOS RESERVADOS Angular Schematics Agosto /2020 /Criando Geradores

    de Código
  2. 2 Ricardo Mello Lead Front-End Engineer at TOTVS Community Manager

    at Angular Rio
  3. 3

  4. 4

  5. 5 Tarefas Repetitivas 01 Quantas tarefas você já faz no

    modo automático?
  6. 6 Tarefas Repetitivas - CRUD • Gerar um módulo •

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

    SharedModule • Setar as Rotas • Gerar os componentes • Layoutar a lista • Layoutar o form
  8. 8

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

    02
  10. 10 O que são Schematics Um gerador de código baseado

    em templates que suporta lógica complexa.
  11. 11 O que são Schematics É um conjunto de instruções

    para modificar um software gerando ou modificando código.
  12. 12 Como funciona 03

  13. 13 Como funciona

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

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

  16. 16 Collections

  17. 17 RuleFactory RuleFactory é uma função que define uma Rule.

    A Rule recebe uma Tree, e a retorna modificada.
  18. 18 RuleFactory

  19. 19 Compilando npm run build

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

  21. 21 Mãos a obra 04

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

  23. 23 Perguntas? 05

  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