Friday, December 16, 2011

Design Patterns

Design Patterns are the proven solution to the common development problems faced during the software designing. These are the suggested way to solve the problems by providing cleaner, robust and efficient framework.
Design Patterns can be grouped into different categories
  1. Creational Patterns
  2. Structural Patterns
  3. Behavioral Patterns
Creational Patterns
Creational design patterns are design patterns that deal with object creation mechanisms, trying to create objects in a manner suitable to the situation. The basic form of object creation could result in design problems or added complexity to the design. Creational design patterns solve this problem by somehow controlling this object creation. Creational design patterns are further categorized into Object-creational patterns and Class-creational patterns. Where, Object-creational patterns deal with Object creation and Class-creational deal with Class-instantiation.
  • Abstract factory pattern: Creates an instance of several families of classes.
  • Builder pattern: Separates object construction from its representation.
  • Factory method pattern: Creates an instance of several derived classes.
  • Lazy initialization pattern: Is used as tactic of delaying the creation of an object, the calculation of a value, or some other expensive process until the first time it is needed
  • Prototype pattern: A fully initialized instance to be copied or cloned.
  • Object pool pattern: Helps in avoiding expensive acquisition and release of resources by recycling objects that are no longer in use.
  • Singleton pattern: A class of which only a single instance can exist.
Structural Patterns
Structural design patterns are design patterns that ease the design by identifying a simple way to realize relationships between entities.
  • Adapter pattern: Match interfaces of different classes.
  • Bridge pattern: Separates an object’s interface from its implementation.
  • Composite pattern: A tree structure of simple and composite objects.
  • Decorator pattern: Add responsibilities to objects dynamically.
  • Facade pattern: A single class that represents an entire subsystem.
  • Flyweight pattern: A fine-grained instance used for efficient sharing.
  • Proxy pattern: An object representing another object.
Behavioral Patterns
Behavioral design patterns are design patterns that identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication.
  • Chain of responsibility pattern: A way of passing a request between a chain of objects.
  • Command pattern: Encapsulate a command request as an object.
  • Interpreter pattern: A way to include language elements in a program.
  • Iterator pattern: Sequentially access the elements of a collection.
  • Mediator pattern: Defines simplified communication between classes.
  • Memento pattern: Capture and restore an object's internal state.
  • Observer pattern: A way of notifying change to a number of classes.
  • State pattern: Alter an object's behavior when its state changes.
  • Strategy pattern: Encapsulates an algorithm inside a class.
  • Template method pattern: Defer the exact steps of an algorithm to a subclass.
  • Visitor pattern: Defines a new operation to a class without change.

Monday, December 12, 2011

GZIP compression for better performance

Compression is easy and effective way to reduce the bandwidth to download data from internet and increase the performance of the web site. In other words, server sends the compressed HTML in the form of zip file to the client and the client browser unzips the file to retrieve the HTML. All the latest browsers support gzip/deflate. 


Why we need it?


Lets understand how the web model works. When we visit the web page e.g. http://jassra.com/, basically we are requesting for Index file from the server and server returns the same file to the client.


The way communication takes place between the client and the server is described below:
  1. Browser requests a file from the server and the data sent for the request is 100 B
  2. Server finds the requested file
  3. Creates HTML for the response
  4. Server sends 1.9 KB of data back to the browser. And user needs to wait for the data to be downloaded and finally browser displays the page
Network trace


Now with gzip if we can compress the file to reduce the size of the file and less data needs to be transferred to the client resulting in less bandwidth and quick response.
  1. Browser requests a file from server. Data sent for the request is 100 B
  2. Server finds the requested file
  3. Creates HTML for the response and  zips the file
  4. Server sends 874 B of data back to the browser. 874 B of data is downloaded quickly as compared to the uncompressed data and browser displays the page much faster
Means Happy Customer..... :o)

Network trace



For more understanding about how gzip algorithm works, please view this video.



Please feel free to leave your feedback ....

Sunday, December 11, 2011

Web Storage in HTML (5)

In newer version of HTML (so called HTML 5), we have two new mechanisms introduced to store structured data related to session cookies and cookies.
  1. Session Storage (sessionStorage)
  2. Local Storage (localStorage)
As the name specifies, local storage is for the long term  and session storage is only limited to that particular session.


Session Storage


Session storage allows to save data on the client side persisting for that particular session only. Data can be saved on the client side and shared between multiple pages during that session but once session is closed, all the stored data on the client side is deleted and is never accessible again. This also helps in differentiating the two different windows of the same site opened on the same machine and maintaining their instance without being affected with the activities on the other window. So i would think its right to say that session storage is dependent on combination of session id and site id together.


Note : The lifetime of a browsing context can be unrelated to the lifetime of the actual user agent process itself, as the user agent may support resuming sessions after a restart.


Local Storage


Local storage allows to save data on the client side for the longer duration for the returning users. Local storage data is save on the client side and is only dependent on site id. With local storage, changes made on the one site window will affect on the other window opened on the same machine.


The API



Web storage provide list to key/value pair called items.Keys are strings. Any string (including the empty string) is a valid key. Values are similarly strings.


Adding Item  - Insert new item in the storage 
sessionStorage.setItem(key, value)
localStorage.setItem(key, value)


Retrieving Item - Retrieve item from the storage 
sessionStorage.getItem(key)
localStorage.getItem(key)


Removing Item - Removes item for the storage 
sessionStorage.removeItem(key)
localStorage.removeItem(key)


Clear - Removes all the items for the storage 
sessionStorage.clear()
localStorage.clear()


Length - Get the count of items in the storage
sessionStorage.length
localStorage.length


Code Example


To check whether local or session storage is supported


// Check for the browser supports session storage
if ("sessionStorage" in window && window["sessionStorage"] != null) {
    // Session storage supported
}

// Check for the browser supports local storage

if ("localStorage" in window && window["localStorage"] != null) {
    // Local storage supported
}


// Write to session storage
sessionStorage.setItem("language""en-us");
// Read from session storage
var sessValLang = sessionStorage.getItem("language");
// Removing session storage item
sessionStorage.removeItem("language");

// Write to local storage
localStorage.setItem("language""en-us");
// Read from local storage
var locValLang= localStorage.getItem("language");
// Removing local storage item
localStorage.removeItem("language");



Click here for the demo ...

P.S. This is my first post, please feel free to guide me or correct me for betterment ... Thanks in advance.