Melhore a produtividade do seu time com o Angular Schematics

Alvaro Camillo

Introdução

Você já usou o angular-cli?

npm install -g @angular/cli

ng new

ng serve

ng build

Você já usou o angular-cli?

ng generate (ng g )

component

service

pipe

guard

...

Como?

Schematics

Schematics

  • Biblioteca criada pelo time do Angular
  • Disponibilizada publicamente.
  • Permite estender e criar novos comandos.

 

 

Schematics

  • Manipulação de arquivos em memória.
  • Os arquivos são gerados apenas se todas as operações ocorrerem com sucesso.
  • Criação de documentação (--help)
  • Criação de prompts.

 

 

Schematics

  • Simplificação para o uso da sua biblioteca(ng add)
  • Permite automatização no update (ng update)
  • Basicamente o poder do Angular-cli para a sua biblioteca.

 

Schematics Populares

  • ng add @angular/material
  • ng add @angular/pwa
  • ng add @ngrx/store
  • ng add @briebug/jest-schematic
  • ng add @portinari/portinari-ui

Criando seu primeiro Schematic

Instalação

npm i -g @angular-devkit/schematics-cli

Exemplo Angular

schematics schematic --name exemplo

Exemplo Angular

Meu Schematic

schematics blank --name meuSchematic

Collection

  • Responsável pela definição do schematic.
  • Pode ser composto por vários schematics
  • Parâmetros
  • Help
  • Aponta para a factory.

Collection

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "meu-schematic": {
      "description": "Exemplo de um Schematic",
      "factory": "./meu-schematic/index#meuSchematic",
      "schema": "./meu-schematic/parametros.json"
    }
  }
}

Schema

{
  "$schema": "http://json-schema.org/schema",
  "id": "MeuSchematic",
  "title": "Parâmetros do Schematic",
  "type": "object",
  "description": "Exemplo Schematic",
  "properties": {
    "nome": {
      "type": "string",
      "description": "Nome do serviço",
      "$default": {
        "$source": "argv",
        "index": 0
      },
      "x-prompt": "Qual é o nome do serviço que você quer criar?"
    }
  },
  "required": ["nome"]
}

Factory

  • Função que manipula arquivos.
  • Compostas por uma ou mais Rules

Factory

import { strings } from '@angular-devkit/core';
import { apply, mergeWith, Rule} from '@angular-devkit/schematics';
import { SchematicContext, template, Tree, url } from '@angular-devkit/schematics';

import { Parametros } from './parametros.d';

export function meuSchematic(_options: Parametros): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const sourceTemplates = url('./files');

    const sourceParametrizedTemplates = apply(sourceTemplates, [
      template({
        ..._options,
        ...strings
      })
    ]);

    return mergeWith(sourceParametrizedTemplates)(tree, _context);
  };
}

Template

Template

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

const API_URL = '/api/<%= dasherize(nome) %>';

@Injectable({providedIn: 'root'})
export class <%= classify(nome) %>CrudResourceService{

    constructor(private httpClient: HttpClient){}

    findAll():Observable<any>[]{
        return this.httpClient.get<any>(API_URL);
    }
}

Executando

npm run build
schematics .:meu-schematic  --debug=false

Isso é apenas o começo...

Isso é apenas o começo...

  • Manipulação de arquivos já criados
  • Publicação
  • ng add
  • ng update
  • Testes

Conclusão

  • Schematics é a lib que o Angular utiliza para construção da seu cli.
  • Você pode utilizar o seu poder para criar seus próprios comandos.
  • Um meio de propagar boas práticas da sua organização.
  • Mensure o custo/benefício da criação de um schematic.

Refêrencias

Melhore a produtividade do seu time com o Angular Schematics

By Alvaro Camillo Neto

Melhore a produtividade do seu time com o Angular Schematics

Você ou sua equipe costumam escrever a mesma estrutura básica de componente angular para todo projeto? Adiciona a mesma biblioteca que possui vários passos para implementar? Criou uma biblioteca Angular e gostaria de facilitar a sua instalação? Vamos conhecer o Angular Schematic uma ferramenta que permite você criar scripts que manipulam ou adicionam arquivos no seu projeto Angular!

  • 1,643