7 things you should know about Vue.js

Get to know the rising star

Vue.js is a popular JavaScript framework that has seen a lot of success in the past couple of years. While it has gotten a lot of traction in the international development world, it is still gaining traction in the west and is not yet a household name. But I think it should be! That’s why I put together 7 things you should know about Vue.js.

 1) Its easy to learn

The first thing a newcomer to Vue.js will notice is how easy it is to pick up. Getting started with Vue only requires a few lines of JavaScript and some HTML. The technologies and concepts required to get started offer a very low barrier to entry. You can use a compiler and advanced JavaScript features (and there is an official CLI) but Vue does not enforce the use of a compiler whatsoever.  All you need to know is a few basic web technologies and you will be making awesome stuff in no time.

2) It uses a virtual DOM

You have likely heard of the concept of a virtual DOM. If you haven’t, a virtual DOM is essentially an abstract version of the real HTML DOM represented as a JavaScript object. Working directly with the DOM is easy but its not necessarily fast, especially if you have to traverse a large set of markup to make a change. Virtual DOMs allow for speedier updates to the UI.  Vue’s virtual DOM implementation (a fork of snabdom)  is very lightweight and adds very little overhead to the overall size of Vue.

3) Its fast

Like most modern front-end JavaScript frameworks these days, Vue is fast. ‘How fast?’, you ask. This article on medium and the official docs have detailed write ups of Vue’s performance compared to other popular front end frameworks like React and Angular 2. Vue gets its speed primarily by how it utilizes the virtual DOM to make changes to the UI. For example, in React, when a component requires an update, the component and any child components get updated. This can be troublesome if there are nested components and a change occurs at the root. All of the sub-components will get redrawn. When a Vue component requires an update, instead of repainting an entire component (and subsequent child components), only the changed elements/data properties get updated, thus minimizing a potentially expensive UI update operation.

4) It uses components

Get ready for some buzz words. Vue provides reactive components as a key feature of the library. You can think of components like custom HTML elements that a Vue instance attaches data and behavior to. Components can be nested within other components and reused throughout your application. There are also several ways to create components including using the component constructor: Vue.component() or the use of the <template> tag and single file components. The first two options do not require any kind of build/transpilation step in your development process but the third does. Single file components (housed in .vue files) offer several benefits including component-scoped CSS and the ability to use ES6+ features.

5) There is an official CLI to get you up and running

While the use of a compiler is completely optional, a CLI is offered by the Vue team to help get developers up and running quickly with a modern development environment. The Vue CLI comes with different template options including variations of Webpack and Browserify. The Vue CLI is great for quickly scaffolding applications without any extra boilerplate configuration.

6) There is a thriving community

At the time of writing this, Vue has over 49k stars on github and still gaining traction.  There is also a popular forum, international conference and plenty of resources related to Vue. The creator of Vue.js, Evan You is also very active in the Vue community.

7) Its battle proven

In regards to enterprise usage, Vue is popular abroad with big names in China such as Baidu and Alibaba that use Vue in different capacities. In the western world Gitlab, Laravel and recently Codeship have also adopted Vue for several projects. Success in the modern JavaScript world can be fleeting but so far we haven’t seen a plateau or drop in the popularity of Vue.

Honorable mention: Optional use of JSX

To be honest, I am not a fan of JSX. It was one of the things that turned me off from React. But several good developers I know do enjoy using JSX and are completely content with how pervasive the use of JSX is in the React community. Before I continue, let me point out that JSX is optional in React and the use of templates is available as well. If you are unfamiliar with JSX, it is basically an XML/HTML syntax used in JavaScript functions to render out markup. And while even Vue’s official documentation recommends the use of templates in Vue, I wanted to point out that render functions and JSX syntax (with the help of a transpiler) are available in case they are needed.

Hopefully these 7 facts have helped you get a better idea of what Vue is, its position in the modern JavaScript ecosystem and where its going in the future.

  • Wilson

    Hey Chris,

    Thanks for mentioning us over at Codeship, would you mind linking back to our homepage?

    • Chris

      Sure thing. This one slipped past me

      • Wilson

        Thank you!

  • sudeep

    thanks ……..