Web Components

Uma abordagem holística e conceitual

Atualmente, componentes para web está em alta. Muito se tem ouvido sobre criação de UI modular, estrutura de layout componentizada e assuntos relacionados.

Acontece que criar um componente não é apenas ter um código que gera uma parte de uma UI e pronto! Não! Componentes vão muito além disso e vou te mostrar por quê.

Princípio FIRST

Focused — Independent — Reusable — Small — Testable

Gosto muito de aplicar esse princípio à Componentes Web. Um componente deve ter foco, responsabilidade única, fazer uma coisa e muito bem. Ele deve ser independente e reutilizável. Não tem sentido criar um componente que funcione em apenas um projeto específico.

Seu componente deve ser pequeno, se ele começar a crescer, tente criar um sub-componentes que façam sentido dentro de um contexto, que você possa utilizá-lo sempre que necessário. Ele precisa ser testável. São os testes que irão garantir seu perfeito funcionamento.

Visão Holística

Conceito:

Holístico ou holista é um adjetivo que classifica alguma coisa relacionada com o holismo, ou seja, que procura compreender os fenômenos na sua totalidade e globalidade.

Vamos aplicar esse conceito aos nossos Componentes Web. Um componente precisa ter estilo — CSS, conteúdo — HTML e comportamento — Javascript. Ao ser inserido em um contexto, vamos chamar de ‘meio’, ele precisar fazer seu trabalho e garantir seu funcionamento, independente do meio que ele está inserido.

Se você tem um componente chamado Articles que tem como responsabilidade renderizar uma lista de artigos, que podem ser um outro componente ArticleItem, ele deve fazer isso em qualquer meio que ele for inserido, seja dentro de uma section, footer, a ideia é você garantir que ele vá renderizar de forma correta. Mas e quanto ao estilo dele? Você disse que ele precisa ter estilo, conteúdo e comportamento, se eu colocar um position:fixed como propriedade do meu componente, não vai ferrar com minha UI?

Um componente deve ter estilo quanto a caráter visual próprio. Ele pode ter cor de texto, cor de background, borda, mas a ideia principal é:

Seu estilo intrínseco não pode interferir o meio onde ele é inserido.

Deixe que o meio diga como ele deve ser renderizado, 4 de margin-left, 5 de margin-bottom. Seu componente não precisa ter margem, espaçamento até porque ele não sabe quem vai utilizá-lo e nem onde ele vai estar inserido. O importante é: ele precisa fazer seu papel.

Ele precisa renderizar aquilo que ele tem como responsabilidade. O conteúdo dele é crucial para seu funcionamento e não deve ser prejudicado pelo meio onde está incluído. frIst — Independente.

Meio — Local e Global.

Quando você vai criar um componente, você já parou para pensar em quem vai utilizá-lo e onde ele será utilizado? Vou definir de forma vem objetiva e exemplificada o que eu quero dizer com meio local e global.

Meio Local: é onde seu componente está inserido dentro da aplicação. Um componente Articles pode estar inserido dentro de um componente News, que pode estar inserido dentro de um componente principal App. Pense no meio local quanto à sua aplicação em si. Componentes, Containers, etc.

Meio Global: é o meio que irá ser responsável por receber o conteúdo. O ambiente onde sua aplicação está sendo exibida. Seus componentes devem entregar seus conteúdos independente de onde eles estão sendo renderizados, consumidos. Trata-se de responsividade, acessibilidade e você deve garantir, de forma global, que ele funcione.

Por fim, sempre que for criar um componente é necessário pensar em quem vai consumi-lo, quem vai usá-lo, não apenas pensar em que tarefa ele irá fazer. Pense na sua aplicação como um componente global que tem como responsabilidade renderizar e funcionar em qualquer meio que ele for inserido.

Garanto que dessa forma, criar componentes será muito mais prazerosa e terão resultados muito mais satisfatórios quando em relação a usabilidade e acessibilidade. De nada adianta seu componente renderizar 10000 artigos em pouquíssimo tempo se você não garantir que o usuário final consiga ter acesso ao seu conteúdo, que a ideia principal de toda a web.

Abraços!