Post on 14-Apr-2017
An evening with ... Polymer IntroArkho Innova Meetup Series
• 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!!!
¿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.
¿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.
¿Qué son los Web Components? Lo que propone Web
Components es simple, crear nuestros propios
componentes web, por ejemplo nosotros tenemos
esto :
¿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:
¿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.
¿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
¿Qué son los Web Components?
HTML IMPORTS
Permite importar a nuestros documentos HTML nuestras plantillas.
<link rel="import" href=“import.html">
Ventajas
- Distribución
Polymer
Podríamos construir custom elements usando directamente
las primitivas de Web Components, pero sería mucho
más costoso.
Un poco de Código!
Google starter kit
https://developers.google.com/web/tools/polymer-starter-kit/
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
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
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
Ejemplo
npm install generator-polymer -g
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
Ejemplo
An evening with ... Polymer IntroArkho Innova Meetup Series