Vue.js

Introduction

What is Vue.js? Vue (Pronounced like view) is a javascript progressive framework that can be used for building user interface. Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only. Vue is also perfectly work for Single-Page Applications (SPA is a website that can interact with users without loading the entire page, just the current page you interact with).

This is a little example for Vue.js:

HTML: <div id="app">   {{ message }} </div>

JS: var app = new Vue({   el: '#app',   data: {     message: 'Hello Vue!'   } })

And the result on the page will be:

Hello Vue!

Another example is Vue v-model that can makes two-way binding between form input and app state a breeze.

HTML: <div id="app-6">   <p>{{ message }}</p>   <input v-model="message"> </div>

JS: var app6 = new Vue({   el: '#app-6',   data: {     message: 'Hello Vue!'   } })

And the result will be:

Whenever you edit the textbox, it will edit the <p> tag too.

Comparison with React.js

React and Vue share many similarities. They both:

• Utilize a virtual DOM
• 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

PERFORMANCE

Both React and Vue offer comparable performance in most commonly seen use cases, with Vue usually slightly ahead due to its lighter-weight Virtual DOM implementation.

SCALE

For large applications, both Vue and React offer robust routing solutions. The React community has also been very innovative in terms of state management solutions (e.g. Flux/Redux). These state management patterns and even Redux itself can be easily integrated into Vue applications. In fact, Vue has even taken this model a step further with Vuex, an Elm-inspired state management solution that integrates deeply into Vue that we think offers a superior development experience.

Comparison with Angular 2

Vue have a separate section for the new Angular because it really is a completely different framework from AngularJS. For example, it features a first-class component system, many implementation details have been completely rewritten, and the API has also changed quite drastically.

TYPE SCRIPT

Angular essentially requires using TypeScript, given that almost all its documentation and learning resources are TypeScript-based. TypeScript has its benefits - static type checking can be very useful for large-scale applications, and can be a big productivity boost for developers with backgrounds in Java and C#. Not as deeply integrated with TypeScript like Angular, Vue also offers TypeScript for those who want to use TypeScript with Vue.

SIZE AND PERFORMANCE

In terms of performance, both frameworks are exceptionally fast and there isn’t enough data from real world use cases to make a verdict. Recent versions of Angular, with AOT compilation and tree-shaking, have been able to get its size down considerably. However, a full-featured Vue 2 project with Vuex + Vue Router included (~30KB gzipped) is still significantly lighter than an out-of-the-box, AOT-compiled application generated by angular-cli (~130KB gzipped).

FLEXIBILITY

Vue is much less opinionated than Angular, offering official support for a variety of build systems, with no restrictions on how you structure your application. Many developers enjoy this freedom, while some prefer having only one Right Way to build any application.