Data Visualization with Vue.js
The Software Development team at Jellysmack implements data acquisition applications. Acquired data are analyzed with algorithms developed by the Data Science team. Finally, the Development team implements applications to visualize information generated by algorithms.
These visualization applications must be sophisticated in order to study and understand the huge amount of information generated each day by all Jellysmack channels, and creators. These applications can only be implemented with the best development tools. Maxence Guyonvarho who is Mid-Level Developer is a strong advocate of Vue.js.
Vue.js [1] commonly referred to as Vue, is an open-source JavaScript framework. Released only 5 years ago, it is rapidly gaining momentum among the software engineering community. One of the main reasons Maxence and the rest of the Development Team at Jellysmack decided to use View is how easy it is to learn.
The documentation [2] is clear and written in many languages. There are a lot of examples and code snippets. In less than two hours Vue can be learned. In addition, it comes with Command-Line interface (CLI) tools [3] called vue-cli and vue-cli-ui, as well as a web interface to initialize and manage projects.
Installing Vue is also very easy with vue-cli in global with npm and the command line: vue init webpack my-project
Vue downloads the Webpack template. Once Webpack is launched, the project is accessible on localhost:8000
Vue has no preferred library
Another major advantage is the choice of library, if you want an ajax lib to call your api, install Axios, or VueHttp, Jquery, etc. All libraries can be easily used in the Vue ecosystem. Same for router or state management lib. The Jellysmack Devevelopment Team recommends VueX.
Readability
Understanding the code is very easy. Attributes, methods, and html syntax supersets are clearly defined. In fact, its syntax was designed for readability. For example, contrary to React with map functions to create loops of elements, in Vue a v-for attribute in html markup is sufficient (just like AngularJS). Simplicity!
Speed
According to the Vue official website [1], Vue is the fastest frontEnd framework for rendering elements. In addition, it is the smallest framework, with only 54kb. To quote Evan You, its creator “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.” [4]
The upcoming 3.0 version should even have better performance.
Typescript
Maxence advocates the use of Microsoft Typescript [5]. Decorators can also be used, and the compiler creates optimized javascript files. With vue-cli-ui, creating a new project is simple.
Shortcomings
There are a few minor negative points.
- Being relatively young, the user community has not (yet) reached the magnitude of other JavaScript libraries such as React.
- The code structure must be looked at very carefully. This is particularly important when working in a team.
In conclusion, advantages largely outweigh disadvantages. Vue.js is a powerful JavaScript framework to develop sophisticated front end applications.
References
[2] https://vuejs.org/v2/guide/
[3] https://en.wikipedia.org/wiki/Command-line_interface
[4] “Between the Wires | Evan You”. Between the Wires. 2016–11–03. Archived from the original on 2017–06–03. Retrieved 2017–08–26.
