Apresentando o Polymer, a biblioteca do Google para desenvolvimento utilizando Web Components

Juarez Filho
Polymer Brazil
Published in
5 min readApr 15, 2016

Continuando nossa aventura no mundo dos Componentes Web vamos falar sobre Polymer. Se você ainda não sabe o que são Componentes Web dê uma lida em nosso post anterior, dessa forma você terá uma visão geral das tecnologias e entenderá melhor os assuntos que iremos discutir daqui para frente.

Pronto?! Então senta que lá vem história 📺

A essa altura do campeonato, se você vem acompanhando os posts do Polymer Brazil, sabe que eu gosto de história e principalmente de reutilizar artigos para mostrar também a opinião de outros profissionais sobre determinado assunto. A primeira aparição pública do Polymer foi em 2012 e uma curiosidade bem interessante é que o Polymer se chamava toolkitchen. Aliás que mudança de nome estratégica hein? 😊

Então vamos lá que precisamos responder a pergunta: “O que é o Polymer?

O 1º post sobre Polymer que encontrei em pt-BR foi o artigo do Rey Bango “Usando Polymer Para Criar Componentes Web” traduzido pelo Erick Patrick. E também sabemos que o Zeno Rocha já falava sobre Web Components e Polymer desde 2013, com sua palestra no BrazilJS em 2013 fez com que desenvolvedores do Brasil inteiro pudessem conhecer mais sobre tópicos relacionados. No entanto, material escrito eu realmente não achei nada antes de 2014, se você achar alguma referência manda mensagem para gente que atualizamos super rápido por aqui. ✌

Voltando ao post do Rey Bango, você ainda não leu? Okay. Espero um pouco, mas não se atente tanto ao código, pois o que é demonstrado por lá já está desatualizado. Com o Polymer 1.0 tivemos diversas mudanças e por isso aquele código não vai funcionar, mas não se preocupe em breve traremos muita coisa nova por aqui para você ficar atualizado e dar asas a sua imaginação construindo incríveis projetos com Polymer.

Continuando a navegar nas interwebs encontrei algumas respostas no Stack Overflow para a pergunta: “O que é o Google Polymer?”:

Polymer é uma biblioteca que facilita a criação de Web Components, que são elementos HTML customizados, independentes e reutilizáveis. A ideia é que você consiga criar seus próprios componentes apenas com HTML, os mesmos tendo um comportamento único e focado. — Guilherme Ventura

E o João Paraná ainda complementou a resposta no Stack Overflow adicionando vários benefícios do Polymer, a citar: Programação Declarativa, Composição à partir de Componentes menores, Manutenibilidade, Reusabilidade Real na Web, Extensibilidade, Separação de Escopo, Interoperabilidade, Acessibilidade, Testabilidade, Mixins, Fontes no Github, Layout Containers, Suporte a Temas, Suporte a Transições e Ferramenta de Design. A lista é bem extensa, para ter os detalhes completos de cada item mencionado anteriormente basta continuar a leitura no link do Stack Overflow já citado.

Desenvolvedores estão super acostumados com o famoso “Hello World”, certo? Aqui no canal, inclusive, começamos com o post “Olá, Polymer Brasil!” e provavelmente o artigo mais famoso sobre Polymer em pt-BR é do nosso querido Beto Muniz com o post: “Desmistificando o Polymer: Olá Polymer!” que na verdade se transformou em uma série contendo 3 blog posts explicando com maiores detalhes o que você pode esperar do Polymer.

O Polymer basicamente é uma biblioteca desenvolvida e mantida pelo Google que entrega inúmeros recursos de forma bem pragmática e rica para o desenvolvimento de Web Components em browsers atuais. — Beto Muniz

Então lembre-se, o Polymer não é um framework, ele é uma biblioteca (ou “library”), portanto se você de repente se ver no meio de uma discussão relacionada à esse assunto você sabe qual o posicionamento correto a seguir. Quer saber um pouco mais sobre esses termos? Dá um pulo no Stack Overflow depois e leia a discussão sobre: Qual é a diferença de API, biblioteca e Framework.

Nesse momento você já teve ter informações suficientes para responder a nossa pergunta, certo? Mas vamos a resposta oficial diretamente do site do Polymer:

Polymer é uma biblioteca que utiliza as mais recentes tecnologias web permitindo que você crie elementos HTML customizados. Construindo qualquer coisa, desde um botão até uma aplicação completa como um elemento encapsulado e reutilizável que funciona tanto em computadores quanto dispositivos móveis. — Polymer team

Agora sim estou bem satisfeito com as informações que você possui para responder a pergunta: “O que é o Polymer?”, mas ainda gostaria de deixar algumas outras possibilidades para que você possa explorar:

Nesse momento você pode estar pensando… 💭 Muito bacana, super legal essa história do Polymer facilitar o desenvolvimento web utilizando como base os componentes web, mas eu quero realmente saber se posso usá-lo em produção. Fazer push direto para o master e utilizar toda essa facilidade proposta por esse tal de Polymer. E aí… Dá para usar em produção?

Várias empresas têm usado o poder dos Componentes Web e do Polymer para dar vida aos seus produtos, temos ótimos exemplos como o Google Music e o Youtube Gaming. O fato é que desde o lançamento da versão 1.0 dessa poderosa biblioteca, o Polymer está pronto para produção, e esse lançamento foi feito no Google I/O 2015 e é notável as diversas melhorias já incluídas nas versões posteriores, chegando até a versão 1.4 no momento da publicação desse post.

Nos próximos posts iremos explorar as características e funcionalidades do Polymer, trazer diversos experimentos que auxiliarão em uma melhor compreensão de como usar seus elementos, iniciar projetos com o Polymer Starter Kit, fazer integração com diversas APIs de produtos do Google, entender como estilizar seus elementos, tirar proveito do sistema de behaviors, melhores práticas e muito mais.

Lembrando que nosso principal objetivo é trazer conteúdo que possa servir de referência para a utilização das funcionalidades da versão 1.* do Polymer, pois como você pode notar nas referências que deixamos aqui a maioria dos exemplos ainda utiliza a versão antiga.

Para finalizar, que tal deixar seu comentário com sua opinião sobre o Polymer e também enviar seu feedback ou links em pt-BR sobre assuntos relacionados? Junte-se a nós e contribua na construção de uma web componentizada 🙌

--

--

Juarez Filho
Polymer Brazil

A traveler who loves to tell his adventures with Web Technologies and UX