Using ECMAScript6 today

2015-04-122016-01-30 TPodolakBabel, ECMAScript6, JavaScript, Traceur

1. Introduction

Although ECMAScript6 has not been officially released yet, we can play around with new language features today. There are tools such as Traceur or Babel which are able to convert ECMAScript6 into ECMASciprt5, thus we are able to run the code in every browser. So let’s try to run the snippet below, which leverages destructuring assignmentusing those tools

(function () {
    var obj = {
        firstProp: 1,
        secondProp: 2
    }, array = [1, 2, 3];

    //Destructuring array
    var [x,y,z] = array;

    console.log('Destructuring array');
    console.log('Value of x = ' + x);
    console.log('Value of y = ' + y);
    console.log('Value of z = ' + z);

    console.log('Destructuring object');
    var { secondProp: b,firstProp: a } = obj;
    console.log('Value of firstProp = ' + a);
    console.log('Value of secondProp = ' + b);

}());

(function () {

var obj = {

firstProp: 1,

secondProp: 2

}, array = [1, 2, 3];

//Destructuring array

var [x,y,z] = array;

console.log('Destructuring array');

console.log('Value of x = ' + x);

console.log('Value of y = ' + y);

console.log('Value of z = ' + z);

console.log('Destructuring object');

var { secondProp: b,firstProp: a } = obj;

console.log('Value of firstProp = ' + a);

console.log('Value of secondProp = ' + b);

}());

2. Using Traceur

I’ll start from Traceur first. First of all we have to install it, so run in console (I am using gulp as my build system)

npm install gulp-traceur --save-dev

1	npm install gulp-traceur --save-dev

Then we have to write simple gulp task which:

grabs all of our js files
runs the code analysis using JsHint
transpiles source files into valid ECMAScript5
concatenates the result into single file
generates source maps (for debugging proposes)

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var traceur = require('gulp-traceur');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');

return gulp.src('app/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('jshint-stylish'))
           .pipe(jshint.reporter('fail'))
           .pipe(sourcemaps.init())
           .pipe(traceur())
           .pipe(concat('app.all.js'))
           .pipe(sourcemaps.write('.'))
           .pipe(gulp.dest('dest'));

var gulp = require('gulp');

var sourcemaps = require('gulp-sourcemaps');

var traceur = require('gulp-traceur');

var concat = require('gulp-concat');

var jshint = require('gulp-jshint');

return gulp.src('app/*.js')

.pipe(jshint())

.pipe(jshint.reporter('jshint-stylish'))

.pipe(jshint.reporter('fail'))

.pipe(sourcemaps.init())

.pipe(traceur())

.pipe(concat('app.all.js'))

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest('dest'));

Having our result file ready, now we can add a script tag in html pointing to app.all.js. However at this point in the runtime we will get an error.

$traceurRuntime is not defined

1	$traceurRuntime is not defined

Quick look at the generated app.all.js file reveals the problem

"use strict";
(function() {
  var $__1,
      $__2;
  var obj = {
    firstProp: 1,
    secondProp: 2
  },
      array = [1, 2, 3];
  var $__0 = array,
      x = ($__1 = $__0[$traceurRuntime.toProperty(Symbol.iterator)](), ($__2 = $__1.next()).done ? void 0 : $__2.value),
      y = ($__2 = $__1.next()).done ? void 0 : $__2.value,
      z = ($__2 = $__1.next()).done ? void 0 : $__2.value;
  console.log('Destructuring array');
  console.log('Value of x = ' + x);
  console.log('Value of y = ' + y);
  console.log('Value of z = ' + z);
  console.log('Destructuring object');
  var $__3 = obj,
      b = $__3.secondProp,
      a = $__3.firstProp;
  console.log('Value of firstProp = ' + a);
  console.log('Value of secondProp = ' + b);
}());

//# sourceMappingURL=app.all.js.map

"use strict";

(function() {

var $__1,

$__2;

var obj = {

firstProp: 1,

secondProp: 2

array = [1, 2, 3];

var $__0 = array,

x = ($__1 = $__0[$traceurRuntime.toProperty(Symbol.iterator)](), ($__2 = $__1.next()).done ? void 0 : $__2.value),

y = ($__2 = $__1.next()).done ? void 0 : $__2.value,

z = ($__2 = $__1.next()).done ? void 0 : $__2.value;

console.log('Destructuring array');

console.log('Value of x = ' + x);

console.log('Value of y = ' + y);

console.log('Value of z = ' + z);

console.log('Destructuring object');

var $__3 = obj,

b = $__3.secondProp,

a = $__3.firstProp;

console.log('Value of firstProp = ' + a);

console.log('Value of secondProp = ' + b);

}());

//# sourceMappingURL=app.all.js.map

Transpiled code has references to $traceurRuntime objects, so in order to make our code work, we have to add additional script tag pointing to traceur-runtime.js. You can easily get the sources with bower, just run in console

npm install bower --save-dev
bower install  traceur-runtime

1 2	npm install bower --save-dev bower install traceur-runtime

Now everything should work and in console we’ll get expected result

As you could see in example above Traceur generates overcomplicated code which makes debugging of the original sources (using source maps) a painful process. Just take a look at the following screenshot

fortunately Babel doesn’t seem to have these drawbacks.

3. Using Babel

Let’s modify our gulp build script to use Babel instead of Traceur

npm install gulp-babel --save-dev

1	npm install gulp-babel --save-dev

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var babel= require('gulp-babel');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');

return gulp.src('app/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('jshint-stylish'))
           .pipe(jshint.reporter('fail'))
           .pipe(sourcemaps.init())
           .pipe(babel())
           .pipe(concat('app.all.js'))
           .pipe(sourcemaps.write('.'))
           .pipe(gulp.dest('dest'));

var gulp = require('gulp');

var sourcemaps = require('gulp-sourcemaps');

var babel= require('gulp-babel');

var concat = require('gulp-concat');

var jshint = require('gulp-jshint');

return gulp.src('app/*.js')

.pipe(jshint())

.pipe(jshint.reporter('jshint-stylish'))

.pipe(jshint.reporter('fail'))

.pipe(sourcemaps.init())

.pipe(babel())

.pipe(concat('app.all.js'))

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest('dest'));

And basically that all, we are ready to go. Babel doesn’t require any runtime dependencies, generated code is simple

'use strict';

(function () {
    var obj = {
        firstProp: 1,
        secondProp: 2
    },
        array = [1, 2, 3];

    //Destructuring array
    var x = array[0];
    var y = array[1];
    var z = array[2];

    console.log('Destructuring array');
    console.log('Value of x = ' + x);
    console.log('Value of y = ' + y);
    console.log('Value of z = ' + z);

    console.log('Destructuring object');
    var b = obj.secondProp;
    var a = obj.firstProp;

    console.log('Value of firstProp = ' + a);
    console.log('Value of secondProp = ' + b);
})();
//# sourceMappingURL=app.all.js.map

'use strict';

(function () {

var obj = {

firstProp: 1,

secondProp: 2

array = [1, 2, 3];

//Destructuring array

var x = array[0];

var y = array[1];

var z = array[2];

console.log('Destructuring array');

console.log('Value of x = ' + x);

console.log('Value of y = ' + y);

console.log('Value of z = ' + z);

console.log('Destructuring object');

var b = obj.secondProp;

var a = obj.firstProp;

console.log('Value of firstProp = ' + a);

console.log('Value of secondProp = ' + b);

})();

//# sourceMappingURL=app.all.js.map

and even source maps seem to work correctly.

So when it comes to me I choose Babel. Source code for this post can be found here

Azure – connecting to Windows 10 virtual machine

2015-03-112016-01-30 TPodolakAzure, Windows 10

Today just a quick tip, which may save you some time. If you want to connect to virtual machine with Windows 10 Technical Preview, make sure that you include DNS name in user name field. So instead of default combination of username and password

which worked for me for every virtual machine (except for the one with Windows 10). You should use something like that

If You don’t know the DNS name for virtual machine, you can easily check it in Virtual Machines pane

AngularJS – extending existing services using decorator

2015-02-252016-01-30 TPodolakAngularJS, decorator, JavaScript

One of the features I miss the most in AngularJS is ability to easy unsubscribe event handlers. There is no convenience function opposed to $on, so in order to unsubscribe event, we have to call method returned by $on function

(function () {
    angular.module('app.download', [])
        .controller('downloadCtrl', downloadController);

    function downloadController($scope) {
        // keep the unsubscribe function in local variable
        var afterRenderUnsubscribe = $scope.$on('afterRender', onAfterRender);

        function onAfterRender() {
            console.log('CallingonAfterRender');
            // unsubscribe form event
            afterRenderUnsubscribe();
        }
    }
}());

(function () {

angular.module('app.download', [])

.controller('downloadCtrl', downloadController);

function downloadController($scope) {

// keep the unsubscribe function in local variable

var afterRenderUnsubscribe = $scope.$on('afterRender', onAfterRender);

function onAfterRender() {

console.log('CallingonAfterRender');

// unsubscribe form event

afterRenderUnsubscribe();

}

}());

However in my opinion this approach fails in real life scenarios, because usually we are subscribed to more than one event – thus we have to have multiple local variables for detaching listeners. Fortunately AngularJS provides an easy way to extend existing services with some new functionalities – we can achieve that by using $provide service. This service exposes decorator method, which is able to intercept creation of any service, so we are able to augment it with some new functions. The best moment to call $provide.decorator method is during module configuration, thanks to this approach we are sure that our custom logic is invoked before module is started.

angular.module('app.common', [])
       .config(extendServices);

/*ngInject*/
function extendServices($provide) {
    $provide.decorator('serviceName', function ($delegate) {
     /*some interception logic*/
    });
}

angular.module('app.common', [])

.config(extendServices);

/*ngInject*/

function extendServices($provide) {

$provide.decorator('serviceName', function ($delegate) {

/*some interception logic*/

});

}

In my case I wanted to extend $rootScope with new method $un for unsubscribing events, so I called method decorator with parameter ‘$rootScope’ (note single quotation marks) – this tells Angular that I will be modifying $rootScope service

angular.module('app.common', [])
    .config(extendServices);

/*ngInject*/
function extendServices($provide) {
    $provide.decorator('$rootScope', extendRootScope);
}

/*ngInject*/
function extendRootScope($delegate) {
}

angular.module('app.common', [])

.config(extendServices);

/*ngInject*/

function extendServices($provide) {

$provide.decorator('$rootScope', extendRootScope);

}

/*ngInject*/

function extendRootScope($delegate) {

}

Because I passed ‘$rootScope’ as a first argument of $provide.decorator method, the $delegate parameter in extendRootScope function is actually a $rootScope service. Now having access to the service I can augment it with my custom logic for detaching event handlers.

/*ngInject*/
function extendRootScope($delegate){
    $delegate.$un=function(name,listener){
        var namedListeners=this.$$listeners[name],
            idx;
        if(namedListeners&&(idx=namedListeners.indexOf(listener))>-1){
            namedListeners.splice(idx,1);
        }
    };
    return $delegate;
}

/*ngInject*/

function extendRootScope($delegate){

$delegate.$un=function(name,listener){

var namedListeners=this.$$listeners[name],

idx;

if(namedListeners&&(idx=namedListeners.indexOf(listener))>-1){

namedListeners.splice(idx,1);

}

};

return $delegate;

}

Entire code listing looks then as follows

(function () {
    angular.module('app.common', [])
           .config(extendServices);

    /*ngInject*/
    function extendServices($provide)
    {
        $provide.decorator('$rootScope', extendRootScope);
    }

    /*ngInject*/
    function extendRootScope($delegate)
    {
        $delegate.$un = function (name, listener) {
            var namedListeners = this.$$listeners[name],
                idx;
            if (namedListeners && (idx = namedListeners.indexOf(listener)) > -1) {
                namedListeners.splice(idx, 1);
            }
        };
        return $delegate;
    }
}());

(function () {

angular.module('app.common', [])

.config(extendServices);

/*ngInject*/

function extendServices($provide)

{

$provide.decorator('$rootScope', extendRootScope);

}

/*ngInject*/

function extendRootScope($delegate)

{

$delegate.$un = function (name, listener) {

var namedListeners = this.$$listeners[name],

idx;

if (namedListeners && (idx = namedListeners.indexOf(listener)) > -1) {

namedListeners.splice(idx, 1);

}

};

return $delegate;

}

}());

From now on, you can unsubscribe events handlers simply by calling $un method

(function () {
    angular.module('app.download', ['app.common'])
        .controller('downloadCtrl', downloadController);

    function downloadController($scope) {
        $scope.$on('afterRender', onAfterRender);

        function onAfterRender() {
            console.log('Calling afterRender handler');
            $scope.$un('afterRender', onAfterRender);
        }
    }
}());

(function () {

angular.module('app.download', ['app.common'])

.controller('downloadCtrl', downloadController);

function downloadController($scope) {

$scope.$on('afterRender', onAfterRender);

function onAfterRender() {

console.log('Calling afterRender handler');

$scope.$un('afterRender', onAfterRender);

}

}());

and our listener will react only once

console.log('Broadcasting afterRender event for the first time');
$rootScope.$broadcast('afterRender');
console.log('Broadcasting afterRender event for the second time');
$rootScope.$broadcast('afterRender');

console.log('Broadcasting afterRender event for the first time');

$rootScope.$broadcast('afterRender');

console.log('Broadcasting afterRender event for the second time');

$rootScope.$broadcast('afterRender');

Source code for this post can be found here

WinJS – AuthenticateAndContinue and “remote procedure call failed” exception

2015-02-192016-01-30 TPodolakAuthenticateAndContinue, JavaScript, WinJS

A while ago I started playing around a bit with JavaScript on Windows Phone. I wanted to create very simple app using AngularJS but of course I also had to use some WinJS features (for integration with device ). One of the things I needed to implement was authentication/authorization using OAuth. According to WinJS documentation it should be pretty straightforward – just use Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue method with appropriate URLs. Of course I wanted authentication/authorization to be called before navigating to any screen, so I slightly modified default WinJS template and my code looked like that

// rest of code omitted for brevity
var activation = Windows.ApplicationModel.Activation,
    app = WinJS.Application,
    nav = WinJS.Navigation,
    sched = WinJS.Utilities.Scheduler,
    ui = WinJS.UI;

 app.addEventListener("activated", function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }

            nav.history = app.sessionState.history || {};
            nav.history.current.initialPlaceholder = true;

            var p = ui.processAll().then(function() {
                Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(
                        requestUrl, // for instance facebook auth url
                        callbackUrl // for instance facebook auth callback url
                    );
            });
            args.setPromise(p);
        }
    });
// rest of code omitted for brevity

// rest of code omitted for brevity

var activation = Windows.ApplicationModel.Activation,

app = WinJS.Application,

nav = WinJS.Navigation,

sched = WinJS.Utilities.Scheduler,

ui = WinJS.UI;

app.addEventListener("activated", function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

// TODO: This application has been newly launched. Initialize

// your application here.

} else {

// TODO: This application has been reactivated from suspension.

// Restore application state here.

}

nav.history = app.sessionState.history || {};

nav.history.current.initialPlaceholder = true;

var p = ui.processAll().then(function() {

Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(

requestUrl, // for instance facebook auth url

callbackUrl // for instance facebook auth callback url

);

});

args.setPromise(p);

}

});

// rest of code omitted for brevity

Unfortunately all I got was this strange exception

The exception itself originated somewhere from WinJS framework so I wasn’t able to debug it at all. It took me a while to figure this out but after all it turned out, that all you have to do, to make it work is to “schedule” call of AuthenticateAndContinue method using WinJS.Utilities.Scheduler

WinJS.Utilities.Scheduler.schedule(function(){ //your code in here});

1	WinJS.Utilities.Scheduler.schedule(function(){ //your code in here});

After this change entire code listing looks like that

// rest of code omitted for brevity
var activation = Windows.ApplicationModel.Activation,
   app = WinJS.Application,
   nav = WinJS.Navigation,
   sched = WinJS.Utilities.Scheduler,
   ui = WinJS.UI;

app.addEventListener("activated", function (args) {
       if (args.detail.kind === activation.ActivationKind.launch) {
           if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
               // TODO: This application has been newly launched. Initialize
               // your application here.
           } else {
               // TODO: This application has been reactivated from suspension.
               // Restore application state here.
           }
           
           nav.history = app.sessionState.history || {};
           nav.history.current.initialPlaceholder = true;
           
           var p = ui.processAll().then(function() {
               return sched.schedule(function() {
                   Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(
                       requestUrl, // for instance facebook auth url,
                       callbackUrl // for instance facebook auth callback url
                   );
               });
           });
           
           args.setPromise(p);
       }
   });
// rest of code omitted for brevity

// rest of code omitted for brevity

var activation = Windows.ApplicationModel.Activation,

app = WinJS.Application,

nav = WinJS.Navigation,

sched = WinJS.Utilities.Scheduler,

ui = WinJS.UI;

app.addEventListener("activated", function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

// TODO: This application has been newly launched. Initialize

// your application here.

} else {

// TODO: This application has been reactivated from suspension.

// Restore application state here.

}

nav.history = app.sessionState.history || {};

nav.history.current.initialPlaceholder = true;

var p = ui.processAll().then(function() {

return sched.schedule(function() {

Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(

requestUrl, // for instance facebook auth url,

callbackUrl // for instance facebook auth callback url

);

});

args.setPromise(p);

}

});

// rest of code omitted for brevity

After this procedure we should be successfully redirected to the requestUrl, in my case to Facebook login page

AngularJS – dependency injection

2015-02-162016-01-30 TPodolakAngularJS, Gulp, JavaScript

There are couple of ways of injecting dependencies into AngularJS components. The most common one is just to specify the dependency name in the function’s argument list

(function() {
    angular
        .module('app')
        .controller('shellCtrl', function ($scope, $http) {
            $scope.title = "Title";
        });
})();

(function() {

angular

.module('app')

.controller('shellCtrl', function ($scope, $http) {

$scope.title = "Title";

});

})();

However this technique fails in real life scenarios, because for production we usually (or rather always) minify and uglify javascript files. Uglify proces renames our variables and due to the fact that dependencies are resolved by name, AngularJS is not able to find appropriate services, directives etc. To overcome this limitation, we can enclose our function definition into an array, and specify dependencies as a string literals. Our original code becomes then

(function () {
    angular.module('app')
           .controller('shellCtrl', ['$scope', '$http', function ($scope, $http) {
               $scope.title = "Title";
           }]);
})();

(function () {

angular.module('app')

.controller('shellCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.title = "Title";

}]);

})();

Although this works fine even after minifying and uglifiyng js files, for me this code is hard to read. That is why I like to use yet another technique. This technique leverages variable hoisting and $inject property

(function(){
    angular.module('app')
           .controller('shellCtrl',shellController);

    shellController.$inject=['$scope','$http'];

    function shellController($scope,$http){
        $scope.title='title';
    }
})();

(function(){

angular.module('app')

.controller('shellCtrl',shellController);

shellController.$inject=['$scope','$http'];

function shellController($scope,$http){

$scope.title='title';

}

})();

As You can see I extracted controller function into separate variable “shellController” and listed all necessary dependencies in $inject array

shellController.$inject= ['$scope','$http']

1	shellController.$inject= ['$scope','$http']

It is even possible to enhance a bit this example and make it a little less error prone. With the current implementation we have to make sure that order of properties in $inject array is the same as in function declaration. It is easy to keep track of that if we have just a couple of dependencies, but it might be a bit of a pain if we start to add, remove or edit them. Fortunately we can automate this task and basically autogenerate $inject array. In order to do that I like to use Gulp (although it is also possible to use Grunt). First of all we have to install Gulp. There is great tutorial how to do that in here https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md Having Gulp on board we have to install additional packages: gulp-rename and gulp-ng-annotate. In order to do that type into command line

npm install gulp-ng-annotate --save-dev
npm install gulp-rename --save-dev

1 2	npm install gulp-ng-annotate --save-dev npm install gulp-rename --save-dev

Now we can create gulp.js file which should look more or less like that

var rename = require('gulp-rename'),
    ngAnnotate = require('gulp-ng-annotate');

gulp.task('annotate', function () { //create new task 'annotate'
    return gulp.src('app/layout/controllers/shellController.js') //select files to process
        .pipe(ngAnnotate()) // add angularjs dependeny injection annotation
        .pipe(rename('app.all.js')) //rename in-memory stream to app.all.js
        .pipe(gulp.dest('.build'));//save stream to new location
})

var rename = require('gulp-rename'),

ngAnnotate = require('gulp-ng-annotate');

gulp.task('annotate', function () { //create new task 'annotate'

return gulp.src('app/layout/controllers/shellController.js') //select files to process

.pipe(ngAnnotate()) // add angularjs dependeny injection annotation

.pipe(rename('app.all.js')) //rename in-memory stream to app.all.js

.pipe(gulp.dest('.build'));//save stream to new location

})

We can run this task typing into command line

gulp annotate

1	gulp annotate

And as a result our original code (notice lack of dependeny annotations – no $inject arrray)

(function() {
    angular.module('app')
           .controller('shellCtrl', shellController);

    function shellController($scope, $http) {
        $scope.title = 'title';
    }
})();

(function() {

angular.module('app')

.controller('shellCtrl', shellController);

function shellController($scope, $http) {

$scope.title = 'title';

}

})();

Will be transformed into

(function(){
    angular.module('app')
           .controller('shellCtrl',shellController);

    function shellController($scope,$http){
    }
    
shellController.$inject=["$scope","$http"];
})();

(function(){

angular.module('app')

.controller('shellCtrl',shellController);

function shellController($scope,$http){

}

shellController.$inject=["$scope","$http"];

})();

.NET BLOG

.NET, C# blog

Using ECMAScript6 today

1. Introduction

2. Using Traceur

3. Using Babel

Azure – connecting to Windows 10 virtual machine

AngularJS – extending existing services using decorator

WinJS – AuthenticateAndContinue and “remote procedure call failed” exception

AngularJS – dependency injection