10 Reasons for the Popularity of Vue.js
Angular and React are considered giants as front-end frameworks/libraries. Angular is powered by Google and React is powered by Facebook. But there is a framework called Vue.js which was created by one man, Evan You, and has gained great popularity in the recent years.
An interesting graph is the number of Github stars over time. When React.js came out it gained massive popularity. Angular rewrote their popular AngularJs library, and even though Angular 2+ is a great framework, Reacts popularity just went through the roof.
Interesting enough though. About a year later, Vue came out. And as you see on the graph they had a huge upswing and even recently went past the mighty React.
Here we can see a graph from Google Trends which shows the last five years worldwide:
So what is it about Vue.js that makes this library so popular? I think it is because of the following reasons:
1. Easy to learn
One of the major reason I think developers are embracing Vue.js is how easy it is to get started with. Vue embraces traditional web technologies like HTML, CSS, and JavaScript. No need to learn JSX (ReactJS) or TypeScript (Angular). So if your team has basic web development skill but has little or no experience with frameworks, then Vue.js might be a viable option for getting your team up and running fast.
There are several ways to set up your Vue project. The simplest way is to just reference the Vue js file in your HTML page and you are ready to go. Here is an example of how easy it is to set up a simple “Hello World” application:
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>First and foremost, you need to include the link to the vue.js file:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>The easiest way is to use a CDN as we have done here. That way we don’t have to download the script file and include it in our project.
Next is the code segment:
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>Here we are creating a new Vue instance where we pass in a JavaScript object.
The el key is aiming at a location in our HTML. Here we defined #app. The # means we are looking for an id attribute. So in other words when we locate a place in our HTML with id=”app”, then all the HTML inside this location will have an effect on our Vue component.
The data key is where we store our data which can be displayed in the HTML.
Then we have the template segment
<div id="app">
{{ message }}
</div>We can see the id-attribute which we targeted in the code segment. So all that is inside this div-element can be manipulated with Vue. We have double curly braces with message inside it. The double curly braces are interpreted by Vue that it should take the value from the message key we had specified and enter it in its place.
The resulting webpage will then show the text “Hello World”.
2. Great integration
It says from the official documentation that Vue is a progressive framework for building user interfaces. But what does that mean? Well, it means it is easy to integrate with other projects or libraries.
For instance, Angular is a full flexed framework with a lot of “plumbing”. It is meant to be used as a standalone web application and not a part of another project which uses, let’s say JQuery.
Vue, however, just have a small-sized js file which can be included in your project. The core library contains the most basic features for manipulating the GUI. That way, if you have an old-school application where you are manipulating the DOM with JavaScript/JQuery, you can instead include the core Vue library and handling the user interface in a more modern and effective way.
This way you don’t have to redo the whole project from the ground up, and you get the benefits of Vue with faster development and performance.
3. Lightweight
Vue has the smallest file size of all the major front-end frameworks/libraries. The core function is to create user interfaces, but you can expand functionality with features like routers and state management by adding more libraries and use it as a full-blown spa framework.
What’s nice is that you might just want to create a simple app which is shown on one page, you don’t have to include a router, etc. Just include what you need and load as little as possible.
4. Performance
All the major front-end frameworks have very good performance and Vue is no exception. On the right, you can see a benchmark from Stefan Krause’s website.
With a library size of just about 23kb, the library has a short startup time. We can also see Vue is doing very well in working with a large number of rows in tables.
Reactivity
Like ReactJS, Vue is also reactive. This means that when data is changed in the Vue Instance, Vue will automatically know and react to the changes by updating the DOM. This happens without any manual coding on your part.
Vue is using a lightweight virtual DOM implementation which handles these automatic changes in a very effective way. Everything is tracked during rendering, and Vue will only change the element in question, which is having a great effect on the performance.
5. Documentation
Vue is known for having a great documentation. The API’s are well documented and everything is laid out clear and concise.
The getting started guide is easy to follow and you will be able to create an example app in very few steps. It also is supplemented with small bite-sized videos demonstrating the various principles.
In addition to having a simple getting started guide, they also have a thorough explanation of how the reactivity system works and also a detailed description of components. Overall it is a great resource you can reference often.
6. Command line interface
As with all libraries/frameworks with respect for themselves, Vue also has it own command line interface (CLI). For those who aren’t familiar with CLI’s, it is used to set up a project with the command line (as the name suggests).
Vues CLI will do things like:
- Setting up Webpack.
- Compile CSS preprocessors to regular CSS.
- Sets up unit testing.
- Creates a local server for your app.
- Hot reloading and much more.
With version 3 of Vues CLI, you have more options for customizing your needs. First, you need to install the CLI globally with NPM
npm install -g @vue/cliThen you use the create command to create a new project.
vue create test-appHere you get two options. You can choose the default which is a setup with babel and eslint.
If you choose the manually select features, you can select from these features:
After that, you can choose which linter/formatter config to use:
then, you can choose between following lint features:
Lastly, you can choose where to place your config settings.
The CLI will then download all the necessary packages needed. It will take a couple of minutes before the project is finished setting up.
To start your app on a local server, you need to cd into your project and type the following:
npm run serveYour server will start up at http://localhost:8080/.
7. The best of Angular and React
The creator of Vue, Evan You worked at Google earlier where he was involved in AngularJS. He saw some shortcomings in AngularJS and wanted to create something simpler and less opinionated. That’s when Vue got created.
Similarities with Angular:
- The templating system in Vue. Both use double curly braces in the HTML to display data from the logic.
- Both use directives. Directives are behaviors which you can declare in the HTML. For instance, you can generate a list by iterating through an array (Vue use v-for and Angular use *ngFor), or you can have an if statement to show or remove elements in your HTML (Vue uses v-if and Angular use *ngIf).
- Two-way data binding. This feature is one of the reasons AngularJS got so popular when it first came out, it was demonstrated endlessly in lectures and youtube videos. Why was this a big deal? Well, for creating this kind of feature in vanilla JavaScript or JQuery, you would have to create a lot of code, but in AngularJS, you hardly wrote any code. Two-way data binding is when a user changes, for example, the text of an input field, the data in the logic would be updated and the value in the HTML template would change at the same time.
- Filters. You can add filters to markups. This is where you have certain data as inputs and the filters will process these data.
This is where the similarities end with Angular. In fact, Vue has more similarities with React. Angular is a framework where you have all you need to create a single page application. React and Vue, on the other hand, is a library where you start with the core feature and then you build on that if you need to.
Angular, unlike React and Vue, is more opinionated. This means Angular has a strong opinion on how the structure of the application should be. This is not a bad thing since this forces developers to write good, standardized code.
However, this makes Angular less flexible than React and Vue. For instance, you are (more or less) forced to use TypeScript. For me personally, I like TypeScript, but not everybody does.
Similarities with React:
- Both React and Vue use a Virtual DOM. It is a lightweight abstraction layer from the DOM. React and Vue is using a virtual DOM to manipulate the view. This is more effective and increases performance compared to manipulating the real DOM.
- Both focus on the view. This means both libraries have a core set of features for handling the user interface. To add things like state management, you need to add an additional library. Vue has a router and a state management library which the Vue team has created. React on the other hand depends more on third-party libraries.
Unlike Angular, React is on the other end and is very little opinionated. This means they have many different libraries and you can do things in a lot of different ways. This can make things kinda complicated. If you are in a team where everyone has their own way of doing things, it will be a challenge to maintain each other code.
8. Single file component
In vanilla JavaScript apps or even in frameworks like Angular and JQuery, you will usually split your HTML, JavaScript, and CSS into three different files. You can have script tags in your HTML and inline styling within your HTML, but this is considered bad practice.
If you are developing a Vue app without a build tool, you will most likely split your HTML. JavaScript, and CSS too.
However, if you are using the Vue CLI tool to create a new app, the default behavior is that you will have a Vue-file for each component. This Vue-file will contain the markup, JavaScript, and CSS in the same file! A Vue file will look something like this:
<template>
<div class="hello">
<h3>{{msg}}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Hello World',
}
},
methods: {
printMsg() {
console.log("message", this.msg);
},
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
</style>This is a simplified example of the component which gets generated when we are creating a new Vue app using the CLI. Notice we have three key elements:
- <template>
- <script>
- <style>
It is easy to imagine what these three elements will contain. The template element will contain all the markdown or the HTML. The script element will contain all the logic or the JavaScript. And lastly, the style element will contain the CSS.
But how does this work? Browsers don’t understand Vue-files right?
With the CLI project which uses webpack, there is a tool called the Vue loader. This tool will take the code and markup from the different sections, do some magic and generate a final output with standard HTML and ES5 JavaScript.
What is also cool is that you can do something like this to the <style> element:
<style lang="sass">
/* Now you can write SASS!! */
</style>By simply applying lang=”sass”, you can then write SASS instead of regular CSS.
Didn’t you say it was bad practice to have the logic, markup, and styling in the same file?
Now that we have frameworks like Angular, React and Vue, which all supports using components to develop your apps, the game has changed slightly. While in the “old” days, vanilla JavaScript and JQuery applications usually would end up with huge HTML files and gigantic JavaScript-files, it would be a bad Idea to combine those.
Now you should split up your page into many small components, and these components can have other small components. Your component should then have just a few lines of markup, logic, and CSS.
In my experience working with Angular, I always jump between the markup-file, logic-file, and styling-file of a component several times. This gets quite annoying since I often have several other component-files open in my tabs, where every component has three different files which I often mix together.
I feel it is very refreshing to stay in one file while I am creating the component with fewer files in the project.
9. Hot reloading
First I want to say that hot reloading isn’t something unique to Vue. In fact, hot reloading was made possible using a webpack plugin called Hot Module Replacement. In other words, Angular and React can both utilize hot reloading.
If you use the Vue CLI, hot reloading will just work out of the box. This means you can change the styling, markup and the logic and the changes will automatically appear on the screen.
What is the difference between hot reloading and live reloading?
Live reloading will reload the entire page everytime you make a change, while hot reloading will keep the state of the page while displaying the changes.
This will improve productivity in a huge way since you don’t need to wait for the entire page to reload. You can just make changes in your editor and you will see the result live within a second.
Since the page is keeping its state, you don’t need to recreate everything every time you do a change. Let’s say you have a form with multiple fields. Maybe you want to tweak the CSS for validation feedback after filling out the fields in an invalid way. Since you keep the state, you can tweak the CSS without refilling the form every time.
10. Devtools
There is a Chrome extension called Vue.js devtools.
This extension has some useful features while developing your app, such as:
- Live editing. You get a visual representation of the component tree, and you can inspect every component and change the data in real time.
- Time travel. The ability to go back to a previous state.
- Track custom events
Conclusion
First off, I want to say that React, Angular and Vue are all excellent frameworks. These are frameworks which makes it easy and fun to create front-end web apps.
Vue has gained a rise in popularity which we seldom have seen. I have tried to outline the things that make Vue so popular in this post. Hopefully, this will inspire you to check this framework out more closely.
It will be interesting to see how far Vue will go and how popular it will eventually get. Time will show I guess.
