In this post we are going to see Vue.JS, a powerful and lightweight JavaScript framework designed for building web interfaces, especially in SPA (Single Page App) applications.
Vue.JS stands out for its speed, simplicity and lightness. In fact, it is so lightweight that it is suitable even for IoT devices like ESP8266 and ESP32.
What is the interest in 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 this below.
Why Vue.JS?
Let’s start with a little 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 its DOM manipulation capabilities.
However, jQuery involves an imperative approach which, among several disadvantages, makes it difficult to create MVC, MVVM, MV-(whatever) design patterns.
In substitution/evolution several developments have emerged that allow a declarative approach, focused on creating “reactive” interfaces in which the 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 in popularity, which in its first version allowed easily creating SPA Web interfaces. Many programmers became fans of AngularJS as soon as it was released. It was like WPF brought to the web, you felt right at home.
However, the subsequent versions (Angular 2, 4, and 5), although they have improved many aspects, have also been complicating the framework more and more to the point that many of us wonder if so much paraphernalia is necessary for small and medium developments.
Combined with its backward compatibility issues, having to use multiple programming languages, multiple dependencies on libraries, and even for a simple test needing NodeJs, transcompiling, and a 200Mb template, this has led many of its former defenders to 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 that using it makes you fall in love again.
It was created by Evan You in February 2014, although it now has collaborations from multiple users on GitHub. In the words of its creator Vue.JS was created after working with AngularJS by taking the parts that seemed most useful to him.
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 in Angular, or even in WPF. In addition, it has extensive documentation, which facilitates learning.
The structure of Vue.JS is based on rendering functions, declarative interfaces, encapsulation in components, and routing. But it is designed to be retro-compatible and incrementally progressive, meaning that we do not have to use all the functions from the very beginning, but we can adapt our projects gradually.
Trying Vue.JS
Let’s do a small project to test how easy it is to integrate Vue.JS into a project. On our favorite web server, we create two files.
On the one hand, an index.html file that contains 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, in which we use a div with the id=“app”, which associates with the web application we will create in the JavaScript file, and an enumeration todo-item that will display a list of components that we will define in the ViewModel. Finally, we have loaded Vue.JS from the CDN, and the app.js file that we will create next.
On the other hand, the second file that 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 called simply App. Inside it, we only have in ‘data’ a collection of ‘items’ that contain 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 the following. We see that, indeed, we have listed all the elements that we had in ‘data’. Each element displays its ‘text’ property and, if the checkbox of the element is checked, it also displays the ‘hidden’ property.
Conclusion
This is how easy it is to have a working app in Vue.JS. It is only an extremely simple example, but it is refreshing to see how quick it is to get an app working 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 using 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/.