Download - Web components
Web Components
Jackson VeronezeSoftware Developer
[email protected]://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze
Autores
Mario MendonçaSoftware Developer
[email protected]://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/