DEV Community

Cover image for Por que Web Components?
Rafael Firmino
Rafael Firmino

Posted on • Edited on

1

Por que Web Components?

Fala dev, não sei como chegou aqui, mas este é o meu primeiro post na plataforma então vou me apresentar dessa vez.

Me chamo Rafael, sou apaixonado por desenvolvimento de software, atualmente trabalho como analista em uma plataforma a nível global. Me Viro no devops(Azure, aws, docker, jenkins), RabbitMq, lerna, elastic search, goFiber, docker-compose, Js, css, Vuejs, stencil...

Nos ultimos 2 anos eu tenho trabalhado bastante utilizando vuejs e sem sombra de dúvidas é uma ferramenta incrível!
No projeto atual nós temos a necessidade de utilizar grandes plugins pagos, como Aggrid, flexmonstrer, highcharts e outros grátis como vis-timeline, select2, sweetalert2.

Nem tudo são flores e no desenvolvimento de software o problema e no mundo de components também não. Um dos problemas começa quando o time, tendência ou falta de tempo nos forçam a utilizar wrappers. wrappers ou adapters são utilizados para criar uma camada de abstração entre o framework e a library que deseja utilizar.

O problema desse wrapper é que ele nem sempre acompanha as versões da biblioteca. Um exemplo claro de um é o vis-timeline que atualmente a lib está 10 versões a frente do wrapper. A mesma coisa ocorre com aggrid, Flexmonster e Hightcharts.

Não precisaríamos pensar em utilizar wrappers se as bibliotecas fossem realmente agnósticas a framework. Já precisou customizar alguma lib em um framework vue, react ou svelt. As vezes é mais complicado do que parece e "gambiarras" para adicionar comportamentos surgem nesse momento.

Recentemente estive pensando bastante como criar componentes realmente customizáveis e principalmente reutilizáveis independente de framework, foi onde me deparei com um carinha chamado Stencil.

Stencil é um conjunto de ferramentas para a construção de sistemas de design reutilizáveis ​​e escaláveis. Gere componentes da Web pequenos, extremamente rápidos e 100% baseados em padrões que são executados em todos os navegadores.

Alt Text

Penso que Web Components é o caminho para criarmos bibliotecas de qualidade, agnósticas, testáveis, com os seus comportamentos isolados, CUSTOMIZÁVEIS e REUTILIZÁVEIS.

Estou criando um Web Component chamado componentt-toast Tem muita coisa ainda a ser feita mas já da pra pegar a ideia e ver o quão fácil é o Stencil. Sinta-se livre para contribuir.

Obrigado :)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay