Evolution of Javascript from a Web Developer POV

Javascript-Early Stages

In the beginning, there was just plain vanilla JavaScript used for DOM Manipulation and because of the inconsistent DOM APIs across different browsers resulted in lots of bugs.

Javascript Frameworks for DOM Manipulation
 Early frameworks focused on accessing the DOM (the 'query' in jQuery)
Utility functions for animation, cross-browser AJAX, templating added.
jQuery beat out other similar tools such as MooTools, Prototype to become nearly ubiquitous.
There was no "front-end architecture" yet

Javascript Frameworks as UI Widgtes
 Reusable interactive UI components were packaged as UI Widgtes
(ex)jQuery UI, ExtJS, Kendo UI, Bootstrap

Web Application Javascript frameworks
 Mature JavaScript Frameworks designed for building MVC/MVVM web applications
 Usually include templating, AJAX CRUD, and  1 way/2 way model binding
 (ex)Knockout, Backbone.js, AngularJS, Batman.js, Ember.js

JavaScript Tools

DOM Abstraction Prototype YUI jQuery Mootools ExtJS Script.aculo.us Dojo	MV? Frameworks Ember Angular Backbone Spine CanJS	Utility Libraries Clementine Underscore Knockout Socket.io RequireJS Lodash	Testing Tools Mocha QUnit Jasmine JSHint CSSLint Chai ExpectJS PhantomJS
Templating Handlebars Mustache EJS HAML Dust	Mobile UI Frameworks jQuery Mobile SenchaTouch KendoUI	UI Component Libraries jQuery UI Bootstrap Ratchet	Pseudo Languages Coffeescript Typescript Dart
Build Tools Grunt Yeoman	Package Managers NPM Bower	Preprocessors / Mixin Libraries SASS LESS Bourbon Preboot	None of the Above! Node.js

Angular 2 -How to make Ajax call with Custom Service

I have been playing with Angular 2 to make ajax calls.But the Angular Quick-start does not have any documentation for $http module used as of Angular 1x. After googling , found out the answer, that Angular 2.0 DOES NOT have a $http service

1.Angluar JS has a separate data persistence layer, that will cover HTTP. This is not finished yet.
2.Because of Zone in Angular 2 you can use any existing mechanism for fetching data. This includes XMLHttpRequest fetch() and any other third party libraries.
3.XHR in the compiler is meant to be private, and should not be used.

 So the solution will be,
Create a factory class which acts as a wrapper and hold all the methods for HTTP requests.

  export const $http = {
	get: function(url: string) {
		return _sendRequest(url, null, 'GET');
    },
    post: function(url: string, payload: any){
    	return _sendRequest(url, payload, 'POST');
    },
    put: function(url: string, payload: any){
    	return _sendRequest(url, payload, 'PUT');
    },
    delete: function(url: string, payload: any){
    	return _sendRequest(url, null, 'DELETE');
    }
}

Use XMLHttpRequest for making the actual Ajax calls and return a Angular Promise.

    function _sendRequest(url: string, payLoad: any, type: string): Promise {
        return new Promise(function(resolve, reject) {
            var req = new XMLHttpRequest();
            req.open(type, url);
            req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

            if (payLoad) {
                req.send(JSON.stringify(payLoad));
            } else {
                req.send(null);
            }
        });
    }

Handle the JSON parsing in the "resolve" callback and error handling in the "reject" callback.

    function _sendRequest(url: string, payLoad: any, type: string): Promise {
        return new Promise(function(resolve, reject) {
            var req = new XMLHttpRequest();
            req.open(type, url);
            req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

            req.onload = function() {
                if (req.status == 200) {
                    resolve(JSON.parse(req.response));
                } else {
                    reject(JSON.parse(req.response));
                }
            };

            req.onerror = function() {
                reject(JSON.parse(req.response));
            };

            if (payLoad) {
                req.send(JSON.stringify(payLoad));
            } else {
                req.send(null);
            }
        });
    }

Register a "then" callback for the Promise returned and set the view objects for rendering them to the template

   $http.get('http://jsonplaceholder.typicode.com/posts?userId=1').then(function(json) {
         appClass.greetings = json;
      });

Example plunkr

AngularJS 2.0 - What's new? My Take

Before u Start:

Read the following to get insight on specifications over which the AngularJS 2.0 is built.

1.Angular JS is written in ES6. Simple explanation of ES6 features can be read from here.
2.Angular JS uses AtScript(@ script) - Angular's Extension of ES6 features to support annotations & decorators similar to annotations in Java.
3.Angular JS uses traceur transpiler. It allows the new and proposed future EcmaScript features to be used in browsers.
4.es6-shim.js - To add ES6 in current browsers. 

Annotations:

AtScript provides 3 types of annotations - Type Annotations, Field Annotations and MetaData Annotations.
Lets start for now with, 

             1.@Component - Indicates the class is a component
             2.@View- As the name suggests-it is the view of the component.It can be a HTML template.They add some meta data to the class in order to give it a specific meaning. They are a declarative way to add meta data to code.

How to create a Angular 2.0 Component?

Angular 2 works with a concept of components. Each component consist of 2 parts

1. The Annotation Section(@Component & @View) – This consist of the meta data (component selector, template) for that component
2. The Component Controller Section(Class) – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it .

   import {  ComponentAnnotation as Component,
  ViewAnnotation as View,bootstrap} from 'angular2/angular2';

  @Component({
  selector: 'app'
  })
  @View({
    template: 'Hello {{ name }}'
   })
  class App{
    constructor() {
     this.name = 'Muthu!';
    }
  }
   bootstrap(App);

Example plunkr

Display Loading image on Partial Page Refresh/Ajax

Continuing from my previous post on displaying the loading symbol on page load, this post I will explain how we can do the same for Partial Page refresh (aka) Ajax.

Add a hidden div 

Add a loading image inside a hidden div somewhere in your page.

<div id="loader" style="display:none">
          <img src="your/image/path/loading.gif" alt="loading..."/>
</div>

Add loading image to Body thro' JavaScript

Add the loading image to body tag using jquery.

$('body').prepend('<div id="loading-image" style="page-loader"/>');
$('#loading-image').html($('#loader').html());

Add CSS for page-loader

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
 }

Add loading image with page mask

If you wish to mask the entire page on displaying the loading image, add the loading image within a div that will acts as page mask and then add that div to the 'body' tag.

$('body').prepend('<div class="pagemask"><div id="loading-image" style="page-loader"/></div>');
$('#loading-image').html($('#loader').html());

add the CSS for page mask 

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background:#fff;
  z-index: 9999;
 }

மகிழ்ச்சியான குறிமுறையாக்கம் !

Display Loading Image on Page Load

Of late, Websites are more media intensive. There are tons of JavaScript written to make pages look stunning and visually impressive.But the evil side is that it takes toll on the page loading times.

So what do I do , when i don't want to sacrifice my rich UI for page loading times.Alternative is to display a loading image masking the entire body until the DOM is loaded. 

How to get this running?

Get a loader image

We can get loading image GIF's on google search.Pick up the most suitable one and make sure it is open source to use.

Add a Div

Add a div like below immediately after the body tag.This is necessary as we want the whole page to be masked.

<div class="page-loader"></div>

Add CSS for page-loader

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df;
}

With this the entire body is masked and covered by the loading image.The Z index make sure loader is on top of all the DOM elements

Add JavaScript Code

In my case , I opted for jQuery as my JS framework.Add the below piece of code 

$(window).load(function() {
 $(".page-loader").fadeOut("slow");
})

window.load ensures the entire DOM is loaded and then fades out the loading image.

HTML to PDF in Java - Part 1

Reporting in web can assume multiple formats but the most popular is PDF.PDF report is more often designed as a snapshot of the web page.There are number of Commercial and open source libraries in java for PDF generation.In my coding experience,I came across 2 patterns.

Code Entire Report in Java

When?

If the report is a small i.e a page which contains very limited components.

Pros:
1.Reports can be extracted to a template but format supported is mostly PDF

Cons:
1.Since Code is in Java,changes can't be done on the fly.For every change in PDF code needs to be changed. 
2.Achieving the layout of the components is a herculean task.
3.Reports with huge dataset might take long time and result in timeout.
4.Memory utilization will also be high for large data set.


HTML to PDF in Java

When?

If the report is complex i.e SVG images, charts, tables with huge record set.

Pros:
1.Any Java template engine can be used as all we need is HTML/XHTML.
2.Layout of the report can be changed on the fly.
3.components styles are from the included CSS files. So components in PDF can be customized on the fly.
4.Generation of Reports for Huge data sets is possible.


Cons:
1.HTML/XHTML needs to be well formed and adhere to w3c standards.
2.SVG images are not supported by  the popular PDF rendering libraries.We have to use Apache PDFTranscoder to render the SVG.
3.It is slow for big HTML pages as every element has to be parsed and rendered.

Angular JS - Modules

Controller

The data and logic needed for a particular view is defined inside a controller.The variables and functions are defined in the scope of controller which can be accessed by the view.We can define nested controllers also.Controllers should not contain business logic.Controllers should not hold any data, but only provide references to data in their scopes.

There are 2 ways to create controller mapping,
1.using ng-controller module
2.using router service


Service

Service will handle the data storage and acts as DAO.Controllers can inject the reference to the actual service or mock service in unit testing.

Model

Model Objects are ordinary JavaScript data types and need not be dependant on framework.The models can be bound(i.e) synchronised to the views provided they are defined in the scope of the view.

Routes

Routes map url's with the controller and the template to be rendered.This feature simplifies the forward/backward linking of applications.

$routeProvider is used to define a mapping between a specific template URL and a controller by calling the when() function. The call to the otherwise() function defines a fallback mechanism that applies to all requests that do not match the predefined routes.