Web Components e Polymer

HTML, Javascript Leave a reply

Olá, tudo bom?

Faz tempo que não escrevo sobre tecnologia, então, hoje vou falar uma tecnologia que estou in love: WebComponents.

Basicamente, a ideia é você levar a reutilização ao máximo e gerar pedacinhos de código HTML, CSS e JS, para usar mais tarde. (Como o feijão que você põe em potinhos no domingo e congela para comer a semana toda, só que mantém o sabor…).

Bom, eu utilizo o Polymer para brincar com isto. Por fins produtivos, instalo meus pacotes com Bower (Falo uma outra hora dele e você pode aprender um pouco mais no próprio site). Então, vamos para o prompt (ou terminal no linux ou mac):

d:/desenvolvimento/webcomponents/teste> bower init

d:/desenvolvimento/webcomponents/teste> bower install polymer

OK! Ele vai instalar um monte de coisinhas na pasta bower_components, e é de lá que vamos importar nossa plataforma do Polymer. Para tanto, crie um arquivo HTML e referencie o script:

Pronto, daqui para frente, podemos usar nossos componentes. Claro, para fazer coisas simples, é fácil, agora, se você quiser fazer coisas macabras e monstruosas, aconselho que estude bastante o conceito de web-components.

Vamos criar um componentezinho? Que tal um botão que faz download? Não vou seguir nenhum padrão ou boa prática específico, mas existem milhares de manuais de design, estilo e etc, vamos apenas visualizar.

Bom, este é o seu elemento. Por enquanto ele não faz nada e, o name, por convenção, deve ser um nome composto e separado por travessão “-“. É por ele que você vai referenciar seu elemento Então, pense nele com carinho.

Bom, agora, como prometi, faremos um elemento simples para download. Utilizei data uri para baixarmos um arquivo de texto e encapsulei o elemento <a>.

Assim, temos um elemento que serve para fazer download. Claro, ele é simplório, serve no máximo para melhorar a semântica, mas pense em coisas grandes: um elemento para o google-maps ou uma caixa para figuras estilizada . Vamos ver como ele está funcionando?

O foco é pensar na reutilização. Existem bibliotecas para baixar elementos prontos, como a customelements.io e o github está cheio de coisas bacanas. Se você pensar que, muita coisa que fazemos no dia-a-dia poderia ser utilizada pelos outros e até por nós mesmos em nossos projetos futuros, isto pode facilitar muito a vida.

Finalmente, é isso aí. A internet já está cheia de componentes: select, input:checkbox. Todos eles são nativos dos navegadores e EXTREMAMENTE ÚTEIS. Por que não ajudar a melhorar ainda mais a vida de todos?

Até mais,

Ps. Tudo isso tem interoperabilidade com Angular.js e as outras brincadeiras que andam por aí ;).

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *