Embed Size (px)
Citation preview
1Just another brick in the wall?
Polymer
¿Donde estamos?
Web components by W3C
Conjunto de standars, algunos en borrador.
Polymer es una implementación de web components by Google.
¿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
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.
Mi primer polymerPolymer Time!
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>
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>
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>
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>
API del elemento
Atributos
Mecanismo de entrada/salida
Se definen en “attributes”
<polymer-element name=“element-name”attributes=“attr1 attr2 attr3”>
…
</polymer-element>
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>
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>
TemplatesLight DOM / Shadow DOM
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
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>
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
Binding y condicionalesPolymer permite asociar objetos JavaScript al contexto de un template.
Los objetos y expresiones usados dentro de los templates se escriben {{así}}
Los templates pueden anidarsegreatSongs=[ {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
Polymer con las pilas puestasEngines ON
Algunas facilidades y helpersMixins: permite reutilizar funcionalidad entre diferentes polymers agregando esta funcionalidad en los prototipos:var mixinIt = { sayHello: function(){ console.log(“Hello guys!”) } } // MixinPolymer( // 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 scriptetSquare: function(value){ return value*value; }
Callbacks del ciclo de vidaEstado 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)
Todo lo que ya está hechoCore elements Paper elements
Core elementsElementos 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.
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
Algunos de estos elementos usan son extensiones y/o composiciones de otros, usan mixins… lo que viene detallado en la documentación oficial:
¿Por donde sigo?blog.polymer-project.org polymer-project.org
@addyosmani @ebidel@rob_dodson
PREGUNTAS
