Download - An evening with... Polymer Intro Meetup
![Page 1: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/1.jpg)
An evening with ... Polymer IntroArkho Innova Meetup Series
![Page 2: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/2.jpg)
• Un espacio para compartir experiencias y conocimiento
• Un espacio para hacer relaciones entre equipos con intereses afines
• Un espacio para pasarla bien
Gracias por su asistencia!!!
![Page 3: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/3.jpg)
¿Qué es Polymer?The Polymer library is designed to make it easier and faster for
developers to create great, reusable components for the
modern web.
Cuando hablamos de Polymer tenemos que pensar en Web
Components, ya que Polymer de por sí es una librería para la
creación fácil de Web Components.
![Page 4: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/4.jpg)
¿Qué son los Web Components?
Los Web Components es el estándar propuesto por el grupo de trabajo de WebApps de W3C
y que aún está en fase de definición.
![Page 5: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/5.jpg)
¿Qué son los Web Components? Lo que propone Web
Components es simple, crear nuestros propios
componentes web, por ejemplo nosotros tenemos
esto :
![Page 6: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/6.jpg)
¿Qué son los Web Components?
Componentes a los cuales se le pueden agregar configuraciones
a manera de atributos para poder dar mayor funcionalidad,
por ejemplo:
![Page 7: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/7.jpg)
¿De que se componen los Web Components?
TEMPLATES
Es la base de los webcomponents puesto que es dónde definimos su comportamiento y lo registramos como tal
<template id=‘’> <style> … </style> <span> … </span></templates>
Ventajas:
- Reutilizar componentes.
![Page 8: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/8.jpg)
¿Qué son los Web Components? SHADOW DOM
Estructura del DOM que se encuentra encapsulada dentro de una etiqueta HTML, de forma que como “usuarios” vemos la etiqueta HTML, pero en su interior hay un DOM oculto que realmente es el contenido que se visualiza.
Un ejemplo de Shadow DOM sería lo que realmente contiene la etiqueta video de HTML5
Ventajas
- Encapsulación
![Page 9: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/9.jpg)
¿Qué son los Web Components?
HTML IMPORTS
Permite importar a nuestros documentos HTML nuestras plantillas.
<link rel="import" href=“import.html">
Ventajas
- Distribución
![Page 10: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/10.jpg)
Polymer
Podríamos construir custom elements usando directamente
las primitivas de Web Components, pero sería mucho
más costoso.
![Page 11: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/11.jpg)
Un poco de Código!
![Page 12: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/12.jpg)
Google starter kit
https://developers.google.com/web/tools/polymer-starter-kit/
![Page 13: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/13.jpg)
YeomanUn robusto conjunto para el
lado del cliente compuesto por herramientas y frameworks
que pueden ayudar a los desarrolladores a crear rápidamente bonitas
aplicaciones web
$npm install generator-polymer -g
![Page 14: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/14.jpg)
YeomanUn robusto conjunto para
el lado del cliente compuesto por herramientas y
frameworks que pueden ayudar a los
desarrolladores a crear rápidamente bonitas
aplicaciones web
$ yo polymer && gulp serve
![Page 15: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/15.jpg)
YeomanUn robusto conjunto para
el lado del cliente compuesto por herramientas y
frameworks que pueden ayudar a los
desarrolladores a crear rápidamente bonitas
aplicaciones web
npm install generator-polymer -g
![Page 16: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/16.jpg)
Ejemplo
npm install generator-polymer -g
![Page 17: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/17.jpg)
Ejemplo
![Page 18: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/18.jpg)
Ejemplo
![Page 19: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/19.jpg)
Ejemplo
![Page 20: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/20.jpg)
Ejemplo
![Page 21: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/21.jpg)
Ejemplo
![Page 22: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/22.jpg)
Ejemplo
![Page 23: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/23.jpg)
Ejemplo
![Page 24: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/24.jpg)
Ejemplo
![Page 25: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/25.jpg)
Ejemplo
![Page 26: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/26.jpg)
Ejemplo
![Page 27: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/27.jpg)
Ejemplo
![Page 28: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/28.jpg)
Ejemplo
![Page 31: An evening with... Polymer Intro Meetup](https://reader036.vdocuments.us/reader036/viewer/2022062523/5881228e1a28abb9388b737f/html5/thumbnails/31.jpg)
An evening with ... Polymer IntroArkho Innova Meetup Series