Mas como \u00e9 poss\u00edvel utilizar os padr\u00f5es de Web Components se ele ainda n\u00e3o \u00e9 suportado por todos navegadores?<\/strong><\/span><\/h2>\nO segredo est\u00e1 no uso dos polyfills, que oferecem as facilidades ainda n\u00e3o implementadas no browser. E \u00e9 nesse cen\u00e1rio que o Polymer mostra suas vantagens e qualidades.<\/p>\n
Entendendo o Polymer<\/span><\/strong><\/h2>\n![\"Entenda](\"https:\/\/imasters.com.br\/wp-content\/uploads\/2015\/04\/imagem-01-620x515.png\" "\\"Entenda")
<\/a><\/p>\nMantido e criado pelo Google, o Polymer \u00e9 uma biblioteca com diversos recursos para o desenvolvimento de Web Components. Composta por v\u00e1rias layers, a ferramenta permite a utiliza\u00e7\u00e3o de cada uma do jeito que o desenvolvedor desejar, facilitando e ampliando a cria\u00e7\u00e3o de seus pr\u00f3prios componentes apenas com HTML.<\/p>\n
\n- A camada Foundation<\/strong> consiste em um conjunto de polyfills, que permitem as normas de Web Components, para utilizar a ferramenta no cen\u00e1rio atual dos browsers.<\/li>\n
- J\u00e1 a camada de controle Core<\/strong> oferece uma rica e f\u00e1cil intera\u00e7\u00e3o do polyfill, permitindo construir \u201ccomponentes encapsulados\u201d e desenvolver super elementos customizados.<\/li>\n
- A layer Elements<\/strong> oferece uma API para facilitar o desenvolvimento de novidades, al\u00e9m de conter os elementos j\u00e1 criados \u2013 que podem ser reutilizados e servir como exemplo de boas pr\u00e1ticas na constru\u00e7\u00e3o dos web components.<\/li>\n
- A camada final, chamada de Applications<\/strong>,\u00a0\u00e9 a parte em que o desenvolvedor constr\u00f3i os apps de web utilizando uma cole\u00e7\u00e3o de elementos da ferramenta.<\/li>\n<\/ul>\n
O Polymer torna muito mais simples a tarefa de criar componentes da Web, deixando o processo mais declarativo e sem\u00e2ntico, j\u00e1 que os elementos s\u00e3o definidos utilizando a tag\u00a0<polymer-element>, permitindo aproveitar seus recursos especiais como trazer a tag\u00a0<template> e os esquemas Two-way Data Biding, Anima\u00e7\u00e3o Nativa e Isolamento Real do Elemento pelo Shadow DOM.<\/p>\n
O Polymer mostra como \u00e9 f\u00e1cil criar aplicativos<\/span><\/strong><\/h2>\nSe voc\u00ea achou a ferramenta do Google interessante, que tal come\u00e7ar a criar e entrar nessa nova era do desenvolvimento web? Quem te ensina isso \u00e9 o pr\u00f3prio Polymer.<\/p>\n
Conforme dito na p\u00e1gina oficial, voc\u00ea come\u00e7a a utilizar os elementos em apenas 30 segundos, bastando encontrar um componente e importar sua defini\u00e7\u00e3o em sua p\u00e1gina por meio de um HTML Import. Em seguida, os custom elements tornam-se elementos HTML de primeira classe e podem ser usados como qualquer outro.<\/p>\n
O pr\u00f3ximo passo \u00e9 criar os elementos \u201ccustomizados\u201d do Polymer, utilizando os padr\u00f5es de Web Components, o que \u2013 ainda segundo o site \u2013 pode ser feito em 5 minutos. Em seguida, a p\u00e1gina apresenta um tutorial bem descritivo e intuitivo, permitindo que voc\u00ea desenvolva o aplicativo para uma rede social em um tempo de 30 minutos.<\/p>\n
Para completar, o site ainda destaca o projeto de design utilizado para a web, chamado de paper elements, que \u00e9 totalmente ancorado nos conceitos de UI \u2013 interface do usu\u00e1rio. Al\u00e9m disso, voc\u00ea ainda \u00e9 apresentado \u00e0 ferramenta Designer que permite arrastar e soltar suas aplica\u00e7\u00f5es do Polymer e ainda salvar e compartilhar suas experi\u00eancias como Github Gists.<\/p>\n
Cria\u00e7\u00f5es simples, bonitas e clean<\/span><\/strong><\/h2>\nO interessado pode ter uma ideia do que \u00e9 poss\u00edvel fazer com algumas demos dispon\u00edveis no site do Polymer. Uma delas \u00e9 um divertido aplicativo de quiz, chamado de Topeka<\/a>, que foi todo constru\u00eddo com base no material de design paper elements.<\/p>\nOutra demonstra\u00e7\u00e3o de aplicativo web \u00e9 uma cria\u00e7\u00e3o para apresentar o pr\u00f3prio material de design do Polymer, o paper-elements. Constru\u00eddo de forma bastante descritiva, o app te mostra, de forma simples, todos os detalhes do projeto.<\/p>\n
O terceiro app \u00e9 simplesmente uma calculadora, mas que, com design e intera\u00e7\u00e3o incr\u00edveis, deixa os c\u00e1lculos mais divertidos e bonitos.<\/p>\n
Vendo como essas cria\u00e7\u00f5es s\u00e3o bonitas, funcionais e simples, voc\u00ea tamb\u00e9m precisa testar a ferramenta. Veja mais informa\u00e7\u00f5es o tutorial completo no site polymer-project.org.<\/a><\/p>\nTexto publicado originalmente na Revista iMasters<\/a>.<\/em><\/p>\n
Mantido e criado pelo Google, o Polymer \u00e9 uma biblioteca com diversos recursos para o desenvolvimento de Web Components. Composta por v\u00e1rias layers, a ferramenta permite a utiliza\u00e7\u00e3o de cada uma do jeito que o desenvolvedor desejar, facilitando e ampliando a cria\u00e7\u00e3o de seus pr\u00f3prios componentes apenas com HTML.<\/p>\n O Polymer torna muito mais simples a tarefa de criar componentes da Web, deixando o processo mais declarativo e sem\u00e2ntico, j\u00e1 que os elementos s\u00e3o definidos utilizando a tag\u00a0<polymer-element>, permitindo aproveitar seus recursos especiais como trazer a tag\u00a0<template> e os esquemas Two-way Data Biding, Anima\u00e7\u00e3o Nativa e Isolamento Real do Elemento pelo Shadow DOM.<\/p>\n Se voc\u00ea achou a ferramenta do Google interessante, que tal come\u00e7ar a criar e entrar nessa nova era do desenvolvimento web? Quem te ensina isso \u00e9 o pr\u00f3prio Polymer.<\/p>\n Conforme dito na p\u00e1gina oficial, voc\u00ea come\u00e7a a utilizar os elementos em apenas 30 segundos, bastando encontrar um componente e importar sua defini\u00e7\u00e3o em sua p\u00e1gina por meio de um HTML Import. Em seguida, os custom elements tornam-se elementos HTML de primeira classe e podem ser usados como qualquer outro.<\/p>\n O pr\u00f3ximo passo \u00e9 criar os elementos \u201ccustomizados\u201d do Polymer, utilizando os padr\u00f5es de Web Components, o que \u2013 ainda segundo o site \u2013 pode ser feito em 5 minutos. Em seguida, a p\u00e1gina apresenta um tutorial bem descritivo e intuitivo, permitindo que voc\u00ea desenvolva o aplicativo para uma rede social em um tempo de 30 minutos.<\/p>\n Para completar, o site ainda destaca o projeto de design utilizado para a web, chamado de paper elements, que \u00e9 totalmente ancorado nos conceitos de UI \u2013 interface do usu\u00e1rio. Al\u00e9m disso, voc\u00ea ainda \u00e9 apresentado \u00e0 ferramenta Designer que permite arrastar e soltar suas aplica\u00e7\u00f5es do Polymer e ainda salvar e compartilhar suas experi\u00eancias como Github Gists.<\/p>\n O interessado pode ter uma ideia do que \u00e9 poss\u00edvel fazer com algumas demos dispon\u00edveis no site do Polymer. Uma delas \u00e9 um divertido aplicativo de quiz, chamado de Topeka<\/a>, que foi todo constru\u00eddo com base no material de design paper elements.<\/p>\n Outra demonstra\u00e7\u00e3o de aplicativo web \u00e9 uma cria\u00e7\u00e3o para apresentar o pr\u00f3prio material de design do Polymer, o paper-elements. Constru\u00eddo de forma bastante descritiva, o app te mostra, de forma simples, todos os detalhes do projeto.<\/p>\n O terceiro app \u00e9 simplesmente uma calculadora, mas que, com design e intera\u00e7\u00e3o incr\u00edveis, deixa os c\u00e1lculos mais divertidos e bonitos.<\/p>\n Vendo como essas cria\u00e7\u00f5es s\u00e3o bonitas, funcionais e simples, voc\u00ea tamb\u00e9m precisa testar a ferramenta. Veja mais informa\u00e7\u00f5es o tutorial completo no site polymer-project.org.<\/a><\/p>\n Texto publicado originalmente na Revista iMasters<\/a>.<\/em><\/p>\n![\"Entenda](\"https:\/\/imasters.com.br\/wp-content\/uploads\/2015\/04\/imagem-01.png\" "\\"Entenda")
<\/a><\/p>\n\n
O Polymer mostra como \u00e9 f\u00e1cil criar aplicativos<\/span><\/strong><\/h2>\n
Cria\u00e7\u00f5es simples, bonitas e clean<\/span><\/strong><\/h2>\n