Portal de analítica de MedUX: Información de QoE en tiempo real

La industria de tecnologías de la información y las telecomunicaciones está evolucionando a pasos agigantados, por lo que las empresas necesitan estar preparadas para adaptarse a los cambios del mercado y las expectativas de los clientes, que cada vez demandan experiencias que marquen la diferencia.

En este sentido, MedUX se adapta a las últimas tecnologías y tendencias del mercado web. Hemos lanzado un Portal de Análisis de MedUX mejorado que permite a nuestros clientes acceder a información en tiempo real sobre la Calidad de Experiencia de una manera más eficiente.

Además de un diseño innovador y atractivo y nuevas características acordes a los desafíos y objetivos futuros de MedUX, ahora permite una mejor usabilidad y mejoras notables en la eficiencia y el rendimiento web gracias a la adopción de VueJS, uno de los frameworks más innovadores en el desarrollo de sitios web.

En las siguientes líneas, nuestro desarrollador front-end, Pablo García, explica cómo, después de un par de años construyendo y manteniendo una aplicación AngularJS, en MedUX decidimos migrar la plataforma hacia un framework/biblioteca más moderno y agradable. VueJS fue el elegido. Se necesitaban agregar nuevas funciones y resolver algunos errores.
 

Una de las capas recientemente construidas en VueJS. |Fuente: MedUX

Probamos ligeramente la biblioteca ngVue, pero no era ideal para nuestra situación. Se volvió un poco complicado y realmente no se adaptaba bien a nuestro proceso de desarrollo, aunque puede ser útil para, por ejemplo, una biblioteca de componentes de interfaz de usuario. En nuestro caso, queríamos separar claramente lo que se construyó en AngularJS de lo que se iba a construir en Vue.

Así que encontramos una solución bastante simple pero poderosa: una pequeña capa en la parte superior de la aplicación que, utilizando la API del navegador y según la ruta, renderizaría la aplicación AngularJS o la de Vue. De esta manera, estamos construyendo nuevas partes de la plataforma con Vue e migrando gradualmente lo que ya se construyó en AngularJS.

Después de trabajar y probar durante unos meses, esta plataforma híbrida se ha implementado recientemente en producción y ¡funciona muy bien!

Esta explicación se divide en 6 etapas, cada una con su propia rama, por lo que es fácil seguir la explicación. Esperamos que no resulte demasiado confuso.

Etapa 1

En primer lugar, creamos una aplicación AngularJS muy básica.

Tiene 4 rutas diferentes (inicio de sesión, contenido, aterrizaje y raíz). Realmente no hay nada en ellas, pero para esta demostración está bien. Lo importante es darse cuenta de que están construidas en AngularJS.

Se utiliza Webpack para el paquete y ui-router para gestionar el enrutamiento interno. Si estás aquí, probablemente no necesitas una explicación detallada de lo que está sucediendo aquí.

Recuerda instalar npm i y npm start para servir el servidor de desarrollo y navegar por la plataforma.

Muy bien, ahora creemos una aplicación Vue muy sencilla.

Etapa 2

En la rama stage2, podemos ver que se ha creado una aplicación Vue simple con una ruta a una página /about. La parte de los contenedores de la aplicación Angular en el archivo index.html se ha comentado, dejando solo el contenedor para la aplicación Vue. Así que básicamente solo ejecutamos una aplicación Vue en este momento.

Etapa 3

Ahora comenzamos con la parte interesante del proceso. Primero, cada vez que ejecutamos nuestra aplicación, debemos verificar la ruta de la ruta y determinar si es una ruta que pertenece a nuestra aplicación AngularJS o a la de Vue.

Creemos un archivo llamado angularToVue.js y dentro, creemos una función para verificar si la ruta que queremos servir pertenece a nuestra aplicación angularJs o a Vue.

Llamamos a esta función en index.js, básicamente es lo primero que se ejecuta una vez que la aplicación se ejecuta.

Etapa 4

Bien. Ahora creemos una barra lateral para poder crear o destruir dinámicamente la aplicación Vue o AngularJS, según la ruta a la que nos dirijamos.

Como podemos ver, la barra lateral es una nueva aplicación Vue, completamente independiente de las otras dos aplicaciones. La barra lateral se rellena con el archivo menu.json. De esta manera, necesitamos hacer algo similar a lo que hacemos cuando inicializamos la aplicación cuando queremos cambiar de página. Primero, asegurémonos de dónde se encuentra esta ruta y luego iniciemos la aplicación adecuada. ¿Fácil, verdad? Comencemos en esta etapa 4 a navegar entre rutas angulares desde nuestra capa.

Etapa 5

Una vez que esto funciona, enfrentemos la etapa 5, donde finalmente navegaremos entre Vue y Angular desde fuera de la aplicación. Básicamente, estamos implementando la función changeLayer en el archivo angularToVue.js, que navegará entre diferentes rutas, independientemente de la aplicación.

Nótese que no está sucediendo nada raro, solo estamos añadiendo o eliminando divs mediante la API del navegador e iniciando y destruyendo aplicaciones.

Etapa 6

Finalmente, en la etapa 6 incluiremos otra "característica" adicional en nuestra aplicación, construida en Vue: una página de contacto.

Como podemos ver, la navegación sigue funcionando sin problemas. ¡Lo logramos!

Con la ayuda de la API del navegador y un poco más de 50 líneas de código en un servicio, podemos crear una capa que nos ayudará a navegar entre aplicaciones escritas en diferentes frameworks/bibliotecas. Nuestra experiencia en MedUX utilizando esta técnica en una plataforma realmente grande ha sido totalmente positiva.

Si quieres saber más, síguenos en Twitter  y Linkedin, suscríbete al boletín de noticias del blog de MedUX y no te pierdas nuestros próximos artículos.
 

¡No olvides seguirnos en redes sociales y suscribirte al boletín de noticias de MedUX!