In this post, we are going to look at Vue.JS, a powerful and lightweight JavaScript framework designed to build web interfaces, especially for SPA (Single Page App) applications.
Vue.JS stands out for its speed, simplicity, and lightness. In fact, it is so lightweight that it is even suitable for IoT devices like the ESP8266 and ESP32.
What’s interesting about Vue.JS? Why is it interesting compared to other options like Angular, React, or Knockout? What does Vue.JS have that makes it so special? We answer these questions below.
Why Vue.JS?
Let’s start with a bit of history, remembering jQuery. We all know this JavaScript library and the contribution it has made to the design of dynamic web interfaces thanks, among other things, to its selectors and DOM manipulation capabilities.
However, jQuery represents an imperative approach which, among several disadvantages, makes it difficult to create MVC, MVVM, MV-(whatever) design patterns.
As a replacement/evolution, several developments have emerged that allow a declarative approach, focused on creating “reactive” interfaces where binding with the model is done through bindings.
This is something that will sound familiar to Windows application developers, as we had a similar transition when moving from WinForms to WPF and UWP.
Among this new generation of declarative frameworks, AngularJS stands out for its popularity, which in its first version allowed creating simple SPA Web interfaces easily. Many programmers became fans of AngularJS as soon as it came out. It was like WPF brought to the web, you felt right at home.
However, the later versions (Angular 2, 4, and 5), while improving many aspects, have also been making the framework more and more complicated to the point where many of us wonder if so much paraphernalia is necessary for small and medium-sized developments.
Coupled with its backward compatibility issues, the need to use several programming languages, multiple dependencies with libraries, and the fact that even for a simple test you need NodeJs, transpiling, and a 200MB template, this has made many of its former defenders consider alternatives like React or Knockout.
Vue.JS as an Alternative
This is where Vue.JS comes in, a JavaScript framework that in many ways recovers the spirit of the original AngularJS. And the truth is, using it makes you fall in love again.
It was created by Evan You in February 2014, although it now has contributions from multiple users on Github. In the words of its creator, Vue.JS was created after working with AngularJS, taking the parts that seemed most useful.
Vue.JS is a lightweight framework; to use it in a project we need to load a single 20kB file. The learning curve is very smooth, especially if you have experience with Angular, or even WPF. Furthermore, it has extensive documentation that facilitates learning.
Vue.JS’s structure is based on render functions, declarative interfaces, component encapsulation, and routing. But it is designed to be backward compatible and progressively incremental, meaning we don’t have to use all the features from the start, but can adapt our projects gradually.
Testing Vue.JS
Let’s do a small project to test how easy it is to integrate Vue.JS into a project. In our favorite web server, we create two files.
On one hand, an index.html file containing the following:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Associate the App we created in Vue.JS -->
<div id="app">
<ol>
<!-- Use the component we have defined in Vue.JS -->
<todo-item v-for="item in myList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<!-- This is the only line needed to load Vue.JS into our project -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Load the file containing our Vue.JS App -->
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
Which only contains a blank web page, where we use a div with id=“app”, which associates with the web application we will create in the JavaScript file, and a todo-item enumeration that will display a list of components we will define in the ViewModel. Finally, we have loaded Vue.JS from the CDN, and the app.js file we will create next.
On the other hand, the second file which we will call app.js, with this content:
// Definition of a component
Vue.component('todo-item', {
props: ['todo'],
template: '<li> {{ todo.text }} \
<input type="checkbox" id="checkbox" v-model="todo.value"> \
<span v-if="todo.value">{{ todo.hidden }}</span> \
</li>'
})
// Definition of our example app
var app = new Vue({
el: '#app',
data: {
myList: [
{ id: 0, text: 'Item1', hidden: 'Hidden1' },
{ id: 1, text: 'Item2', hidden: 'Hidden2' },
{ id: 2, text: 'Item3', hidden: 'Hidden3' }
]
}
})
In this file, we declare a small Vue.JS application simply called App. Inside, in ‘data’, we only have a collection of ‘items’ containing a text (ItemN) and a hidden text (HiddenN).
On the other hand, we have defined a template, which contains the html code with which we are going to represent the previous Items. The view consists of a checkbox, the text, and the hidden text.
The result is as follows. We see that, indeed, we have listed all the elements we had in ‘data’. Each element displays its ‘text’ property and, if the element’s checkbox is checked, it also displays the ‘hidden’ property.
Conclusion
This is how simple it is to have an App running in Vue.JS. It’s just an extremely simple example, but it’s refreshing to see how quickly you can get an App running in Vue.JS. Especially if we compare it, for example, with Angular5.
Of course, Vue.JS is capable of much more and has many more features. In this example, we have barely scratched the surface of this great framework and introduced its most basic syntax.
If you want to delve deeper into the use of Vue.JS, here is a link to its complete documentation and its examples section where you can see very interesting projects.
Finally, note that Vue.JS is Open Source distributed under the MIT license. If you want to try it, it is available at https://vuejs.org/.
