Categories
Uncategorized

Refresh your app automatically in the browser with gulp & livereload

Add livereload to your dev in 5 mins

You will need to install gulp-server-livereload for this. This utilizes web sockets. Make sure you have a compatible version of node+npm before you run this. This will install gulp-server-livereload as a dev dependency in your node modules folder and add it to your package.json file.

Add the following code to gulpfile.js and run gulp livereload, it should open up your default browser and load your app at localhost:8000.
Note: Make sure you have an index.html file in your app inside the public folder.

Categories
Uncategorized

Invalid Object & Array Manipulations in Vue.js 2

Objects

This is how you would usually set delete/add/set properties in Javascript. But Vue.js 2 can’t detect the changes if the object is manipulated in this fashion.
For it to be able to detect these changes, use the following.

or

Arrays

Similarly for arrays, if we use the following, then Vue.js 2 fails to detect the changes in state.

You will have to use the following commands to be able to deal with the above situation and many others.
Vue.js 2 has wrapped methods to help us create work arounds for such issues.

Wrapped methods

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
Categories
Uncategorized

async & await in ES2017/ES8

async

Adding an async keyword to a function makes it asynchronous as the name itself suggests and it also return a promise instead of the value. We can define an ES6 function as async using the following syntax. This works with the old function syntax as well.

await

The await keyword can only be used inside an async function. When used, while calling an async function, it resolves the promise and returns the value.
The above code can be made more readable, by using the await keyword.

Here is a live example of asynchronous functions in action. Although the first function is called first, we don’t have to wait until the promise is resolved to a result by await, instead we can see rest of the functions calls and their promises being resolved earlier.
Code

Output

Demo

Sequential calls vs Parallel calls

The following is an example of sequential asynchronous function calls

If you want to make asynchronous function calls simultaneously, then you could use Promise.all and supply it with an array of asynchronous functions and then use await to return the result after all the calls are made.

Categories
Uncategorized

ES2016/ES7 in 5 Minutes

The ECMAScript 2016 has just two small changes.

Array.prototype.includes()

Return type: boolean

Usage

Output

Demo

This replaces the array.indexOf(element) which returns the index if the element is found or -1 if it isnt. This new function allows you to check for NaN (Not a Number) and this works on objects in a array too, but they must match the instance being passed.

The Exponentiation Operator (**)

Usage

Output

Demo

This replaces the Math.pow(3, 2) function. This new operator allows for infix notation.

Categories
Uncategorized

Vuex with vue-router and Bootstrap/jQuery

This post talks about using the vue-router (official router for Vue.js 2) alongside Vuex (state management pattern + library).

Using Vuex, gives you the ability to debug code easily, and switch between states in your chrome browser. For this you will need to install the Vue.js devtools chrome extension, and open the dev-tools in a page that uses Vue.js and then navigate to the Vue tab and choose the Vuex icon (usually 2nd from left).

In the following code, the ability to add/delete widget objects is implemented using mutations in Vuex. Here mutations are synchronous calls that can alter the state. This state can be easily accessed through the mapGetters in Vuex. Following this pattern keeps the state management pretty clean in larger applications, where multiple parts of the applications get to access/alter the state.

Note: You can also make asynchronous calls using actions in Vuex but, that part has not been included in the following code.

I have used bootstrap for quick styling. The router is setup with the widgets view as default. This code was built using the default vue-cli webpack template, which makes life easier for running unit tests, end to end tests and also building production ready code.

vuejs 2.0

This is the default view of the demo application. Below you can view the debugging capabilities of Vuex.

vuex

Code (github)