Como o Polymer te ajuda no desenvolvimento de Web Components

Uma nova era em desenvolvimento web. Foi assim que muitos profissionais classificaram o Web Components, o padrão que promete solucionar problemas como o de componentização, além de transformar o desenvolvedor num verdadeiro “web maker”, permitindo criar seus próprios elementos HTML customizados, independentes e reutilizáveis.

O Web Components é composto por quatro novas especificações: Custom Elements, HTML Imports, Templates e Shadow DOM. O problema é que esses padrões ainda não são compatíveis com todos os browsers, com mais dificuldades no Internet Explorer e no Safari. Apesar disso, algumas empresas já atuam com essas novidades, como é o caso da Salesforce e do Github.

Mas como é possível utilizar os padrões de Web Components se ele ainda não é suportado por todos navegadores?

O segredo está no uso dos polyfills, que oferecem as facilidades ainda não implementadas no browser. E é nesse cenário que o Polymer mostra suas vantagens e qualidades.

Entendendo o Polymer

Mantido e criado pelo Google, o Polymer é uma biblioteca com diversos recursos para o desenvolvimento de Web Components. Composta por várias layers, a ferramenta permite a utilização de cada uma do jeito que o desenvolvedor desejar, facilitando e ampliando a criação de seus próprios componentes apenas com HTML.

• A camada Foundation consiste em um conjunto de polyfills, que permitem as normas de Web Components, para utilizar a ferramenta no cenário atual dos browsers.
• Já a camada de controle Core oferece uma rica e fácil interação do polyfill, permitindo construir “componentes encapsulados” e desenvolver super elementos customizados.
• A layer Elements oferece uma API para facilitar o desenvolvimento de novidades, além de conter os elementos já criados – que podem ser reutilizados e servir como exemplo de boas práticas na construção dos web components.
• A camada final, chamada de Applications, é a parte em que o desenvolvedor constrói os apps de web utilizando uma coleção de elementos da ferramenta.

O Polymer torna muito mais simples a tarefa de criar componentes da Web, deixando o processo mais declarativo e semântico, já que os elementos são definidos utilizando a tag <polymer-element>, permitindo aproveitar seus recursos especiais como trazer a tag <template> e os esquemas Two-way Data Biding, Animação Nativa e Isolamento Real do Elemento pelo Shadow DOM.

O Polymer mostra como é fácil criar aplicativos

Se você achou a ferramenta do Google interessante, que tal começar a criar e entrar nessa nova era do desenvolvimento web? Quem te ensina isso é o próprio Polymer.

Conforme dito na página oficial, você começa a utilizar os elementos em apenas 30 segundos, bastando encontrar um componente e importar sua definição em sua página por meio de um HTML Import. Em seguida, os custom elements tornam-se elementos HTML de primeira classe e podem ser usados como qualquer outro.

O próximo passo é criar os elementos “customizados” do Polymer, utilizando os padrões de Web Components, o que – ainda segundo o site – pode ser feito em 5 minutos. Em seguida, a página apresenta um tutorial bem descritivo e intuitivo, permitindo que você desenvolva o aplicativo para uma rede social em um tempo de 30 minutos.

Para completar, o site ainda destaca o projeto de design utilizado para a web, chamado de paper elements, que é totalmente ancorado nos conceitos de UI – interface do usuário. Além disso, você ainda é apresentado à ferramenta Designer que permite arrastar e soltar suas aplicações do Polymer e ainda salvar e compartilhar suas experiências como Github Gists.

Criações simples, bonitas e clean

O interessado pode ter uma ideia do que é possível fazer com algumas demos disponíveis no site do Polymer. Uma delas é um divertido aplicativo de quiz, chamado de Topeka, que foi todo construído com base no material de design paper elements.

Outra demonstração de aplicativo web é uma criação para apresentar o próprio material de design do Polymer, o paper-elements. Construído de forma bastante descritiva, o app te mostra, de forma simples, todos os detalhes do projeto.

O terceiro app é simplesmente uma calculadora, mas que, com design e interação incríveis, deixa os cálculos mais divertidos e bonitos.

Vendo como essas criações são bonitas, funcionais e simples, você também precisa testar a ferramenta. Veja mais informações o tutorial completo no site polymer-project.org.

Texto publicado originalmente na Revista iMasters.