An evening with Polymer: Intro to Web Components
•Descargar como PPTX, PDF•
0 recomendaciones•360 vistas
El documento presenta una introducción a Polymer, una librería que facilita la creación de componentes web reutilizables. Explica que Polymer se basa en Web Components, un estándar propuesto por el W3C para crear componentes personalizados. Describe las características clave de Web Components como templates, shadow DOM e imports HTML. Luego muestra ejemplos de código Polymer y herramientas como Google Starter Kit y Yeoman que ayudan a generar proyectos Polymer. Finalmente, incluye enlaces a sitios que usan Polymer como Google Translate y
Recomendados
Más contenido relacionado
La actualidad más candente
Destacado
Similar a An evening with Polymer: Intro to Web Components
Similar a An evening with Polymer: Intro to Web Components (20)
Más de Arkhotech
Más de Arkhotech (17)
Último
Último (20)
An evening with Polymer: Intro to Web Components
- 1. An evening with ... Polymer Intro Arkho Innova Meetup Series
- 2. • 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!!!
- 3. ¿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.
- 4. ¿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.
- 5. ¿Qué son los Web Components? Lo que propone Web Components es simple, crear nuestros propios componentes web, por ejemplo nosotros tenemos esto :
- 6. ¿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:
- 7. ¿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.
- 8. ¿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
- 9. ¿Qué son los Web Components? HTML IMPORTS Permite importar a nuestros documentos HTML nuestras plantillas. <link rel="import" href=“import.html"> Ventajas - Distribución
- 10. Polymer Podríamos construir custom elements usando directamente las primitivas de Web Components, pero sería mucho más costoso.
- 11. Un poco de Código!
- 13. Yeoman Un 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
- 14. Yeoman Un 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
- 15. Yeoman Un 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
- 17. Ejemplo
- 18. Ejemplo
- 19. Ejemplo
- 20. Ejemplo
- 21. Ejemplo
- 22. Ejemplo
- 23. Ejemplo
- 24. Ejemplo
- 25. Ejemplo
- 26. Ejemplo
- 27. Ejemplo
- 28. Ejemplo
- 31. An evening with ... Polymer Intro Arkho Innova Meetup Series
Notas del editor
- Polymer es una librería diseñada para facilitar la creación de componentes, para la web moderna. Vamos a recalcar que Polymer no es un framework. Por lo tanto, no va a competir con Angular.js, Ember.js, Backbone.js, Knockout.js, etc. Lo ideal sería que trabajaran de la mano.
- No es un tema para nada nuevo, yo ya había escuchado desde hace un tiempo sobre una nueva forma de hacer la web y al parecer se refería a esto. Cuando se plantea la teoría de Web Components, lo primero que se comenta es que para desarrollar la web en la actualidad se manejan un sin fin de plugins, archivos css de gran peso y un desarrollo en html que en la mayoría de los casos puede resultar un caos cuando de proyectos grandes se trata ya que termina siendo para nada entendible y gigante. Web components Se compone de 4 sub-elementos complementarios, pero independientes entre si.
- Lo que propone Web Components es simple, crear nuestros propios componentes web, por ejemplo nosotros tenemos esto :
- Lo que propone Web Componentes es un escenario donde nosotros mismo creemos nuestros propios elementos para que estos puedan ser reutilizables , mantenibles y de fácil lectura. En internet existe muchas opciones para hacer menus desplegables, ligthbox, mapas, sliders, en donde en algunos casos son difíciles o tediosos de implementar.
- Web components Se compone de 4 sub-elementos complementarios, pero independientes entre si. Cualquiera de ellos puede ser usado por separado, lo que hace que la tecnología de los Web Elements sea, además de muy útil, muy flexible. Template es donde se define la estructura del componente.
- 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. Para los mas antiguos Polymer se podría decir que es el símil a Jquery en su tiempo con Javascript. Polymer está construido desde cero para los navegadores modernos, utilizando las últimas APIs de la plataforma web. Polyfills proporcionan apoyo en los navegadores antiguos para las API que aún no son universales.
- 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. Para los mas antiguos Polymer se podría decir que es el símil a Jquery en su tiempo con Javascript. Polymer está construido desde cero para los navegadores modernos, utilizando las últimas APIs de la plataforma web. Polyfills proporcionan apoyo en los navegadores antiguos para las API que aún no son universales.