Get More Done with Vue.js: Get Things Done Faster with Vue.js

Get Things Done Faster with Vue.js

My second lesson on Vue.js is focused on it’s simplicity. I think one of the things that makes Vue.js very appealing is it’s simplicity compared to other front end frameworks. To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript. Anyone with these skills can start “building non-trivial applications within less than a day of reading the guide” (according to the documentation). So how does Vue’s simplicity compare with other popular front end frameworks?

Angular 2 uses TypeScript. Any code written in TypeScript can also be written in JavaScript. So TypeScript is not required to use Angular 2. However, TypeScript is a popular language option for Angular development. Most code examples as well as the official Angular 2 documentation are written in TypeScript. TypeScript is not supported in any modern browser, so TypeScript code has to be compiled into JavaScript before the browser can run it. This means that a compiler is required before you can use TypeScript in your application.

React uses JSX. JSX is an XML-like language used to create components in React. It looks like HTML, but it is actually compiled into JavaScript. Since JSX is just JavaScript, it is not required to use React because anything written in JSX could just be written with plain JavaScript. But to do this, you would have to learn React’s JavaScript API for creating components, and not many developers will take the time to do this when using the JSX syntax is so much simpler. But because JSX has to be compiled to JavaScript before it can be run in a browser, this means a compiler is again required to use React components with JSX.

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!

Design Inspiration

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!

Sign up to Get More Done with Vue.js

* indicates required