Modules & Classes in ES6

Modules:
Module help us with encapsulation by exposing from a given file the pieces we want to be access publically. An export statement will be used for that.

export {
     show: someFunc()
}

Then an import statement is used to import that piece:

import { show } from './my-file.js'

ES6 Features

New features in ES6 are:

• let, const and Block Scoping,
• Arrow Functions =>,
• Default Function Parameters,
• Rest and Spread,
• Object Literal Extensions,
• for…of Loops,
• Octal and Binary Literals,
• Template Literals
• Destructuring

let, const and Block Scoping:

let

let statement allows to declare variables that are limited in scope to the block, statement or expression on which it is used.

Arrow Functions =>

Arrow functions are anonymous functions with shorter syntax than a function.

Arrow function without any arguments.

var geEmployee = () => console.log(‘Employee Name’);

Default Function Parameters:

var getEmployee = function(id = 101){
     console.log(id)
};
getEmployee();

Thanks,
Bimal

Custom Matchers in Jasmine 2.3

Custom matchers, provided by the behavior-driven development framework Jasmine, is a great feature for testing JavaScript code. Custom Matchers helps to group multiple catch checking which makes the test cases clean and self explanatory.

Let’s look at an example that I tried recently

Here is a Calculator.js file:

   1: var Calculator = function () { };

   2:  

   3: Calculator.prototype.add = function (a, b) {

   4:     return a + b;

   5: };

   6:  

   7: Calculator.prototype.divide = function (a, b) {

   8:     return a / b;

   9: };

One of the test scenarios that I would like to try is to check whether the result of the method is in a particular range. The test method will look like this with existing matchers.

   1: describe('Calculator', function () {

   2:     var calc;

   3:  

   4:     beforeEach(function () {

   5:         calc = new Calculator();       

   6:     });

   7:  

   8:     it('should be able to add 1 and 1', function () {

   9:         expect(calc.add(1, 1)).toBe(2);

  10:     });

  11:  

  12:     it('should be able to divide 6 by 2', function () {

  13:         expect(calc.divide(6, 2)).toBe(3);

  14:     })

  15:  

  16:     it('should be able to divide a rational number', function () {

  17:         expect(calc.divide(1, 3)).toBeLessThan(0.34);

  18:         expect(calc.divide(1, 3)).toBeGreaterThan(0.3);        

  19:     })

  20: });

But you can replace the existing matchers with a custom matcher like this.

   1: describe('Calculator', function () {

   2:     var calc;

   3:  

   4:     beforeEach(function () {

   5:         calc = new Calculator();

   6:  

   7:         jasmine.addMatchers({

   8:             toBeBetween: function (util, customEqualityTesters) {

   9:                 return {

  10:                     compare: function (actual, a, b) {

  11:                         var result = {};

  12:                         result.pass = actual >= a && actual <= b;

  13:                         return result;

  14:                     }

  15:                 }

  16:             }

  17:         });

  18:     });

  19:  

  20:     it('should be able to add 1 and 1', function () {

  21:         expect(calc.add(1, 1)).toBe(2);

  22:     });

  23:  

  24:     it('should be able to divide 6 by 2', function () {

  25:         expect(calc.divide(6, 2)).toBe(3);

  26:     })

  27:  

  28:     it('should be able to divide a rational number', function () {

  29:         expect(calc.divide(1, 3)).toBeBetween(0.3, 0.34);

  30:     })

  31: });

You can reuse custom matchers to make the test cases clear and more simple.

What are some scenarios that you use custom matchers?

JavaScript Data Binding Frameworks

Data binding is the process that establishes a connection between the application UI and business logic. It synchronize the elements of the application with different sources of data.
Over the last few years several JavaScript libraries have been released to handle the process of binding data to HTML controls which includes:

• AngularJS
• Backbone.js
• Derby
• Ember
• JsViews
• JQXB Expression Binder
• Knock
• Meteor
• Simpli5
• WinJS

Thanks,
Bimal

JavaScript Promise

Introduction
A Promise is an object that represents a one-time event, typically the outcome of an async task. Basically it starts with a pending state and eventually change to resolve or reject.
It provides an unified or standard way to handle async tasks and it decouples the logic of processing the result from the object which invokes the task.
JS Promise libraries

• Promise
• Q
• When
• rsvp.js
• Vow

Thanks,
Bimal

JavaScript MVC Frameworks

JavaScript MVC Frameworks

• Agility.js
• AngularJS
• Backbone.js
• CanJS
• Ember.js
• Epitome
• ExtJS
• Kendo UI
• Knockout
• Maria
• PlastronJS
• rAppid.js
• Sammy.js
• Serenade.js
• soma.js
• Spine.js
• SproutCore
• Stapes.js

Thanks,
Bimal