Webcomponents - Estudo de caso
Venho de um background de desenvolvimento fullstack, passei pelo Angular 1.x, depois React pré/pós Fiber e agora estou na Kovi onde estamos usamos Vue.
Logo de cara, senti um impacto enorme com a diferença de approuch entre o Vue e o React. Daí veio aquele processo de reaprender como criar components tudo do zero, como definir e usar atributos, criar slots, e claro como reaproveitar esses componentes.
Ao longo do artigo vamos construir varias vezes um único componente, backoffice-header. Esse componente nasceu desse prototipo e decomposição logo abaixo.
Agora para construir esse componente nas seguintes libs:
Foi quando me dei conta que reaprendi pelo menos 2 vezes trabalhando apenas com o react . A cada 2 anos algo muda dentro dos frameworks que nos força a reaprender e refatorar nossa codebase.
Um exemplo dessa mudança é o seguinte modo de se criar o mesmo componente usando classes:
Se fossemos falar de redux, mobx, e outros ferramentas que se plugam no react então essa lista aumentaria exponencialmente.
Precisa ser desse jeito? Acredito que não.
E tem circulado na comunidade uma proposta para mudar isso, os WEB COMPONENTS.
Web components são uma web api, assim como a fetch api, para criarmos componentes customizáveis para a web. Eles seguem uma padronização assim como as outras features do es6 e como essas features são implementadas em diversas plataformas. Nas plataformas onde não temos a implementação, podemos usar os transpillers, tal como polymer.js.
Poxa, mas isso não resolve o fato de eu ter de aprender outra vez como criar um componente. De fato, dessa vez não, mas uma vez aprendido como criar um web component, podemos então reutiliza-lo no react, no vue, no angular e em qualquer outro framework.
E pra que utilizaríamos React, Vue e essas outras libs js?
As libs Js tem se especializado em uma tarefa honerosa e importantíssima: Lidar com estados.
React é incrivel quando faz o trabalho sujo pro trás para definir o que precisa e o que não precisa ser renderizado. Vue e vuex brilha quando tem que lidar com uma chamada a uma api, que vai cascatear uma mudança de estado na aplicação.
Teríamos então uma clara divisão:
Stateless components: Web components.
Stateful components: Vue.js ( React, ou qualquer outra lib de componentização).
Com o crescimento do time uma parte da equipe assume o papel de DesignOps e se responsabiliza pelo desenvolvimento desses componentes, da sua concepção até a lib compatilhada pela codebase.
E assim como no passado o es6 deixou de ser uma coisa de transpillers e virou território comum a todos os desenvolvedores frontend, os webcomponents serão num futuro próximo. O chrome inclusive já implementa parte da especificação.
Vamos desenvolver para esse futuro próximo onde nossos componentes não irão se importar se estamos no vue, no react ou no novíssimo framework que tá sendo lançado enquanto você lê isso.
