Vue.js — answering the Why, after 15 months
There are many great frameworks out there: Angular, React, Aurelia, Ember, etc. After using many of these, we had our bucket list which lead us to choose Vue for our next project.
November 2016 was the time when we decided to chose Vue.js. We chose Vue for X reasons. After 15 months, I can say why — you should chose Vue for 2X reasons. Of course this post is not about framework comparison. This is strictly about highlighting the strength of Vue.js.
TLDR; Vue.js provides you the flexibility that no other framework can possibly provide.
Reason 1: Virtual DOM
What we liked about Angular was:
- Super friendly template language (In version 1.x and 2.x onwards)
- Very nice MVVM abstraction (even if dirty checking is not performant which is now addressed in newer version)
What we liked about React was:
- Awesome Virtual DOM
Now comes the reality. With Angular, you cannot have Virtual DOM and with React you have to live with JSX or creating template via plain JavaScript is plain hell (Elm, guys, I have no problem with its syntax). JSX embedded within JavaScript still looks alien to me even after 4 years (Let’s not start a holy war again).
With Vue, we get the best of both the worlds:
Vue allows you to use plain HTML syntax to define templates and if you are coming from React background, you can still use JSX syntax if desired. No matter what you chose, you end up compiling it to Virtual DOM.
Vue is very flexible here. There are at least seven ways to define component template:
Reason 2: Optional yet Powerful Build Step
Try using Angular or React without using build step. You will curse yourself. With Vue.js, you don’t need build step. It is as simple as adding jQuery to your webpage. Most of my team did not work on complex SPA framework. When I told them our new stack uses Vue + Redux + Rxjs + Redux-Observable + Webpack + Babel + …, they were simply aghast.
But with Vue.js, it was very easy to take step-by-step approach. Webpack and Redux are things that we picked in the very end on our learning curve. For experienced jQuery developer, it was very easy to pick Vue and take one step at a time.
There is a great article by Sarah Drasner for jQuery developers who wish to switch to Vue:
Now, Vue.js doesn’t stop here. If it is very easy to pick up for beginners, then
Vue is equally flexible for any sort of advanced build step based configuration.
We have experimented with lots of set-ups like Webpack, Rollup, Babel, TypeScript, Flow, etc.
Reason 3: State management
React and Elm brought us to the wonderful world of unidirectional architecture. Forget Angular 1 which was bidirectional. Redux emerged from React ecosystem took it one step further with all those great things like predictable state management, time travel debugging, etc.
But there is a cost with Redux. Ask a developer to learn Redux for unidirectional data flow and he will end up learning greath many other things:
- Immutability
- Pure functions
- Side effects
- etc…
Add to that is the curse of Redux: writing too much boilerplate code.
As it turns out, Vue.js has a great state management library, Vuex that simplifies creation of unidirectional architecture. And it comes with all the goodness of Redux without learning all the other things at once.
Of course, learning functional programming aspects of Redux greatly improve your code quality, you don’t have to pick them up on day 1 with Vuex.
Though Vue.js officially provides Vuex as state management libarary, that did not stop us from using Redux. Vue.js is flexible enough to support anything like Redux, MobX, etc.
Reason 4: ES2015 and TypeScript
Writing Angular (2.x onwards) applications without TypeScript is possible, but you will soon find out that development experience is not so great. If you are picking up Angular, you have to pick to TypeScript. With Vue.js, it is not the case.
In fact, with Vue.js, you don’t even need to start with ES2015. You can simply start with plain ES5; after all, component in Vue.js is just bunch of options, nothing more.
The real flexibility of Vue.js comes here. If you wish to go beyond, then it is a lot simpler to use ES classes or TypeScript.
Vue.js provides official type definitions for TypeScript or provide decorators to use ES classes as components.
Reason 5: Single File Components
We dreamed about this from a long… long time. We want to write our components as a single file. And mind it, we want to write HTML, CSS and its JavaScript all into one file. With React, you can do JSX and write HTML, but that is not what we are after.
With Vue.js, you can write your components and .vue files and compile them to plain JS using Webpack or Rollup:
Reason 6: Dynamic components
One common nuisance with component architecture is creation of orthogonal components like dialog box, tooltip, notification, etc. With Dynamic components, it is becomes very easy to create such components that often do not fit well into component hierarchy.
Most of these components need to be manipulated in DOM directly. Try doing that with Angular or React. It is awkward. Addtionally, there are already great many libraries out there that you can use with Vue.js
Further, you can treat every Vue component as a root instance meaning, every Vue component can be considered as a single stand-alone application. Though this fractal architecture is not as perfect as Cycle.js, it is still pretty close.
To know more about Fractals, read excellent post by André Staltz:
Reason 7: RxJS
Thanks to Angular, RxJS is getting serious amongst front-end engineers. With Vue.js, it is very easy to integrate RxJS into your application. It takes care of all the memory leaks associated with Observable Subscriptions, etc.
With our current stack we are writing more Rx than Vue. Even if Vue is based on mutable state, it is very trivial to introduce immutable data structures into Vue applications.
Reason 8: Performance
Performance of Vue.js applications is simply incredible. It relies on ES object properties for change detection. Further, you can precompile your templates/JSX into render function which saves the compilation cost during application runtime.
Vue.js website maintains detailed performance analysis in comparison to other frameworks:
To confirm, there are great many number of organizations adopting Vue.js as their front-end framework of choice.
Reason 9: What else not
You wish to author web components. Why not?
You wish to use CSS modules Why not?
- HMR — Checked
- Asset Management — Checked
- Production Build — Checked
- Routing — Checked
- Dev Tools — Checked
- Time Travel — Checked
- Server side rendering — Checked
- Static site generator — Checked
- And the list goes on
Reason 10: Testability
The Why cannot complete without Unit Testing consideration. At this point, we have used all the good words — simple, flexible, performance. With Vue.js, unit testing is incredibly simple to configure.
You can use anything of your choice. You can use Karma + Mocha or Jest or something crazy altogether. After all, Vue.js component is nothing but an object containing bunch of options and methods.
Please read more about that here:
I hope this articles gives you an overview of great potential of this tiny 20KB library, Vue.js. Please fill free to reach out for any queries.
