Como Criar Seus Próprios Componentes HTML Com Componentes Web

() translation by (you can also view the original English article)

Os Componentes Web tem sido considerados "uma futura grande mudança de paradigma para o desenvolvimento web", com a promessa de alterar, permanentemente, o panorama do design para web. Os grandes nomes da web tem se movimentado para tornar os componentes web realidade. Tanto o Google quanto a Mozilla tem, gradativamente, trazido suporte nativo.

Você deve estar se perguntando o que são componentes web, certo? Resumindo, os componentes web permitem criar elementos HTML customizados que podem realizar qualquer tarefa que você quiser que eles façam. Ao invés de encher seu site com marcação verbosa, scripts gigantescos e códigos repetitivos, você envolve tudo em um simples e único elemento HTML customizado.

Entendendo os Componentes Web

A maneira mais fácil de entendermos como os componentes web permitem elementos HTML customizados, é olhando um elemento já existente, e que conhecemos do HTML5: a tag <video>. Usando esse elemento, você pode adicionar um vídeo com algumas poucas linahs de código, como por exemplo:

Você pode até ver poucas linhas de HTML, mas, eis o que o elemento <video> se parece por trás dos panos:

Por padrão, o navegador esconde todo esse código para que você não precise vê-lo ou escrevê-lo todo quando quiser adicionar algum vídeo em seus aplicativos web. Você, simplesmente, mexe com suas tags <video> e <source>, e tudo funciona perfeitamente.

Antigamente, só fabricantes de navegadores podiam criar elementos dessa forma. Imagine, agora, se você pudesse usar essa mesma abordagem com outros tipos de conteúdo?

Imagine um slideshow de imagens, por exemplo. Normalmente, você precisaria de várias divs aninhadas, usando classes específicas para lidar com o slideshow, cada slide, adição de legendas e miniaturas. Teria, ainda, de prover valores padrões de opções para efeitos de transição, através de algum JavaScript em linha.

E se você pudesse evitar tudo isso e só usar assim:

1	<slide-show transition="fade">
2	<slide src="slideone.jpg" thumb="slideone_thumb.jpg" caption="Look at this image">
3	<slide src="slidetwo.jpg" thumb="slidetwo_thumb.jpg" caption="Look at this other image">
4	</slide-show>

Com os componentes web, você pode!.

Criando Seus Próprios Elementos HTML

Se quisermos prover um elemento conciso e fácil de interagir e implantar que, de outros modos, seria bem complicado de implementar, podemos criar nossos próprios componentes web.

Componentes web também podem ser compartilhados facilmente, então, assim que os desenvolvedores entrarem de cabeça, há uma grande chance de você só precisar procurar por algum componente pré-feito. Para falar a verdade, já vemos vários componentes disponíveis, gratuitamente, para variadas necessidades, desde o reconhecimento de voz..

aos construtores de apresentação..

passando pelos geradores de QR code.

Que tal darmos uma olhada naquilo que os componentes web são feitos?

A Constituição de Um Componente Web

Os componentes web, na forma atual, são constituídos de quatro partes:

Elementos Customizados (Custom Elements)
DOM Sombra (Shadow DOM)
Modelos (Templates)
Importação HTML (HTML Imports)

Elementos Customizados

Elementos customizados são exatamente o que parecem: elementos que podem ser nomeados como você quiser e operar a seu gosto. E quando digo de qualquer maneira, é isso mesmo. Por exemplo, apresento-lhes o elemento <x-gangnam-style>:

Demonstração - passe o mouse sobre a barra

Elementos customizados são declarados, em sua forma mais simples, mais ou menos assim:

1	<element name="x-gangnam-style">
2	...
3	</element>

Quando você cria um elemento customizado, pode criá-lo do zero ou pode extender algum elemento HTML existente, como, por exemplo, o <button> e fornecer uma funcionalidade ou apresentação modificada que precisar.

1	<element name="custom-button" extends="button">
2	...
3	</element>

Nota: é interessante apontar que a tag <element> foi tornada obsoleta em 2013 por algumas complicações. Ela pode retornar, mas, nesse meio tempo, há opções de implementação dela, que falaremos em alguns minutos. Obrigado ao Addy Osmani por explicar essa situação!

DOM Sombra

A DOM Sombra (Shadow DOM) é o aspecto fundamental do funcionamento dos componentes web. No começo, nós vimos sobre o elemento <video> do HTML5 e mostramos como, apesar de vermos apenas algumas linhas de código, há muito mais código escondido por padrão. O lugar onde esse código escondido vive é chamado de "DOM Sombra" (Shadow DOM).

Fabricantes de navegadores tem usado essa DOM Sombra por anos, para implementar, nativamente, elementos como o input, audio, video e outros. Através dos componentes web, ela pode ser utilizada por qualquer desenvolvedor.

A ideia básica é que você pode pegar todo o código que não precisa ser visto e escondê-lo usando a DOM Sombra, de forma que ele não fique no seu caminho. Isso permite você lidar, somente, com dados que ajustam o elemento, como a altura, largura e caminho dos arquivos de vídeo ao usarmos o elemento <video>.

Uma das coisas mais legais de se trabalhar com a DOM Sombra é que cada instância é auto-contida. Assim, se você usa folhas de estilo e códigos JavaScript dentro do elemento, eles não vazarão, acidentalmente, e não afetarão qualquer outra coisa na página.

Reciprocamente, os CSS e JavaScript que estiverem em qualquer lugar da sua página, não afetarão seu componente web, exceto aquelas que forem criadas especificamentes para estilizar e interagir com ele. Isso significa que não precisará criar um espaço de nome em seus IDs e classes CSS para evitar conflitos.

Se quiser ver como a DOM Sombra parece, é bem fácil. Certifique-se que está com uma versão atualizada do Chrome e abra as Ferramentas de Desenvolvedor (Dev Tools). Clique no ícone de roda dentada para abrir as configurações e marque a caixa rotulada com Show user agent shadow DOM:

Então, quando inspecionar qualquer elemento com a DOM Sombra, você verá o código fonte completo. Tente inspecionar o elemento <x-gangnam-style> com e sem a DOM Sombra: http://html5-demos.appspot.com/gangnam

Para uma explicação completa sobre a DOM Sombra, veja: Introdução à DOM Sombra

Modelos

Já cobrimos como elementos customizados permitem o foco só na informação pertinente, enquanto o resto do código é obscurecido pela DOM Sombra. Um modelo dentro de um componente web é o que mantém junto todos os elementos presentacionais do código restante em questão.

Como parte integrante do código que definem o componente web, temos as tags <template>...</template> e, entre elas, inserimos qualquer HTML e/ou CSS que o componente precisar.

Por exemplo, veja o código criado para o componente web <x-gangnam-style>. A tag de abertura <template> está na linha 4 e a tag de fechamento </template> está na linha 201. Entre elas, você verá todo o CSS responsável pela criação, posicionamento e animação, bem como o HTML que posiciona cada uma das imagens envolvidas.

Importação de HTML

Importação de HTML permite que você pegue tudo que foi descrito acima e faça funcionar na sua página. Os componente web são definidos dentro de arquivos HTML externos, assim, esse arquivo precisa ser importado para que o elemento customizado funcione. A importação de HTML lida com isso atravé da tag <link>, que você já deve ser familiar por usar para importar arquivos CSS externos.

Por exemplo, antes de poder usar o componente web <x-gangnam-style> você teria de importar o arquivo HTML que o define, dessa forma:

1	<link rel="import" href="/components/x-gangnam-style.html">

Suporte dos Navegadores e Implementações Não-Nativas

As possibilidades oferecidas pelos componentes web tornam a ideia de cair de cabeça neles bastante atraente, porém, nesse momento, o suporte dos navegadores não é muito interessante. O estado atual de suporte aos componentes web parece mais ou menos com isso:

http://jonrimmer.github.io/are-we-componentized-yet/

O suporte nativo está a caminho por parte do Chrome, Opera e Firefox, porém, não está completo ainda. O IE e o Safari ainda não publicaram seus planos, contudo, é meio difícil que eles não deem suporte, uma vez que a maioria dos navegadores o fará.

Por hora, se você quiser trabalhar com componentes web, terá de usar uma das implementações não-nativas existentes. A boa notícia é que as duas soluções mais populares foram criadas pelo Google e pela Mozilla, então, podemos esperar que haja consistência no modo de operação do suporte nativo.

Polymer, pelo Google

É complicado não tender ao uso do Polymer, uma vez que o Chrome é o navegador mais usado atualmente, e você, com certeza, deve ter em mente que haverá várias considerações em relação a como o Google indexará os componentes web.

O Polymer vem com uma biblioteca completa de componentes web pré-criados. Ela inclui os "elementos base do Polymer que são orientados a funcionalidades, além dos "elementos Paper", que são orientados a design.

Ao criar elementos customizados com o Polymer, ao invés de usar o formato <element name="..."> você usará <polymer-element name="...">.

O Polymer se descreve como sendo uma versão "preview para desenvolvedores" ao invés de pronto para produção, embora eles também digam:

...apesar do rótulo, muitas pessoas já demonstraram sucesso ao usar o Polymer em produção.

Suporte a Navegadores

Chrome Android
Chrome
Canary
Firefox
IE 10+
Safari 6+
Mobile Safari

Se precisar dar suporte ao IE9, que tem entre 1.9% e 5.11% do mercado, infelizmente, você não terá muita sorte com o Polymer. Mas, você ainda pode usar a X-Tags da Mozilla.

X-Tags, pela Mozilla

X-Tags é uma biblioteca JavaScript criada pela Mozilla que, atualmente, leva vantagem sobre o Polymer pelo seu suporte a navegadores ser maior. Se você tem de levar isso em consideração, talvez a X-Tags pode ser sua escolha.

Suporte a Navegadores

Firefox 5+ desktop & mobile
Chrome 4+
Chrome Android 2.1+
Safari 4+ desktop & mobile
IE9+
Opera 11+ desktop & mobile

Suporte ao IE8

Por hora, se precisar dar suporte ao IE8, infelizmente, você não poderá usar, uma vez que as implementações não-nativas dão suporte, somente, ao IE9 ou mais recentes. Estimativas dizem que os usuários de IE8 estão entre 2.1% e 3.82%, mas, claro, se seus dados disserem o contrário, é preferível que tome sua própria decisão em relação ao suporte.

Componentes do Ember.js e AngularJS

Uma forma que você pode se preparar para usar os componentes web é trabalhar com o Ember.js ou o AngularJS. Ambos tem seus próprios meios de criação de componentes e prometem passar a usar os componentes web nativos quando estiverem plenamente disponíveis.

Componentes Criados Pela Comunidade

Aprenda Mais

Conclusão

Espero que tenha curtido a leitura desse resumo sobre componentes web e o porque você deve ficar de olho neles! Há muito mais a aprender, mas, com o básico, temos oportunidades para criar, de verdade, componentes web customizados. O que você acha? Sob quais circunstâncias você usaria componentes web?

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!