Antes de colocarmos a mão na massa e fazer código, é importante sabermos o que queremos fazer. Eu, particularmente, tenho uma mania bem peculiar: gosto de desenhar (nem que seja um rabisco feio mesmo) as telas e fluxos que minha aplicação deve ter. Isso me dá uma visão clara do que eu quero fazer.
Agora, já imaginou se fosse possível transformar os nossos rabiscos feitos à mão, em papel sulfite (ou no caderno) em componentes web funcionais? Não seria simplesmente incrível? Pois bem, essa tecnologia ainda não existe (eu acho!), mas já é possível criar componentes que tenham este visual de “feitos à mão”. Podemos fazer isso facilmente com o protagonista deste artigo, a biblioteca Wired Elements!
Componentes feitos à mão
A biblioteca Wired Elements nada mais é que uma grande coleção de componentes visuais comuns em aplicações web (ex: botões, inputs, combo boxes, radios, etc), que parecem ter sido desenhados à mão. Ele é bem bacana para wireframes, mockups ou mesmo dar um visual diferenciado para a sua aplicação.
O projeto é open source e faz parte do portfólio do programador canadense Preet Shihn (@preetster). O código todo está disponível no GitHub (que foi recentemente comprado pela Microsoft) e já tem quase 5 mil estrelas. Além disso, um grande fator interessante é que os componentes foram implementados como web components.
Vamos dar uma olhada em como ele funciona.
Desenhando componentes na tela
O site oficial do projeto facilita bastante a nossa vida provendo um ambiente na nuvem, configurado para que possamos testar os componentes. O link está disponível aqui. Ao acessá-lo, o arquivo index.html virá aberto, e logo ao seu lado, o código resultado renderizado.
Repare que no conteúdo da tag <body>, estão os componentes que nos interessam. Para testar todos os componentes possíveis, basta acessarmos o showcase. Nesta página, temos acesso ao nome e visual de todos os componentes.
Vamos testar este componente de barra de progresso na nossa aplicação. Para isso, basta colocar o nome correspondente ao da documentação dentro do código. No nosso caso, ficará assim:
<body> <wired-progress value="25"></wired-progress> </body>
E o resultado será o seguinte:
Bem legal, né? Caso você esteja se perguntando como saber quais propriedades cada um dos componentes usa, isso é muito simples; no showcase, para cada um dos componentes, há um atalho que o redireciona para a página da sua documentação no GitHub. Lá, você encontrará informações sobre como utilizar e customizar cada um deles. No caso da barra de progresso, está neste link.
Acesse a documentação e faça alguns testes! Caso você se interesse e queira implementá-lo no seu projeto, basta adicionar ao seu projeto utilizando o npm através do comando:
npm install --save wired-elements
Feito isto, basta adicionar a definição para dentro do seu HTML:
<script type="module" src="wired-elements/wired-elements.js"> </script>
Ou então importá-lo utilizando módulos (ES6):
import { WiredButton, WiredInput } from "wired-elements"
Componentes em React
Hoje em dia é difícil se falar em componentes sem falar também do React. O Wired Elements também funciona com a tecnologia sem qualquer dificuldade. Para quem quiser se aventurar utilizando este formato, a documentação oficial também disponibilizou um ambiente pronto para uso. Basta acessar este link.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?