Tableless

Busca Menu

Web Components: Introdução

Seja o primeiro a comentar por

O que um plugin JavaScript/jQuery tem em comum com frameworks CSS como o Bootstrap? Resposta: Grandes pedaços de código HTML, CSS e Javascript.

Todas as vezes que você precisa implementar um slider ou elementos de um framework que você gosta, invariavelmente você precisa copiar um grande pedaço de código HTML, CSS e Javascript para depois aplicar em seu projeto. Todos estes códigos estão sempre separados e sofrem, principalmente, efeitos do código externo do seu projeto ou de outros plugins. Muitas vezes você deve ter tido algum problema de conflito entre códigos do plugin e do seu projeto. Isso gera retrabalho e outros problemas.

Mesmo se você cria seus próprios plugins ou frameworks de CSS, você ainda precisa tomar uma série de cuidados para que o código não sofra nenhum conflito e que seja o mais flexível e reutilizável possível. Mas acredite, mesmo que você faça um trabalho perfeito, alguma coisa sempre foge do controle.

Os Web Components podem ajudar nesses problemas e em muitos outros.

O que são os Web Components

A ideia de criar componentes na web não é nova. A cada novo framework ou a cada novo plugin, tentamos fazer isso. O problema é que um componente só é um componente se ele pode ser reutilizado, diversas vezes, em qualquer lugar do projeto, sem sofrer alterações acidentais por códigos externos e também sem modificar outros elementos. É aí que entram os Web Components.

The component model for the Web (also known as Web Components) consists of four pieces designed to be used together to let web application authors define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

Os Web Components são por enquanto um grupo de 5 especificações, que formam o guarda-chuva dos Web Components, são eles:

  1. Templates: definem pedaços de código que são totalmente inertes à página até que seu Javascript os ative.
  2. Decorators: aplicam os templates baseando-se em seletores para criar mudanças visuais ricas e comportamentos.
  3. Custom Elements: são elementos customizados, com nomes e scripts criados por você.
  4. Shadow DOM: é onde uma parte do código do seu elemento é encapsulada e escondida pelo browser, ou seja, não é visível no código normal do DOM, mas que monta todo seu componente “por baixo dos panos”.
  5. Imports: definem quais elementos customizados são empacotados e lidos como um recurso.

Cada uma dessas partes são individualmente úteis, mas se tornam realmente importantes quando combinadas. Assim você consegue fazer um componente totalmente funcional, com o visual e o código customizados.

Para facilitar o entendimento, aqui vai um exemplo bem tosco: pense que a independência dos web components funcionam como um iframe. O Facebook, Twitter e Google+ usam iframes para colocar seus botões nas páginas. Sendo um iframe eles podem usar o Javascript, o CSS e o HTML customizados sem que o código da sua página quebre os botões deles e vice-versa.

Você precisa entender dois conceitos essenciais e importantes dentro dos Web Components: Shadow DOM e Custom Elements.

Custom Elements

E se você pudesse criar suas próprias tags?

O HTML tem muitos elementos que usamos todos os dias. O problema é que a Web cresceu demais e a verdade é que não temos mais elementos que cobrem todas as nossas necessidades. Por exemplo: como você faz uma modal? Como você faz tabs? Como você faz um collapse? Não existem elementos no HTML que criam estes módulos e suas interações. Por isso você usa listas, divs, parágrafos, títulos e o que der na telha para fazer estes elementos funcionarem.

Quem precisa lidar com interfaces pesadas de aplicações baseadas em web, como por exemplo um tocador de músicas online, tipo o Spotify, Rdio e Deezer, sente esse problema todos os dias. Na verdade, para criar qualquer aplicação baseada em web, você vai precisar de uma boa dose criatividade usando os elementos existentes do HTML para produzir o layout que foi planejado. Muitas vezes o código vira um punhado de DIVs e SPANs. Aí eu te pergunto: nesses casos a semântica é importante? Quando você ler logo abaixo sobre Shadow DOM, você vai entender que a semântica pode ser bem surrada em ambientes assim. Ela se torna tão subjetiva que pode fazer você pensar que ela realmente não existe.

Voltando ao assunto: como fazer seus próprios elementos?

Quando criarmos um elemento, precisamos que ele herde as mesmas possibilidades que os elementos normais do HTML. Isso quer dizer que você precisa poder formatar com CSS e também manipular com Javascript.

Quando criarmos o elemento, precisamos fazer com que o browser reconheça esse elemento. No Javascript, você usará o documento.registerElement() para fazer isso:

var yourElement = document.registerElement('nome-elemento');

O argumento do document.registerElement() define o nome do seu elemento, da sua nova tag. O nome sempre tem que ter um traço (-). Se você quiser, o nome pode ter mais do que duas palavras também, tipo: <list-combo-select>. Agora, um nome assim: <list> ou <list_combo> não são válidos. Essa restrição permite que o parser do browser entenda o que é um elemento customizado dos elementos default do HTML, garantindo compatibilidades futuras.

Para que um elemento seja realmente um elemento, além de registrar o elemento no browser como fizemos acima, nós precisamos que ele herde as características de funcionamento que o Javascript tem sobre um elemento HTML convencional. Difícil de entender né? Mas pense assim: você quer que seu elemento possa ser manipulado como um div, p, img e etc. Para isso você vai criar via javascript um objeto, que herda as características do elemento HTML e o prototype Javascript:

var yourElement = document.registerElement('seu-elemento', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button' // Define que o elemento button pode herdar as características do seu elemento.
});

Isso faz com que você possa adicionar eventos de click, hover e etc no seu elemento customizado.

Não quero me estender agora, mas haverá outro artigo explicando como criar os elementos, inclusive usando as bibliotecas X-Tag ou o Polymer para ajudar.

Shadow DOM

O Shadow DOM é uma parte interessante e importante do processo.

Quando você liga um carro, você não pensa no processo que faz tudo aquilo funcionar. Na verdade só nos preocupamos no que acontece debaixo do capô se halgo dá errado quando giramos a chave. A mesma coisa acontece com as tags do HTML. Pare um momento e pense: do que é feito o input de texto?

Quais os elementos que o browser usa para montá-lo na tela?

E se eu dissesse que ele é basicamente um elemento DIV?

<input type="text">
  <div id="inner-editor"></div>
</input>

Isso se chama Shadow DOM. Para você entender melhor, veja como é feito a tag de Vídeo:

Essa é a versão original, que você já deve conhecer:

<video controls poster="poster.png">
	<source src="video.webm" type='video/webm;codecs="vp8, vorbis"' />
	<source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
	<track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-br" default></track>
</video>

Essa é a versão escondida:

<video controls poster="poster.png">
	<div>
		<div style="display: none"></div>
		<div>
			<div>
				<input type="button">
				<input type="range" step="any" max="70.112">
				<div style="display: none;">0:00</div>
				<div>1:10</div>
				<input type="button">
				<input type="range" step="any" max="1">
				<input type="button">
				<input type="button">
			</div>
		</div>
	</div>

  <source src="video.webm" type='video/webm;codecs="vp8, vorbis"' />
  <source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  <track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-br" default></track>
</video>

Pois é. Não confie em ninguém!

É assim, com esse código nada elegante, que o browser monta os elementos. Esse código parece ser ruim e você pode levar um susto quando começar a fuçar códigos de outros elementos, mas não é errado e pode mudar de browser para browser. Lembre-se que ali é um DOM escondido, o que importa não é a beleza do código, mas a funcionalidade.

E não, você não precisa escrever um código assim pra criar seus próprios componentes.

Pense em como fazer um slider de imagem. Um código de slider geralmente é algo assim:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Imagine fazer algo assim:

<img-slider>
  <img src="./image1.jpg" alt="a dramatic sunset">
  <img src="./image2.jpg" alt="a rock arch">
  <img src="./image3.jpg" alt="some neat grooves">
  <img src="./image4.jpg" alt="an interesting rock">
</img-slider>

Entende? Toda a parafernália que fica atrapalhando e que provavelmente você nem vai mexer, fica escondida. As imagens, que são o que realmente importa, estão logo ali.

Como mostrar o Shadow DOM?

Se você não encontrar no seu Chrome, tente baixar o Chrome Canary.

Abra o Developer Tools, clique no ícone da engrenagem para abrir a tela de configurações. Procure a opção, habilite e pronto, você já tem super poderes.

shadow-dom-chrome-config

Suporte

E o suporte dos browsers? Cara, até que é ótimo. Veja essa tabela. Tirando o Safari e o IE que ainda não tem suporte algum, os outros browsers tem problemas apenas com o HTML Imports. Owl, Yeah!

Polymer é uma biblioteca construída em cima de Web Components e projetada para fazer com que os navegadores modernos entendam os Web Components.

X-Tag é uma biblioteca Javascript pequenininha, criada e mantida pela Mozilla, que traz as capacidades do Custom elements do Web Components para todos os browsers modernos.

Slides e leituras obrigatórias

Este artigo foi uma introdução para você começar a se interessar e a pesquisar sobre Web Components. Existem milhares de sites por aí que eu aconselho você ler. Os links estão logo abaixo:

Publicado no dia