Ya de vuelta de las vacaciones (al menos cuando empezamos a escribir este artículo) y aprovechando que en los últimos meses hemos realizado varios estudios centrados en nuevas tecnologías basadas en HTML5, JavaScript y CSS3, quizás es un buen momento para empezar a compartir algunas de nuestras conclusiones.
Todo este trabajo proviene de una iniciativa interna que comenzamos a desarrollar a lo largo del 2013 y que ya empieza a dar buenos resultados: el Laboratorio de Innovación. Aunque seguro que dentro de unos meses estaremos en disposición de hablar más de él, por el momento simplemente diremos que tiene un doble propósito.
El primero es estudiar de forma colaborativa y mediante un equipo multidisciplinar la avalancha de cambios tecnológicos que están revolucionando la web, los nuevos dispositivos, y a los propios usuarios.
El segundo tiene que ver con la formación continua de las personas que trabajamos en Cycle–IT. Técnicos, comerciales, dirección… en definitiva, todos los miembros de la empresa nos podemos beneficiar de estos estudios para aplicarlos a nuestras correspondientes áreas; y por supuesto vosotros también, ya que nuestra idea es compartir con la comunidad todo lo que nos sea posible.
Clasificación de bibliotecas JS
Ya que el concepto de desarrollo para la web es muy amplio, primero vamos a aclarar los criterios que hemos utilizado para acotar el estudio:
- Tipo de proyecto. Nos vamos a centrar en bibliotecas que ayuden a implementar aplicaciones web con una lógica de negocio compleja. Descartamos aquí lo que podrían ser las webs típicas de comunicación, que normalmente requieren otro tipo de destreza.
- Problema a resolver. Pretendemos encontrar bibliotecas JS orientadas a solucionar problemas de programación, más que diseño y maquetación. Así dejamos todo lo que sería CSS3 para más adelante.
Partiendo de estos dos criterios, los puntos principales que vamos a valorar de cara a clasificar estos proyectos de JavaScript son los siguientes:
- Arquitectura de la aplicación. Frameworks completos que sirven de esqueleto de aplicaciones web y dotan de estructura a las páginas y a sus distintas partes, generalmente siguiendo un patrón de diseño tipo MV*.
- Manipulación del DOM, AJAX y utilidades varias: bibliotecas de funciones misceláneas que amplían o corrigen la API JavaScript básica del navegador y proporcionan abstracciones útiles o notación más concisa para necesidades comunes de aplicaciones web modernas.
- Componentes visuales y gráficas: bibliotecas de widgets y controles de UI.
Otras características secundarias que hemos tenido en cuenta para evaluar las bibliotecas han sido: precio, «peso» en bytes, licenciamiento, grado de soporte a navegadores móviles, graceful degradation, documentación, popularidad, sociabilidad con otras herramientas, curva de aprendizaje, en qué aspectos destaca, y qué se echa de menos.
Comparativa
Aunque los resultados del estudio fueron más extensos, hemos preferido sintetizarlo todo en la siguiente tabla de forma que os sirva para tener una visión global de lo que hay.
| Arquitectura | DOM, AJAX, utils | Componentes visuales | |
| Angular JS 1.2.3 | ✓ | ✓ | |
| Backbone.js | ✓ | ||
| Ember | ✓ | ||
| Knockout 3.0.0 | ✓ | ||
| RequireJS 2.1.9 | ✓ | ||
| JQuery | ✓ | ||
| Underscore 1.5.2 | ✓ | ||
| Bootstrap | ✓ | ||
| JQuery UI | ✓ | ||
| JQuery Mobile | ✓ | ||
| Kendo UI | ✓ | ✓ | ✓ |
| YUI | ✓ | ✓ | ✓ |
| Prototype | ✓ | ||
| Sencha | ✓ | ✓ | ✓ |
| Zepto 1.0.1 | ✓ | ||
| script.aculo.us | ✓ | ||
| AngularUI | ✓ | ||
| Dojo 1.9.1 | ✓ | ✓ | ✓ |
| Closure Library 2013–02–12 | ✓ | ✓ | |
| Google Charts | ✓ | ||
| MailChimp’s Pattern Library | ✓ |
Conclusiones
Tras comparar todos estos proyectos (y algunos más) en base a los criterios que hemos mencionado antes, nos hemos quedado con un subconjunto de herramientas que, a nuestro parecer, es óptimo para las necesidades de proyectos web complejos:
- AngularJS. Es el framework JS más maduro y potente de entre los que se están disputando la hegemonía en este área. Su mecanismo de directivas es la característica más avanzada y versátil a destacar.
- jQuery. La vieja biblioteca JS multipropósito y omnipresente en la web va de la mano de AngularJS; en concreto Angular incluye su propia implementación de jQuery, jQLite. Si el proyecto web ya incluye jQuery, Angular lo usará directamente.
- Bootstrap. Bootstrap, hecho por el equipo técnico detrás de Twitter, se ha convertido en una colección brillante de componentes y de widgets, además de una base perfecta para layouts receptivos en la web y con CSS3.
- Require.js. Como guinda del pastel, optamos por esta biblioteca para gestionar la carga asíncrona de módulos JS. Require se basa en AMD como formato estándar de definición de módulos JavaScript, y es una solución elegante al problema de las dependencias JS en aplicaciones web.
Por último, hemos colgado en nuestra cuenta de GitHub la presentación HTML que utilizamos en Cycle-IT para repasar los resultados.
Mis agradecimientos a Antonio Olmo, Jorge Pastor y Antonio Robledo por el trabajo realizado, tanto para hacer el estudio como para preparar esta presentación en un formato original y distinto al típico PPT.
