Web Components & Minimal API: porquê e quando usar?

por Diogo Salaberri, Technical Project Manager (Enterprise Solutions), e Jorge Borralho, Tech Lead (Digital Xperience) @ Xpand IT

Quando falamos sobre os objetivos mais práticos do desenvolvimento web, funcionamento é uma das palavras-chave. É imperativo que tudo esteja operacional e a funcionar quando acedemos a uma aplicação ou plataforma em rede. Por exemplo, dentro de uma página na internet, muito conteúdo é carregado para nos ser visível – desde o design até ao texto e outros suportes visuais como vídeos, imagens, etc. 

São estes e outros os vários elementos que são necessários interligar para que o funcionamento seja assegurado. Como fazê-lo? Web components e minimal API poderão ser opções viáveis neste tipo de projetos de desenvolvimento web. Estes dois mecanismos foram explorados nos nossos webinares, as DEV Talks. Em 2022, a Xpand IT organizou uma sessão virtual dedicada ao uso e aplicação real de web components (as suas especificações e ferramentas) e minimal API (uma forma simples e diferenciada de criar APIs) – com demo incluída. 

O que são web components?

Web components são um conjunto de especificações, regras e práticas que podemos introduzir ou estender num componente HTML (em que as tags são sobejamente conhecidas, como: <div>, H1, H2, image, etc.). Ou seja, podemos criar os nossos próprios componentes e definir como estes se devem comportar quando estão operacionais.  Para isso, podemos explorar algumas das especificações mais recorrentes: 

• Custom Elements. É a especificação que permite fundar e definir as regras para criar os componentes. Na prática, é utilizado para registar um componente personalizado para que este se comporte e seja utilizado como queremos 

• Shadow DOM. Lembra-te: DOM são as siglas para Document Object Model, que são as interfaces de programação para documentos web. Um DOM já existe numa página original em HTML, mas com o Shadow DOM pode ser possível anexar outro DOM. A implementação de web components em Shadow DOM é opcional. Ao usares esta especificação, elementos como styles/CSS estão isolados. Ou seja, dependendo onde são criados, não estão expostos ao web component ou fora do web component.  Se criares um CSS fora do escopo do web component, este não consegue visualizá-lo. E se criar um CSS dentro do escopo do web component, esse CSS não é visto fora deste escopo. Na demo deste webinar, poderás ver como funcionam os web components com e sem shadow DOM. 

• ES Modules. Este é uma das especificações mais triviais para quem usa JavaScript porque podemos definir como podemos criar diversos arquivos JavaScript (importar/exportar) e como migrá-los para outros arquivos em JavaScript ou em HTML – como também poderás espreitar na demo deste webinar. Com a especificação em ES Modules também será possível definir a inclusão e reutilização de documentos em JavaScript baseado em padrões, módulos ou desempenho 

• HTML Template. Nesta especificação podemos definir um fragmento de HTML que vai ser o corpo do web component. O template é uma das default tags existente no HTML padrão. Mesmo podendo ser definido no momento de desenvolvimento, o HTML Template é uma boa prática porque o web component pode ser isolado ou importado para que se separe o código de uma maneira mais intuitiva e saudável para eventuais manutenções do projeto web no futuro 

Então, quando e como usar web components?

Muitos developers web acreditam que os web components não vieram retirar destaque ao trabalho das frameworks padrão para HTML e JavaScript (como React, Angular ou Viewer.js), mas sim preencher um lugar já existente no universo do desenvolvimento web. As frameworks que elencámos em cima são orientadas à construção de componentes de ação – esses componentes podem ser reutilizados no desenvolvimento de outras aplicações se corretamente aplicados. 

Já um web component tem a capacidade diferencial de ser ligado e compatível a projetos escritos em frameworks distintas- esta é uma solução muito recorrente no dia-a-dia das tecnológicas para que várias aplicações estejam interligadas. Assim, com os web components, os elementos HTML padrão são mantidos, mas há elevado potencial por serem altamente personalizados. 

É possível desenvolveres web components em Angular, React, Viewer.js ou até mesmo em JavaScript. Contudo, estas frameworks não estão otimizadas para isso pois podem falhar em performance, tamanho de bundle, capacidade de ligação, etc. Para isso, recomendamos: 

• Svelte.js – Com uma forte vertente de desenvolvimento de web components, é uma das frameworks com um dos bundles mais pequenos possíveis (1.6KB – o que é altamente importante quando são criados vários web components). Também é uma framework que permite desenvolver aplicações web 

• Stencil – Ferramenta especializada para apenas desenvolver web components reutilizáveis, personalizáveis, escaláveis, otimizados e compatíveis com qualquer browser. É gratuito e open-source

Minimal API: para que serve?

Minimal API é uma das mais recentes frameworks da linguagem de programação C#, já integrado na plataforma .NET 6, que serve para criar APIs (Application Programming Interfaces) de uma forma diferente, mas simples. 

As minimal APIs surgem com o objetivo de criar APIs HTTP que utilizem menos recursos ou recursos com ficheiros e features de tamanho reduzido, com um boilerplate reduzido, mantendo todas as potencialidades de .NET. Esta é uma boa solução para criar microsserviços de uma forma rápida, minimizando as dependências do ASP .NET Core e mantendo a performance demonstrada. 

Conclusão

Web components e minimal API permitem criar frontends e backends de formas diferentes. 

Web componentes são uma extensão da componente HTML. Agnóstica. Não é uma novidade, mas é muito útil para reutilizar componentes de uma aplicação web para outra, inclusive entre diferentes frameworks. 

Já as minimal API, uma nova framework, permitem criar API em .NET 6 e C# da forma mais rápida que já viste. 

Se gostaste deste blogpost, vem conhecer um caso prático de aplicação destas duas técnicas numa solução de software.