Introducción a Polymer

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

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