UI Components

Como faremos?

NPM Module

"é a forma mais simples e madura de quebrar um problema/solucao em unidades reutilizáveis"

Alguns downloads dessa semana

1,869,854

4,786,861

764,506

1,994,969

2,232,986

Como "frontend"

a gente vive fazendo Interfaces de Usuário

O que muda de um projeto para outro

Arquitetura

Tecnologias

Identidade Visual

Regras de Negócio

Um único input pode ser bem extenso, apesar de usar um framework

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

html

Como poderia ser mais simples

<custom-input
    required
    minlength="4"
    [(ngModel)]="hero.name"
/>

<ui-input-email 
    label="Email" 
    required 
    [(ngModel)]="login.email" 
/>

<ui-input-password 
    label="Password" 
    required 
    [pattern]="passwordPattern" 
    [(ngModel)]="login.password" 
/>

<button>Login</button>

Mas como fazer permitir compatibilidade para todos os atuais e futuros?

Encontrando as coisas em comum

E encontrando alternativas promissoras

Web Components v1

class Input {
    // some methods and props here
}

window.customElements.define('ui-input', Input)

<ui-input required />

const input = document.createElement('ui-input')
input.setAttribute('required, true)

import {Input} from 'ui-components'

const input = new Input()
input.required = true

Core em ES6 Class

Define:
- comportamento

Temas

Define:

- identidade visual

Portes de framework

...

@github/concrete/ui

@gitlab/itau/voxel - (tema)

@github/concrete/ui-angular

@github/concrete/ui-react

@github/concrete/ui-material (tema)