Save 37% off PRO during our Black Friday Sale! »

Introducción a Polymer

Introducción a Polymer

Diapositivas utilizadas en la formación de introducción a Polymer 1.0

5c086974327e7f3da17333e836f1a9ba?s=128

fzberlinches

June 03, 2015
Tweet

Transcript

  1. Introducción a Polymer @felixzapata

  2. Qué hago Desarrollador senior front end y consultor de accesibilidad

    web en . Organizador del grupo meetup . Coorganizador del grupo meetup . Coorganizador del grupo meetup . Aerotranstornado: piloto online P1 y controlador S3 en la red . Adesis Netlife WordPress Madrid Accesibilidad Spain AngularJS Madrid VATSIM
  3. Primero de todo, ¿qué son los web components?

  4. < s u p e r - b u t

    t o n > < / s u p e r - b u t t o n > v a r s = d o c u m e n t . c r e a t e E l e m e n t ( ' s u p e r - b u t t o n ' ) ; s . i n n e r H T M L = " I ' m s u p e r ! " ; Custom elements Permiten escribir nuestros propios elementos con sus propios nombres.
  5. Shadow DOM ¿Habéis pensado alguna vez dónde están los elementos

    que componen un control slider?.
  6. < l i n k r e l = "

    i m p o r t " h r e f = " m y - c u s t o m - e l e m e n t . h t m l " > HTML imports
  7. Bueno, ¿y Polymer qué? Bindings, layouts, components, cross browser...

  8. Pues resulta que hace unos días... Production Ready

  9. Filosofía Polymer Pensad que un <select> es: Funcional. Reusable. Interoperable.

    Encapsulado. Configurable. Programable. Genera eventos. Moldeable.
  10. Capas de Polymer Web components. Polymer se basa en los

    estándares de Web components. La librería Polymer. Proporciona una sintaxis clara y añade funcionalidades como doble bindings, gestos, etc. Elementos de Polymer. Catálogo de elementos ya hechos
  11. Veamos algunos ejemplos.

  12. Enlaces de interés Shadow DOM: Introduction Polymer project Introducción a

    Polymer Taller de Web Components: Hablarás con ellos Polymer samples