Vue.js

Vue.js

Original author(s)	Evan You
Initial release	February 2014 (2014-02)
Stable release	2.2.2 / March 9, 2017 (2017-03-09)
Repository	github.com/vuejs/core
Written in	JavaScript
Platform	Cross-platform
Size	76 KB production 240 KB development
Type	JavaScript library
License	MIT License
Website	vuejs.org

Vue.js (commonly referred to as Vue; pronounced /vjuː/, like view) is an open-source progressive JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Also, Vue is a capable web application framework that is able to power advanced single-page applications.

According to a 2016 JavaScript survey, Vue has an 89% developer satisfaction rating. Vue accumulates around 80 GitHub stars per day, and is the 14th most starred project on GitHub of all time.

Overview

Vue.js is a front-end framework that is simple to use yet powerful in nature.

The project focuses on making some of the best ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable, so that any developer can quickly pick it up and enjoy the productivity boost when working with modern, interactive web interfaces.

It is also designed to be progressively adoptable: Vue.js core is a drop-in library that can be used in existing pages, you can use it to add simple interactivity, or to replace jQuery entirely. On the other hand, the project also includes libraries and tools that supports building large and ambitious single page applications.

History

Vue was created by Evan You after working for Google on AngularJS. You later summed up his thought process, "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?"

Vue was originally released in February 2014 by Evan You. The project was posted on Hacker News, Echo JS, and the /r/javascript subreddit the day of its initial release. Within one day the project reached the frontpage of all three sites.

More recently Vue was featured as a Rising star in GitHub having gained the most stars of any Open Source Project on the popular website. It recently clocked 2,793 Watchers, 48,505 Stars 6,340 Forks which makes it among the most popular open source projects on GitHub in general having far surpassed other popular libraries such as Backbone.js (26,178) Angular 2 (22,471) or even jQuery (44,104) .

Features

Templates

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

In Vue, you can use the template syntax or choose to directly write render functions using JSX. In order to do so just replace the template option with a render function. Render functions open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.

Reactivity

One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management very simple and intuitive. Vue provides optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.

Components

Components are one of the most powerful features of Vue. In a large application, it is necessary to divide the whole app into small, self-contained, and often reusable components to make development manageable. Components extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In Vue, a component is essentially a Vue instance with pre-defined options. The code snippet below contains an example of a Vue component. The component presents a button and prints of the number of times the button is clicked :

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  template: '<button v-on:click="onclick">Clicked {{count}} times</button>'
  ,
  methods: {
    "onclick": function() {
        this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }
});

Transitions

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:

• automatically apply classes for CSS transitions and animations
• integrate 3rd-party CSS animation libraries, such as Animate.css
• use JavaScript to directly manipulate the DOM during transition hooks
• integrate 3rd-party JavaScript animation libraries, such as Velocity.js

When an element wrapped in a transition component is inserted or removed, this is what happens:

1. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
2. If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame.

Routing

Vue itself doesn’t come with routing. But there’s the vue-router package to help you out. It supports mapping nested routes to nested components and offers fine-grained transition control. Creating a Single-page Application with Vue + vue-router is dead simple. With Vue, we are already composing our application with components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them.

Comparison with other frameworks

React

React and Vue share many similarities. They both:

• Use a virtual DOM (since Vue 2.0)
• Provide reactive and composable view components
• Maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries

When compared to React development, Vue can be integrated to an existing web application much more easily. Normally, a web application can start using Vue immediately by simply including the Vue.js JavaScript library. Usage with Webpack or Browserify, are not strictly necessarily. This is in stark contrast to React development where Usage with Webpack and Babel is unavoidable, therefore making converting existing web application much more difficult.

AngularJS

Some of Vue’s syntax draws from the AngularJS library including the concept of "directives" (a term denoting a way to dress up standard HTML markup with library specific syntax with a special meaning to how (and/or whether) something is rendered in HTML) and "double-binding" (a term denoting: that rendering will be influenced by two things either 1) User Action or 2) Data Coming in from APIs or other sources) because there are a lot of things Angular did right that add for a richer easier to use Front End Development experience.

For example, both Vue and Angular have baked-in directive of v-if=(CONDITION) in VueJS or ng-if=(CONDITION) in AngularJS which are ways to tell the respective libraries to render some HTML markup if and only if it meets the condition passed to it during Live runtime). Because of the Angular-introduced concept of Double Binding, a condition could become true when a user for instance checks a box [x] (then become false when they uncheck that box) or it could meet the condition as soon as an API call is completed: for example:

In Vue:
<input type="checkbox" id="checkbox" v-model="checked">


 <label for="checkbox">{{ checked }}</label>

   <span v-if="finishedLoading && checked">
 
       <ul v-if="checked && todosLoaded">

         <li v-for="todo in todos">

           {{ todo }}

         </li>

       </ul>

   </span>

   <span v-else-if="checked && !todosLoaded">

       <span class='fa fa-spin fa-spin'></span> 

   </span>

   <span v-else>

       Click on checkbox to display Your Todos <!-- displays [[fontawesome]] Loading Icon --><br/>
    <nowiki></span>

In Angular:

 <input type="checkbox" id="checkbox" ng-model="checked"> 

   <label for="checkbox">{{ checked }}</label>

   <span ng-if="finishedLoading && checked">
 
       <ul>

         <li ng-repeat="todo in todos">

       {{ todo }}

         </li>

       </ul>

   </span>

   <span ng-if="!finishedLoading && checked">
 
     <span class='fa fa-spin fa-spin'></span>

   </span>

   <span ng-if="!checked">
 
     Click on checkbox to display Your Todos

   </span>

Ember.js

Ember.js is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It is a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions.

That said, it would probably make a better comparison between Vue core and Ember.js’s templating and object model layers:

• Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember.js, you need to wrap everything in Ember.js Objects and manually declare dependencies for computed properties.
• Vue’s template syntax harnesses the full power of JavaScript expressions, while Handlebars’ expression and helper syntax is intentionally quite limited in comparison.
• Performance-wise, Vue outperforms Ember.js by a fair margin, even after the latest Glimmer engine update in Ember.js 2.0. Vue automatically batches updates, while in Ember.js you need to manually manage run loops in performance-critical situations.

KnockoutJS

KnockoutJS was a pioneer in the MVVM and dependency tracking spaces and its reactivity system is very similar to Vue’s. Its browser support is also very impressive considering everything it does, with support back to Internet Explorer 6! Vue on the other hand only supports Internet Explorer 9 and later.

Over time though, KnockoutJS development has slowed and it has begun to show its age a little. For example, its component system lacks a full set of lifecycle hooks and although it is a very common use case, the interface for passing children to a component feels a little clunky compared to Vue’s.

There also seem to be philosophical differences in the API design which if you are curious, can be demonstrated by how each handles the creation of a simple todo list. It is definitely somewhat subjective, but many consider Vue’s API to be less complex and better structured.

Polymer

Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Vue as well. Vue’s components can be loosely compared to Polymer’s custom elements and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features and requires non-trivial polyfills to work (with degraded performance) in browsers that don’t support those features natively. In contrast, Vue works without any dependencies or polyfills down to Internet Explorer 9.

In Polymer 1.0, the team has also made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are boolean negation and single method calls. Its computed property implementation is also not very flexible.

Polymer custom elements are authored in HTML files, which limits you to plain JavaScript/CSS (and language features supported by today’s browsers). In comparison, Vue’s single file components allows you to easily use ES2015+ and any CSS preprocessors you want.

When deploying to production, Polymer recommends loading everything on-the-fly with HTML Imports, which assumes browsers implementing the spec, and HTTP/2 support on both server and client. This may or may not be feasible depending on your target audience and deployment environment. In cases where this is not desirable, you will have to use a special tool called Vulcanizer to bundle your Polymer elements. On this front, Vue can combine its async component feature with Webpack’s code-splitting feature to easily split out parts of the application bundle to be lazy-loaded. This ensures compatibility with older browsers while retaining great app loading performance.

It is also totally feasible to offer deeper integration between Vue with Web Component specs such as Custom Elements and Shadow DOM style encapsulation - however at this moment we are still waiting for the specs to mature and be widely implemented in all mainstream browsers before making any serious commitments.

Riot

Riot 2.0 provides a similar component-based development model (which is called a “tag” in Riot), with a minimal and beautifully designed API. Riot and Vue probably share a lot in design philosophies. However, despite being a bit heavier than Riot, Vue does offer some significant advantages:

Transition effect system. Riot has none.

A far more powerful router. Riot’s routing API is extremely minimal.

Better performance. Riot traverses a DOM tree rather than using a virtual DOM, so suffers from the same performance issues as AngularJS 1.

More mature tooling support. Vue provides official support for Webpack and Browserify, while Riot relies on community support for build system integration.

Supporting libraries

• vue-router
• vuex
• vue-loader
• vueify 
• vue-cli

See also

• Comparison of JavaScript frameworks
• React (JavaScript library)
• AngularJS
• JavaScript Framework
• JavaScript Library