Polymer.js: ¿El futuro del desarrollo de aplicaciones web?

Hace aproximadamente un año, en mayo de 2013, Google lanzó Polymer.js.

Así que aquí estamos, un año después. Y la pregunta es: ¿Ya está lista para el prime time? ¿Todavía es posible crear una aplicación lista para producción usando técnicas de desarrollo web de Polymer?

Para responder a esta pregunta, llevé a Polymer a una prueba de manejo para desarrollar una aplicación web y ver qué tan bien se comportaría. Este artículo trata sobre esa experiencia y lo que aprendí en el proceso.

Polymer.js: el concepto

Antes de entrar en nuestro tutorial de Polymer, primero definamos Polymer.js, no por lo que dice ser, sino por lo que realmente es.

Cuando comienza a probar Polymer, no puede evitar sentirse intrigado de inmediato por su visión del mundo única y autoproclamada. Polymer pretende adoptar una especie de enfoque de regreso a la naturaleza que "devuelve los elementos al centro del desarrollo web". Con Polymer.js, puede crear sus propios elementos HTML y componerlos en aplicaciones web completas y complejas que son escalables y fáciles de mantener. Se trata de crear elementos nuevos (es decir, personalizados) que luego se pueden reutilizar en sus páginas HTML de forma declarativa, sin necesidad de conocer o comprender su funcionamiento interno.

Después de todo, los elementos son los componentes básicos de la web. En consecuencia, el weltanschauung de Polymer es que el desarrollo web debe basarse fundamentalmente en la extensión del paradigma de elementos existente para crear componentes web más potentes, en lugar de reemplazar el marcado con "montones de secuencias de comandos" (para usar sus palabras). Dicho de otra manera, Polymer cree en aprovechar las tecnologías "nativas" del navegador en lugar de depender de un laberinto cada vez más complejo de bibliotecas de JavaScript personalizadas (jQuery et. al.). Una noción intrigante de hecho.

Bien, esa es la teoría. Ahora echemos un vistazo a la realidad.

Desarrollo web con polímeros: la realidad

Si bien el enfoque filosófico de Polymer ciertamente tiene mérito, desafortunadamente es una idea que (al menos hasta cierto punto) está adelantada a su tiempo.

Polymer.js impone un gran conjunto de requisitos al navegador, y se basa en una serie de tecnologías que aún están en proceso de estandarización (por W3C) y que aún no están presentes en los navegadores actuales. Los ejemplos incluyen shadow dom, elementos de plantilla, elementos personalizados, importaciones de HTML, observadores de mutaciones, vistas basadas en modelos, eventos de puntero y animaciones web. Estas son tecnologías maravillosas, pero al menos a partir de ahora, aún están por llegar a los navegadores modernos.

La estrategia de Polymer es hacer que los desarrolladores front-end aprovechen estas tecnologías basadas en navegador de vanguardia, aún por venir, que actualmente se encuentran en proceso de estandarización (por W3C), a medida que estén disponibles. Mientras tanto, para llenar el vacío, Polymer sugiere el uso de polyfills (código JavaScript descargable que proporciona funciones que aún no están integradas en los navegadores actuales). Los polyfills recomendados están diseñados de tal manera que (al menos en teoría) se podrán reemplazar sin problemas una vez que las versiones nativas del navegador de estas capacidades estén disponibles.

Está bien. Pero déjame aclarar esto. Al menos por ahora, ¿vamos a usar bibliotecas de JavaScript (es decir, polyfills) para evitar el uso de bibliotecas de JavaScript? Bueno, eso es "fascinante".

La conclusión, entonces, es que estamos en una especie de modo de limbo con Polymer, ya que en última instancia depende (o quizás más exactamente, se aproxima) de tecnologías de navegador que aún no existen. En consecuencia, Polymer.js hoy parece más un estudio sobre cómo se pueden construir aplicaciones centradas en elementos en el futuro (es decir, cuando todas las funciones necesarias se implementen en los principales navegadores y los polyfills ya no sean necesarios). Pero, al menos en la actualidad, Polymer parece más un concepto intrigante que una opción real para crear aplicaciones robustas que cambien su visión del mundo aquí y ahora, lo que hace que escribir (o encontrar) un tutorial de Polymer sea difícil fuera de la documentación de Google.

Arquitectura de polímeros

Ahora, en nuestra guía. Polymer.js se divide arquitectónicamente en cuatro capas:

Nativo: las funciones necesarias actualmente están disponibles de forma nativa en todos los principales navegadores. Foundation: Polyfills que implementan las características necesarias del navegador que aún no están disponibles de forma nativa en los propios navegadores. (La intención es que esta capa desaparezca con el tiempo a medida que las capacidades que proporciona estén disponibles de forma nativa en el navegador). Núcleo: la infraestructura necesaria para que los elementos de Polymer aprovechen las capacidades proporcionadas por las capas Native y Foundation. Elementos: un conjunto básico de elementos, destinado a servir como bloques de construcción que pueden ayudarlo a crear su aplicación. Incluye elementos que brindan: Funcionalidad básica como ajax, animación, diseño flexible y gestos. Encapsulación de API de navegador complicadas y diseños CSS. Representadores de componentes de la interfaz de usuario, como acordeones, tarjetas y barras laterales.

Creación de una aplicación de polímero

Para comenzar, hay algunos artículos y tutoriales que lo ayudarán a conocer Polymer, sus conceptos y su estructura. Pero si eres como yo, cuando los hayas revisado y estés listo para construir tu aplicación, rápidamente te darás cuenta de que no estás muy seguro de por dónde empezar o cómo crearla. Ya que he pasado por el proceso y lo he descubierto, aquí hay algunos consejos...

El desarrollo web de polímeros tiene que ver con la creación de elementos, y solo con la creación de elementos. Entonces, de acuerdo con la visión del mundo de Polymer, nuestra aplicación será... un elemento nuevo. Nada más y nada menos. Oh, está bien, lo entiendo. Así que ahí es donde empezamos.

Para nuestro ejemplo de proyecto Polymer, nombraré el elemento de nivel superior de la aplicación , ya que los nombres de elementos personalizados (independientemente del marco que utilice para crearlos) deben incluir un guión (por ejemplo, etiquetas x, elementos de polímero, etc.).

Sin embargo, el siguiente paso requiere un poco más de reflexión. Necesitamos decidir cómo vamos a dividir en componentes nuestra aplicación. Un enfoque sencillo es tratar de identificar, desde una perspectiva visual, los componentes de nuestra aplicación y luego tratar de crearlos como elementos personalizados en Polymer.

Así por ejemplo, imagina que tenemos una app con las siguientes pantallas:

Podemos identificar que la barra superior y el menú de la barra lateral no van a cambiar y el "contenido" real de la aplicación podría cargar diferentes "vistas".

Siendo ese el caso, un enfoque razonable sería crear el para nuestra aplicación y, dentro de ese elemento, podríamos usar algunos elementos de interfaz de usuario de polímero para crear la barra superior y el menú de la barra lateral.

Luego podemos crear nuestras dos vistas principales, a las que llamaremos ListView y SingleView, para cargarlas en el área de "contenido". Para los elementos en ListView, podemos crear un ItemView.

Esto producirá una estructura similar a esta:

Las buenas noticias

Ahora que tenemos nuestra aplicación Polymer de ejemplo, podemos insertarla en cualquier página web simplemente importando nuestro "toptal-app.html" y agregando la etiqueta porque, al fin y al cabo, nuestra app es solo un elemento. Eso es genial.

De hecho, ahí reside gran parte del poder y la belleza del paradigma de los polímeros. Los elementos personalizados que crea para su aplicación (incluido el de nivel superior para toda su aplicación) se tratan como cualquier otro elemento en una página web. Por lo tanto, puede acceder a sus propiedades y métodos desde cualquier otro código o biblioteca de JavaScript (por ejemplo, Backbone.js, Angular.js, etc.). Incluso puede usar esas bibliotecas para crear sus propios elementos nuevos.

Además, sus componentes personalizados son compatibles con otras bibliotecas de elementos personalizados (como X-Tag de Mozilla). Así que no importa lo que uses para crear tu propio elemento personalizado, es compatible con Polymer y cualquier otra tecnología de navegador.

Por lo tanto, no sorprende que ya hayamos comenzado a ver el advenimiento de una comunidad de creadores de elementos que expone y comparte sus elementos recién creados en foros como el sitio de Elementos personalizados. Puede ir allí y tomar cualquier componente que necesite y simplemente usarlo en su aplicación.

Por otro lado…

El polímero sigue siendo una tecnología lo suficientemente nueva como para que los desarrolladores, especialmente los desarrolladores de aplicaciones novatos, lo encuentren algo frágil, con una serie de bordes ásperos que no son tan difíciles de encontrar.

Aquí hay una muestra:

• Falta de documentación y orientación.
  • No todos los elementos de interfaz de usuario y elementos que no son de interfaz de usuario de Polymer.js están documentados. A veces, la única "guía" sobre cómo usarlos es el código de demostración. En algunos casos, incluso es necesario consultar el código fuente de un elemento de polímero para comprender mejor cómo funciona y cómo puede/debe usarse.
  • No está del todo claro cómo organizar aplicaciones más grandes. En particular, ¿cómo se supone que debes pasar objetos singleton entre elementos? ¿Qué estrategia debe emplear para probar sus elementos personalizados? La orientación sobre este tipo de cuestiones en este momento es escasa en el mejor de los casos.

• Errores de dependencia y versionitis. Incluso cuando descarga elementos de Polymer.js como se recomienda, es posible que se encuentre con un error de dependencia, que apunta a diferentes dependencias de versión en el mismo elemento. Si bien se entiende que Polymer Elements se encuentra actualmente en un proceso de desarrollo intenso, este tipo de problemas pueden hacer que el desarrollo sea bastante desafiante, lo que erosiona la confianza y el interés de los desarrolladores.

• Problemas en las plataformas móviles. El rendimiento de Polymer.js en plataformas móviles a menudo puede ser entre frustrante y problemático.
  • La descarga de toda la biblioteca y los polyfills (sin gzip) es lenta y debe descargar todos los elementos de polímero que desee utilizar.
  • Procesar los polyfills, las bibliotecas y los elementos personalizados parece ser una tarea costosa en las plataformas móviles. Incluso cuando se completa la descarga, a menudo tienes una pantalla en blanco durante unos segundos.
  • Especialmente para funcionalidades más complejas (como arrastrar y soltar o representar en un lienzo), es posible que la funcionalidad que funciona bien en el escritorio simplemente no funcione correctamente, o aún no sea compatible, en la plataforma móvil. En mi caso particular, una de esas frustraciones que encontré fue con la representación en un lienzo en iOS.
• Informe de error inadecuado o confuso. A veces, cuando escribe mal el nombre de un atributo o simplemente rompe algo relacionado con la capa central en sí, recibe un mensaje de error extraño en su consola con dos pilas de llamadas que necesita investigar para tratar de determinar dónde está el problema. A veces es fácil resolver esto, pero a veces terminas necesitando probar una estrategia completamente diferente solo para evitar el error, ya que no puedes rastrear su origen.

Conclusión

El polímero es una tecnología intrigante, pero es innegable que todavía está en pañales. Como tal, aún no se adapta bien al desarrollo de una aplicación grande, de nivel empresarial y lista para producción. Además, no hay muchas guías o tutoriales disponibles específicos para el desarrollo web de Polymer.js.

En cuanto a si el enfoque centrado en JavaScript o centrado en DOM es realmente fundamentalmente mejor, el jurado aún está deliberando. Polymer presenta algunos argumentos convincentes, pero existen contraargumentos.

Quizás lo más notable es que Polymer requiere un nivel bastante significativo de experiencia en el uso de tecnologías de navegador como el DOM. En muchos sentidos, está regresando a los días anteriores a jQuery, aprendiendo la API DOM para realizar tareas simples como agregar o eliminar una clase CSS de un elemento. Esto ciertamente lo hace sentir, al menos en algún nivel, como si estuviera dando un paso hacia atrás en lugar de hacia adelante.

Pero dicho esto, parece probable que los elementos personalizados vayan a ser una parte importante del desarrollo web en el futuro, por lo que sumergirse más temprano que tarde probablemente sea prudente para el desarrollador web de hoy. Y si nunca antes ha intentado crear sus propios elementos personalizados, Polymer (y este tutorial) es probablemente un buen lugar para comenzar.