Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Usando Polymer Para Criar Componentes Web

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

A construção de aplicações web modernas requer várias ferramentas. Entre elas temos os pré-processadores, as bibliotecas JavaScript, as ferramentas de testes e muito mais coisas. E, de acordo com que a complexidade dessas aplicações aumenta, também aumenta a amplitude de ferramentas e serviços necessários para administrá-las. Não seria ótimo se algumas delas fosse mais simples?

Os Componentes Web buscam melhorar algumas dessas complexidades, provendo uma maneira unificada para criar novos elementos capazes de prover funcionalidades ricas, sem a necessidade de bibliotecas extras. Os componentes são compostos de quatro especificações diferentes (Custom Elements, Templates, Shadow DOM e HTML imports) que estão sendo concretizados pela W3C.

Para suprir essa demanda e dar acesso aos desenvolvedores, hoje, esse tipo de funcionalidade, o Google criou a biblioteca Polymer que serve como um conjunto de códigos que implementa essas especificações mencionadas, trazendo a "promessa" dos Componentes Web para você. Aprendamos mais um pouco sobre ele.

O Que É Polymer

Como mencionei, a biblioteca Polymer é um conjunto de códigos que implementam as quatro especificações, e que ajuda a criar Componentes Web para todos os principais navegadores web modernos. Ele provê a base para definir, criar e renderizar elementos customizados, de forma simples, muito parecida com as tags HTML que você já está acostumado. O que quero dizer com isso é que ele ajuda a simplificar a forma como usamos componentes complexos, ao:

  • Encapsular grande parte da complexidade do código e estrutura;
  • Permitir que os desenvolvedores usem uma convenção de nomenclatura simples, como as tags;
  • Prover um conjunto pré-definido de elementos de interface do usuário, que podem ser usados e extendidos

Mas, uma coisa importante a se lembrar, é que o próprio Polymer tem sido desenvolvido com base na direção que as especificações tem tomado dentro da própria W3C, assim evoluirá junto do padrão oficial.

Essa biblioteca permite criarmos componentes reutilizáveis, funcionando como verdadeiros elementos DOM, e diminuir nossa dependência em relação ao JavaScript para manipulações complexas da DOM, na hora de renderizar resultados de interfaces de usuário ricas.

Eis um exemplo rápido, lá do site do Polymer. Digamos que quero renderizar um relógio funcional em meu site. Geralmente, levaria uma boa quantidade de código JavaScript, mas, com o Polymer, basta usar a seguinte sintaxe:

Parece com a sintaxe HTML que estamos acostumados a usar, além de ser bem mais fácil de implementar, ler e manter, que códigos JavaScript. O resultado final é parecido com isso: 

E, já que é mais um elemnto na DOM, podemos estilizá-lo, usando CSS, dessa forma:

Não é o melhor dos relógios, mas não essa a questão. O ponto é poder customizar o componente ao seu gosto e reutilizá-lo através de uma sintaxe mais fácil e manutenível.

Instalando o Polymer

Há três formas de instalar e usar o Polymer:

  • Usando o administrador de pacotes Bower (melhor forma)
  • Usando as bibliotecas hospedadas no cdnjs da Cloudfare
  • Instalando através do Git

Das três maneiras, a mais fácil e recomendada é usar o Bower porque, além da facilidade, o Bower também administra quaisquer dependências que o Polymer tiver/precisar. Isso significa que, se você escolher instalar algum elemento específico de interface do usuário que depende de algum outro elemento, o Bower lidará com isso por você.

O Bower é instalado como um módulo do Node (NPM), então, você precisará ter o Node.js instalado. Na linha de comando, digite o comando a seguir:

Isso baixará e instalará o Bower, globalmente, para você. Daqui, quaisquer instalações a partir do Bower seguirão o segunte padrão:

No mínimo, você precisará instalar a plataforma e a fundação dos componentes do Polymer, já que eles provem o que é necessário para você criar e executar seus elementos customizados.

Você também pode usar o seguinte comado para obter o mesmo resultado:

O Polymer vem com um conjunto pré-definido e rico de elementos que você pode utilizar imediatamente. São elementos de interface de usuário e alguns outros que provêm várias funcionalidades, como:

  • Animação
  • Acordeões
  • Layout de Grade (grids)
  • Funcionalidade AJAX
  • Menus
  • Abas

E isso é só a ponta do iceberg. Há muito mais ali, com código fonte disponível para servir para o aprendizado, bem como permitir customizar as capacidades às suas necessidades.

Você pode instalar todos os componentes ou somente aquilo que você quiser usar. Para instalar tudo, digite e execute:

Esse é a forma mais simples para você que está aprendendo o Polymer, que permite analisar o que etá disponível na biblioteca.

Quando estiver familiarizado, você pode escolher a dedo os componentes que você quer usar, e instalá-los com esse comando:

Essa é a beleza de usar o Bower. Cada componente vem com um arquivo de configuração, o bower.json, que define suas dependências. Assim, se você fosse instalar o componente accordion, olhando a configuração, podemos ver que ele depende do componente polymer base, bem como dos componentes selector e collapsible.

O ponto chave é você não se preocupar com isso, porque o Bower administra tudo por você. Por isso que o Bower é a ferramenta preferida para instalar o Polymer.

Instalá-lo através do Bower criará um diretório no seu projeto, chamado bower_components, que guardará todos os arquivos que o Polymer precisa.

Criando Novo Elementos do Polymer

O site do Polymer descreve muito bem o que é um elemento customizado:

“Elementos Customizados são a base das aplicações feitas com Polymer. Você criar aplicações ao juntar elementos customizados, seja os providos pelo Polymer, criados por você ou de elementos terceirizados.”

O Polymer nos permite criar nossos próprios elementos customizado, do zero, ou reutilizar outros elementos ao criar os nossos próprios. Fazemos isso, primeiro, criando um modelo do elemento customizado. Para todos os fins, esse modelo é uma combinação de HTML, CSS e JavaScript, e inclui a funcionalidade que disponibilizaremos quando usarmos o elemento. Ele é baseado na Especificação de Modelos (templates) HTML da WhatWG, que dará suporte nativo para modelos no lado do cliente.

Vejamos esse exemplo simples de um modelo para Polymer:

Esse elemento permite você adicionar, facilmente, texto Lorem Ipsum em seu código, simplesmente usando a seguinte tag:

A primeira coisa que precisamos fazer é incluir o código base do Polymer, que é a interface de programação (API) principal a permitir que definamos os Elementos Customizados:

O próximo passo é definir o nome do novo elemento, usando a diretriz polymer-element do Polymer:

Nesse caso, nomeei meu novo elemento de lorem-element. O nome é um atributo obrigatório e deve conter um hífen (“-”).

Daí, usamos a diretriz template para envolver o código principal que comporá nosso elemento. Para esse simples exemplo, pego o texto Lorem Ipsum e o envolvo com tags de parágrafo.

Só isso! Meu elemento customizado está pronto e já posso utilizá-lo.

Usando Seu Novo Elemento Polymer

Tenha em mente que esse componente será importado por outras páginas em seu aplicativo web que precisarem utilizá-lo. Isso é possível porque o Polymer implementa a especificação do HTML Imports, que permite incluir e reutilizar documentos HTML em outros documentos HTML.

Primeiro, você precisará incluir o arquivo platform.js que provê o código necessário para simular as APIs nativas:

Depois, precisaremos importar nosso elemento customizado em nossa página:

Uma vez feito isso, nosso novo elemento customizado estará disponível, permitindo que façamos isso:

Também teremos a capacidade de estilizar o elemento completamente:

Esse é um exemplo bem básico. Vamos um pouco além, agora.

Adicionando Mais Funcionalidades ao Elemento

Se você lembrar, mencionei como você pode fazer uso de elementos pré-existentes para aprimorar o seu próprio elemento. Vejamos como fazer isso.

Digamos que eu queira ter um elemento que vá ao Reddit e busque informações sobre alguns subreddits. Poço fazer uso do componente Ajax, já existente, do Polymer, incluindo-o em meu elemento, dessa forma:

Perceba que estou importando o componente Ajax do Polymer e colocando-o no meu modelo. Isso facilita a referência ao meu novo elemento, o que facilita as chamadas XHR para trazer os dados em formato JSON e usá-los para preencher minhas tags de parágrafo com a descrição pública do subreddit:

“Things that make you go AWW! Like puppies. And bunnies... and so on... A place for really cute pictures, videos and stories!”

A resposta foi retornada e o Polymer estabelece uma união de mão-dupla entre os dados e o modelo, que me permite usar os dados, envolvendo-os em chaves duplas, dessa forma {{resp.data.public_description}}.

Isso é legal, mas, na maioria das vezes, não fixaremos uma URL para um recurso específico. Nós aprimoraremos o nosso elemento, adicionando atributos a ele. Primeiro, precisamos atualizar a diretriz polymer-element para refletir os atributos que queremos em nosso elemento customizado:

Nesse caso, quero poder passar o nome de um subreddit para o elemento e obter as respectivas informações dele. Posso, agora, modificar a chamada ao polymer-ajax para algo assim:

Perceba como uso as capacidades de união dos dados do Polymer para criar, dinamicamente, a URL, baseada no valor do atributo {{subreddit}}. Agora, podemos atualizar a referência ao elemento customizado, passando o subreddit que queremos:

A última coisa que faremos é garantir um valor padrão para o atributo, para evitar que o código lance algum erro. Faço isso adicionando o trecho a seguir ao modelo do meu elemento:

Isso garante que sempre terei um valor padrão para o atributo público do meu elemento. Eis, aqui, mais ou menos como o código final deve ficar:

E há muito mais coisa que podemos fazer, como incluir manipuladores customizados de callbacks, manipulação de eventos, preparar Observadores de Mutação para processar as mudanças que ocorrerem no DOM e muito mais.

O Futuro Está Aqui

Os Componentes Web mudarão a forma como criamos aplicativos web e o Polymer tem nos permitido isso, hoje. Você, agora, é capaz de criar seus próprios elementos customizados e manuteníveis, próprios para as necessidades de suas aplicações. Esses componentes podem ser, facilmente, compartilhados, permitindo que outras equipes, ou mesmo a comunidade, compartilhem e se beneficiem desses blocos de funcionalidades encapsulados.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.