An evening with ...

Polymer Intro
Arkho Innova Meetup Series
Gracias por su
asistencia!!!

Un espacio para compartir

experiencias y conocimiento
Un espacio para hacer
relaciones entre equipos con
intereses afines
Un espacio para pasarla bien
Qu es Polymer?
The Polymer library is designed
to make it easier and faster for
developers to create great,
reusable components for the
modern web.

Cuando hablamos de Polymer

tenemos que pensar en Web
Components, ya que Polymer de
por s es una librera para la
creacin fcil de Web
Components.
Qu son los Web
Components?

Los Web Components es el

estndar propuesto por el grupo
de trabajo de WebApps de W3C
y que an est en fase de
definicin.
Qu son los Web
Components?Lo que propone Web
Components es simple, crear
nuestros propios
componentes web, por
ejemplo nosotros tenemos
esto :
Qu son los Web
Components?
Componentes a los cuales se le
pueden agregar configuraciones
a manera de atributos para
poder dar mayor funcionalidad,
por ejemplo:
De que se componen los Web
Components?
TEMPLATES

Es la base de los
webcomponents puesto que
es dnde definimos su
comportamiento y lo
registramos como tal

<template id=>
<style> </style>
<span> </span>
</templates>

Ventajas:

- Reutilizar componentes.
Qu son los Web
Components? SHADOW DOM

Estructura del DOM que se

encuentra encapsulada dentro
de una etiqueta HTML, de forma
que como usuarios vemos la
etiqueta HTML, pero en su
interior hay un DOM oculto que
realmente es el contenido que
se visualiza.

Un ejemplo de Shadow DOM

sera lo que realmente contiene
la etiqueta video de HTML5

Ventajas

- Encapsulacin
Qu son los Web
Components?
HTML IMPORTS

Permite importar a nuestros

documentos HTML nuestras
plantillas.

<link rel="import"
href=import.html">

Ventajas

- Distribucin
Polymer

Podramos construir custom

elements usando directamente
las primitivas de Web
Components, pero sera mucho
ms costoso.
Un poco de Cdigo!
 Google starter kit

https://developers.google.com/web/tools/polymer-starter-kit/
Yeoman

Un robusto conjunto para el

lado del cliente compuesto por
herramientas y frameworks
que pueden ayudar a los
desarrolladores a crear
rpidamente bonitas
aplicaciones web

$npm install generator-

polymer -g
Yeoman
Un robusto conjunto para
el lado del cliente
compuesto por
herramientas y
frameworks que pueden
ayudar a los
desarrolladores a crear
rpidamente bonitas
aplicaciones web

$ yo polymer && gulp

serve
Yeoman
Un robusto conjunto para
el lado del cliente
compuesto por
herramientas y
frameworks que pueden
ayudar a los
desarrolladores a crear
rpidamente bonitas
aplicaciones web

npm install generator-

polymer -g
Ejemplo

npm install generator-

polymer -g
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplos de Usos
https://translate.google.com/community
Ejemplos de Usos
https://play.google.com/music/
An evening with ...
Polymer Intro
Arkho Innova Meetup Series