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

Compartilhando Componentes do Polymer: Parte 1

by
Difficulty:BeginnerLength:MediumLanguages:

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

Em meu último artigo sobre a biblioteca Polymer, expliquei como aproveitar essa ótima ferramenta para criar componentes web reutilizáveis. O ponto central do tutorial, bem como do uso de componentes, é ajudar nosso desenvolvimento através:

  • Do encapsulamento da complexidade dos código e estrutura
  • Da possibilidade dos desenvolvedores usarem convenções de nomeação simples como as tags
  • Do fornecimento de elementos de Interface de Usuário (UI) para se usar e estender

Estou bastante interessado por ela e quis explorar um pouco mais, verificando o novo modelo que a equipe do Polymer lançou para facilitar o desenvolvimento e reutilização de componentes, substancialmente.

O Caminho Canônico

Uma das peculiaridades do processo de desenvolvimento do Polymer, que eu ainda não trabalhei, foi o do rompimento entre o desenvolvimento do componente e a capacidade de toná-lo disponível para reuso por outros. Vejamos um pequeno trecho do meu tutorial anterior:

O propósito desse trecho de código é o de incluir o código base do Polymer, a API principal que permitirá você definir elementos customizáveis. Para desenvolvimento local e de testes, isso funciona perfeitamente, mas, infelizmente, o caminho especificado prevenirá você de compartilhar esse componente. A razão disso é que, se outra pessoa tentar instalar seu componente usando o Bower (que é o meio preferido de instalação), ele acabará como irmão do Polymer, dentro do diretório bower_components.

O problema disso é que o componente procurará por ../bower_components/polymer/polymer.html, que será um caminho inválido. Os componente sempre assumem que suas dependências são irmãs, então, ele deveria procurar, na verdade, por ../polymer/polymer.html. Esse é o "caminho canônino".

Conversando com o super Rob Dodson da equipe do Polymer, ele disse que a única maneira de contornar isso, seria desenvolver da maneira que mostrei primeiro e, quando estivesse pronto para compartilhar o componente, converter todos os caminhos de bower_components para ../.

Isso, obviamente, não é ideal e, provavelmente, poderia ter criado alguma tarefa no Grunt para analisar meus componentes e fazer essas atualizações. Felizmente, a equipe do Polymer esteve ocupada nesse problema e apresentou uma solução criativa que eles chamam de untitled-element.

O Modelo untitled-element

Quando falo do untitled-element, refiro-me a um novo modelo base que está disponível para criarmos, de forma substancialmente mais fácil, componentes reusáveis e implementáveis, tendo uma base sólida que possamos trabalhar. Esse modelo ajuda a eliminar os problemas mencionados acima, ao:

  • Prover um estrutura adequada de diretórios;
  • Incorporar um componente adicional que serve para documentar sua API;
  • Permitir que demonstre, facilmente, seu componente enquanto desenvolve e quando compartilha

A grande vantagem disso é que somos capazes de desenvolver um componente sem ter que passar pelo problema de alterar os caminhos nos arquivo que, além de ser bem chato, pode fazer seu componente deixar de funcionar se esquecer algo.

Atualmente, o projeto faz parte do PolymerLabs, enquanto é posto à prova em testes, mas, certamente, já é bem promissor:

Agora, a primeira coisa que você fará, é criar um diretório de desenvolvimento que guardará seu novo componente, bem como todos os componentes do Bower que você instalará. Nomeei o meu de polymerdev. Daqui, você precisará ir até o repositório no GitHub do untitled-element e baixá-lo em seu próprio diretório de desenvolvimento. Essa passo é bastante importante porque você precisa extrair o conteúdo dentro daquele diretório para evitar os problemas de diretórios irmão, como mencionado mais cedo.

Extrair o arquivo .zip criará um novo diretório chamado untitled-element-master que contem os arquivos base para você criar seu novo componente. Você precisará renomear algumas coisas, com base no nome do seu componente. Isso inclui:

  • O diretório untitled-element-master
  • untitled-element.html
  • untitled-element.css

Recriarei o elemento Reddit que criei em meu último tutorial, assim, essas serão as mudanças que faremos nos locais especificados acima:

  • untitled-element-master -> reddit-element
  • untitled-element.html -> reddit-element.html
  • untitled-element.css -> reddit-element.css

É assim que a estrutura de diretórios era antes:

E é assim que ela está, após as atualizações:

A chave para entender é que você trabalhará dentro do diretório reddit-element ao criar seu componente e, futuramente, ao usar o Bower para instalar os componentes do Polymer, esse diretório será um irmão direto aos diretórios recém instalados. Sei que estou insistindo nisso, mas é importante entedê-lo, uma vez que afeta toda a capacidade de compartilhar seu componente.

Para finalizar, você quererá atualizar as referências em relação ao nome do seu componente, dentro dos seguintes arquivos:

  • bower.json
  • demo.html
  • reddit-element.html

Cada um desses elementos faz referências ao untitled-element dentro de seus códigos e precisam ser atualizados. Lembre-se que todas e quaisquer referências a untitled-element devem ser substituídas por reddit-element. Se quiser certificar-se totalmente, faça uma busca e substituição global, usando seu editor de preferência.

Preparando o Bower

Uma vez que o Bower é o método preferido para instalar e compartilhar componentes do Polymer, é interessante garantirmos que a configuração do Bower para nosso componente Reddit esteja correta.

Por padrão, o código base inclui um arquivo bower.json. Esse arquivo é usado para listar diversas coisas, incluindo o nome do componente e quaisquer dependências que precisam ser instaladas para usá-lo. Eis como ele parece:

Primeiro, removerei a propriedade private, uma vez que ela prevenirá que o componente seja listado na Listagem do Bower. Uma vez que ele deve ser compartilhável, queremos que ele seja listado. O componente Reddit também precisa realizar chamadas Ajax, então, adicionarei uma dependência relacionada ao Polymer, e ao core-elements, um conjunto de componentes que inclui uma funcionalidade Ajax que precisaremos. Finalmente, adicionarei o número de versão do componente, para acompanhá-lo. E o arquivo ficará assim:

A última parte da configuração do Bower que precisa ser feita, é criar um arquivo chamado .bowerrc no diretório reddit-element, que define um local customizado de instalação para as dependências de nosso componente. Ele é definido como um arquivo JSON de dados, como esse:

O que ele faz é dizer ao Bower para instalar quaisquer dependências um level acima, tornando-as irmãs do diretório reddit-element. Fazer isso é importante porque, quando alguém instalar nosso componente com o Bower, ele será colocado dentro do diretório bower_components como irmão de tudo que está lá dentro (includindo o Polymer). Estruturando as coisas dessa forma, garante que estamos desenvolvendo da mesma forma que iremos compartilhar. Isso também permite que usemos o caminho canônico, mencionado anteriormente, garantindo uma forma consistente de referência outros componentes em nosso código.

Revisemos as diferenças. Se não tivesse criado o arquivo .bowerrc e tivesse executado o comando bower install, minha estrutura de diretório estaria assim:

Ela instalaria o diretório bower_components diretamente dentro do diretório dos componentes, o que não é o que quero. Quero que o diretório reddit-element seja irmão de todas as ddependências que ele precisa:

Esse método garante que, quando um usuário instalar esse componente usando o Bower, o componente e suas dependências serão instaladas, apropriadamente, dentro do diretório bower_components.

Com o arquivo .bowerrc adicionado ao diretório de nosso componente e o arquivo bower.json preparado com as dependências apropriadas, o próximo passo é executar o comando bower install, para fazer com que o Bower baixe os componentes apropriados, adicionando-os ao projeto.

No Próximo Tutorial

Nesse tutorial, quis garantir uma base sólida sobre como usar o novo modelo base de componente do Polymer e um pouco da teoria em relação às escolhas que a equipe do Polymer tomou.

Na próxima parte da série, trateri sobre o novo componente de documentação que vem incluso com o modelo base de componente, e como ele tornará o compartilhamento de seu componente muito mais fácil. Também mostrarei como preparar seu componente para ser compartilhado pela Listagem do Bower.

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

Advertisement
Advertisement
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.