Get Things Done Faster with Vue.js
In addition, ES6 is a very popular option for writing React components. ES6 encourages using it’s syntax which is very different in many cases from ES5. So familiarity with ES5, does not guarantee familiarity with ES6. In fact, there is a rather steep learning curve going from ES5 to ES6 when using it’s new syntax and new features. ES6 is not required to use React although the examples in React’s documentation are now written in ES6. ES6 is not fully supported in modern browsers either so it must also be compiled to ES5 before it can run in the browser. This can be done via an open source project called Babel.
So before you can get started with React or Angular 2, you need to learn JSX and probably ES6 or TypeScript. Which means you would need to know about build systems since each one of those requires a compiler. In contrast, although Vue components can be written with TypeScript, JSX or ES6, Vue does not require a compiler, and anyone can start using it with ES5. All of Vue’s examples in the official documentation are written in ES5. In fact, all you need to get started with Vue is to include a single script tag. I told you it was simple!
Several popular frameworks influenced the development of Vue. Vue.js is a combination of features from Backbone.js, KnockoutJS, and AngularJS (v1). So if you are familiar with any of these frameworks, Vue’s syntax and concepts will likely already be familiar to you.
The fact that Vue doesn’t require a compile step to get started, and it takes cues from other popular frameworks means it can help you get things done faster. Comparisons don’t have to end here though. Let’s continue to look at how Vue compares to React and Angular.
React and Vue have many things in common. They both use virtual DOM. They both create view components that are reactive and composable. They both focus on the core library, leaving the development of features like routing and state management to external libraries. One difference is Vue’s virtual DOM implementation is a fork of snabbdom, which is lighter weight and requires less overhead than React. Another one is that the Vue libraries for state management and routing are all officially supported, while React leaves this to the community.
Vue’s syntax looks very similar to Angular because Angular was an inspiration for Vue very early in its development. Vue is simpler than Angular 1 though, in terms of API and design. As a result, Angular 1 has a much steeper learning curve than Vue. Angular 1 is also more opinionated about how you structure your applications. Performance-wise Vue is faster than Angular 1 because it uses a reactive model and virtual DOM, while Angular 1 uses “dirty checking” which causes Angular to perform slower when there are many watchers. Angular 2 compares better to Vue performance-wise, but size-wise is still almost double the size of Vue, even when using “tree shaking” which removes parts of the codes you aren’t using.
I’ve used Backbone, Angular and React and I think one of the main advantages of Vue is its simplicity compared with Angular and React. Now that we’ve discussed its simplicity in depth, let’s look at how the flexibility of Vue can give you similar advantages in the next lesson.
By the way, I’m working on a larger course on Vue.js, so sign up for the email list using the form below to be notified when it launches!