Share
Nota del editor: Este artículo se actualizó para eliminar las referencias a componentes obsoletos, específicamente el polímero ajax, que desde entonces ha sido reemplazado por el núcleo ajax. Gracias a Rob Dodson, Desarrollador defensor en Google, por los comentarios.
Construir aplicaciones web modernas requiere muchas herramientas. Esto incluye preprocesadores, marcos de JavaScript, herramientas de prueba y mucho más. Y a medida que aumentan las complejidades de estas aplicaciones, también aumenta la cantidad de herramientas y servicios necesarios para administrarlas. ¿No sería genial si algunas cosas fueran simplificadas??
Los componentes web pretenden resolver algunas de estas complejidades al proporcionar una forma unificada de crear nuevos elementos que abarcan una funcionalidad rica sin la necesidad de todas las bibliotecas adicionales. Los componentes web se componen de cuatro especificaciones diferentes (elementos personalizados, plantillas, DOM de Shadow y las importaciones de HTML) que se están desarrollando en el W3C.
Para cerrar la brecha y darles a los desarrolladores acceso a esta rica funcionalidad ahora, Google ha creado la biblioteca Polymer, que sirve como un conjunto de polyfills para ofrecerle la promesa de componentes web hoy. Vamos a profundizar un poco más en.
Como mencioné, la biblioteca Polymer es un conjunto de polyfills que te ayudan a crear componentes web en los principales navegadores modernos. Proporciona el marco para definir, crear y representar elementos personalizados complejos de manera simplista similar a las etiquetas con las que ha crecido. Lo que quiero decir con esto es que ayuda a simplificar la forma en que usamos componentes complejos al:
Pero lo importante a recordar, es que el marco en sí se desarrolla en base a la dirección de las especificaciones individuales que está examinando el W3C, proporcionando así una base que debe evolucionar con la dirección del cuerpo principal de estándares..
Lo que esta biblioteca puede hacer es permitirnos crear componentes reutilizables que funcionen como verdaderos elementos de DOM y, al mismo tiempo, ayudar a minimizar nuestra dependencia de JavaScript para realizar una compleja manipulación de DOM para generar resultados de IU completos..
Aquí hay un ejemplo rápido del sitio Polymer. Digamos que quería hacer un reloj de trabajo en mi página. Por lo general, eso conllevaría un código JavaScript de uso intensivo, pero al usar Polymer, simplemente puedo usar la siguiente sintaxis:
Parece que la sintaxis de la etiqueta HTML con la que hemos crecido es mucho más fácil de implementar, leer y mantener que un código JavaScript complejo. Y el resultado final se ve así:
Y ya que es un elemento normal en el DOM, puede usarlo de forma similar utilizando CSS como este:
Accentsconagua
polímero-ui-reloj ancho: 320px; altura: 320px; pantalla: bloque en línea; fondo: url ("… /assets/glass.png") no se repite; tamaño de fondo: cubierta; borde: 4px rgba sólido (32, 32, 32, 0.3); Ciertamente no es el reloj más bonito, pero ese no es el punto. El hecho es que puede personalizar el componente a su gusto y luego reutilizarlo a través de una sintaxis más fácil y más fácil de mantener..
Hay tres formas de instalar y usar Polymer:
De los tres, la forma más fácil y recomendada es usar Bower, ya que no solo es increíblemente fácil de hacer sino que Bower también maneja las dependencias que Polymer pueda tener. Esto significa que si elige instalar un elemento de UI específico que dependa de otro, Bower puede manejarlo por usted..
Bower se instala como un módulo empaquetado de nodos, por lo que deberá tener instalado Node.js. Desde la línea de comando, escriba lo siguiente:
npm install -g bower
Esto debería sacar a Bower del registro npm e instalarlo para que esté disponible globalmente para usted. A partir de ahí, las siguientes instalaciones basadas en Bower toman la siguiente forma:
instalación de la glorieta
Como mínimo, querrá instalar la plataforma y los componentes centrales de Polymer, ya que le proporcionan la base para que usted cree y ejecute los elementos de sus clientes..
instalación de encofrado --save Polímero / plataforma instalación de encofrado --save Polímero / polímero
Puedes atajar esto escribiendo:
instalación de la caja - guardar Polímero / plataforma Polímero / polímero
Polymer también viene con un rico conjunto de elementos predefinidos que puedes comenzar a aprovechar de inmediato. Consisten en elementos basados en UI y no basados en UI que proporcionan funcionalidades tales como:
Y eso es solo raspar la superficie. Ya hay mucho allí con el código fuente completo disponible para servir como herramienta de aprendizaje, así como permitirle personalizar las capacidades a sus necesidades.
Puede elegir cómo instalar estos componentes. Puedes instalar todo o solo los que quieras usar. Para instalar todo, escribe:
instalación de cúpula de polímero / elementos de núcleo instalación de cúpula de polímero / elementos de ui de polímero
Este es el enfoque del fregadero de la cocina y cuando comienzas a aprender Polymer, probablemente sea más fácil hacerlo, para que puedas sentir lo que está disponible.
Una vez que esté más familiarizado con el marco, puede elegir los componentes individuales que le gustaría usar e instalarlos así:
Bower instalar polímero / polímero-ui-acordeón
Esta es la belleza de usar Bower. Cada componente viene con una Bower.json Archivo de configuración que describe sus dependencias. Así que si estuvieras instalando el acordeón componente, mirando la configuración, podemos ver que tiene dependencias en la principal polímero componente así como el selector y plegable componentes.
"nombre": "polímero-ui-acordeón", "privado": verdadero, "dependencias": "polímero": "Polímero / polímero # 0.2.0", "polímero-selector": "Polímero / polímero-selector # 0.2.0 "," polymer-ui-collapseible ":" Polymer / polymer-ui-collapsible # 0.2.0 "," version ":" 0.2.0 "
La clave es que no tiene que preocuparse por eso, porque Bower lo gestiona por usted. Por eso es la herramienta preferida para instalar Polymer..
La instalación a través de Bower creará una carpeta llamada bower_components en la carpeta de su proyecto que contiene todas las cosas que Polymer necesita.
El sitio de Polymer prácticamente encierra la descripción de los elementos personalizados:
“Los elementos personalizados son los componentes básicos de las aplicaciones basadas en polímeros. Usted crea aplicaciones al ensamblar elementos personalizados juntos, ya sea los proporcionados por Polymer, los que usted crea o los elementos de terceros ".
Polymer nos da la posibilidad de crear nuestros propios elementos personalizados desde cero e incluso reutilizar otros elementos para ampliar nuestros elementos personalizados. Esto se hace creando primero una plantilla del elemento personalizado. Para todos los efectos, esta plantilla es una combinación de HTML, CSS y JavaScript e incluye la funcionalidad que estará disponible cuando use el elemento. Se basa en la especificación de las plantillas HTML de WhatWG, que pretende proporcionar compatibilidad nativa para las plantillas del lado del cliente.
Veamos este ejemplo simple de una plantilla de polímero:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre. Excepteur sint occaecat cupidatat no proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Este elemento le permite agregar fácilmente texto de Lorem Ipsum en su código simplemente usando la siguiente etiqueta:
Lo primero que debe incluirse es el núcleo de polímero, que es la API principal que le permite definir los elementos personalizados:
El siguiente paso es definir el nombre del nuevo elemento utilizando Polymer elemento polimérico directiva:
En este caso, he nombrado mi nuevo elemento. elemento lorem. El nombre es un atributo requerido y debe contener un guión ("-").
Desde allí utilizamos el modelo Directiva para envolver las etiquetas del cuerpo principal y el código que conformará nuestro nuevo elemento. Para este ejemplo simple, tomo el texto de Lorem Ipsum y lo envolví con etiquetas de párrafo.
¡Eso es! Mi elemento personalizado está hecho y ahora puedo usarlo..
Tenga en cuenta que este componente se importará a otras páginas de su aplicación web que quieran aprovecharlo. Esto es posible debido a la implementación de Polymer de la especificación de Importaciones HTML que le permite incluir y reutilizar documentos HTML en otros documentos HTML.
Primero, necesitas incluir plataforma.js que proporciona el polyfill que imita las API nativas:
A continuación, debemos importar nuestro elemento personalizado en nuestra página web:
Una vez que hayas hecho esto, tu nuevo elemento personalizado estará disponible, lo que te permitirá hacer algo como esto:
También tienes la capacidad de estilizar el elemento completamente:
Este es un ejemplo bastante básico. Vamos a dar un paso más..
Si recuerdas, mencioné cómo puedes aprovechar los elementos existentes para mejorar tu personalizado. Veamos un ejemplo de esto..
Supongamos que quisiera tener un elemento que saliera a Reddit y tomara datos de uno de los subreddits. Podría aprovechar el componente Ajax existente de Polymer al incluirlo en mi elemento personalizado como este:
resp.data.public_description
Observe que estoy importando el componente Polymer Ajax y luego lo suelto en mi plantilla. Esto ahora hace que sea más fácil hacer referencia a mi nuevo elemento que hace que la llamada XHR retire los datos JSON y los incluya en las etiquetas de mis párrafos con la descripción pública de subreddit:
"Cosas que te hacen ir AWW! Como los cachorros. Y conejitos ... y así sucesivamente ... ¡Un lugar para fotos, videos e historias realmente lindos!
La respuesta se devuelve y Polymer establece un enlace de datos bidireccional que me permite poder usar los datos envolviéndolos con llaves dobles como esta. resp.data.public_description.
Esto es genial, pero en la mayoría de los casos, no vamos a codificar una URL para un recurso específico. Expandamos esto aún más agregando atributos a nuestro elemento personalizado. Hacer esto es increíblemente simple. Primero, necesitas actualizar el elemento polimérico Directiva para reflejar los atributos que desea para su elemento personalizado:
En este caso, quiero poder pasar un subreddit a mi elemento y hacer que extraiga datos basados en eso. Ahora puedo cambiar la llamada a polímero ajax Me gusta esto:
Observe cómo estoy usando las capacidades de enlace de datos de Polymer para construir dinámicamente la URL basada en el valor de atributo de subreddit. Ahora, puedo actualizar la forma en que hago referencia a mi elemento personalizado para pasar el subreddit que deseo:
Lo último que quiero hacer es asegurar que haya un valor predeterminado para mi atributo para que mi código no explote. Hago esto agregando lo siguiente en mi plantilla de elementos:
Esto garantiza que siempre tendré un valor predeterminado para el atributo público de mi elemento. Así es como se ve el código final:
resp.data.public_description
Y hay un poco más de cosas que puedes hacer, incluyendo agregar manejadores de devolución de llamada personalizados, administrar eventos, configurar Observadores de mutaciones para procesar cambios en el DOM y mucho más..
Los componentes web cambiarán la forma en que construimos las aplicaciones web y Polymer nos trae esto hoy. Ahora tiene la capacidad de crear sus propios componentes personalizados y mantenibles que pueden adaptarse a las necesidades específicas de su aplicación. Estos componentes se pueden compartir fácilmente, lo que permite a otros equipos o la comunidad compartir y beneficiarse fácilmente de estos bloques de construcción encapsulados..
