Blog

Why We Chose VueJS  -  Choosing a JavaScript Framework  -  Part 2

2017 was an exciting year for web development. JavaScript frameworks have revolutionized the way JavaScript works with HTML and CSS to render views, thus having a great impact on applications performance (both browser and native ones). Several frameworks emerged as the leaders last year — Angular, React, and Vue.js have especially emerged as the most ‘bleeding-edge’ popular options for 2017.

In Vivify Ideas, the most of our developers come from a full-stack background. When it comes to front-end, most of us have experience in using Angular (and AngularJS), and some of us have worked with React.

We have hands-on experience with these frameworks. We know all about their ups and downs.

When it comes to Angular, although this framework has been present in the community since 2010, when it was initially released, contributors find it hard to tackle Github issues. Another big issue about this framework is the performance. AngularJS could slow down the initial load, which contributed to bad performance in general. Angular(4) tried to address these issues with AOT (Ahead-of-time compilation), tree shaking and Lazy loading Components. But still, Angular’s performance is disappointing.

Regarding React, the biggest downside for us was the learning curve. We found it hard for someone coming from the web background just to jump in React. There is no templating system, you would have to use React to manipulate DOM, which was extremely hard to adopt by HTML/CSS coders. Someone might say: you can use JSX, but that would add extra time for learning.

So we used to stick to Angular.

Until…

Why We Choose VueJS…

Vue was originally released in February 2014 by Evan You, and it mixes the best of Angular and React. 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 front page of all three sites.

Instead of React

Virtual DOM — nowadays HTML DOM trees are huge, which means they can’t be traversed quickly and with modern SPA — we need to update ID a lot. Here comes the Virtual DOM, which is an abstraction of HTML DOM and reduces the performance impact of redundant operations of updating HTML by making each non-final operation much faster. Vue’s Virtual is slightly more lightweight than React’s.

Vue provides reactive and composable view components — but unlike React which requires that a developer creates DOM in Javascript (JSX), Vue is allowing HTML markup in templates by default. Similar to Angular, curly braces are used for data-binding expressions, while directives are used for adding functionality to the template. Also by allowing HTML markup Vue has shortened the learning curve. If you prefer using Javascript for templating (even React’s JSX) that’s perfectly fine with Vue.

For large applications, both Vue and React offer robust routing solutions. The React community has also been very innovative when it comes to the 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 which offers a superior development experience.

Vue offers a CLI project generator that makes it trivially easy to start a new project using your choice of a build system, including webpack, Browserify, or even no build system while React’s offers only create-react-app which has some limitations (for example, no configuration available at all).

Native rendering is now also available with Weex, a cross-platform UI framework developed by Alibaba Group, meaning you can use the same Vue component for mobile and web rendering. Also, Native Script is coming soon.

Instead of Angular

Unlike Angular which requires TypeScript, and can lead to overhead in small-scale use cases, Vue, again, offers a choice. By default it comes with ECMAScript 6, also known as ECMAScript 2015, but also offers official typings and official decorator for anyone who wants to use TypeScript.

One major downside of Angular is its bundle size. Even with AOT and tree shaking Angular’s bundle is about 130KB, while Vue’s bundle is about 30KB gzipped (with Vuex and Due router included). Vue also beats Rect (the bundle is about 43 KB gzipped).

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.

When it comes to performance the numbers say it all: