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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- A mágica começa aqui --> <script src="bower_components/platform/platform.js"/> </head> <body> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/platform/platform.js"/> <!-- Este está aqui só para você visualizar melhor, na prática você vai importar umas outras coisinhas no seu arquivo do componente --> <script src="bower_components/polymer/polymer.js"></script> </head> <body> <polymer-element name="meu-elemento"> <!-- este é o seu elemento --> <template> Meu elemento <!-- dentro desta tag template vai o conteúdo --> </template> <script> Polymer('meu-elemento', { }); </script> </polymer-element> <!-- Assim que faço para referenciar o meu novo elemento --> <meu-elemento></meu-elemento> </body> </html> |
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>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- A propriedade "attributes" serve para definir um "contrato" para o nosso elemento --> <polymer-element name="x-download" attributes="endereco texto nomeArquivo"> <template> <a href="{{endereco}}" download="{{nomeArquivo}}">{{texto}}</a> </template> <script> Polymer('x-download', { nomeArquivo:'arquivo.txt', //estes são valores default para os atributos texto: 'download' }); </script> </polymer-element> <x-download endereco="data:text/plain,teste" texto="arquivo" nomeArquivo="teste.txt"> </x-download> <!-- Perceba o uso do contrato para definir os atributos no nosso elemento --> |
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í ;).