En los últimos años, las interfaces de los sitios webs han adquirido gran importancia dentro de lo que es el desarrollo web. El dinamismo, la usabilidad, la velocidad, entre otros factores son cada vez más importantes para lograr estimular a los usuarios y lograr objetivos de negocio. Es por esto que herramientas como jQuery son de vital importancia para lograr esas interesantes interfaces visuales, no sólo agregando dinamismo, sino acelerando la interactividad entre usuarios y navegadores, ya que la información se puede manipular más fácilmente y con gran agilidad.

Con jQuery se puede lograr mucho. La librería provee una gran cantidad de métodos para manipular una interfaz dentro del navegador. Es incluso posible construir un sitio de una sola página con una interfaz que cambia constantemente sin tener que regenerarla completamente. Sin embargo, lleva una enorme cantidad de trabajo y el código resultante puede ser muy difícil de mantener. Por ello en los últimos años han surgido muchas herramientas implementadas sobre jQuery u otras librerías de manipulación del DOM, que simplifican en gran medida construir estas interfaces. En este artículo hablaremos brevemente de Backbone.js, Angular.js (de la mano de los desarrolladores de Google) y Ember.js. Existen más herramientas, pero las tres mencionadas son las más populares hoy en día.

El objetivo principal de estas herramientas es proveer una organización de código más conveniente y mantenible. Como resultado, logrando mayor productividad a la hora de construir la interfaz de una web, por medio de la implementación del conocido patrón MVC, aunque en este caso, del lado del cliente. Asimismo, dejando que el navegador se encarge de generar y actualizar la interfaz, se le quita esta responsabilidad al servidor, convirtiéndolo en una mera API que provee los datos al browser. Un punto importante en este tipo de desarrollo es reducir la sincronización de los datos al mínimo y aprovechar al máximo la capacidad de procesamiento que el navegador ofrece, dejando al servidor aquel procesamiento esencial que no se puede hacer del lado del cliente.

Backbone.js

Muchos consideran a Backbone como un framework de desarrollo en JavaScript, pero la naturaleza de esta herramienta no encaja en esa definición. Backbone provee sólo una mínima organización en la estructura de una interfaz, no presenta muchas convenciones y le da mucha libertad al desarrollador de construirla según requiera, convirtiéndolo más que nada en una librería que nos provee métodos y clases para trabajar. Por este motivo, Backbone es la herramientas más pequeña en comparación con las otras dos, pero no por eso es menos potente.

Al no presentar convenciones que determinen la forma de trabajar, si bien se logra gran flexibilidad, puede requerir mayor esfuerzo definir los componentes de una interfaz, como modelos vistas o colecciones. Backbone se suele utilizar con algunas mínimas dependencias que ayudan en esta tarea, como lo es Underscore.js, encargada de construir y manejar las vistas o templetes.

La forma de pensar con Backbone puede ser difícil al principio. Se habla mucho de eventos que disparan procesos y la idea principal es construir todos estos eventos y manejadores para asociarlos a vistas. De esta forma un modelo que contiene datos, puede tener definidos eventos como un click o un cambio en algún dato, y por otro lado una vista puede tener definida manejadores que reaccionan ante un evento del modelo y actualizarse.

Algunas ventajas de utilizar Backbone son: la gran comunidad detrás de la herramienta, el reducido tamaño que tiene, su madurez ya que ha estado presente algunos años y la organización del código. Sin embargo, posee una curva de aprendizaje bastante empinada. Requiere que el desarrollador tome buenas decisiones sobre el código para hacerlo mantenible y eficiente, así como también requiere que implemente ciertos métodos básicos, como la limpieza de templates o caches de los mismos.

Angular.js

Los desarrolladores de Google han tenido en cuenta las tendencias del desarrollo web y no se han quedado atrás en lo absoluto. Angular es un gran framework en JavaScript que permite agilizar enormemente el desarrollo de una interfaz dinámica. Muchas de las funcionalidades que Backbone no provee por defecto (es tarea del desarrollador construirlas), Angular ya las tiene implementadas, y esto se debe a que fue armado partiendo de numerosas convenciones y formas de trabajo ya probadas.

En Angular se habla menos de eventos y se pasa a hablar de asociaciones, entre los datos y los templates. Por detrás, el framework se encarga de administrar los eventos necesarios. La idea aquí es hacer esas asociaciones y mantener actualizados tanto el modelo como el template ante cambios o eventos. A diferencia de Backbone, Angular establece automáticamente un enlace de doble vía en una asociación datos-template. En otras palabras si el template cambia, los datos reflejan ese cambio, y vice versa.

Angular hace uso de lo que se denominan directivas, las cuales pueden ser atributos o incluso etiquetas que definen comportamiento. Estas directivas se establecen en los templates junto con el resto del HTML para que luego un parser las lea y aplique el comportamiento especificado.

Al tener todas estas funcionalidades establecidas de antemano, la gran ventaja de Angular es la simplicidad de construir una interfaz, a costa de mayor tamaño global y menor performance. La curva de aprendizaje de esta herramienta es mucho menos empinada que la de Backbone, aunque en algunos casos donde la complejidad de la interfaz sea grande y se requiera escaparse de las convenciones, puede resultar más complejo de lo esperado. La documentación es bastante buena en su mayoría si bien no posee una comunidad tan amplia como la de Backbone, existe buen material generado por desarrolladores como tutoriales y screencasts. Se puede utilizar Angular sin jQuery, convirtiéndolo en la única de las tres herramientas libre de dependencias. Otra ventaja en Angular es la inclusión de herramientas de testing dentro del mismo framework.

Ember.js

Este último framework del cual hablaremos presenta muchas similitudes con Angular, y las mismas ventajas sobre Backbone. Muchas de las diferencias con el anterior radican a nivel técnico, es decir como maneja los templates, los enlaces entre elementos y eventos, y la complejidad de los modelos, entre otras cosas.

Una de las diferencias más notables entre Ember y Angular está en los templates en sí mismo. Angular utiliza el mismo HTML para definirlos, mientras que en Ember se pueden definir por separado. Esto es para algunos una mejora, porque implica que el HTML en sí está más libre de notación extra, aunque hay argumentos apoyando a Angular en este aspecto explicando que sus templates son auto explicativos teniendo esa sintaxis extra.

La documentación de Ember puede resultar un poco difícil de digerir a diferencia de la de Angular, y la comunidad detrás de Ember tampoco es tan extensa como la de Backbone. Sin embargo, el equipo de desarrolladores que mantiene y mejora Ember está compuesto por personas que han participado o participan en proyectos como Rails y jQuery. Aun así, Ember es mucho más simple de utilizar que Backbone.

Conclusión

Tanto Backbone como Angular y Ember cumplen muy bien con el objetivo de construir interfaces dinámicas. Existe un gran número de aplicaciones desarrolladas utilizando alguna de estas herramientas, lo que brinda la confianza de que son realmente utilizadas por grandes empresas como LinkedIn o Google. La elección entre Angular o Ember es más subjetiva por el hecho de ser similares, aunque entre estas dos y Backbone se puede argumentar un poco.

En términos rubystas Angular o Ember representan el Rails de estos frameworks, mientras que Backbone representaría a Sinatra. Es decir, dependiendo de la naturaleza de la aplicación a desarrollar uno podría optar por el minimalista Backbone o el complejo Angular o Ember, teniendo en cuenta el tiempo de aprendizaje y la agilidad de desarrollo. El nivel de mantenimiento depende un poco de los desarrolladores, si bien Angular y Ember proveen herramientas para facilitar esto, en Backbone se puede lograr la misma calidad de código con un poco de esfuerzo. Y para el caso de Backbone, si bien es injusto compararlo con Angular o Ember, existen frameworks que sí compiten con los que se mencionaron, construidos sobre Backbone.

En cuanto a la opción de usar o no alguna herramienta de este estilo, es importante tener en cuenta el objetivo que se desea lograr. En entornos donde existen procesos de datos complejos o extensos, como por ejemplo un checkout de alguna tienda en línea, un proceso de selección o una comparación de productos; es una buena opción utilizar alguna estas herramientas para lograr una interfaz más ágil.

Personalmente, si debo elegir entre Angular y Ember, escogería este último, no por alguna desconfianza a Google, simplemente porque el código resultante está más ordenado y separado en mi opinión. Ember ha tenido grandes mejoras últimamente y considero importante saber que el proyecto esta vivo y que probablemente más gente comenzará a usarlo permitiéndole mejorar aún más. Y para finalizar, una razón adicional que justifica mi elección radica en que Ember esta un poco más cerca de Ruby que Angular, dados sus desarrolladores principales.

Matías Toselli