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

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...

Angular 1.3 – Creating a controller

יום שישי, דצמבר 5, 2014

In one of my Angular projects I needed to control the way a controller is instantiated By default, the developer specifies the controller name inside the HTML or inside a route configuration and then Angular instantiates the controller. Suppose I want to the instantiate the controller my self and return it to Angular Well, this should be quite easy angular.module("MyApp").controller("HomeCtrl", function () {     function HomeCtrl() {         this.name = "Ori";     }     HomeCtrl.prototype.sayHello = function () {         alert(this.name);     }     return new HomeCtrl(); }); As you can see, I am not registering a JavaScript constructor but rather use anonymous function and then return a new controller object. Running this code under Angular 1.2 completes without any issue However, when switching to Angular 1.3 i noticed that all controllers instantiated this...

Cleaning after Knockout

יום שלישי, ינואר 29, 2013

Using KnockoutJS is really fun. You set some data-bind attributes on your HTML and KnockoutJS does the magic of binding it to a JavaScript object (A.K.A, view model) An important fact that most of us are missing is that Knockout holds some internal data structure to manage its magic. Basically, every time you call ko.applyBindings a new management record is added to KO internal representation. This means that your view model is being held by some global data managed by KO. So in case you create and destroy HTML dynamically using JavaScript the view model is...

Building Single Page Application

יום חמישי, אוגוסט 23, 2012

Taking HTML to the extreme is all about developing Single Page Application (SPA). Fetch all required HTML + JavaScript + CSS files from the server and then use the server only for data manipulation. No more “HTML server side rendering” and no more “partial page updates”. Doing so allow you to offer your end users a much more attractive user experience. For example, since all required files are up front loaded to the browser we can use HTML5 Offline Web Application feature to allow our web application to be executed on the client machine even if the server...
no comments

Doing OOP with JavaScript

יום רביעי, אוגוסט 15, 2012

Currently there are two main approaches to simulate object orientation in JavaScript Classical approach - We use the prototype object to define instance methods. Every object “enjoy” the methods defined inside the prototype. Inheritance is achieved by one prototype that extends another one. Modern approach – Each object define its own methods and fields. Inheritance is achieved by one object that extends another one. Classical approachfunction Shape(x, y) {     this.x = x;     this.y = y; } Shape.prototype.show = function () {     var details,         message = "";     details = this.getDetails();     for (var key in details) {         message += (key + ": " + details + "\n");     }     alert(message); } Shape.prototype.getDetails = function () {     return {         x: this.x,         y: this.y     }; } function Rect(x, y, width, height) {     Shape.call(this, x, y);     this.width = width;     this.height = height; } Rect.prototype.getDetails = function () {     var details = Shape.prototype.getDetails.call(this);     details.width = this.width;     details.height = this.height;     return details; } Function.prototype.extend = function (func) {     var base,         derived;     base = func.prototype;     derived = this.prototype;     for (var methodName in base) {         if (base.hasOwnProperty(methodName) && !derived) {             derived = base;         }     } } Rect.extend(Shape); var s = new Rect(5, 10, 200, 100); s.show();Few facts We use the prototype object to define...
2 comments