For most people building a new front end application nowadays, the choice of framework/library seems to come down to either Angular or React for the most part. Often times, people don’t give enough love to Vue.js. So, I want to share some light on Vue.js and my personal experience working with Vue.js for a production application. Together, we'll try to answer the question: Is Vue.js the right framework for you?
Note: I’m not trying to say Vue.js is better than React, Angular, or even any other front end frameworks. This is just my personal experience using Vue.js in my project.
For those of you new to Vue.js or never even heard of Vue.js, Vue.js is a JavaScript front end framework that was initially released in 2014 and was developed by Evan You. From that time on, Vue.js has been gaining large popularity in a very short time amongst many front end developers/engineers. Some of the notable companies that utilize Vue.js include Gitlab, Alibaba, Buzzfeed, and more.
What’s so good about Vue.js?
Good question! There are several reasons. Of many reasons, these 4 particularly stand out to me from my personal experience.
- Lightweight
- Low Complexity
- Virtual DOM
- Low Learning Curve (Beginner friendly)
Let’s now get into the specifics of each of these points.
Lightweight
One of the notable advantages of using Vue.js in production applications or even in a personal projects is the that it’s relatively lightweight. Let’s take a look at the download space of different front end frameworks/libraries:
Being lightweight can be useful especially building a simple application quickly. My personal use case was to build the UI for an internal tool for the engineering team.
Low Complexity
This happens to be one of my favorite parts of Vue.js, because after working with many applications built with React, the codebase can often get very complex once you add state management in the mix as the application becomes larger. I noticed that one of the reasons React applications can get complex is the fact that JSX templates, lifecycle methods, other methods all exist in the same object. This often makes it hard to follow the logic flow very difficult. So, let’s look at how Vue.js code looks like:
Notice that the HTML template, necessary methods, and stylesheet are all separate and makes it very easy to know exactly which portion of the code to look. This can mean that the codebase will be relatively easy to maintain without having to increase the complexity of the code every time the code is updated.
Virtual DOM
Just like React, Vue.js implements the usage of Virtual DOM to manipulate/render the view. By using Virtual DOM, the UI will perform better by not rendering Real DOM every time there is a change required and only rendering the portion(s) differences between the Virtual DOM and Real DOM.
Low Learning Curve
Consider this scenario that I’m sure many people go through.
Most people getting into web development will most likely learn the basics of the 3 technologies: HTML, CSS, and JavaScript. Imagine, as a beginner, having to learn about this new thing called JSX instead of HTML. Although JSX looks similar to HTML, there are certainly number of differences that sets JSX apart from HTML and this isn’t the kind learning necessary with Vue.js.
As you can see, Vue.js uses the same tag name as HTML which makes it easier to transfer the knowledge from HTML to Vue.js. Moreover, the modular structure of the code can be very helpful in understanding the different moving parts of a Vue.js component.
For those of you familiar with React, learning Vue.js will be a piece of cake because there are a lot of similarities between the two.
What’s bad about Vue.js?
As much as I would like to say Vue.js is just simply awesome, there are few disadvantages just like any framework/library. Here are few disadvantages I have noticed about Vue.js:
- Smaller Community
- English-Written Resource
- Employment Opportunities
One of the issues I had early when working on a Vue.js project was that sometimes it is harder to find support for very specific issue that I was having in my application. This is due to the fact that Vue.js community is still not as large as Angular or React, which makes sense.
Another issue that I found was that when I thought I found the help, the responses were often written in Chinese. Just when I thought I was saved, I got baited. Later on, I found out Vue.js is more popular in Asian countries than English speaking countries like US.
Lastly, at the current state, not many places use Vue.js, so it may be difficult to find employment with expertise in Vue.js. therefore, I would recommend using Vue.js for either personal projects, smaller scale UI applications, or for fun to give you appkication a little flavor with a light UI in relatively short time.
Now, it’s time to answer the question: Is Vue.js the right framework for you?
Tell us how the experience was with Vue.js for you ☺