En Onebox nos mueve nuestro compromiso con la innovación permanente. Una de nuestras principales preocupaciones es contar siempre con la tecnología más avanzada, para poder ofrecer el sistema de venta y distribución de entradas que mejor se adapta a las necesidades de todos nuestros clientes. En los últimos meses nuestro equipo de desarrolladores ha trabajado de manera muy intensa para migrar la tecnología del portal de ventas a AngularJS. En este artículo os contamos por qué y qué ventajas logramos con ello.
LA NECESIDAD
Onebox ha crecido mucho en poco tiempo y ser capaz de hacerlo sin perder de vista en ningún momento nuestro compromiso con la innovación es algo de lo que nos sentimos tremendamente orgullosos. Nuestro equipo ha crecido más de un 80% y todos trabajamos de manera muy intensa para que nuestra tecnología esté en constante evolución.
Además, trabajar con clientes exigentes nos obliga a buscar siempre las mejores soluciones y perseguir la manera más eficiente de hacer las cosas. Por eso, era el momento de hacer un cambio y evolucionar a una tecnología que nos aporte mayor flexibilidad y agilidad y haga nuestra plataforma más potente, personalizable, segura y escalable.
CONTEXTO
En plena era HTML5 y Web 2.0, son pocos los que discuten que Javascript y CSS3 son los reyes absolutos del desarrollo front-end. Juntos hacen que los sitios web sean mucho más dinámicos y que la experiencia de usuario mejore notablemente.
HTML es un lenguaje para definir documentos estáticos y el camino para dinamizarlos pasa irremediablemente por Javascript. Generalmente esto se consigue haciendo uso de CSS y Javascript de forma que, en función de los eventos que se produzcan en nuestra página (acciones del usuario), se actualizan, crean o eliminan determinados componentes de nuestro documento (una imagen, un párrafo, etc).
¿QUÉ ES ANGULARJS?
Trabajar con HTML y Javascript implica hacerlo con un framework (marco de trabajo). AngularJS es un framework Javascript de última generación -de código abierto y mantenido por Google- increíblemente flexible, de muy fácil lectura y desarrollo rápido. Cambia el enfoque de “dinamización” de documentos HTML estáticos mediante la vinculación de elementos de nuestro documento HTML con nuestro modelo de datos (data binding). De este modo, definimos un modelo de datos (Javascript) que se corresponderá con determinadas partes de nuestro HTML y, siempre que haya cambios en una parte, automáticamente se verán reflejados en la otra.
AngularJS permite crear aplicaciones SPA (Single-Page Applications), lo que significa que el usuario descarga todo el contenido estructural en el primer acceso a la webapp. Y esto le da una percepción más cercana a la experiencia que ofrecen las aplicaciones nativas.
Además, AngularJS es compatible con los navegadores de última generación (Chrome, Firefox, Safari, Opera, Webkits, IE9+) y se puede hacer compatible para Internet Explorer 8 o anterior mediante varios hacks.
BENEFICIOS DE DESARROLLAR CON ANGULARJS
1. Separación de la lógica de presentación de la vista, de forma que el código Javascript es independiente al código HTML por lo que podríamos rehacer la vista sin necesidad de tener que tocar ni una sola línea de nuestra lógica de negocio.
2. Facilidad a la hora de manipular los elementos del documento (DOM) y sus propiedades. Ésta es una tarea que, por norma general, es bastante tediosa y a medida que la lógica de presentación crece, suele ser complicado escribir código que pueda mantenerse con facilidad. AngularJS simplifica mucho la labor en este sentido.
3. Portabilidad: sólo es dependiente de su propia librería interna (AngularJS), por lo que otorga facilidad para la integración con cualquier otro tipo de librería según las necesidades de cada proyecto (jQuery, underscore, momentJS, hammerJS …)
4. Permite la implementación de aplicaciones web de una sola página (SPA: Single Page Apps). Uno de los principales objetivos de las SPA es conseguir una mejora importante en la experiencia de usuario: la mejora de los tiempos de espera o latencia entre vistas, ya que la página no muestra el molesto refresh de movimientos entre páginas (similar a las aplicaciones nativas).
¿QUÉ SUPONE LA IMPLEMENTACIÓN DE ANGULARJS EN ONEBOX?
La migración de los portales de venta de entradas a AngularJS ha supuesto para Onebox una nueva forma de entender las aplicaciones web como aplicaciones de una sola página (SPA). Una nueva concepción de las mismas que ahora permite desligar completamente la lógica de negocio y la persistencia de los datos de la aplicación respecto de cómo este modelo de datos es presentado al usuario, su orden, estructura, interacción y apariencia.
Esto posibilita que el cliente web tenga una arquitectura propia e independiente y un ciclo de desarrollo y mantenimiento desligado en gran parte del resto de la plataforma.
Tener una arquitectura independiente y modular permite escalar el producto de forma sencilla, facilitando la incorporación de nuevas secciones o funcionalidades. De este modo, muchos de los elementos del portal pueden ser considerados como componentes o autocontenidos, lo que brinda la facilidad para añadir nuevos componentes, modificar los existentes o reemplazarlos por otros.
Cuando pensamos en las acciones relacionadas con las subidas de producto o actualización de la plataforma, también hay importantes beneficios. Si los cambios en la plataforma no tienen afectación en el modelo de datos ofrecido por el servidor, estos siguen un flujo de trabajo más ágil al no requerir interrupciones en el servicio para ser validados por el control de calidad (Quality Assurance) y posteriormente puestos en producción.
En cuanto a los cambios que percibirán los usuarios, podemos remarcar que con este cliente web optimizado para una arquitectura SPA los usuarios pueden acceder desde cualquier dispositivo que esté dotado de un navegador web actualizado (smartphone, tablet, ordenador) y disfrutar de una experiencia más fluida, sin cortes en la navegación y muy similar a la que se tiene cuando se instala una app nativa en cualquiera de estos dispositivos. De hecho, cualquier usuario que acceda al portal desde un dispositivo con iOS, Android o Windows 8+ tiene la posibilidad de crear un shortcut a su escritorio y acceder posteriormente al portal como si de una app más se tratara.
AngularJS nos ha permitido hacer realidad la transformación de nuestra plataforma a un modelo SPA. Convirtiendo Onebox en una solución más modular, escalable, segura, personalizable y con un mejor rendimiento. Además de aportar una notable mejora en la experiencia de usuario. Nuestro equipo sigue innovando, porque tú necesitas dar el mejor servicio a tus clientes y nosotros te ofrecemos la tecnología más avanzada para conseguirlo.
Joan Marc Homedes trabaja como Frontend Engineer en Onebox. Es Ingeniero Técnico en Informática de Gestión por la Universidad Politécnica de Cataluña y ha sido uno de los principales impulsores del proyecto de migración del portal a AngularJS en Onebox. Antes de llegar a la compañía en marzo de 2014, trabajó como Frontend Developer en Scytl, Agilogy y Ofitec.
