Angular vs. Vue.js Reactivity

AngularJS and VueJS Reactivity

VueJS is a relatively new library in this ecosystem of JavaScript frameworks that we have. AngularJS has, on the other hand, been long established and has a lot of backing. However, one developer's MV* library may prove to be an interesting alternative.

As older browsers start to die off, JavaScript developers can lean build upon ECMASCRIPT 5 functionality. The mechanics of which the two libraries rely upon to be reactive to updates differ because of this.

Some points

If you're using JSFiddle to run this code, you may want to write to the body of the document. Otherwise, I'm using a generic log function throughout.

function log(str) {
    console.log(str);
}

Everything in here is to help out with concepts. It is watered down. There are a lot of cases not being handled.

AngularJS Reactivity

Before I dive in, let me explicitly state: * the following code is not done in Angular *

var angularjs = {};
angularjs.var1 = 1;
angularjs.increment = function() {
    this.var1++
}

Normally, this would have been done inside a controller and be tied to $scope

function wrapFunction(obj, key) {
    var originalFn = obj[key];
    obj[key] = function() {
        originalFn.apply(obj, arguments);
        log(key);
    }
}

With a wrap function, you can wrap functions on the object, and make callbacks however decided.

function initializeAngular(obj) {
    for (var key in obj) {
        if (typeof obj[key] === 'function') {
            wrapFunction(obj, key);
        }
    }
}
initializeAngular(angularjs);
angularjs.increment(); // logs 'increment'

Instead of logging, AngularJS would check each property of the object against the value it was before. All values are recorded twice internally.

Vue JS

While VueJS records values twice internally, it's a bit more abstract and functional.

function reactifyProperty(obj, key) {
    var originalValue = obj[key];
    Object.defineProperty(obj, key, {
        get: function() {
            return originalValue;
        },
        set: function(newValue) {
            originalValue = newValue;
            log(key);
        }
    })
}

function initializeVue(obj) {
    for (var key in obj) {
        if (typeof obj[key] !== 'function') {
            reactifyProperty(obj, key);
        }
    }
}

var vue = {};
vue.var1 = 32;

initializeVue(vue);
vue.var1++;  // logs 'var1'

Being able to directly modify values is awesome because it's intuitive.

Summary

Vue is picking up steam. From what I can tell, it is simpler to pick up than AngularJS. The only issues may be with scaling, but I imagine that there will be better ways to organize data of the application at some point.

You may also like

  • AngularJS 와 VueJS 반응성

    VueJS는 우리가 가지고 있는 자바스크립트 프레임워크의 생태계에서 비교적 새로운 라이브러리다. 여윈반면 JS는 오랫동안 자리를 잡았고 많은 후원을 받고 있다. 그러나 한 개발자의 MV* 라이브러리는 흥미로운 대안일 수 있다.

    Read More >
  • SharePoint 2010, REST, AngularJS

    Sometimes you need a more dynamic means of changing things on a form in SharePoint. Sometimes you need to create an interface that is less "SharePoint-y". Using REST in conjunction with a library like AngularJS might be the route to go in these situations.

    Read More >