I tried Vue.js, Have you...?

Saiprasad Devare — Fri, 23 Aug 2019 12:51:31 +0000

Quick Background

Hi all,
This is Saiprasad. I am a full-stack web developer and working in Ruby on Rails, Python, AngularJS.

Begin

I've recently started learning the Vue.js. I'm still a novice but thought it would be beneficial to explain how do I used Vue.js knowing AngularJS.

Two weeks before, I had an issue regarding pagination. And I have to solve the issue with plain Javascript(Since the project does not have any frontend framework). So, by plain Javascript, the issue would get solved, but we tried something new. We decided to use Vue.js.
Since Use-case was only for a simple single component (Pagination) which Vue.js fit's perfect.

We used the Vue.js standalone mode (There is no need for any webpack build system or vue-cli ).With the backend framework as Django.

As being from AngularJS background. Was looking toward Vue.js as AngularJS.(This helped me a lot).

Vue Lifecycle

The most beautiful thing that Vue.js offers the naming convention. The Lifecycle hooks naming convention are simpler to understand.

Creation (Initialization)

beforeCreate
created

Mounting (DOM Insertion)

beforeMount
mounted

Updating (Diff & Re-render)

beforeUpdate
updated

Destruction (Teardown)

beforeDestroy
destroyed

Please check Vue.js Lifecycle for detailed information of lifecycle hooks. (Helped me a lot)

Problems Faced

1. Interpolation

We had faced some problem for the Interpolations in Vue.js as I stated we used Django as backend framework.Vue.js has the same syntax as Django templates to denote expressions. So to tackle this we used delimiters as a part of Vue.js

ScreenShot 1.1 Creating the delimiter

The delimiter is the same as the Ruby language ("#{}".).So to print the value in the HTML of Vue.js use like this

ScreenShot 1.2 Using the delimiter in HTML

2. Array and Object Change Detection

There are Caveats in the detection of Array and Object in Vue.js. As the official document states that "Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion."

https://vuejs.org/v2/guide/reactivity/#Change-Detection-Caveats

So to make object Reactive we should have to declare it upfront. As in ScreenShot 1.1 Creation of delimiter, you can see "pendingUsersInvitation", "pageNo", "pageCount", "recordCount" are declared upfront. Thus these objects are Reactive.
So changing in the objects are updating the UI. You can see below demo example

ScreenShot 1.3 Demo Example

The below screenshot is of adding a new key-value pair to the users object.'Vue instance.object' i.e element.users is accessible in the console and adding a new user to the users, changes the UI.

ScreenShot 1.4 Reactive object in Vue

This is reactivity in Vue.js.

So how does Vue changes the UI is something interesting. I will explain in short.
When we add a plain object to data property to Vue instance. Vue gets all the objects and creates getter and setter method for each object present in data (in the above example for users object).

I] Object.defineProperty
Vue uses Object.defineProperty for setter and getter methods on the objects. The observer pattern is used to update the object's value in Vue.

ScreenShot 1.5 Adding Getter and Setter to users object

Don't worry about the terms that are used below. Please check this video,Reactivity System explaining the details about the Reactivity.

NOTE:- If you have watched the above video then below contains will start to make sense.

This getter and setter methods have depends() and notify() methods respectively.
The depends() method push the target to the storage(storage is nothing but an empty array).
The notify() method runs all the target.
When you call an object then the dep.depends() method get called and pushes your function (target).
When you set an object then dep.notify() methods get the call and runs the target. This makes the system reactive.

So, the problem that we faced was setting the boolean value to the object key called 'active' wasn't updating the UI. The structure of the data is like below,

ScreenShot 1.6 Data Structure of the object.

Note: pagination.pendingUsersInvitation is the 'Vue instance.Property' as you can see in screenshot 1.1 declaring Vue instance.
This data doesn't have an 'active' key. We are adding explicitly to the data. As follow

     pagination.pendingUsersInvitation[0][active] = True;

But here, Vue doesn't understand that data (pagination.pendingUsersInvitation) has modified and this will not update the changes to the UI.

Thus, to make Vue understand that data has changed so that Vue can update the UI. We change code to

     Vue.set(pagination.pendingUsersInvitation[0], 'active', true);

This made the changes to the UI as Vue understands that data has been changed.

In actually we have done something like this,
ScreenShot 1.7 Using Vue.set

Here, we set the active key by comparing the item.pk == id in the data(pagination.pendingUsersInvitation).So active key get's added to the data if the condition gets satisfied. This change of code had updated the UI.

finally, 'Interpolation' and 'Array and Object Change Detection' problems were got solved.

Pagination Component

The pagination component is ready as below.

ScreenShot 1.8 Pagination component

Conclusion

Things that were familiar in Vue.js

v-model same as (ng-model in AngularJS)
v-if same as (ng-if in AngularJS)
v-for same as (ng-repeat in AngularJS)
v-bind:class same as (consider as ng-class in AngularJS)

As being from AngularJS background, learning Vue.js was fun and easy. Give a try for Vue.js and let us know about how do you feel using Vue.js.