Migrating from AngularJS to Vue.js

Migrating AngularJS to Vue.js

We have large scale SPA with complex logic and our AngularJs(1.x) application grew so fast that we realized so many problems and among the major problems were :

  • Performance: As a data tool, a lot of the time we have to render a large table of data, and rendering them with AngularJS yield pretty bad performance.
  • Two-way data binding flow makes handling logic very difficult, both in term of writing components, as well as writing view controllers. Two-way binding can create maintenance issues because child components can mutate the parent without the source of that mutation and same way parent. This is perhaps the most important reason of all.
  • Angular documentation is bad: This isn’t a big deal until it is. The more we work with AngularJS, the more we realized that their documentation is really difficult to comprehend.

AngularJs(1.x) is almost Dead technology!   No longer support provided and having major issues for our large-scale application, we thought of upgrading the version of Angular. For us, Angular 2 is somehow even more confusing than AngularJs 1.x. There were too many new challenges (TypeScript), new template syntaxes, concepts etc that we felt didn’t really address our core problems. There are so many combined reasons that we choose for a Vue.Js framework. Getting an app running efficiently in Vue is easiest among other Js frameworks because you need only pure JavaScript concepts to start Vue. Vue is faster than Angular in terms of performance. Vue is a very well documented framework. The official documentation can be read like a single page without hopping over links. Vue is a progressive framework that tries to include the good parts of the contemporaries and its Seo-friendly. Let me brief you the major changes in both frameworks.

Data binding

AngularJS uses two-way binding between scopes, while Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications. In AngularJs we used ng-model which handles two data binding where Vue providesv-model for one-way data binding. If you want to achieve two-way data binding, refer my another blog: Two-way data binding in Vue

Data Flow

In Vuex data flow, basically, Components calls actions which fetch the API from backend and if you got the success then Actions will dispatch the events to mutation and set the state object and if you get the error, actions will still do the same thing and you will get to know using mutation. So, mutation handles everything whether its success or failure. Based on success or failure state object is set. Now in component using computed (getter) property, you will get the state object which you can easily render in the frontend. For more detail, you can refer my another blog:  Data flow in Vuejs Application

While in Angular, ng-model handles everything.ng-model variable declares as $scope  in controller so it will directly render a view. Vue has better performance and is much, much easier to optimize because it doesn’t use dirty checking. AngularJS becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. AngularJS users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there’s no way to optimize a scope with many watchers.

loops

In Vue loops, v-for is used while angular hasng-repeat been used. Interpolation remains same in Vuejs and Angularjs.
In AngularJS

In VueJs

Event binding

In AngularJS provides ng-click where Vue has v-on generic directive that makes things simpler and more consistent than AngularJS.

Directives

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function as below:

Angular Directives are not powerful as in Vue.Vue 2.0, the primary form of code reuse and abstraction is components – however there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful.

A directive definition object can provide several hook functions (all optional):

  • bind: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
  • inserted: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).
  • update: called after the containing component’s VNode has updated, but possibly before its children have updated. The directive’s value may or may not have changed, but you can skip unnecessary updates by comparing the binding’s current and old values (see below on hook arguments).
  • componentUpdated: called after the containing component’s VNode and the VNodes of its children have updated.
  • unbind: called only once, when the directive is unbound from the element

Filters

AngularJS comes with a collection of built-in filters, but it is easy to define your own as well. please have a look at below code.

The filter’s function always receives the expression’s value (the result of the former chain) as its first argument. In the below example, the capitalize filter function will receive the value of message as its argument. both Angular and vue filter does the same thing and usage of filters are same.

Rest Api

For Angular , we have $http service which is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.You’ll see that consuming RESTful APIs using GET requests only requires one $http.get request with the url of the API passed in as a parameter. What you intend to do with the results of this query is entirely up to yourself and depends on what is returned. If it were say a JSON object then you could bind that to a $scope variable and then print it all in your frontend.

I have fetched the paul irish user detail in created hook. In this hook, you will able to access reactive data and events and make sure that templates and virtual DOM have not yet been rendered in created hook. So I fetched paul irish user detail from GitHub api before the DOM rendered. For that I have dispatched the event to store and action is ‘getFollowers’. ( you can check this on above code) which is Requesting the server for GitHub user detail using axios. If you got the success, it will mutate using mutation ‘‘FOLLOWERS_SUCCESS’ and append the data to state object (here in followers object). If you get the error ,you will get to know using mutation. Computed properties are by default getter-only, but you can also provide a setter when you need it. Here I have used getter for paul irish’s followers. It’s pretty easy !

AngularJS has strong opinions about how your applications should be structured, while Vue is a more flexible, modular solution. While this makes Vue more adaptable to a wide variety of projects, we also recognize that sometimes it’s useful to have some decisions made for you, so that you can just start coding.

This is not to say Vue is the best, it simply worked best for our specific case: an Angular-heavy application that hits some limitation due to inherent design nature of Angular, and Vue filled that gap perfectly for us. 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 this blog post!

References:

https://vuejs.org/v2/guide/custom-directive.html

https://vuejs.org/v2/guide/comparison.html#Complexity

https://cyphertree.com/two-way-data-binding-in-vuejs/

https://cyphertree.com/data-flow-in-vuejs-application/



Leave a Reply