Google Polymer - Como isso mudará a maneira como os aplicativos da Web são criados

Juntamente com o Google Fotos, o Google também reconstruiu o Polymer a partir do zero, abordando a melhoria e a eficiência do desempenho. Pense no Polymer como um SDK (Software Development Kit) para a Web, que faz desenvolvimento de aplicativos da web muito mais rápido usando um novo padrão chamado Web Components.

Web Components nos permitem Crie elementos personalizados e tags para nossos sites. Neste post, veremos como os elementos personalizados no Google Polymer podem ajudar no desenvolvimento de aplicativos da web. Além disso, também veremos algumas demonstrações sobre como esses elementos personalizados podem ser usados.

Sobre os componentes da Web

A melhor maneira de entender como o Web Components funciona é observando os elementos padrão atuais como . Quando nós adicionamos juntamente com as fontes de URL do áudio, os navegadores da Web renderizarão esse elemento como um player de áudio com o botão de reprodução e pausa, o controle de tempo e o controle deslizante de volume. Você já se perguntou como os controles do player são construídos e estilizados??

O player de controle da interface do usuário está oculto abaixo como Shadow Roots, também conhecido como DOM da Sombra. Para ver o Shadow DOM, inicie o DevTools do Chrome > clique no Cog ícone> selecione o Mostrar DOM do agente do usuário sombra opção.

Na captura de tela a seguir, você pode encontrar uma pilha de

e elementos que constroem os controles do player da interface do usuário em segredo.

Hoje, com o Web Components, podemos nomear nossos próprios elementos também. Nós podemos construir um elemento como, para incorporar um feed do Twitter ou (talvez) inserir um gráfico.

Além disso, esses elementos personalizados também podem ter alguns atributos personalizados aceitos. Em relação ao elemento, você define um atributo chamado username que será usado para especificar o nome de usuário do Twitter.

Elementos personalizados no polímero

O Polymer vem com vários elementos que respondem por (quase) todas as necessidades de aplicativos da web. O Google divide esses elementos em grupos: Elementos de ferro, Elementos do papel, Componentes da Web do Google, Elementos de ouro, Elementos de néon, Elementos de platina e Moléculas.

1. Elementos de Ferro

Elementos de ferro é uma coleção de elementos básicos. Esses elementos básicos são o que normalmente usamos para construir uma página da web como uma entrada, forma e imagem. A diferença é que o polímero adiciona alguns poderes extras a esses elementos.

Todos os elementos deste grupo são ferro- prefixado, por exemplo , que é usado para exibir uma imagem. o elemento foi equipado com alguns atributos extras que não podemos aplicar no regular elemento. Podemos, por exemplo, adicionar pré-carga, desvaneça, e placeholder atributos:

O exemplo acima mostrará primeiro o espaço reservado para a imagem e depois desaparecerá na imagem real no src como está totalmente carregado, executando um efeito de carregamento de imagem suave.

2. Elementos do Papel

o Elementos de papel é um grupo de elementos do Material Design. O Material Design é uma linguagem de design do Google que faz com que a interface do usuário e a experiência nas plataformas do Google, tanto na Web quanto nos aplicativos Android, sejam visualmente mais consistentes. Alguns elementos exclusivos do Material Design são o Paper and Floating Action Button (FAB).

Papel

Papel é a metáfora do Google para o meio que sustenta o conteúdo. Para adicionar um papel com o Polymer, usamos o elemento. Este elemento leva 2 atributos:

elevação para levantar o papel, portanto, adicionando uma sombra para reforçar a elevação
animado irá aplicar animação como a mudança de elevação de papel.

Botão de ação flutuante (FAB)

O Botão de Ação Flutuante (FAB) é um botão circular com um ícone, flutuando na tela, geralmente com uma cor destacada. O Google sugere que esse botão tenha uma função acessada com frequência. Aqui está um exemplo:

O trecho de código a seguir adiciona um Material de papel com uma imagem e um FAB.

Nós teremos o seguinte resultado:

Nós temos uma foto com um “coração” botão flutuando em cima dele. Clique para Gostar da foto, e o botão emite um efeito cascata para reconhecer o clique.

Visualizar a demonstração em papel

3. Google Web Components

O Google Web Components é um elemento especial que lida com APIs e serviços do Google, como o Google Maps, o Youtube e o Google Feed, entre outros. Elementos neste grupo fazer interagir com os serviços do Google a apenas algumas linhas de distância.

A seguir, um exemplo para mostrar um mapa do Google usando o elemento.

  Este é o Googleplex

Como você pode acima, o elemento leva o latitude e longitude para especificar a localização no mapa. Nós também podemos aninhar para mostrar um marcador de mapa desse local junto com um texto que aparecerá ao clicar no marcador.

Visualizar a demonstração do mapa

Quer mostrar um vídeo do Youtube? você pode usar o elemento.

Da mesma forma, personalizamos a saída por meio de atributos.

Ver a demonstração do YouTube

4. Elementos de Ouro

Os elementos de ouro são o elementos projetados especificamente para aplicativos de comércio eletrônico. Aqui você encontrará elementos para mostrar cartão de crédito, e-mail, telefone e entrada ZIP, todos equipados com validação de formato para garantir a entrada correta de dados e segurança. Aqui está um exemplo para adicionar a entrada do cartão de crédito Visa.

5. Outros Elementos

Os elementos restantes incluem elementos Neon para animação e efeitos especiais, elementos Platinum para notificações off-line e push e, por último, Molecules, wrappers para bibliotecas de terceiros.

Nota do editor: No momento da redação deste artigo, os elementos de néon, elementos de platina e moléculas ainda não estão disponíveis.

Integrando Polímero

Quer usar o Polymer no seu desenvolvimento web? Veja como instalar e integrá-lo em suas páginas da web. Como a maioria dos elementos de polímeros dependem uns dos outros, a melhor maneira de instalar o polímero é através do Bower.

O Bower é um gerenciador de dependências do projeto que facilita a instalação de scripts ou estilos necessários para executar o projeto. Confira nosso post anterior sobre como instalar, atualizar e remover bibliotecas da Web facilmente com o Bower.

Para integrar o Polymer, inicie o Terminal e navegue até o diretório do seu projeto, supondo que você tenha criado um. Então corra inicialização do bower comando para iniciar o arquivo bower.json em seu projeto que será usado para registrar as dependências do projeto. Abra o bower.json e adicione as seguintes linhas.

 "dependencies": "polymer": "Polímero / polímero # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-componentes da web # ^ 1.0.0", "elementos de ferro": " PolymerElements / iron-elements # ^ 1.0.0 "," elementos de papel ":" Elementos Polímeros / elementos de papel # ^ 1.0.0 "," elementos de ouro ":" Elementos Polímeros / elementos de ouro # ^ 1.0.0 "

Essa configuração pressupõe que vamos usar todos os elementos de cada grupo. Você pode remover o que não precisa da lista de dependências. À medida que as dependências são definidas, execute o instalação do bower comando para instalar as dependências na lista.

Esse processo pode demorar um pouco, pois envolve a captura de uma enorme quantidade de arquivos dos repositórios. Uma vez feito, você deve encontrá-los salvos no bower_components pasta.

Abra o arquivo HTML no qual você deseja usar os componentes Polymer. Dentro do cabeçalho do documento, link o WebComponents.js qual é o polyfill para navegadores que não suportam WebComponents ainda, e importar os arquivos de componentes usando o HTML Import.

Aqui está um exemplo:

Esta configuração nos permitirá usar o , , elementos.

Vitrinas

Aqui estão alguns dos aplicativos da web que já estão usando o Google Polymer.

Google

O Google usou o Google Polymer na página da web do Google IO 2015; Google Fi, o serviço sem fio do Google para operadoras e fornecedores em parceria; e Google Music.

Elementos personalizados

CustomElements é um hub no qual você pode encontrar elementos personalizados criados com Web Components. Faz uso do elemento Paper para conter e construir a lista. Ele também fornece uma rota conveniente para instalar esses elementos através do Bower e NPM.

Editor do Chrome Dev

Um aplicativo do Chrome para edição de código que funciona surpreendentemente bem. Este aplicativo usa o botão FAB, menu Papel e elementos de diálogo de papel na interface do usuário.

Designer de polímeros

Uma ferramenta para construir aplicativos da Web com elementos Polymer usando uma interface de arrastar e soltar.

Previsão diária de estoque

Um relatório e previsão da bolsa de valores construído inteiramente com elementos de polímero.

Correio de polímero

Um aplicativo cliente de e-mail para o Gmail. Parece bom e fluido, embora, infelizmente, não esteja funcionando completamente.

Pensamentos finais

O polímero tem um escopo enorme e pode levar algum tempo para você se acostumar com todos os elementos personalizados, bem como com sua API. No entanto, o Web Components e o Polymer certamente influenciarão a maneira como criamos aplicativos da web. Fique à frente da multidão lendo mais sobre os Componentes da Web - as referências são encontradas abaixo.

Ver demonstração
Fonte de download

Referências Úteis

O estado dos componentes da Web
Uma introdução detalhada aos elementos personalizados
Blog oficial do Google Polymer