Web components para o Design System
A criação de design system tem crescido cada vez mais, tanto no mercado externo quanto interno. Pois este traz um tipo de esteira de produção para criar novos produtos, mais rápido e com qualidade tanto no que diz respeito a tecnologia (programação) quanto ao design.
Mas então, o que é um design system?
Primeiramente, podemos definir que design system, não é um projeto. Ou seja, não tem início, meio e fim. Sendo, assim, um produto. E ele nasce com o objetivo de servir a outros produtos.
“Um ecossistema de bibliotecas com componentes codados a partir de semânticas de design e gestão de estilo centralizada” — Meiuca Design
É a união entre design e tecnologia para escalar novas interfaces de produtos mantendo a qualidade.
Neste design system pode conter definições de tipografia, animações, cores, biblioteca de componentes, acessibilidade, entre outros.
Tecnologias utilizadas na criação do design system
Pensando em desenvolvimento Web, na criação de bibliotecas dentro do design system é comum utilizar os frameworks ou bibliotecas javascript mais famosos, como: Angular, React e Vue.js.
Esses frameworks são utilizados na criação de componentes como button, accordion ou checkbox. No entanto, trazem consigo uma limitação: só podem ser utilizados em produtos que utilizam a mesma tecnologia. Então, um produto que é desenvolvido em Angular só pode receber outro componente se esse componente também foi desenvolvido em Angular.
Uma outra abordagem adotada para design system utiliza o conceito de Web Components, que detalharei melhor a seguir.
O que é um Web Component?
É um conjunto de tecnologias nativas que possibilita a criação de componentes reutilizáveis em páginas Web. Atualmente, já é possível criar componentes apenas utilizando HTML, CSS e Javascript.
Isso significa que ao criar um Web Component, você pode importá-lo e utilizar dentro de um framework Angular, no React ou em uma página simples com Javascript puro.
Para isso, o Web Component é formado por:
- Elementos customizáveis (customElements): é um conjunto de APIs javascript que possibilita declarar um elemento customizável e utilizá-lo no HTML.
- Shadow DOM: Um conjunto de APIs JavaScript para incorporar uma árvore DOM “fantasma” encapsulada a um elemento — que é renderizada separadamente do DOM do documento principal — e controlar a funcionalidade associada.
- Templates HTML: Usar os elementos <template> e <slot> para reaproveitamento de conteúdo
- ES Modules: nova forma de se criar módulos utilizando ES6
No exemplo abaixo, temos a definição de um componente do tipo select customizados utilizando essas tecnologias.
const style = `
select {
padding: 8px;
width: 200px;
}
`;
class SelectComponent extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
}
get items() {
return JSON.parse(this.getAttribute('items'));
}
set items(value) {
this.setAttribute('items', value);
}
static get observedAttributes() {
return ['items'];
}
attributeChangedCallback() {
this.render();
}
connectedCallback() {
this.render();
}
render() {
const options = this.items.reduce((acc, item)=> {
return acc + `<option value="${item.value}">${item.label}</option>`
}, '');
this.shadow.innerHTML = `
<style>${style}</style>
<select>
${options}
</select>
`;
}
}
customElements.define('tdc-select', SelectComponent);Com isso, basta apenas importar esse arquivo em algum HTML, e estará pronto para ser consumido!
Como está o mercado hoje
Atualmente, diversas empresas já estão utilizando web components. Entre elas, podemos citar a SalesForce, Microsoft, Google, Apple, Amazon, e muitas outras.
Para você ter acesso a essa informação, você pode consultar as principais bibliotecas utilizadas para acelerar a criação de web components. Dentro delas, há um área que mostra as empresas que utilizam:
Por que escolhemos utilizar web components
Para o desenvolvimento de biblioteca de componentes, principalmente quando falamos de design system, identificamos as seguintes vantagens:
- Flexibilidade para poder utilizar em qualquer outro framework front-end
- Interoperabilidade com projetos que estão em produção atualmente
- Menor tamanho de pacote final
- Suporta os navegadores atualmente mais utilizados: Chrome, Firefox, Safari e Opera. E para o IE11 possui pollyfills.
Desafios encontrados
Algumas ferramentas de apoio ainda não têm muita documentação para suporte. Por exemplo: testes e storybook. Mas isso não chega a ser um impedimento. Conseguimos criar os testes utilizando o Jest. E para o storybook utilizamos como a base a criação no formato HTML.
Custom properties para IE11 não foi possível, tivemos que utilizar fallback. Ou seja, tivemos que duplicar algumas propriedades, como background-color, font-family, padding, colocar um valor fixo para poder funcionar no tema. Conforme o exemplo abaixo:
button {
background-color: blue;
background-color: var(--background);
}É isso pessoal, espero que este post possa ajudá-los na escolha da tecnologia de vocês.
Segue abaixo alguns links sobre o nosso design system para te ajudar:
