MedUX ANALYTICS PORTAL: an innovative efficient way to access real-time QoE information

The information technology and telecommunications industry is evolving by leaps and bounds, so businesses need to be prepared to adapt to the market changes and client's expectations, who increasingly demands experiences that will make a difference.

In this regard, MedUX adapts to the latest web-market technologies and trends. We have launched an enhanced MedUX ANALYTICS PORTAL to allow our clients access real-time Quality of Experience information in a more efficient way.

In addition to an innovative and attractive Look and Feel and new features according to MedUX forthcoming challenges and goals, it now allows to experience better usability and remarkable improvements in efficiency and web performance thanks to the adoption of VueJS, one of the most innovative frameworks in website development. 

In the following lines, our front-end developer Pablo García explains how, after a couple of years of building and maintaining an AngularJS app, in MedUX we decided to migrate the platform towards a more modern and enjoyable framework/library. VueJS was the chosen one. New features needed to be added and some bugs needed to be taken care of.

One of the layers recently built in VueJS. |Source: MedUX

We tried slightly the library ngVue, but it wasn’t ideal for our situation. It got a bit dirty and really didn’t matched our development process that well, although it can be useful for, for example, a UI Components library. In our case, we wanted to clearly separate what was build in AngularJs from what was about to be built in Vue.

So we came up with a pretty simple yet powerful solution: A little layer on the very top of the application that, using the browser API, and based on the route, would render either the AngularJS app or the Vue one. That way, we are building new parts of the platform with Vue, and incrementally migrating what was already built in AngularJS.

After some months working and trying, this hybrid platform has been deployed recently on production, and its working pretty well!

This explanation is divided in 6 stages, each stage has its own branch, so its easy to follow along the explanation. Hopefully it won’t get much confusing.

Stage 1

First of all, we created a very basic AngularJS app.

It has 4 different routes (login, content, landing and root). Really there is nothing in them, but for this demo it’s alright. What it is important is realizing that they are built in AngularJS.

It is using Webpack for the bundle and ui-router to manage the inner routing. If you are here, probably there is no need to explain in detail what’s going on here.

Remember to npm i and npm start to serve the development server and navigate around the platform.

Alright, so now let’s create a very simple Vue App.

Stage 2

On branch stage2, we can see that a simple Vue app has been created with a route to an /about page. The part of the angular app div containers in the index.html file has been commented, leaving only the container for the Vue application. So basically just running a Vuejs app at the moment.

Stage 3

Now we begin with the interesting part of the process. First, everytime we run our app we have to check the path of the route and determine wether is a route that belongs to our AngularJS app or to Vue.

Let’s create a file called angularToVue.js, and inside, create a function to check wether the route we want to serve belongs to our angularJs or Vue.

We call this function in index.js, basically is the first thing that gets executed once the app runs.

Stage 4

Good. Now let’s create a sidebar so we can dynamically create and/or destroy either Vue or AngularJS app, depending of the route we are heading to.

As we can see, the sidebar is a new Vue App, completely de attached from the other two applications. Sidebar is populated with menu.json file. That way we need to do something similar to what we do when initing the app when we want to change our page. First, ensure where is this route, then bootstrap the proper application. Easy, right? Let’s start in this stage 4 to navigate between angular routes from our layer.

Stage 5

Once we have this working, let’s face stage 5, where we eventually navigate among Vue and Angular from outside of the app. Basically, we are implementing the changeLayer function in angularToVue.js file, that will navigate among different routes, independently of the application.

Notice that nothing weird is happening, appending / deleting divs using browser API, and bootstraping and destroying applications.

Stage 6

Finally in stage 6 we will include another extra “feature” to our app, built in Vue: a contact page.

As we can see, navigation keeps working smoothly. We made it!

With the help of the browser API, and a bit more of 50 lines of code in a service, we can create a layer that will help you navigate among applications written in different frameworks/libraries. Our experience in MedUX using this technique in a really large platform has been totally positive.

If you want to know more follow us on Twitter and Linkedin, subscribe to MedUX blog’s newsletter and don’t miss our following articles.

Don’t forget to follow us on social networks and subscribe to MedUX newsletter!