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!
This post was originally published on Medium
Top comments (15)
Thanks you for this article ! I was just wondering... before moving to VueJs, did you think about angular 2 as an option ?
I was wondering this as well.
The step going from "hello world" to "real world" (that is, here, an app with webpack + vue + vue-loader + vue-router + vuex) is where a framework shines, or not.
It is not only a matter of how fast you can setup a real world project, but also how fast you end up feeling confortable with that setup and producing app code, not setup code.
To me VueJS 2 succeeds at both very well, and I am not a front-end dev (is it an argument? :-).
P.S. Even if Vuejs is progressive, I've started my app right away with components and .vue files.
Couldn't agree more. The ease with which we were able to develop for production made us love Vue even more.
Not much time was lost in getting everyone up to speed. The hello world-ish app with all the bells and whistles was helpful in introducing everyone to Vue concepts and not much had to be changed when working with the production app.
What on Earth are you doing comparing Angular 1.x and Vue? Of course Angular 1.x is showing its age. At least use the correct name so people will know what you're talking about: AngularJS.
It drives me so mad when people don't know how to specify framework version correctly. Of course AngularJS (which is 1.x) will be worse than any new framework. Even devs said that, that's why they designed a new version from scratch...
Very interesting article, thanks a lot for sharing. Seems like there are more and more articles to tell us how Vue.js can be a good choice. No wonder it holds such a high (89%) satisfaction rate among developers that have used it. We also have a post about it with some samples of CVs of our Vue.js developers. Also, we are preparing an interview about the framework and I'll be happy to share it with you when it's finished.
Very good !
We are doing the same.
Two points draw our choice :
-smmoth curve learning
At the end we broke the "boilerplates" organisation to move to Real functional packages and everything is perfect.
Grate article..but actually why u guys moved to vue instead of react? is it similarity of syntax like v-for etc?
If it is a much larger app react is the recommendation of most developers? is it true?
I don't understand why then to choose vue.js is seems like only the starting rampup is high but then you have to reinvent the wheel which is already invented by angular4, what do you think?
Angular 4+ is much better than Angular 1, no doubt. I've been using it on a project for a while now and it has its own set of issues.
I like typescript but I only see it as documentation / improving the IDE experience. There are no runtime checks so you still have to be very careful.
RxJS is also very nice but I've seen most developers struggle with how to use observables properly. And they are everywhere in Angular.
While Angular 4+ will be great for a lot of applications, the "all batteries included" part can actually work against you. A lot of decisions have been made for you and trust me, once you're building a more complex/dynamic application you'll often be fighting against the framework. We've struggled with things that would have been simple with Vue (like highly dynamic components). And we still haven't found decent solutions for some of them. Most of them feel hacky.
Personally I'll avoid using Angular if I have the chance. It's just too restrictive for me.
Why you don't consider angular2? Is there any reason for that?
Thank you for sharing your experience, enough motivating to open Vue. :)