Intro to Polymer

1. 1Just another brick in the wall?
Polymer

2. ¿Donde estamos?
Web components by W3C
Conjunto de standars, algunos en borrador.
Polymer es una implementación de web components by Google.

3. ¿Donde estamos?
Versión 0.5.4
Se estima 1.0 para mediados - finales de este año.
Se esperan cambios importantes en la 0.8.
“Sin grandes problemas” en navegadores

4. Todo es un elemento
Creciente complejidad de aplicaciones webs.
Los elementos actuales no cubren las necesidades.
Creación de elementos propios con los que componer aplicaciones web:
Funcionales, reusables, configurables, anidables, encapsulados…
entre otras cosas.
Enfoque declarativo.

5. Mi primer polymer
Polymer Time!

6. Creando
shine-on.html
Importacion Polymer
Definición del polymer
Template (Opcional)
Script (Opcional): Función
Polymer y definición del
prototipo.
<link rel="import" href=“polymer.html”>
<polymer-element name=“shine-on”
attributes=“adjetive name”>
</polymer-element>
<template>
Shine on you {{adjetive}} {{name}}
</template>
<script>
Polymer({
adjetive: “crazy”,
name: “diamond”
});
</script>

7. Reutilizando
demo.html
Imports
webcomponents.js (Polyfills)
Elementos a usar
Instanciacion
Instanciación con paso de
argumentos
<script src=“webcomponents.js”>
</script>
<link rel="import" href=“shine-on.html">
<shine-on>
</shine-on>
<shine-on
adjetive=“little”
name=“wing”>
</shine-on>

8. Extendiendo
shine-extended.html
Importaciones:
Polymer
Elemento a extender
Elemento que extiende
Template (Opcional)
Script
<link rel="import" href=“polymer.html">
<link rel="import" href=“shine-on.html">
<polymer-element
name=“shine-extended”
extends=“shine-on”
attributes=“author”>
</polymer-element>
<template>
<shadow></shadow>
by {{author}}
</template>
<script>
Polymer({
author: “Pink Floyd”
});
</script>

9. Reutilizando
extensión
demo-extended.html
Imports
webcomponents.js (Polyfills)
Elementos a usar
Instanciacion
Instanciación con paso de
argumentos
<script src=“webcomponents.js”>
</script>
<link rel="import" href=“shine-
extended.html">
<shine-extended>
</shine-extended>
<shine-extended
adjetive=“little”
name=“wing”
author=“Jimi Hendrix">
</shine-extended>

10. API del elemento

11. Atributos
Mecanismo de entrada/
salida
Se definen en
“attributes”
<polymer-element name=“element-name”
attributes=“attr1 attr2 attr3”>
…
</polymer-element>

12. Métodos
Llamadas desde dentro
Al dispararse eventos del
dom
Desde otros métodos
En callbacks de polymer
…
<polymer-element name=“my-element”>
<script>
Polymer({
sayHello: function(){
console.log(“Hey You!!”);
}
});
</script>
</polymer-element>

13. Métodos
Llamadas desde fuera
obteniendo el elemento:
Polymer way (dentro de un
polymer y mediante ID):
this.$.accessme.sayHello()
Cualquier otro modo
(QuerySelector… etc)
<my-polymer id=“accessme”>
</my-polymer>
<polymer-element name=“my-polymer”>
<script>
Polymer({
sayHello: function(){
console.log(“Hey You!!”);
}
});
</script>
</polymer-element>

14. Templates
Light DOM / Shadow DOM

15. Light DOM: Accesible y visible
<polymer-element name=“template-example”>
<template>
<content><!— Light DOM—></content>
I’m the dark side! <!— Shadow DOM —>
</template>
<script> Polymer({}); </script>
</polymer-element>
…
<template-example>
Hi!, I’m a light DOM fragment! <!— Light DOM —>
</template-example>
Shadow DOM: Encapsulado en subtrees del DOM no accesibles

16. CSS, así si!
La etiqueta template crea un
subtree de shadow DOM con
su contexto propio,
encapsulando los CSS
<polymer-element name=“my-element”>
<template>
<!— Styles on shadow DOM
are scoped on this context —>
<style>
div{ color: red; }
</style>
<content></content>
<div>RED</div>
</template>
<script>Polymer({});</script>
</polymer-element>

17. CSS, así si!
Los estilos externos no son
aplicados dentro del shadow
dom. En cambio los internos si,
sin colisionar con los externos.
Cada elemento tiene su propio
contexto css.
Se puee saltar esta barrera con
/deep/ y :shadow en el css.
HTML:
<styles>
div{ color: green; }
</styles>
<my-element>
<div> GREEN </div>
</my-element>
Render:
GREEN
RED

18. Binding y condicionales
Polymer permite asociar objetos JavaScript al contexto de un template.
Los objetos y expresiones usados dentro de los templates se escriben {{así}}
Los templates pueden anidarse
greatSongs=[ {title: “Losing my religion”, author: “REM”},
{title: “Wish you were here”, author: “Pink Floyd”},
{title: “Rey sombra”, author: “Los Planetas”} ];
Repeat
<template repeat=“{{song, index in greatSongs}}”>
{{song.title}},
</template>
Losing my religion, Wish
you were here, Rey
sombra,
If
<template repeat=“{{song in greatSongs}}”>
<template if=“{{ song.author == ‘REM’ }}”> {{song.title}} </template>
</template>
Losing my religion
Single
<template repeat=“{{song in greatSongs}}”>
<template bind=“{{song}}”> {{author}}, </template>
</template>
REM, Pink Floyd, Los
Planetas

19. Polymer con las
pilas puestas
Engines ON

20. Algunas facilidades y helpers
Mixins: permite reutilizar funcionalidad entre diferentes polymers agregando esta funcionalidad en los prototipos:
var mixinIt = { sayHello: function(){ console.log(“Hello guys!”) } } // Mixin
Polymer( // Inside a polymer element script
Polymer.mixin( { // Element prototype as usual }, mixinIt )
)
Imports: Permiten importar polymers dinamicamente:
Polymer.import(polymer-urls, callback);
Callbacks del ciclo de vida: Polymer, a lo largo de su ciclo de vida pasa por varios estados en los que podemos definir
callbacks.
Filters: Pueden ser llamados desde el DOM del polymer mediante un “|”:
…
{{value | getSquare}} <!— En el DOM —>
…
//En el script
etSquare: function(value){
return value*value;
}

21. Callbacks del ciclo de vida
Estado de creación:
created: cuando se crea el elemento. Conviene inicializar los objetos y arrays en este punto.
ready: El elemento está listo (no necesariamente el DOM que este encapsula).
domReady: El DOM está listo.
Estado de indexación al DOM:
attached: Se ha añadido el elemento al DOM general.
detached: El elemento se desvincula del DOM
Cambios en atributos:
attributeNameChanged: Cambios en un atributo (Algunas limitaciones al observar objetos
complejos a varios niveles)

22. Todo lo que ya
está hecho
Core elements
Paper elements

23. Core elements
Elementos con bastante funcionalidad y mas enfocados en acciones que requieren mas
programación. Ejemplos:
core-ajax: puede ser usado para realizar llamadas ajax, tratar la respuesta, etc de una
forma fácil y declarativa.
core-scaffold: Componente que agrega otros componentes a su vex (core-menu, core-
toolbar… ) y permite implementar un menú responsive, compatible con swipe en
móviles.
core-animations: para usar web animations.
core-list: Implementa un alista infinita virtual.

24. Paper elements
Los paper elements son polymers mas enfocados a la presentación,
elementos gráficos como botones, sliders…
paper-checkbox
paper-dialog
paper-spinner
paper-toggle

25. Algunos de estos elementos usan son extensiones y/o composiciones de
otros, usan mixins… lo que viene detallado en la documentación oficial:

26. ¿Pordonde
sigo?
blog.polymer-project.org polymer-project.org
@addyosmani @ebidel@rob_dodson

27. PREGUNTAS

28. luis.recio@medianet.es
@recluising
Thanks a lot!