Realidad Aumentada y tecnologías web: ¿y el ganador es…?
—
Lo que les quiero compartir es el resultado de una investigación sobre las tecnologías Javascript más populares para el desarrollo web, en el contexto de un challenge que adoptamos en Flux IT para aumentar el sentido de información en nuestras oficinas de La Plata y CABA, partiendo de la relación de los fluxers con los espacios y el calendario de eventos por sala; todo a través del uso de Realidad Aumentada. Tangibilizamos este desafío por medio de una aplicación que bautizamos “Pixi”.
Antes de empezar quiero decir que este no es otro artículo más (de los miles que existen en la web) para describir lo bueno y lo malo de cada tecnología, o elegir la mejor de ellas. Siempre he pensado que cada una es mejor a su manera: todo depende de para qué la vayas a usar y los gustos de cada programador.
Al sumarme al proyecto para volver la casa más techie y construir la solución que resolviera esta necesidad, uno de los desafíos era integrar la app en un framework (o librería) web que nos facilite la creación de una Aplicación Web Progresiva (o PWA) y que, a la vez, se pueda integrar fácilmente con la librería awe.js.
Además, junto al equipo, nos propusimos tomarlo como un espacio donde entrenar fuerte en una tecnología con mucho potencial y vigencia, que nos resulte innovadora y nos permita ampliar nuestros conocimientos. Así tomé el reto de investigar las tecnologías web de moda, y determinar cuál sería la mejor candidata para llevar a cabo el desarrollo.
Examinarlo todo y retener lo bueno
De acuerdo a la encuesta anual The State of JavaScript (realizada a desarrolladores de todo el mundo), las tecnologías más usadas actualmente son: React, Angular y Vue.js. A continuación les voy a contar algunos de los criterios más destacados sobre estas 3 tecnologías:
Manejo del DOM (Document Object Model):
Mientras que Angular hace uso del DOM ‘regular’, React y Vue.js usan lo que se denomina ‘DOM Virtual’, que no es otra cosa que un objeto Javascript que representa el DOM real, lo que aumenta la velocidad en la que se pueden modificar los elementos en la página web.
Modelo de componentes:
Todas cuentan con una arquitectura basada en componentes, los cuales son fáciles de crear, ya que la lógica y la UI están definidas en un solo lugar.
En el caso de Vue.js cuenta con un modelo Single File Components, que permite implementar componentes con la lógica, template y estilos en un solo archivo. React sigue un modelo similar, pero con el manejo de los estilos inline, lo que dificulta la mantenibilidad de la aplicación.
Templating:
Angular y Vue.js usan el HTML tradicional para sus componentes, y sus sintaxis son similares (Por ejemplo: v-if vs ng-if); mientras que React usa una nueva sintaxis llamada JSX, que permite escribir HTML en JavaScript.
Flexibilidad:
Todas presentan mecanismos para routing y para consumir API REST, por poner algunos ejemplos;.
Por otra parte, React y Vue.js permiten incorporar otras librerías para dichas funcionalidades, lo que te da mayor flexibilidad para armar la arquitectura de la aplicación.
Soporte para PWA:
Todas cuentan con un CLI, el cual genera un proyecto con soporte para PWA.
Integración con awe.js:
Se puede integrar awe.js fácilmente en las 3 tecnologías incluyéndose como dependencia del proyecto, como cualquier otra librería javascript. Para renderizar el contenido de awe.js (objetos 3D, animaciones, texto, etc.), al iniciar la aplicación sólo se necesita un container (‘div’), lo que facilita su uso en cualquiera de las opciones.
¿Gusto o necesidad?
Al principio mi idea era convencer al equipo de utilizar React, tecnología con la que trabajo actualmente en un importante proyecto de Media y de la que me declaro fanático. Aunque muchos digan que es compleja y difícil de aprender (ya que utiliza muchos conceptos de Javascript intermedio-avanzado), entiendo que esa es, precisamente, una buena razón para aprenderla. Incluso si en un futuro se vuelve obsoleta, no se van a arrepentir de haber aprendido a utilizarla, porque terminarán sabiendo mucho más sobre Javascript que cuando comenzaron.
A pesar de mi preferencia, decidí ir por lo nuevo y sumergirme en las bondades que Vue.js provee, teniendo en cuenta, por supuesto, las necesidades del proyecto. Fue el framework elegido, no sólo por la simplicidad del aprendizaje, sino también porque presenta muchos conceptos (mejorados) de Angular 1 y React, se puede utilizar sin ningún sistema de compilación (sólo incluyéndose en el archivo HTML), y tiene muy buena documentación y referencia de su API.
A aquellos que les interese profundizar, les comparto un artículo que describe muchas otras consideraciones importantes en la comparación de Vue con otros frameworks.
El problema con el desarrollo frontend es que el ecosistema Javascript puede ser muy volátil: las tecnologías cambian constantemente. Así que, para los que tengan ganas de aprender alguna de estas, mi sugerencia es que no le dediquen más tiempo a seguir con comparativas. Tampoco busquen la más fácil, poderosa, o popular: podría ser más conveniente aprender algo útil a largo plazo como desarrollador. Decídanse por alguna de ellas (o prueben todas) y pasen a la acción. Programen, testeen, exploren. Ese es el mejor aprendizaje.
