Web Components, uma retrospectiva de um futuro que se faz presente
Depois do post de inauguração, você com certeza está esperando mais conteúdo relacionado à Polymer, mas é óbvio, mas é evidente, mas é claro que falaremos muito sobre Polymer, mas antes você sabe o que são Web Components ou Componentes Web?
Se você fizer uma pesquisa no Google procurando respostas para essa pergunta você vai verificar que o Zeno Rocha falou sobre web components na edição da BrazilJS em 2013 com sua palestra: “Um futuro chamado web components” e de fato nosso querido Zeno foi um dos pioneiros a disseminar a utilização de componentes em terras tupiniquins, também podemos voltar um pouco mais na história e ler o artigo “Sou DOM, Shadow DOM” no Loop Infinito com o artigo escrito pelo Almir Filho.
Vamos então utilizar de um dos maiores beneficios dos componentes, a reutilização, nesse caso farei a reutilização de alguns artigos começando com um que responde a pergunta: “O que são Web Components?” com o artigo do Diego Eis lá no Tableless, onde ele mostrou de uma forma bem objetiva e clara tudo o que você precisa saber para iniciar suas aventuras nesse mundo dos Componentes Web. Okay! Vou esperar você ler o artigo e voltar aqui, fechado?
Depois de ler o artigo do nosso estimado Diego Eis com certeza você já tem uma ótima noção do que se trata esse tal de Web Components, mas resumindo com um trecho diretamente da Wikipedia temos:
Componentes Web são um conjunto de normas atualmente sendo produzidos por engenheiros do Google como também uma especificação da W3C que permitem a criação de componentes reutilizáveis em documentos e aplicações web.
Podemos ir um pouco mais além lendo a aula, digo, o artigo do Fabio Akita que traz uma reflexão incrível para pergunta: “Web Components é uma Revolução?”. Sim. Eu espero você ler, mas prepara um ☕️ antes.
E ainda nos traz uma definição mais técnica:
Do ponto de vista puramente técnico é muito simples entender o que é um “Web Component”. Ele é o conjunto de 4 tecnologias de navegadores web: Custom Elements, HTML Imports, Templates e Shadow DOM
O artigo do Akita foi escrito em Julho de 2014 e se você fizer uma pesquisa rápida no Can I use você verá que o suporte dos navegadores não evoluiu tanto com relação à tecnologias citadas anteriormente e é por isso que precisamos de alguma forma de “simular” o comportamento das tecnologias mencionadas, o que chamamos de Polyfills.
De acordo com o site do Modernizr, um 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.
Com o título “Web Components! Hoje!”, Beto Muniz, em Setembro de 2014, também traz para nossa reflexão um post sobre Web components e uma parte da conclusão que ele fez foi a seguinte:
A moral deste post é que como eu disse no começo dele, Algumas tecnologias emergentes estão mudando e muito a forma como nós iremos desenvolver daqui pra frente aplicações web, e pensando a longo prazo, hoje, ou talvez agora, seja o melhor momento para começar a estudar tais tecnologias.
Acredito que podemos dizer que o futuro já se tornou o presente desde que Zeno apresentou pela primeira vez a palestra: “Um futuro chamado Web Components”, pois para você ter uma ideia, o Google já tem muitos produtos utilizando Polymer e claro Web Components, sem contar também que existe um esforço enorme do Google em tornar essa ferramenta, o Polymer, cada vez melhor e integrar diversas outra funcionalidades como as tecnologias usadas em Progressive Web Apps.
Um outro ponto interessante que merece destaque são os números que o Akita colocou em seu post falando sobre a quantidade de elementos existentes no site customelements.io, um total de 327 e que eram elementos sem muita utilidade, atualmente temos mais de 2000 elementos com diversas funcionalidades interessantes para seus projetos web, e também o Component Kitchen deixou de ser um repositório de componentes, dessa forma temos uma única ferramenta para buscar componentes.
Falando em ferramentas utéis, temos disponível o Polymer Starter Kit que traz tudo que você precisa para começar seu projeto web com uma estrutura incrível já contendo um sistema de building, templates, services workers e muito mais.
Mas depois disso tudo você pode estar se perguntando: Se “Web Components” já faz parte do presente e temos diversos aplicativos em produção, como desenvolver usando essas tecnologias se os navegadores ainda não oferecem suporte?
Lembra do termo Polyfills? Voltamos então lá para 2013 onde conhecemos o Brick, uma biblioteca para Componentes Web da Mozilla que foi baseada na X-Tag. E essas ferramentas surgiram com o intuito de cobrir essas “deficiências” relacionadas às tecnologias que formam os Web Components, porém o Brick está abandonado com a última atualização no repositório no Github realizado em 1º de Outubro de 2014, já o X-tag, mantido pela Microsoft, teve sua última atualização no final de 2015 e analisando os commits no repositório acabou se tornando um projeto de 1 homem só.
Não vamos sair ainda de 2013, pois foi na edição do Google I/O daquele ano que tivemos a palestra Web Components in Action que introduziu o Projeto Polymer ao mundo e o interessante é que o primeiro commit no repositório do Polymer foi no dia 24 de Janeiro de 2013. Se você quiser entender um pouco mais de como o foi o surgimento do Polymer assista o vídeo “Hello Polymer”.
Yay! Nesse momento você deve possuir uma visão geral do que se trata esse tal de “Web Components” e com isso já deixo o convite para que você explore um pouco mais esse assunto, principalmente as 4 principais tecnologias envolvidas: Custom Elements, HTML Imports, Templates e Shadow DOM.
Agora me faz um favor, conta para gente nos comentários o que você acha dos “Web Components” e se você pretende utilizá-los em seus projetos. Conhece algum material bacana em pt-BR relacionado a essas tecnologias? Envia para gente que vamos organizar esses materiais para fazer uma lista bem bacana com conteúdo em Português 🇧🇷
Nos próximos posts entraremos em detalhes do que é o Polymer como ele funciona e o que você é capaz de fazer.
E se você ainda não ficou sabendo… Temos uma página no Google+ e também uma conta no Twitter @polymerbrazil Ajude-nos com seu feedback, dicas e assuntos para continuarmos melhorando no Polymer Brazil.
