Impressions about Vue.js by doing a dashboard

I got to know Vue.js about two months ago and was greatly impressed by the quality of its guide and API. Imagine. There is one guy alone maintaining the framework and he manages to keep an up-to-date documentation. Since then, he has got to search for more people, and the team is increasing in size, but very slowly. So, seduced by the way the documentation is clearly written and easy to understand, I decided to try Vue.js on a teamwork I had to do for a company as part of my studies. I had to develop a dashboard displaying data and charts when clicking on points on a map. Before the dashboard I first had to process 100GB of data to get only the interesting information and to aggregate this information into one simple PostgreSQL database (the final data was no more than 25MB afterwards). This was also an incredible work, but I won't talk about it in this post.

So, the first thing to say is that I didn't master any front-end framework when choosing Vue.js. I already used AngularJS during some months on 2-3 projects, but i clearly don't understand everything. It's a little bit "magic". I did use ReactJS too during one month. Again, some aspects are still obscure and I find the framework very complex, even more when combined with Redux. Finally, I just know Vanilla Javascript quite good because I've been working on Qowala for one year now.

Vue.js logo

Well, my previous experiences with other frameworks sure helped me to understand Vue.js. First, the way VueJS allows data-bindings is very similar to how AngularJS does and this is something I like from AngularJS.

<div id="app">  
  {{ message }}  
</div>

The component-oriented aspect of Vue.js is also very similar to how ReactJS is working (and also Qowala in some primitive form :D), again it helped me to learn to use Vue.js very quickly.

The project for which I used Vue.js began in February, but because of some issues on the database it was given and the time for fixes to come, my team and I could finally really work on it only one month among the three planned. At the end, after the business, design and the database work, I really coded the interface in about four days. According to the WakaTime extension I'm using in Neovim, I logged in 31 hours working on the interface the last 7 days to which we can add at least 3 more hours which I spent before this last week (I'm not a premium user so i only have the last 7 days statistics, but I consider becoming one).

To bootstrap the front-end, I used the Vue.jsCLI to create a Webpack-simple template in my folder, and I already had a nice structure to write my files. It allowed me to benefit of the hot-reload and to write .vue files (one file per component which contains HTML, CSS and Javascript), but not to have too much with unit-testing which I knew I would never have time to do. That's really a good point with Vue.js: it is easy to start with this new framework and no need for a tutorial, only a well- structured guide is sufficient to begin with. What I mean by tutorial is a step-by-step guide explaining things with a project example like the one for AngularJS. In fact, if you compare the homepages from Vue.js, React and AngularJS2, you will find out that the first is very straightforward and simple comparied to the two others which are more verbose and multiplying examples. It already gives the spirit of each framework.

After having bootstrapped, I rapidly got to add the vue-router module to be able to manage several pages and after setup the API, I also added vue-resource for making requests to it. That's everything I needed concerning my front-end framework. Once I could do requests to the API, I needed a more specific library which is Highcharts to put the data into charts. And finally for setting points on a map I used Mapbox. During all the process of developing and adding these dependencies, I never felt it was too much (and indeed it is not) and always knew exactly why I was adding it. One of my biggest fears when using frameworks is to continuously add some module because it may improve one aspect of the framework, but in this case, and considering what was needed for this project, i really had no issue with this.

Well, I'm really impressed by Vue.js and how simple it is. I like the Zen ofPython, and you may realize that Vue.js follows it in some way as it is simple and explicit. No magic. Only what you expect it to do. And if you have an issue, you are very likely to see that Evan You, the developer, has already talked about it in its guide.

I can only recommend you to try Vue.js yourself and make the community grow.This one is vastly expanding even though there are not much resources other than the official guide and Stack Overflow. However, I think these resources are sufficient and prove that Vue.js is really simple and easy to use.