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 comp...
¿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.
...
Todo es un elemento
Creciente complejidad de aplicaciones webs.
Los elementos actuales no cubren las necesidades.
Creación...
Mi primer polymer
Polymer Time!
Creando
shine-on.html
Importacion Polymer
Definición del polymer
Template (Opcional)
Script (Opcional): Función
Polymer y d...
Reutilizando
demo.html
Imports
webcomponents.js (Polyfills)
Elementos a usar
Instanciacion
Instanciación con paso de
argume...
Extendiendo
shine-extended.html
Importaciones:
Polymer
Elemento a extender
Elemento que extiende
Template (Opcional)
Scrip...
Reutilizando
extensión
demo-extended.html
Imports
webcomponents.js (Polyfills)
Elementos a usar
Instanciacion
Instanciación...
API del elemento
Atributos
Mecanismo de entrada/
salida
Se definen en 

“attributes”
<polymer-element name=“element-name”

attributes=“attr1...
Métodos
Llamadas desde dentro
Al dispararse eventos del
dom
Desde otros métodos
En callbacks de polymer
…
<polymer-element...
Métodos
Llamadas desde fuera
obteniendo el elemento:
Polymer way (dentro de un
polymer y mediante ID):



this.$.accessme....
Templates
Light DOM / Shadow DOM
Light DOM: Accesible y visible
<polymer-element name=“template-example”>
<template>
<content><!— Light DOM—></content>
I’m...
CSS, así si!
La etiqueta template crea un
subtree de shadow DOM con
su contexto propio,
encapsulando los CSS
<polymer-elem...
CSS, así si!
Los estilos externos no son
aplicados dentro del shadow
dom. En cambio los internos si,
sin colisionar con lo...
Binding y condicionales
Polymer permite asociar objetos JavaScript al contexto de un template.
Los objetos y expresiones u...
Polymer con las
pilas puestas
Engines ON
Algunas facilidades y helpers
Mixins: permite reutilizar funcionalidad entre diferentes polymers agregando esta funcionali...
Callbacks del ciclo de vida
Estado de creación:
created: cuando se crea el elemento. Conviene inicializar los objetos y ar...
Todo lo que ya
está hecho
Core elements
Paper elements
Core elements
Elementos con bastante funcionalidad y mas enfocados en acciones que requieren mas
programación. Ejemplos:
c...
Paper elements
Los paper elements son polymers mas enfocados a la presentación,
elementos gráficos como botones, sliders…
p...
Algunos de estos elementos usan son extensiones y/o composiciones de
otros, usan mixins… lo que viene detallado en la docu...
¿Pordonde
sigo?
blog.polymer-project.org polymer-project.org
@addyosmani @ebidel@rob_dodson
PREGUNTAS
luis.recio@medianet.es
@recluising
Thanks a lot!
Próxima SlideShare
Cargando en…5
×

Kit polymer en Medianet Software

583 visualizaciones

Publicado el

Intro to Polymer

Publicado en: Software
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
583
En SlideShare
0
De insertados
0
Número de insertados
12
Acciones
Compartido
0
Descargas
13
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Kit polymer en Medianet Software

  1. 1. 1Just another brick in the wall? Polymer
  2. 2. ¿Donde estamos? Web components by W3C Conjunto de standars, algunos en borrador. Polymer es una implementación de web components by Google.
  3. 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. 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. 5. Mi primer polymer Polymer Time!
  6. 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. 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. 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. 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. 10. API del elemento
  11. 11. Atributos Mecanismo de entrada/ salida Se definen en 
 “attributes” <polymer-element name=“element-name” attributes=“attr1 attr2 attr3”> … </polymer-element>
  12. 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. 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. 14. Templates Light DOM / Shadow DOM
  15. 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. 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. 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. 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. 19. Polymer con las pilas puestas Engines ON
  20. 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. 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. 22. Todo lo que ya está hecho Core elements Paper elements
  23. 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. 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. 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. 26. ¿Pordonde sigo? blog.polymer-project.org polymer-project.org @addyosmani @ebidel@rob_dodson
  27. 27. PREGUNTAS
  28. 28. luis.recio@medianet.es @recluising Thanks a lot!

×