Vi alguns estudos recentes em sites estrangeiros sobre este Google Polymer, mas ainda não entendi onde ele deve ser utilizado, por exemplo em um aplicativo mobile.
Não encontrei blogs ou site brasileiros contendo informações sobre o Google Polymer.
Vi alguns estudos recentes em sites estrangeiros sobre este Google Polymer, mas ainda não entendi onde ele deve ser utilizado, por exemplo em um aplicativo mobile.
Não encontrei blogs ou site brasileiros contendo informações sobre o Google Polymer.
Polymer é uma biblioteca que facilita a criação de Web Components, que são elementos HTML customizados, independentes e reutilizáveis.
A ideia é que você consiga criar seus próprios componentes apenas com HTML, os mesmos tendo um comportamento único e focado.
Vejamos o elemento select
. Ele tem um único objetivo: selecionar um ou mais item(ns) de uma lista de opções. Podemos configurar seu comportamento com o atributo multiple, mas o objetivo principal continua o mesmo.
O mesmo deve acontecer com o elemento customizado google-map
, citado na resposta de @gtonioli
. Ele tem um único objetivo: mostrar um mapa do Google. Nele, podemos apontar de qual local queremos ver o mapa de acordo com os atributos lat e long.
Pode ser que ele mostre um pino em algum local passado pelo usuário, ou que ele mostre alguma rota de cidade a cidade, ou que ele aceite um atributo, chamado zoom, que mostra o mapa das coordenadas passadas de uma certa distância. Desde que o componente continue focado em mostrar um mapa do Google, essas funcionalidades são válidas.
Para fazer um web component, são utilizadas as seguintes tecnologias:
Permite que nós, desenvolvedores, criemos elementos além dos especificados no HTML, registrando-os antes do uso.
Permite a criação de elementos totalmente desacoplados do documento atual podendo, por exemplo, conter um ID que já existe no documento principal ou em outra Shadow DOM subtree. O CSS registrado nesses elementos não ultrapassa para o documento.
Permite a criação de templates, que podem ser levemente comparados com aqueles do Underscore.js e lodash, em que uma marcação HTML é criada para ser utilizada futuramente.
Digamos que é "um Require.js para HTML implementado pelo browser". São documentos HTML que são referenciados em outro documento como recurso externo.
Como essas tecnologias ainda estão em Working Draft, o Polymer contém vários polyfills que trazem parte dessas funcionalidades para os navegadores, ainda com algumas limitações, como os HTML Imports sendo feitos por XMLHTTPRequest.
A biblioteca facilita o desenvolvimento dos Web Components deixando a criação de elementos customizados menos trabalhosa, com two-way data binding para o controle do componente e os polyfills citados acima.
Para uma introdução mais abrangente ao Polymer, veja esses vídeos (ambos em inglês, com legendas em inglês).
O site do projeto tem um rápido tutorial para a criação de Web Components usando a biblioteca.
Complementando a resposta do @Danguilherme segue alguns detalhes importantes:
São muitos os benefícios do Polymer onde podemos destacar:
Permite implementar Linguagem Específica de Dominio - DSL usando Markup poderoso, intuitivo, significativo e expressivo.
Blocos de construção usando composição
Quando você lê o código você entende imediatamente diminuindo o custo de manutenção. O encapsulamento permite desenvolver componentes com função específica restringindo escopo e facilitando a manutenção.
O encapsulamento valoriza a reusabilidade e o suporte de ferramentas como o Bower permite o uso por qualquer desenvolvedor
Implementa forma padrão para estender elementos nativos e elementos personalizados como no exemplo:
Podemos implementar a herança no Polymer usando:
<polymer-element name="my-car" extends="my-vehicle">
Temos a opção de fazer override dos métodos dos elementos do Polymer e, caso seja necessário, podemos utilizar this.super() para chamar a função do elemento herdado.
Permite escopo diferenciado para CSS, DOM e APIs
A integração é feita em baixo nivel no DOM assim a interoperabilidade é completa. Não é necessário usar outras bibliotecas JavaScript tal como jQuery pois podemos usar diretamente querySelector, querySelectorAll, getElementById, etc já que o IE 9 e todos os outros browsers já suportam isso.
Implementada por padrão.
Fica óbvio quando usamos devido a estas vantagens citadas acima.
A testabilidade dos componentes é provida pelo WCT - Web Component Tester https://github.com/Polymer/web-component-tester
Mixins servem para adicionar comportamento de objetos em outros. É uma feature do JavaScript. O Polymer possui um método utilitário para dar suporte a esta feature no Framework.
Gramática:
Polymer.mixin(target, obj1 [, obj2, ..., objN ])
Exemplo:
var myMixin = {
sharedMethod: function() {
// ...
}
}
<polymer-element name="my-element">
<script>
Polymer(Polymer.mixin({
// my-element prototype
}, myMixin));
</script>
</polymer-element>
Os fontes hospedados no github podem ser acessados via Bower
bower install --save Polymer/core-elements
Diversos elementos para suporte a Layout elimina necessidade de uso do Bootstrap ou similar. Aliado a Layout Attributes
que funciona para elementos nativos tal como ou temos um conjunto completo de funcionalidades para gerenciamento dinâmico de Layout.
use para implementar Temas para a aplicação
Tags como podem ser usadas para definir transições entre conteúdo de forma declarativa
Ferramenta visual disponível funcionando como playground para desenvolvimento de diálogos e páginas da aplicação usando drag-and-drop.
Seria uma extensão para o HTML. Onde muitas funções seriam encapsuladas em tags HTML. Por exemplo adicionar um mapa com o Google Maps:
<!-- Import element -->
<link rel="import" href="google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>