Web Components - Introdução a tecnologia que vem ganhando cada vez mais notoriedade e que visa auxiliar o desenvolvedor front-end na criação de componentes customizados.

1. Web Components

2. Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Autores
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca

3. Componentes, do desktop para a web?

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

5. O Problema do HTML/CSS macarrônicos
A 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.

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

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

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

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

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

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

12. Shadow DOM - HabilitadoShadow DOM - Desabilitado

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

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

16. Suporte dos Navegadores

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

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

19. 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="...">.

20. Polymer - Suporte a Navegadores
Chrome Android
Chrome
Canary
Firefox
IE 10+
Safari 6+
Mobile Safari

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

22. X-Tags - Suporte a Navegadores
Firefox 5+ desktop & mobile
Chrome 4+
Chrome Android 2.1+
Safari 4+ desktop & mobile
IE9+
Opera 11+ desktop & mobile

23. React vs Polymer

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

25. Referências
http://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/