Moving From Angular to Vue : A vuetiful journey
I work on a SaaS product which has several front-end portals and all of them were build on Angular 1. After more than 2 years in production, Angular is now showing its age and the ever growing data that it has to handle doesn’t help either(>2000 watchers, which is sometimes inevitable, and the performance degrades worst than when running FIFA 16 on your 2009 machine 😩).
About 6 months back, we had to rewrite one of the core front facing plugin and we decided to try Vuejs. Based on the official documentation and some hello worlds, it seemed like a good fit for our use-case. Also, Angular was already being highlighted as a risk going forward and we were actively looking for its replacement. This felt like the perfect testing ground for Vue.
The plugin being replaced was a form builder/renderer which had to handle some huge forms with complex rules and validations. A lot of it required using if/show/hide DOM manipulations and repeats with filters. Angular did the job just fine. This was not a performance re-write but a structural one. But sometimes Angular did behave unexpectedly. The forms are user generated and sometimes all the DOM manipulations and the active watchers on huge, ill-designed forms (with great power comes great responsibilities) created what we called edge cases so we had something to tackle on the Angular front as well.
Working with Vue for the first time after years of Angular was honestly a breath of fresh air. At this point, performance had become such a crucial issue with Angular that every two-way binding had to be questioned. The aspects of Angular which initially felt magical had shown their reality over time and at some point, the enchantment was broken.
The start with Vue was cautious. Experiences learnt from Angular played a part. But it didn’t take long to realise that its a different beast all together. Syntactically Vue may seem a lot similar to Angular(mostly because of its use of v-for, v-repeat, v-if, v-show, v-hide etc.) and that is because of an intentional choice of not reinventing the wheel but under the hood, things just get better with Vue (for more check this out)
Once this distinction was realised, the Angular way of doing things was abandoned and we started afresh. And that’s when this vuetiful journey actually began.
Since Vue works with a virtual DOM (much like React) most of the concerns relating to bindings/watchers are taken care of. Vue goes even further in optimising DOM manipulations by re-rendering only the affected components compared to React which re-renders the whole component sub-tree.
With this new perspective, the re-write for the plugin was exciting and went smoothly. The first Vue project we did has been running smoothly for over 4 months now and those edge cases are yet to be reported. The performance issues when handling large amount of data are really a thing of the past.
But this was a small plugin doing one specific job. We didn’t have to bother much about some more complex issues like routing, state management etc. Since we were eager to work more on Vue, a long pending decision was taken to replace Angular with Vue for the front-end services and the one of the portals was picked to be the rewritten in Vue.
Before jumping right in, we made a hello world-ish app (implementing webpack + vue + vue-loader + vue-router + vuex) to confirm the feasibility of the planned implementation. It didn’t take long to understand and implement everything. I must confess, Vue has the most gentle learning curve of all js frameworks I have tried. It can be as simple as jQuery if you don’t need much and as powerful (if not more) as React without having to know about build systems, JSX, ES2015 etc as prerequisites. The hello world-ish app was fun to do and by now there was no going back to Angular.
The development went smooth enough although the documentation does need some work, but the community has been great. The Vue Gitter channel is a living thing with help on demand by some great people (as always, the real heroes are nameless). Our first Vue powered front-end went live last weekend and we only have good things to report so far. The performance leaves everyone wanting more from the still Angular powered front-ends and plans are already in motion to replace all of them with Vue. More on that to follow.
Personally, I really liked Vue. There are/have been several js frameworks out there each with its own strengths and weaknesses and Vue takes a lot of inspiration from them while also coming up with the right answers for many of the existing problems they introduce. For data binding, where Angular uses dirty checking to keep track of changes, which has a significant performance penalty and is the biggest contributor to its performance issues, Vue uses a dependency-tracking observation system to track the changes and is aware of the affected components.
It feels more fluid, less restrictive. Nothing feels forced because you always know you can do whatever you are doing in some other way as well and you picked the right approach for your need. For instance, you can replace Vue’s official state management library Vuex with React’s Redux if that’s what you want. Vue’s component system is again a lot simpler and yet equally powerful as React’s JSX. As with Redux, Vue supports JSX as well. But it doesn’t force it on you. Any valid HTML is a valid template in Vue. So you get to decide when you want to use HTML markup and when you want use render functions. Another thing that Vue does much better is component-scoped CSS. Instead of going the CSS-in-JS way with its own complications and caveats, Vue simply uses a scoped attribute to scope the CSS to the component by adding a unique attribute to elements and binding the CSS to element+attribute. There is so much more to like about Vue and I am still realising and marvelling at the Vue way of doing things regularly.
Finally I would like to say if you are planning to start a new project or rewrite an existing one, do give Vue a shot. Hopefully it would be fun for you as it has been for me so much so that I have turned into evangelist for Vue writing my first blog post!
