Polymer: creando aplicaciones con Web Components

El estándar Web Components, que conocimos en nuestro último artículo, está lejos de alcanzar su madurez. Sus convenciones de codificación, «buenas prácticas» y otros principios todavía no son tan sólidos como los que sustentan las características más tradicionales de HTML. Entonces, ¿por dónde deberíamos empezar si queremos construir una aplicación con Web Components? Un camino seguro es utilizar bibliotecas que implementan sus propios Web Components, como X-Tag, Bosonic o la más importante de todas: Polymer, desarrollada por Google. Polymer nos ofrece una serie de elementos HTML ya implementados, además de permitirnos crear nuestros propios elementos, para construir aplicaciones web escalables y fáciles de mantener. Los elementos que trae Polymer son clasificados de la siguiente manera:

  • Iron Elements. Son el núcleo de Polymer. Incluyen controles de formularios (como campos de texto, switches y checkboxes) y elementos para construir la grilla (columnas) de nuestra página.
  • Paper Elements. Una serie de elementos generales que implementan material design, el lenguaje visual de Google, basado en el aspecto y el comportamiento de las hojas de papel.
  • Google Web Components. Elementos asociados a aplicaciones de Google, como Maps, Sheets, YouTube, Analytics, etc.
  • Gold Elements. Elementos para utilizar en sitios de comercio electrónicos.
  • Neon Elements. Implementan efectos de animación.
  • Platinum Elements. Elementos que satisfacen necesidades específicas de las aplicaciones web (no así de un sitio web tradicional), como la capacidad de conectarse con dispositivos móviles mediante Bluetooth.
  • Molecules. Para incluir bibliotecas JavaScript externas.

Polymer es un buen punto de partida para implementar Web Components, una tecnología que puede llegar a definir el futuro de las aplicaciones web. Sin embargo, todavía no cuenta con una documentación exhaustiva para quienes quieran aprender a usarlo, y presenta ciertos problemas de compatibilidad, especialmente en dispositivos móviles (incluso a pesar de que utiliza polyfills). Por el momento, se recomienda utilizarlo para proyectos experimentales y no para aplicaciones en producción orientadas a un público amplio.

Enlaces externos

Web Components: una nueva forma de construir documentos HTML

En los últimos años, las aplicaciones web fueron quitándoles lugar a los programas de escritorio. Herramientas con un alto nivel de complejidad, como procesadores de texto o editores de imagen, hoy pueden ejecutarse desde un browser común. Esto ocurre no solo gracias al incremento en las velocidades de conexión a Internet, sino también —y principalmente— al desarrollo de tecnologías para el procesamiento de información del lado cliente. Tradicionalmente, en las aplicaciones web, el front-end se limitaba a una simple interfaz visual, mientras que el back-end se encargaba de todas las funciones de procesamiento. Hoy, en cambio, muchas de esas funciones pueden implementarse en el front-end, sin tener que solicitarlas al servidor. Como parte de este proceso, HTML se complejizó, pasando de ser un simple lenguaje de marcas a poder interactuar con complejas API desarrolladas en JavaScript.

Otra novedad son los Web Components: widgets encapsulados, reutilizables y componibles para la plataforma web. Son elementos de interfaz de usuario que se crean a través de tecnologías web abiertas. Algunos vienen incorporados en el browser, por lo cual no tenemos que tomarnos el trabajo de codificarlos por nuestra cuenta, ni necesitamos de bibliotecas externas (como jQuery) para hacerlos funcionar. El concepto abarca cuatro tecnologías:

Custom Elements

Nos permite crear nuestros propios elementos y etiquetas HTML. Cada elemento puede tener su propia estructura interna, comportamiento y estilo visual predeterminados. Por ejemplo, si necesitamos un menú de navegación personalizado, podemos crear la etiqueta <mi-menu>, con las características que deseemos.

HTML Templates

Permite crear «plantillas» cuyo contenido será cargado de manera dinámica, y no en el momento en que se carga la página. Por ejemplo, podemos ofrecerle al usuario un botón para añadir o quitarle filas a una tabla. Normalmente, las opciones son dos:

  1. Crear o eliminar el elemento fila en el momento en que se acciona el botón, modificando el código fuente mediante JavaScript.
  2. Incluir de antemano una cantidad de filas en el markup, pero mostrarlas u ocultarlas a través de CSS.

La primera opción trae problemas de seguridad, mientras que la segunda nos obliga a incluir en nuestro código HTML elementos que quizás ni vayan a utilizarse, incrementando innecesariamente el peso de la página.

Con la etiqueta <template> podemos predefinir un fragmento de HTML que solo se incluirá cuando sea necesario, sin los problemas de la inyección de código por JavaScript ni tener que cargar elementos invisibles apenas se abre la página.

Shadow DOM

Permite insertar en nuestra página estructuras HTML que funcionarán de manera independiente con respecto al código que los contiene. Estos fragmentos no se verán afectados por el CSS y el JavaScript del resto de la página.

Por ejemplo, para incluir un video en nuestra página podemos usar el elemento video de HTML5, usando apenas una línea de código:

<video src="./foo.webm" controls></video>

Pero, al mostrarse en el browser, este elemento contendrá un botón de play, un controlador de volumen, un indicador de duración, etc. Estos componentes internos son «insertados» por el propio browser a través de un fragmento de código oculto: el Shadow DOM, que tendrá su propio JavaScript y CSS.

Un elemento <video> con su Shadow DOM insertado por Chrome. Fuente: CSS-Tricks

HTML Imports

Nos permite incluir en nuestra página documentos HTML externos, scripts de JavaScript y hojas de estilo.

Comentarios finales

Si revisamos la definición de Web Components que ofrecimos en el segundo párrafo, notaremos que HTML Templates aporta la característica de reusabilidad, mientras que Shadow DOM brinda encapsulamiento. Las cuatro tecnologías son componibles porque pueden utilizarse de forma combinada.

Actualmente, Web Components es un estándar del W3C que todavía se encuentra en desarrollo, impulsado por Google. Aún no es plenamente soportado por todos los browsers, pero existen polyfills para salvar esta falencia.