Debugging NodeJS Applications

יום שלישי, אוקטובר 6, 2015

With the introduction of Microsoft Visual Studio Code, debugging of NodeJS application is now a quite simple procedure to follow For example, suppose we have the following NodeJS super simple application console.log("Hello NodeJS"); and we would like to debug it (although there is no much to debug) Just open command line prompt. Switch to the directory containing your JavaScript file and type code . I am assuming that you already installed Visual Studio Code from here (very short installation). Now, Visual Studio Code should open and display the list of files under the current directory Double click the app.js file, set a breakpoint using F9 and press F5 The debug...
no comments

Bringing the simplicity of Attributes/Annotations into Angular 1.X

יום שני, ספטמבר 28, 2015

One of the more interesting features of Angular 2 is its improved dependency injection mechanism Unlike Angular 1.X you don't need to specify the dependencies manually in order to preserve minification capabilities Angular 2 is smart enough to use the type information of the dependency and inject the correct implementation at run time Can we do the same with Angular 1.X ? Sure, keep reading ... First lets describe the way we define a controller import {MyApp} from '../App'; import {Controller} from '../Common/Decorators'; import {Contact, ContactService} from '../Services/ContactService'; @Controller(MyApp, "HomeCtrl") class HomeCtrl {     contacts: Contact;     constructor(contactService: ContactService) {         contactService.getAll().then(contacts => {             this.contacts = contacts;         });     } } And the service dependency import {MyApp} from '../App'; import {Service, Inject} from '../Common/Decorators'; @Service(MyApp, "contactService") export class ContactService {     constructor(@Inject("$http") private $http: ng.IHttpService) {     }     getAll(): ng.IPromise<Contact> {         return this.$http.get("/contacts.json").then(response => response.data);     } } export interface Contact {     id: number;     name: string; } Second we need to define the Controller and Service decorators (A.K.A attribute/annotation) export function Controller(module: ng.IModule, name: string) {     return function (target: Function) {         Reflect.defineMetadata("controller", target, { controllerName: name });         module.controller(name, target);         set$inject(target);     } } export function Service(module: ng.IModule, name: string) {     return function (target: Function) {         Reflect.defineMetadata("service", { serviceName: name }, target);         module.service(name, target);         set$inject(target);     } } For more information on...

Typescript 1.6 – Async & Await

יום שני, ספטמבר 21, 2015

The Promise pattern simplifies JavaScript asynchronous function management While using promises is much cleaner than using naive callbacks the code still does not look so nice and tidy Consider the following, function getValue() { return asyncStep1().then(function () { return asyncStep2().then(function () { return asyncStep3(); }); }); } The sample code invokes three asynchronous functions one after the other and returns the output of the last function (step3) Using Typescript 1.6 you can just write the following async function getValue() {     await asyncStep1();     await asyncStep2();     return await asyncStep3(); } Much better, right ? The async feature is considered experimental which means that it is turned off by default. If you are using Typescript from the command line (using NodeJS) then you need to add the --experimentalAsyncFunctions option In case you are compiling Typescript within VisualStudio 2015 then...
no comments

Prototype based controller with Angular 1.4

יום שלישי, יוני 30, 2015

I just encountered a brilliant post written by Eyal Vardi (Hebrew only) Eyal talks about how we can use Angular metadata stored inside $inject to automatically inject the controller's dependencies into the controller instance This way you don't need to manually copy local dependency parameters into the controller instance. Consider the following Typescript controller + HTML view class HomeCtrl {     $scope;     $http;     items: any;     constructor($scope, $http) {         this.$scope = $scope;         this.$http = $http;     }     refresh() {         this.$http.get("/api/item").then((items) => {             this.items = items;         });     } } angular.module("MyApp").controller("HomeCtrl", ); <div ng-controller="HomeCtrl as ctrl">     <ul>         <li ng-repeat="item in ctrl.items">             <span>{{item.name}}</span>         </li>     </ul>     <div>         <button ng-click="ctrl.refresh()">Refresh</button>     </div> </div> As you can see all dependencies specified by angular.controller function are copied manually into the controller instance so we can later use them inside the refresh function. When writing "plain" Angular controller based on simple function (without prototype) the dependencies are specified as local parameters...
tags: , ,
no comments

Adding zone.js to Angular 1.4

יום שבת, יוני 27, 2015

(I find below bits quite useful so I add them to github. You can get them by using bower install angular1-zones) One of the cool features of Angular 2 is that there is no need to call $scope.$apply. This is true even if you are using 3rd party asynchronous library which Angular is unaware of. The magic resides inside Angular 2 library named zone.js The library overrides all standard browser APIs that are considered asynchronous. zone.js injects its own implementation and uses it to monitor the start and completion of any asynchronous activity. Consider the following Angular 1.4 source code function HomeCtrl($scope) {     $scope.change = function () {         setTimeout(function () {             $scope.message = "XXX";         }, 1000);     } } This is a plain controller...
tags: , ,
one comment

Managing long running operation using promise and $$q

יום ראשון, אפריל 5, 2015

Through my previous post I described the challenges when implementing long running operation. Basically, you need to break your long running operation into small steps where each step is isolated by setTimeout(0) from the next step. At this post I would like to cover a technique for using promise object to manage the long running operation. Angular's promises offer the common then/catch functions but also offer an additional function named notify The notify function can be used to send notifications to the client about the progress of the running operation. For example, suppose a runTask function is responsible for initiating a long running...
tags: , ,
no comments

Updating DOM during long running operation

יום שבת, מרץ 21, 2015

Suppose I need to implement a long running operation (longer than a few seconds) and during that operation display some user feedback Well, JavaScript is single threaded. This means that during operation execution the single thread is busy and cannot handle UI events like mouse move and mouse click. From end user perspective the UI is dead. Modern solution is to use Web Worker. As long as your algorithm is pure (only accesses JavaScript objects) then you are OK. However, if the algorithm needs to access DOM objects you cannot use web workers since they have no access to the DOM I agree that...

Configuring a Provider

יום שלישי, פברואר 24, 2015

What is wrong with below code ? angular.module("MyApp", ).config(function (MyProvider) { }); angular.module("MyApp").provider("My", function () {     this.$get = function () {         var service = {             doSomething: function () {                 console.log("Do something ...");             }         };         return service;     } }); Nothing. But, depends on the version of Angular you are using you might encounter errors. Running above code with Angular 1.2.9 generates the following error: Failed to instantiate module MyApp due to unknown provider: MyProvider Apparently, Angular 1.2.9 queues config callbacks and provider registration requests into the same queue. Lets look at Angular 1.2.9 implementation for a module function module(name, requires, configFn) {         var invokeQueue = ;         var runBlocks = ;         var moduleInstance = {             provider: invokeLater('$provide', 'provider'),             config: invokeLater('$injector', 'invoke'),         };         return  moduleInstance;         function invokeLater(provider, method, im) {             return function() {                 invokeQueue();                 return moduleInstance;             };         }     }); }; A module instance holds two private queues, invokeQueue and runBlocks. Both provider and config methods are using invokeQueue queue Later, Angular loads the module by walking the queues and invoking all registered callbacks. Our problematic sample code first registers a config block angular.module("MyApp", ).config(function (MyProvider) { }); And only...
tags: , ,
no comments

$injector.instantiate

יום חמישי, פברואר 19, 2015

Not every class inside Angular application is a service For example, consider the following class definition function Contact($http, name, email) {     this.$http = $http;     this.name = name;     this.email = email; } Contact.prototype.dump = function () {     console.log(this.name + ", " + this.email); } Contact.prototype.save = function () {     //     //  Work against this.$http     // } Above class represents a single contact and therefore is instantiated multiple times during application execution. This means, that we cannot register it as an Angular factory/service However, the Contact class has $http dependency. This means that the caller must supply it manually. For example, assuming the caller is a controller which has a reference to $injector it can do the following angular.module("MyApp").controller("HomeCtrl", function ($injector) {     var $http = $injector.get("$http");     var contact = new Contact($http, "Ori", "ori.calvo@gmail.com"); contact.dump(); }); However, what if the Contact class has many dependencies that must be resolved. Calling $injector.get for every dependency is quite tedious Fortunately, Angular offers a...
tags: , ,
no comments

Mobile Icons

יום שבת, פברואר 14, 2015

You know why I like Twitter's Bootstrap? Because of the Icon gallery I don't know what about you but for me it was always a challenge finding a nice icon gallery that fits my application needs. I used several commercial libraries but even then I found the supplied icon gallery to be quite limited Bootstrap has a nice icon gallery which are vector based (not pixel) which means you can enlarge each image and quality is kept. So, why am I telling you about it? Bootstrap is not new to anyone Well, I just found that they add additional images to their icon...
tags: , ,
no comments