Avi Jassra

Project Euler - Problem 4 in C#

2014-05-28T19:53:00.000-04:00

Largest palindrome product

Problem 4

A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 99.
Find the largest palindrome made from the product of two 3-digit numbers.

Sounds like pretty simple problem ... right.

For all the three digit numbers, find the product between them and check if the product of numbers is palindrome or not. And if yes, find the greatest product.

Like explained in the problem, a palindrome is a word, phrase, or number, whose meaning may be interpreted the same way in either forward or reverse direction. To test a palindrome number, we need to reverse the digits of the number. And for that, we iterate using formula ((y*10) + (x%10)) where y is new reversed number starting from 0 and x is original number to be reversed. Here is the example below to understand it better

Iteration	Formula	New Number (y)	Actual Number (x)
0	0	0	98743
1	(0*10) + (98743%10)	3	9874
2	(3*10) + (9874%10)	34	987
3	(34*10) + (987%10)	347	98
4	(347*10) + (98%10)	3478	9
5	(3478*10) + (9%10)	34789	0

Method to reverse digits and test if number is palindrome or not ....

// Check is number is palindrome
public static bool IsPalindrome(this int number)
{
    // store the actual number for check
    var actualNumber = number;
    // initialize new palindrome number
    var palindromeNumber = 0;

    // to reverse the number e.g. 98743 and set new palindrome number to 0
    // multiple new palindrome number with 10, and add modulus when number is divide by 10 and set it back in the new number
    // iteration 1 -> newPalindromeNumber: (0*10 + 98743%10) -> 3; number -> 9874
    // iteration 2 -> newPalindromeNumber: (3*10 + 9874%10) -> 34; number -> 987
    // iteration 3 -> newPalindromeNumber: (34*10 + 987%10) -> 347; number -> 98
    // iteration 4 -> newPalindromeNumber: (347*10 + 98%10) -> 3478; number -> 9
    // iteration 5 -> newPalindromeNumber: (3478*10 + 9%10) -> 34789; number -> 0
    // loops till number is not equal to 0
    // and now we have reversed number to check if its palindrome
    while (number != 0)
    {
        palindromeNumber = (palindromeNumber * 10) + (number % 10);
        number = number / 10;
    }
    //if actual number and new expected palindrome numbers are same
    return (actualNumber == palindromeNumber);
}

Here is the first basic implementation to solve the problem

// basic looping
public static IEnumerable<int> ListOfThreeDigitNumbersProduct()
{
    // looping for the first 3 digit numbers
    for (var i = 999; i > 99; i--)
    {
        // looping for the second 3 digit numbers
        for (var j = 999; j > 99; j--)
        {
            // find the product b/w the numbers
            var product = i*j;

            // check if the number is palindome
            if (product.IsPalindrome())
            {
                yield return product;
            }
        }
    }
}

Whats happening in this solution

Number x and y iterate from 100 to 999 to find product of x with all the 3 digits y number.
Every product is verified for palindrome test and if successful, added to the list of palindrome products of 3 digit number
Max number is picked from the list of palindrome numbers from the list.

var maxProduct = ListOfThreeDigitNumbersProduct().Max();

Note: We don't need to create the list of palindrome numbers.We can put conditions to always compare and get the largest palindrome number.

This solution works but there is room for improvement .... :) . Here are my observation for improvement for faster solution ...

Product of x*y is equal to y*x. So we don't need check the product of x with y and again for x = y and y = x. This can be avoided by setting upper bound y to x.
If the new product is greater then the previously stored palindrome number, only then we should run palindrome test on the current number. This way we can avoid palindrome test processing time on many numbers, hence making solution faster.

// intelligent faster solution
public static int LargestThreeDigitNumbersProduct()
{
    // initialize largest palindrome number variabel
    var largestPalindromeNumber = 0; 

    // loopping thru all 3 digit numbers
    for (var i = 999; i > 99; i--)
    {
        // PERFORMACE BOOST
        // looping thru 3 digits number from 100 to first number
        // anything greater then first number has been already calculated
        // as (a*b) = (b*a)
        for (var j = 100; j <= i; j++)
        {
            // product of nunmbers
            var product = i*j;

            // PERFORMACE BOOST
            // if current product is greated then the previous saved palindrome product
            // only then check for number is palindrome else we can avoid extra checking task
            if (product > largestPalindromeNumber) 
            {
                // check number is palindrome
                if (product.IsPalindrome())
                {
                    // if is palindrome, save it as largest palindrome number 
                    largestPalindromeNumber = product;
                }
            }
        }
    }

    return largestPalindromeNumber;
}

Link to Problem #3

If you have a better solution, please don't hide it from us .... share your knowledge ... :) .... till then, enjoy solving problems.

Project Euler - Problem 3 in C#

2014-05-27T07:42:00.000-04:00

Largest prime factor

Problem 3

The prime factors of 13195 are 5, 7, 13 and 29.
What is the largest prime factor of the number 600851475143 ?

To find the largest prime factor of a number x, we can do it in couple of ways. One way is the start dividing the number x by y = 2, 3, 4 ... For each factor y of x, this will remove all the smaller factors before moving to the next y till y is less then x. This will work but there is room for improvement over here.

Let improve this existing solution with some facts.

2 is the only even prime number, so we can eliminate all the even numbers by recursively dividing the number by 2. Then we can find the prime factor of new whole number faster by incrementing divisor by 2 starting from 3.
If we don't find the prime factor of x until y (number we are testing to be prime factorial starting from 3) is less then equal to square root of x, means we have a tested all the possible options and no more factors are present.

Here is the function to find the largest prime factor of a given number.

public static long LargestPrimeFactorByDividingBy2InLoopsInitially(long number)
{
    // set the initial dividing number
    long dividingNumber = 2;
    // looping to divide with only even prime number to remove all possible even numbers
    while (number % 2 == 0)
    {
        number = number / 2;
    }
    // no even number is left, hence starting with 3
    dividingNumber = 3;
    // divide in loops until dividing number is less then square root of expected lpf
    while (System.Math.Sqrt(number) > dividingNumber)
    {
        if (number % dividingNumber == 0)
        {
            // if expected lpf is divisible, update the number
            number = number / dividingNumber;
        }
        else
        {
            dividingNumber += 2;
        }
    }

    return number;
}

Link to Problem #2
Link to Problem #4

If you have any better and faster way, please share it with us. Till then, enjoy solving problems .....

Word of Experience

2014-05-25T21:48:00.001-04:00

While working in the corporate sector, we face different set challenges everyday. They might not always related to our work but sometimes with our attitude towards our work (which might be intentionally or unintentionally).

DISCLAIMER:
I am very firm believer of doing things as if i won't do it, someone else will.

Experience:

Being too much technical is also problem sometimes. You start understanding all the business requirements/problems more by technical implementation (virtually creating solution in head at the very same instance) rather then understanding it as something user will like to have in a product which helps them to complete the task.
Recently we created a small app in my current engagement. It was almost complete (with couple of defects ... :) ). While trying to understand a defect, my manager came up with all together new requirement which potentially changes the complete or major portion of the JavaScript architecture. We developers (my colleague and myself) resisted back for that change in front of higher management. It was big change, potentially forcing us to go back to drawing board and redesign the whole thing again.

My intentions were good because we have completed our application and more over it was never part of the requirements. I was not afraid of the change but somehow resisted because timeline does not look good with release date.

And soon it was time to have a word with my friend (who happens to be my manager too). He made me realize that changes are inevitable in the cycle of software development (which i knew) and may be what i was saying was right too, bring such big changes in the last minute was not a good idea too. But i was not conveying my message properly. All management could see was me trying to push back on the work and truly, that was not my intention. What i should have done was, tell them how big impact this is on the current architecture and time line required to revisit the design for new requirement. I will come out as a winner with positive attitude towards my work and also lay it down in front of management. And its their call to go ahead with change accepting new timeline, play gamble to push new changes in current timeline or put it in phase 2 of the application.

Lesson:

Its very important to understand our audience and talk in there language. Management does not care about technical issues we face while development. If business needs something, it needs it .... that's it. But what they care about is budget and are we on time for release or not. Its more important for we developers to play along and be flexible with new requirements. Always high light issues in positive attitude towards work, try to talk to management in their language, i.e. budget, time to finish task and let them take decision.

I know many of you guys already do this but this was high light of my week. And hope this helps some developer out there too ...

Expected in C# 6.0

2014-05-15T19:45:00.000-04:00

Mads Torgersen (Program Manager for Managed Languages) from the C# design team covered some of the new probable features in C# 6.0 in Build 2014 (Click here to view the video).

Lets drill down some of the highlighted features

Auto-Properties w/ Initializer:

Initializing a immutable class is a tedious process currently

Before

private int _x;
public int X { get { return _x; } }

public int Y { get; private set; }

With C# 6.0

public int X { get; } = _x;

public int Y { get; } = _y;

Thoughts

Instead of creating private members to set the value and return in getter or use private setter. We can initialize the property like this. Very useful for the immutable classes.

Primary Constructor:

Shorter and cleaner way to write constructor where we are just setting the values to the properties with private set without any extra validation.

Before

public class Person
{
    private string _name;

    public Person(string name, int age)
    {
        _name = name;
        Age = age;
    }

    public string Name { get { return _name; } }

    public int Age { get; private set; }

    .....
}

With C# 6.0

public class Person(string name, int age)
{
    public string Name { get; } = name;

    public int Age { get; } = age;

    .....
}

Thoughts

Combination of auto properties initializer and primary constructor will simplify C# code a lot.

Static using statement:

Now in C#6.0, we can include static classes in the scope.

Before

using System;
......
public double Distance { get { return Math.Sqrt(16); } }

With C# 6.0

using System.Math;
......
public double Distance { get { return Sqrt(16); } }

Thoughts

Nice to have feature. It can help in reducing lot of key strokes of including static class name again and again.

Property/Method Expression:

Property and method syntax simplified for short hand. Looks more like LINQ statement but has nothing to do with it.

Before

public double Distance { get { return Math.Sqrt(16); } }

public Point Move(int dx, int dy) 
{
    return new Point(x + dx, y + dy);
}

With C# 6.0

// Property expression
public double Distance => Math.Sqrt(16);


// Method expression
public Point Move(int dx, int dy) => new Point(x + dx, y + dy);

Thoughts

Nice to have feature.

Declaration Expression:

Instead of limiting variables to declaration statement, going forward we can declare them in the middle of the expression where they are need

Before

int val;

var isValid = int.TryParse ("1231", out val);

With C# 6.0

var isValid = int.TryParse ("1231", out var val);

Thoughts

Nice to have feature.

Params for Enumerable:

Now will be able to send params of enumerables instead of limiting to arrays.

Before

public void SomeMethod(params int[] vals) 
{
    .....
}

With C# 6.0

public void SomeMethod(params IEnumerable<int> vals) 
{
    .....
}

Thoughts

Again, nice to have feature. Will not have to convert enumerables into array anymore for the params.

Monadic null check:

Removes the need to check for nulls before accessing properties or methods. Known as the Safe Navigation Operator in Groovy).

Before

if (points != null) {
    var next = points.FirstOrDefault();
    if (next != null && next.X != null) return next.X;
}   
return -1;

With C# 6.0

var bestValue = points?.FirstOrDefault()?.X ?? -1;

Thoughts

Awesome. Will reduce lot of noise in the code.

Await Calls from Within a Catch Block:

With C# 6.0

try
{
    WebRequest webRequest =
        WebRequest.Create("http://IntelliTect.com");
    WebResponse response =
        await webRequest.GetResponseAsync();
    // ...
}
catch (WebException exception)
{
    await WriteErrorToLog(exception);
}

Thoughts

Have not used a lot. No Comments.

All these features look pretty interesting. Looking forward to C# 6.0

Happy Coding ...

Project Euler - Problem 2 in C#

2014-05-12T21:38:00.000-04:00

Even Fibonacci numbers

Problem 2

Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:

1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.

We have two options to solve this problem, declarative or imperative approach. Declarative approach has two steps

Step 1: Generate the list of all the numbers in fibonacci series less then equal to 4 million

public static IEnumerable<int> GenerateList(int upperBound)
{
 if (upperBound < 2)
 {
  throw new Exception("Invalid upper bound");

 }

 IList<int> list = new List<int>();

 var prev1 = 1;
 list.Add(prev1);
 var prev2 = 2;
 list.Add(prev2);
 var sum = 0;

 while (sum < upperBound)
 {
  sum = prev1 + prev2;

  list.Add(sum);

                prev1 = prev2;
                prev2 = sum;
 }

 return list;
}

Step 2: Sum all the even numbers in the list

// OPTION 1
var sum = GenerateList(4000000)
  .Where(x => x % 2 == 0)

  .Sum();


// By creating list first and reducing list to +ve numbers and finding their sum
Console.WriteLine(sum);

In the imperative approach, sum the even number while generating the fibonacci series in the loop itself.

// OPTION 2
var prev1 = 1;
var prev2 = 2;

// prev2 value is 2 which is a even number, so sum starts from 2
var sumByLooping = prev2;

while(prev2 <= 4000000)

{
 var sumOf2Nos = prev1 + prev2;

 prev1 = prev2;
 prev2 = sumOf2Nos;

 if (sumOf2Nos % 2 == 0)

 {
  sumByLooping += sumOf2Nos;
 }
}

// By looping thru numbers and adding only +ve numbers
Console.WriteLine(sumByLooping);

Link to Problem #1
Link to Problem #3

Have fun solving problems ....

What is Dependency Injection? And why it is so important?

2014-05-10T23:00:00.000-04:00

Definition found on WIKI

Dependency injection is a software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle. The term was coined by Martin Fowler.

An injection is the passing of a dependency (a service) to a dependent object (a client). The service is made part of the client's state. Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.

Means: The dependency should be injected to a object which it needs to complete their unit of work. If object A needs object B to complete its unit of work, then B should be provided to A instead of A creating object B. This also means abstraction should not depend on details but instead details should depend on abstractions.

Let's drill down into this and try to make more sense out of this with examples.

NOTE: All my examples will be using C# language

Lets assume, in my application i need to send updates like email to user when a particular task is complete. So based on the requirement, i wrote a class which sends email messages to the users.

public class EmailNotifier
{
  public void Send(string message)
  {
   // code to send email to the user
  }
}

So in my code, i will be using email notifier to send email messages on complete of a task to respective users.

public class Task 
{
  // other methods for the task class

  public void OnComplete(string message)
  {
   // notify user with message
   var notifier = new EmailNotifier();
   notifier.Send(message);
  }
}

Now this is all good but we have couple of concerns over here.

Issue: Testing

Since my code has dependency on the external class, we have to make sure that its dependencies are always available, up and running for testing. Plus we cannot do unit testing of our unit of work as we will be testing notifier class and its dependencies too.

Solution:

Instead of creating the instance of the notifier class inside task object, we can pass the object as an parameter in the class. This is also known as Dependency Injection. Doing so, our code will not require to know how to build notifier object, and for testing we can pass the mocked object(s) which simulates different behavior to capture different scenarios.

public class Task 
 {
  EmailNotifier _emailNotifier;

  public Task(EmailNotifier emailNotifier)
  {
   _emailNotifier = emailNotifier;
  }

  // other methods for the task class

  public void OnComplete(string message)
  {
   // notify user with message
   _emailNotifier.Send(message);
  }
 }

With this solution, task class gets the notifier object injected as parameter. Task class is no longer responsible for creating the notifier object.

This is good but it can be still improved by making this loosely coupled. What exactly this means? To understand this, first we need to understand tight coupling.

Tight Coupling:

In computer science, tight coupling (or tightly coupled) is a type of coupling that describes a system in which hardware and software are not only linked together, but are also dependent upon each other. One of the common characteristics of tight coupling are

A change in one module usually forces a ripple effect of changes in other modules.
Assembly of modules might require more effort and/or time due to the increased inter-module dependency.
A particular module might be harder to reuse and/or test because dependent modules must be included.

Loose Coupling:

In computing and systems design, a loosely coupled system is one in which each of its components has, or makes use of, little or no knowledge of the definitions of other separate components.

In the above code, even though we are injecting dependencies, still it is tightly coupled because it directly depends on concrete object. Any new requirement will cause ripple effect of changes e.g. if business comes up with new requirement of sending user notification via SMS, twitter, etc. To accommodate the new requirement, we can either change the base class to implement new notifications but that change will effect the way updates are sent where ever its being used for this service, which might not be the requirement. In another solution, we can inject all of the notification objects (like email, SMS etc) in the task class. Problem with this approach is that we will be creating instance of all notifiers even though we will be using few of them depending on requirement, we will clutter our code with if else statements and this is memory heavy too. It will work but again, its not the most desirable way of implementing a solution. Anytime new mode of notification is required, we have to change our code, including business logic.

Better solution would be to pass an abstraction/interface as a dependency. We can create a interface which describe how a Notifier class should look like. Then we will implement different ways of notifiers against this contract like this

 public interface INotifier
 {
  void Send(string message);
 }

 public class EmailNotifier : INotifier
 {
  public void Send(string message)
  {
   // code to send email to the user
  }
 }

 public class SmsNotifier : INotifier
 {
  public void Send(string message)
  {
   // code to send sms to the user
  }
 }

 public class EmailAndSmsNotifier : INotifier
 {
  public void Send(string message)
  {
   // code to send email and sms to the user
  }
 }

Now, instead of injecting concrete class, we can inject interface as dependency which promises methods or properties to be present in any class which implements it. This is how new task class will look like

public class Task 
 {
  INotifier _notifier;

  public Task(INotifier notifier)
  {
   _notifier = notifier;
  }

  // other methods for the task class

  public void OnComplete(string message)
  {
   // notify user with message
   _notifier.Send(message);
  }
 }

With new changes we can inject the different types of notifiers user want. In future, any new business need of notifications can been implemented without any major change in the code. We will need to create new class implementing the interface, test it as unit of work and inject it as dependency.
Now the bigger question is, how we inject these dependencies ...
One way is to create factory classes for resolving out dependencies but in any scenario, we will clutter our code with tight coupling.
Other solution is to use DI APIs. They are handy in registering and resolving interface/class types. Registration can been done at the application start. We can update the framework to use our DI object to resolve types in code.

Stayed tuned to my next article to learn more about how to use Unity, DI API in .net applications.

Till then, Happy coding ...

Project Euler - Problem 1 in C#

2014-05-10T22:02:00.000-04:00

Multiples of 3 and 5

Problem 1

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
Find the sum of all the multiples of 3 or 5 below 1000.

Here is my solution

For this problem, either we can create list of int or array of int values up to 1000 like this

// generate the list of numbers from lower bound to upper down
private static IList<int> GenerateNumberList(int upperBound, int lowerBound = 0)
{
 var numberList = new List<int>();

 for (var i = lowerBound; i < upperBound; i++)
 {
  numberList.Add(i);
 }

 return numberList;
}

// generate the array of numbers from lower bound to upper down
private static int[] GenerateNumberArray(int upperBound, int lowerBound = 0)
{
 var arrLength = upperBound - lowerBound;

 var numberArr = new int[arrLength];

 for (var i = 0; i < arrLength; i++)
 {
  numberArr[i] = lowerBound + i;
 }

 return numberArr;
}

Using LINQ for the declarative approach to find the sum of all the numbers either divisible by 3 or 5

// OPTION 1
stopwatch.Start();

var listSum = GenerateNumberList(1000)
   .Where(x => x % 3 == 0 || x % 5 == 0)
   .Sum();

stopwatch.Stop();

Console.WriteLine (listSum);

// OPTION 2
stopwatch.Reset ();
stopwatch.Start ();

var arrSum = GenerateNumberArray (1000)
   .Where (x => x % 3 == 0 || x % 5 == 0)
   .Sum ();

stopwatch.Stop();

Console.WriteLine (arrSum);

With imperative way of programming without using LINQ, we can run the for loop from 0 to 1000 and keep adding all number which meet the criteria.

// OPTION 3
stopwatch.Reset ();
stopwatch.Start ();

var sum = 0;

for(var i = 0; i < 1000000; i++) {
 if (i % 3 == 0 || i % 5 == 0) {
  sum += i;
 }
}

stopwatch.Stop ();

Console.WriteLine (sum);

Click here to next problem

Have fun solving problems ...

What is AngularJS? ... And why AngularJS?

2014-05-04T13:04:00.002-04:00

What is AngularJS?
AngularJS is a modern JavaScript framework to build SPA (Single-Page Applications). It is a hybrid of MVC (Model-View-Controller) and MVVM (Model View ViewModel) architecture. They (AngularJS team) sometimes proudly call themselves as MV* (Model View Whatever) framework. Before we go in depth about Angular, lets understand what is SPA?

What is SPA?
Single Page Application (aka SPA) is taking the web application world by the storm. The goal of the SPA is to provide user with a very responsive and user friendly UI interface. These applications uses web page as a shell and content of the page is refreshed completely or partially without causing complete reload of the page. The three building blocks of the SPA are HTML, CSS and JavaScript on the client side and any server language of desire.

Challenges of creating SPA?
In SPA applications, updating the content of the page through AJAX calls and not reloading complete page causes its own issues. Here are the some of the issues

JavaScript Heavy application: SPA application uses lot of JavaScript to manipulate HTML DOM on the client side. Normally all SPA are heavy client side applications. This means, writing lot of JavaScript. With the traditional way of writing JavaScript code, we (and not all of us) normally bind everything to the global namespace when we declare variables which can result lot of conflicts and hard to manage code as it is not modularized. Defects become hard to be traced at the compile time as all variables share the same namespace and might conflict with each other. With growing application, JavaScript code becomes bigger and harder to manage.
Lot of DOM manipulation: SPA heavily rely on JavaScript to manipulate DOM tree to update the content of the page. This brings its own challenges as jQuery has really made selecting and manipulating DOM tree very easy but failed to convey the message that probably the re painting HTML page is the most expensive task. Developer tend to read directly from the DOM tree and make changes back to it in the increments. This, probably is not the most efficient way of doing it as in one event, we might read and update the same element several times.
Read and Update: JavaScript code is used to set the values in the HTML controls and save the changes back to server by reading back the values from the controls introduces lots of JavaScript code lines. In vanilla JavaScript there are always two or more lines of code associated with each HTML control for the same action and if the number of controls are more, it increases the JavaScript code making it harder to manage the code base.
Testability: One of the easy way of managing code base is by dividing the code into small manageable modules by functionality and test it thoroughly. But it is difficult to unit test modules if they have any dependencies on any other modules. Since JavaScript by default does not support dependency injection and we use concrete objects, it means they should be up and running too. Also dependencies like AJAX calls are hard to mock. This causes lot of untested code in the main app. This also reduces our traceability with no way to track any changes in the code blocks.
Browser Navigation: For SPA, AJAX calls are used to interact with the server, which does not trigger any URL change. This way user can change the main content of the HTML application using AJAX and pretend that next section is loaded with responsive behavior. But this causes issue as it breaks the traditional behavior of the browser navigation. Ajax calls don't update the URL history, so in attempt to go back to last page using browser navigation, this might take user to previous register page in browser history which might not what user is expecting. To over come this issue, "#" are used in the URL to depict URL change ( as any change in the URL after "#" does not trigger browser to reload the page. but it gets registered in the browser history) and design some pattern to make AJAX call on/with/after URL change. This is also know as deep linking, but to master deep linking and make it in all browser, its very difficult. Also hard to test all types of scenarios.

There are many good libraries which have changed the way applications are written using JavaScript like

jQuery (famous for DOM manipulation)
KnockOut (famous for MVVM pattern)
RequireJS (famous for module loading and dependencies injection)
etc

which solves one particular problem of building web application in a excellent way but not as one framework. They all can be clubbed together to work with each other but they were not designed to do so. And there is always duplicate functionality b/w there libraries as they all try to go little extra mile to sell themselves.

Why AngularJS?
Like I described earlier, Angular is complete framework which takes care of all the features required for the development of the SPA application, plus its extendable. Here are the feature list

Directives: In AngularJS terms, directives are making HTML smarter. Directives can be specified as tags, attributes or classes like ng-view, ng-repeact etc which makes HTML declarative. It also makes HTML code reusable. We can extend default set directives provided in core Angular for our application. During compile time, it looks for directive keys and executes the code to update the HTML as specified in the link function. This will update the specified HTML in template as required by the directive. This helps the keep the DOM manipulation separated from business rules.
Supports DI: This is one of the biggest selling point of the AngularJS, supporting Dependency Injection. In Angular, we can create small modules aka services, which can be injected in the controllers, directives or other services. This allows us to mock the services during unit testing and test the actual unit of work without any dependency. By creating services, code can be reused in different modules and it does not interfere with the main business logic of the application.
Supports MVC: Angular supports MVC pattern in the development of the application. We need to register controllers either in the config associated with the URL (which is appended after "#" in URL) or we can specify it in the HTML with supported attribute (called directives) i.e. "ng-controller". Controller is the place where we set the scope which is the view model angular uses to update the HTML template to create the view. By this approach we separate the business logic in the controller or service (which can be injected in the controller and then consumed) and DOM manipulation. Angular updates the view for us in the end with the final value of the object after all business rules implemented which avoids continuous redrawing caused by frequent changes.
Supports Routing: AngularJS route module helps in browser navigation. It manages the deep linking for us. We can pull the values like id etc from the URL and use in our code.
Testability: Since angular uses DI to inject different services in the controller to be used along the business logic, this approach helps us to keep the code mode testable as we can mock these services to test our business logic behavior.

The best part of AngularJS is that all these feature are extendable based on our project requirements. We can choose which module to be used in the application. This helps us to keep the 3rd party code light weight and to only include pieces we need for development.

Happy coding ...

Project Euler - Problem 4 in F#

2013-11-24T09:48:00.003-05:00

Largest palindrome product

Problem 4

For this problem, we need to iterate through all the 3 digits number and get there products. Here is the solutions


    // function to flip the existing number to reverse the digits 
    let reverseNumber n =
        // recurring function to create new number to flip the 
        // existing the number digit one at a time
        let rec loop newNum = function
            // if the new number is 0
            // return the new created number as it is
            |0 -> newNum
            // if number is not 0
            // recall the function with new number * 10 and adding modules 
            // of number dividing by 10.
            // return update old number by dividing by 10 
            |x -> loop (newNum * 10 + x % 10) (x/10)    
        loop 0 n

    // check if the number is palindrome
    let isPalindrome = function
        // if number is equal to reversed number then its palindrome, 
        // return true
        | x  when x = reverseNumber x -> true
        // else return false
        | _ -> false

    // function to get the max palindrome number of multiplication
    // of two numbers between the limits
    let maxPalindromeNumber lowerLimit upperLimit =
        // create the seq of all the palidrome numbers create 
        // by multiple two numbers between the limits
        let numbers = seq {
            // get first number from the loop
            for i = lowerLimit to upperLimit do
                // get the second number from the loop
                for j = lowerLimit to upperLimit do
                    // multiple both the numeber
                    let z = i * j
                    // and check if number is palindrome
                    if isPalindrome z then
                        // if yes, return the number to seq else 
                        // move back to new numbers in the loop
                        yield z
        }
        // return the max number from the seq
        Seq.max numbers

    // create diagnostics stopwatch
    let sw = System.Diagnostics.Stopwatch()
    // start the stopwatch
    sw.Start() 
    // call function to get max palindrome number product of two numbers 
    // between 100 and 900
    let number = maxPalindromeNumber 100 999
    // stop the stopwatch
    sw.Stop()
    
    // print number
    printfn "multple of 3 digit resulting %d  - (with processing time %A)" number sw.ElapsedMilliseconds

Code is pretty self explanatory with comments. The avg time of the solution is 177ms

Please feel free to leave you feedback, whats good in the blogs and where i can improve.

Thanks and Happy CODING .... :)

Project Euler - Problem 3 in F#

2013-11-23T17:38:00.000-05:00

Largest prime factor

Problem 3

The prime factors of 13195 are 5, 7, 13 and 29.
What is the largest prime factor of the number 600851475143 ?

Here is my Solution #1

    
    (**********************************
    Solution 1 
    ***********************************
    slow solution as it iterates through all the numbers
    **********************************)

    let theNumber = 600851475143I //13195

    let rec LargestPrimeFactorial (x: bigint) (y:bigint) = 
        match x, y with
            | u, t when u = t -> u
            | c, d when c%d = 0I -> 
                match c with
                    | m when m = theNumber -> LargestPrimeFactorial (m/d) 2I
                    | n -> LargestPrimeFactorial theNumber ((theNumber/n)+1I)
            | e, f -> LargestPrimeFactorial e (f+1I)
            | a, b when a = b -> a
            | _, _ -> failwith "not valid option"

    let sw = System.Diagnostics.Stopwatch()
    sw.Start()  
    let primeFactorNo = LargestPrimeFactorial theNumber 2I
    sw.Stop()
    printfn "%A - (with processing time %A)" primeFactorNo  sw.ElapsedMilliseconds

In this solution, i try to iterates through all the numbers which is not so great solution for the huge numbers.
LargestPrimeFactorial takes two parameters, one the number we are finding factorial for and second number we are checking is divisor or not. Here are match condition checks

| u, t when u = t -> u: If both the numbers are same then, return the prime number
| c, d when c%d = 0I -> : If second number is factor of first number, then we try to find the factors for the divisor to check if that's a prime number or not. we call the same function with different parameters to find is its a prime number or not.
| e, f -> LargestPrimeFactorial e (f+1I): If number is not divisor then recall the function with new incremented number to find the largest prime number divisor.
| _, _ -> failwith "not valid option": If no condition is matched, fail with exception.

We this process is very slow. This is a basic logic to find the largest prime factor by dividing the number with each and every number to find all the factors and then check if the factorial number is prime number of not in the same manner. This logic on avg took 59590 ms.

Here is my Solution #2

    
    

    (**********************************
    Solution 2
    ***********************************
    Better solution to find all the divisors
    if n / x = y, obviously both x and y are factors, so I don't have to probe y anymore
    If I start probing from 2 going up, I can stop probing when I have reached \sqrt n. In fact, any number bigger than \sqrt n must have been already found probing a smaller number.
    Suppose for example that we have to factor the number 36 (one of the triangle number
    **********************************)

    let theNumber = 600851475143I //13195

    let divides (x:bigint) (y:bigint) = (x % y = 0I)

    let rec GetAllFactors (num:bigint) (index:bigint) factors = 
        if (divides num index) then
            let y = num / index
            if index < y then
                GetAllFactors num (index + 1I) (index::y::factors)
            else if (y = index) then
                (index::factors)
            else 
                factors
        else if index > bigint (sqrt (float num)) then
            factors
        else 
            GetAllFactors num (index + 1I) factors

    let rec PrimeNumber = function
        | [] -> 0
        | h::t -> 
            let factors = GetAllFactors h 2I []
            if(factors.Length = 0) then
                int h
            else 
                PrimeNumber t

    let rec LargestPrimeFactorial (x: bigint) = 
        let factorList = GetAllFactors x 2I []
        let factorRevList = factorList
                                |> List.sort 
                                |> List.rev

        let largestPrimeNumber = PrimeNumber factorRevList
        largestPrimeNumber        
    
    let sw = System.Diagnostics.Stopwatch()
    sw.Start()    
    let primeFactorNo = LargestPrimeFactorial theNumber
    sw.Stop()

In this solution, i have used better solution to find all the divisors. According to new formula, if n / x = y, obviously both x and y are factors, so I don't have to probe y anymore. If I start probing from 2 going up, I can stop probing when I have reached sqrt n. In fact, any number bigger than sqrt n must have been already found probing a smaller number. Here is the explanation of the written code

GetAllFactors: Gets all the factors of a number in the array
PrimeNumber: Checks if the number is prime or not
LargestPrimeFactorial: Get the largest number from the factors list.

This logic on avg took 2900 ms.

Please feel free to leave feedback ... whats good in the post and where i can improve.

Thanks and happy coding

JavaScript Crash Course

2013-10-14T09:55:00.002-04:00

Here is a small JavaScript crash course which i wrote while going thru one of JavaScript's online open courses. This PDf has been very helpful to quick refresh my Javascript fundamentals whenever needed.

Hope this will be helpful to you all too. Please click here to download this PDF file.

Angular Directive VS Service usage

2013-10-13T18:33:00.001-04:00

Angular is built from ground up keeping separation of concern, modularity and testing in mind. One of the frequently asked question in AngularJS is where to use Directives and Services.

Directives
Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM - (angularjs.org/guide/directive)

As mentioned in the definition, Directives are strictly for the DOM manipulation only. Directives are genius way to make DOM more intelligent e.g. we can create a directive which creates new element with node name as "tab" which angular at run time which resolve as HTML. This gives HTML a new meaning by creating new reusable tags and also gives us one code place to explain what tag "tab" are and easy to maintain.

Services
A service is any functionality which can be abstracted and then called by different functions e.g. $http, $routeProvider, etc. These services are needed to be injected in the controllers or other services using them to avoid direct reference to the functions. On injecting, these services are initialized and then can be used in the code without be directly object of the function. This is good code practice as we can mock the services for the test.

Ideally, directives should be strictly used for any UI view manipulation and services are abstracted functionalities which can be mocked for unit tests. Service should not be used for any DOM manipulation or event binding.

Project Euler - Problem 2 in F#

2013-10-01T15:42:00.002-04:00

Even Fibonacci numbers

Problem 2

Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:

1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.

Here is my solution

    // Create a mutable list, so that we can add elements 
    // (this corresponds to standard .NET 'List<T>' type)
    let l = new ResizeArray<_>([1;2])
 
    let rec fabonacci a b upperLimit = 
        match a, b with
            | _, _ when a + b <= upperLimit -> 
                let c = a + b
                l.Add(c)
                fabonacci b c upperLimit
            | _ -> l
 
    let sumOfEven =
        (fabonacci 1 2 4000000)
            |> List.ofSeq
            |> Seq.filter (fun x -> x % 2 = 0) 
            |> Seq.sum

Since its dynamic seq we are creating which depends on the last two numbers, we need a mutable list which we can populate according to our need and logic. For Fibonacci, we need to have access to previous two numbers in the list to generate new one.

This solution is flexible too with the upper limit, so this logic can be used anywhere to create the Fibonacci sequence with any upper bound. First step is to create Fibonacci sequence with the upper bound and initial number to kick start the sequence.Once seq is created up to desired upper bound, we are left with filtering of the sequence for even numbers only and get their sum.

Please leave your feedback and happy coding.

Project Euler - Problem 1 in F#

2013-09-29T15:37:00.000-04:00

Multiples of 3 and 5

Problem 1

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
Find the sum of all the multiples of 3 or 5 below 1000.

Here is my solution

    // Option 1
    let sumOfNoDivisbleBy3or5UnderN n = 
        [for i in 1 .. n-1 -> i]
            |> Seq.filter (fun x -> x%3 = 0 || x%5 = 0)
            |> Seq.sum
 
    let sumOfNoDivisbleBy3or5Under10 = sumOfNoDivisbleBy3or5UnderN 10
 
    let sumOfNoDivisbleBy3or5Under1000 = sumOfNoDivisbleBy3or5UnderN 1000
 
    printfn "The sum of all the multiples of 3 or 5 is %d" sumOfNoDivisbleBy3or5Under1000
 
    // Option 2
    let sumOfFilteredSeq filterCri n = 
        seq { for i in 1 .. n-1 -> if filterCri i then i else 0 }
            |> Seq.sum
 
    let filteredSeqOf3or5 = sumOfFilteredSeq (fun x -> x%3 = 0 || x%5 = 0)
 
    let sumOfNoUnder10 = filteredSeqOf3or5 10
 
    let sumOfNoUnder1000 = filteredSeqOf3or5 1000
 
    printfn "The sum of all the multiples of 3 or 5 is %d" sumOfNoUnder1000

Here i have specified two solutions.

Options 1 is hard coded with the filter criteria and is only flexible in changing the upper bound of the List where as option 2 is flexible in both upper bound as well as the filter criteria

Partial View Vs. Display/Editor Templates

2012-04-10T17:18:00.001-04:00

ASP.net MVC provides two different options to create re-usable components

Partial Views
Display/Editor Templates

But whats the different between both of them and what advantage one has got over the other.

Difference between Display and Editor Templates:

Display templates and Editor templates are model driven templates but only differ by the convention that display should only render read only html like divs, labels or spans etc where are editor should render editable html with forms, input controls, etc. Developers are the one whole create these templates and there is no validation which prevent us to create templates in the opposite order. It is the convention over configuration policy which drives MVC to follow a specific standardize pattern and sticking to this will ensure that no matter what you pass into Display helper method(s) will always render the same result as expected. Once we specify UIHint on any property, we instructor MVC view engine to render the respective property using given template specified either under DisplayTemplates folder or EditorTemplates folder under shared folder depending whether we want readonly mode (Html.Display) or editable mode (Html.Editor).

Sample ViewModel for the same to demonstrate how we ViewModel can be decorated with attributes to leverage templates rendering thru ViewModels in MVC

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using ReferenceImplementation.ViewModels;
 
namespace ReferenceImplementation.ViewModels
{
    public class PersonViewModel
    {
        public string FirstName { get; set; }
 
        public string LastName { get; set; }
 
        [UIHint("Int")]
        public int Age { get; set; }
 
        [UIHint("Date")]
        public DatetimeViewModel DateOfBirth { get; set; }
 
        [UIHint("Phone")]
        public PhoneViewModel MobileNumber { get; set; }
    }
}

By specifying the UIHint attribute on properties in ViewModel, we are instructing MVC to render these properties with the respective templates (depending on its display or editor reference) from the respective folder instead of using standard MVC editor.

For the view code like the one given below

<div class="readonly">@Html.DisplayFor(m => m.DateOfBirth)</div>

Since we are using Display helper method, MVC will look for the Date template under DisplayTemplates folder and for the view code given below

<div class="editale">@Html.EditorFor(m => m.Phone)</div>

MVC will look for template under EditorTemplates folder for the Editor helper method.

Difference between Partial View and Display/Editor Templates

By convention, Partial Views are considered to be View Centeric and MVC Templates are considered to be Model Centeric. This means that templates are more dependent on the view model and way they are rendered depends a lot on their properties but same is not true for the partial view as you are more concerned in choosing the correct partial view.

Partial View differs from Templates in the way they render Id's from the ViewModels. Partial view render the element name as it is but MVC Templates adhere to model hierarchies when rendering HTML helpers. e.g if you have a "Bar" object on your "Foo" model, the HTML elements for "Bar" will be rendered with "Foo.Bar.ElementName", whilst a partial will have "ElementName".

MVC Templates are more robust and smart. If you had a List<T> of something in your ViewModel, you could use @Html.DisplayFor(m => m.CollectionOfFoo), MVC templates are smart enough to see it as a collection and render out the single display for each item as opposed to a Partial, which would require an explicit for loop.

Templates are passed with additional information that partial views are not, in particular you receive ModelMetadata, such as that created by attributes. ModelMetadata are part of ViewData which is also accessible in partial view but are null as its only populated in templates ().

Note: Templates are partials which adhere to a specific convention. The situations which make templates better or worse than old partials are almost strictly dependent on whether or not the convention is worth adherence in your application

Bundle and Minification in MVC4

2012-04-09T22:05:00.002-04:00

What is meant by MINIFICATION?

As described in wiki ...

"Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute."

This is very helpful as we can reduce the size of the javascript file to be downloaded to the client browser from the server which reduces the data to be downloaded and increases the performance

What is meant by BUNDLING?

Bundling is the process of combining all the javascript files into one file so that client browser has to make only one request to the server to download all the files in go. For example, max browser can only process 2 request at a given instance (possibly has increased with the modern browsers). If we have more number of files then they have to wait for browser to request from server once the previous requests are complete which creates delay for the page to get complete resources before it is ready. On the other hand bundling process bundle up all the js files needed to be downloaded into one and does not have to wait for the server to process other request hence increasing the performance of the application. Same can be done for the CSS files.

Bundling and minification go well together as we can reduce the size of the file by minification and bundle up all the files like js and css in there respective file types to reduce the calls to the server.

Figure 1.1 shows a page being loaded with multiple script files. Total time to download all the files and before DOM ready event is fired is 2.14s.

Figure 1.1

Figure 1.2 shows a same page being loaded but this time we are using bundling and minification for the script files. So we have reduced the number of server calls to one and file is loaded in 370ms.

Figure 1.2

Using Bundling and Minification in ASP.net MVC4

ASP.net MVC 4 comes with new feature called bundling and minification.

var mainWebStyle = new Bundle("~/Scripts/libs", typeof(JsMinify));

mainWebStyle.AddFile("~/Scripts/jquery-1.7.1.min.js");

mainWebStyle.AddFile("~/Scripts/Knockout-2.0.0.js");

BundleTable.Bundles.Add(mainWebStyle);

In the above example, we can how bundles are created. This this example, we are bundling up two js file into one lib1 file. we can also bundle all the files in one folder with the following code.

var mainWebStyle = new Bundle("~/Scripts/libs", typeof(JsMinify));

mainWebStyle.AddDirectory("~/Scripts", "*.js", false);

BundleTable.Bundles.Add(mainWebStyle);

And in the view we can refer to bundled file like this.

Microsoft.Web.optimization help to cache the file on the clients machine and at the same time also adds a magical versioning number to the file which changes if file is changed, hence forcing the client to request for new file if file is modified and not refer to cached file on the client side.

We can also use our own minification utility if we dont like the one provided by the microsoft e.g

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.Web.Optimization;

using Yahoo.Yui.Compressor;

namespace MVC4Example

{

public class YuiJsMinify : IBundleTransform

{

public void Process(BundleResponse bundle)

{

if (bundle == null)

{

throw new ArgumentNullException("bundle");

}

bundle.Content = JavaScriptCompressor.Compress(bundle.Content);

bundle.ContentType = "text/javascript";

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.Web.Optimization;

using Yahoo.Yui.Compressor;

namespace MVC4Example
{

public class YuiCssMinify : IBundleTransform

{

public void Process(BundleResponse bundle)

{

if (bundle == null)

{

throw new ArgumentNullException("bundle");

}

bundle.Content = CssCompressor.Compress(bundle.Content);

bundle.ContentType = "text/css";

}

In the above example, i have used Yahoo Yui compressor dll to minify my javascript and style files instead of JsMinify and CssMinify.

Please visit the link of the presentation that Scott Gu gave in Netherlands to demo bundling and minifications and some other new features coming out in MVC 4

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2364

Happy Coding

jQuery Google Plusify

2012-02-11T00:47:00.000-05:00

I recently created new plugin to imitate Google Plus photo album. I will try to explain briefly how to use this plugin. For demo click here and you can also download full and minified version over here.
To start with, include minified (for production) or full version (for development) in your page.

Place your div with width and height where you want place your albums.

Remember to set style for the div. Set your width and height to cover the area where you want to display your photo album.

On document ready, initialize your imagePlusify and pass the options.

$(function () {

$.AjaxGet({

url: imgUrl,

callback: function (data) {

$('#plusifyPics').imagePlusify({

backgroundColor: 'white',

source: data,

displayLabel: true,

onClick: function (id, name, src) {

alert('you have clicked on album with id: [' + id + '] with name "' + name + '" and ' + 'it has total of ' + src.length +' images !!!');

}

});

}

});

Here is the list of all the options we can set in this plugin.

Property	Values	Additional Info
border	valid css border style	'1px solid gray' is default value
borderOnMouseOver	valid css border style	'1px solid black' is default value
padding	valid css padding size	'5px' is default value
backgroundColor	valid css color	'#fff' is default value
displayLabel	true / false	by default its false
labelColor	valid css color for the text color	'#000' is default value
randomize	true / false	by default its true
margin	margin between the image albums	'30px' is the default value
width	album width	'200px' is the default width
height	album height	'200px' is the default height
slideBy	int distance by which images should slide	30 is the default value
source	images, name and id as source to display image albums	source can be sent in 3 ways 1. Array of string where string is url of images 2. Object with id, name and array of string as members 3 Array of object where object has id, name and array of string as members
onClick	Callback event raised on click of album	album id, album name and all images url as array are returned in the callback function.

Singleton Pattern

2012-01-04T01:21:00.000-05:00

Introduction

Singleton can be defined as single instance object. Usually singletons are used for centralized management of internal or external resources and they provide a global point of access to themselves.

Implementation

Singleton has one static object which is the gateway to create the instantiate the class.

using System;

public class Singleton

{

private static Singleton _instance;

private Singleton() {}

public static Singleton Instance

{

get

{

if (_instance == null)

{

_instance = new Singleton();

}

return _instance;

}

Above example has a static member, "_instance" of type Singleton class. This was _instance can be accessed anywhere in the application.

Then we have private constructor of the singleton class which means that constructor can only be accessed within the same class, hence class cannot be initiated from the outside but only from inside the same class.

We also have readonly property called "Instance" which is only entry point to the singleton class. Since _instance is static object, so once _instance object is instantiated it is for lifetime.

Singleton Vs. Static Class

There are important differences between the singleton design pattern and the static keyword on classes. Static classes and singletons both provide sharing of redundant objects in memory, but they are very different in usage and implementation.

Static class example

You can make a static class with the static keyword. In the following example, look carefully at how the static keyword is used on the class and constructor. Static classes may be simpler, but the singleton example has many important advantages.

Static classes and singletons both provide sharing of redundant objects in memory, but they are very different in usage and implementation.

Singleton	Static Class
you can create one instance of the object and reuse it.	You cannot create the instance of static class.
Singleton instance is created for the first time when the user requested.	Static classes- are loaded automatically by the .NET Framework common language runtime (CLR) when the program or namespace containing the class is loaded.
Singleton class can implement interface	Interface cannot be implemented on static classes
Singleton class can have constructor.	Static class cannot have constructor.

Hope you enjoyed reading this post ....

Design Patterns

2011-12-16T01:24:00.000-05:00

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

Creational Patterns
Structural Patterns
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.

GZIP compression for better performance

2011-12-12T16:03:00.001-05:00

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:

Browser requests a file from the server and the data sent for the request is 100 B
Server finds the requested file
Creates HTML for the response
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.

Browser requests a file from server. Data sent for the request is 100 B
Server finds the requested file
Creates HTML for the response and zips the file
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 ....

Web Storage in HTML (5)

2011-12-11T13:08:00.001-05:00

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.

Session Storage (sessionStorage)
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.