Web Components

Jackson VeronezeSoftware Developer

jackson@jacksonveroneze.comhttps://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze

Autores

Mario MendonçaSoftware Developer

mario.mendonca@gmail.comhttps://br.linkedin.com/in/mario-mendonca

Componentes, do desktop para a web?

IntroduçãoTodas 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.

O Problema do HTML/CSS macarrônicosA forma de desenhar uma página Web mudou bastante nos últimos 20 anos.

As tecnologias básicas ainda são as mesmas:

HTML 5 para estruturar um documento.

CSS 3 para estilizar os elementos no documento.

Javascript para adicionar comportamento.

O que são os Web ComponentsA 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.

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 (Custom Elements)Elementos que podem ser nomeados como quisermos e operar a nosso gosto.

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

DOM Sombra (Shadow DOM)A DOM Sombra (Shadow DOM) é o aspecto fundamental do funcionamento dos componentes web.

É o lugar onde o código escondido vive.

Fabricantes de navegadores tem usado esse DOM Sombra por anos, para implementar, nativamente, elementos como o input, audio, video e outros.

A ideia básica é que você pode pegar todo o código que não precisa ser visto e escondê-lo.

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>.

DOM Sombra (Shadow DOM)Cada instância é auto-contida.

Folhas de estilo e códigos JavaScript dentro do elemento, eles não vazarão, acidentalmente, e não afetará 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.

DOM Sombra (Shadow DOM)Chrome - Ferramentas de Desenvolvedor (Dev Tools)

Shadow DOM - HabilitadoShadow DOM - Desabilitado

Modelos (Templates)Modelo é uma combinação de HTML, CSS e JavaScript, e inclui a funcionalidade que disponibilizamos quando usarmos o elemento.

Importação HTML (HTML Imports)Importação de HTML permite que você pegue tudo que foi desenvolvido 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.

Suporte dos Navegadores

O que são Polyfills?Polyfill é um "shim de JavaScript que replica a API padrão nos navegadores mais antigos". "API padrão" se refere a um determinado recurso ou tecnologia HTML5.

Por exemplo, um polyfill de Localização Geográfica.

Implementações Não-NativasO 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.

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(Google)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="...">.

Polymer - Suporte a NavegadoresChrome Android

Chrome

Canary

Firefox

IE 10+

Safari 6+

Mobile Safari

X-Tags(Mozilla)X-Tags é uma biblioteca JavaScript criada pela Mozilla que, atualmente, leva vantagem sobre o Polymer pelo seu suporte a navegadores ser maior.

X-Tags - Suporte a NavegadoresFirefox 5+ desktop & mobile

Chrome 4+

Chrome Android 2.1+

Safari 4+ desktop & mobile

IE9+

Opera 11+ desktop & mobile

React vs Polymer

Vocês acreditam que web components é o futuro do desenvolvimento web?

Referênciashttp://webcomponents.org/

http://centralhtml5.sourceforge.net/no-browser-left-behind-an-html5-adoption-strategy

http://www.akitaonrails.com/2014/07/06/web-components-e-uma-revolucao

https://webdesign.tutsplus.com/pt/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524

https://www.kinghost.com.br/blog/2016/10/desenvolvimento-web-baseado-em-componentes/

http://hipsters.tech/web-components-hipsters-06/?utm_content=buffer04ebe&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

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

http://x-tag.github.io/

https://www.polymer-project.org/1.0/