Pranay Rana

Work Partitioning - Process large amount of records in C#

pranayamr@gmail.com (Pranay Rana) — Mon, 02 Nov 2020 19:28:00 +0000

What is Work Partitioning ?

Work Partitioning means dividing big/large amount of work between workers. Which means if you have work which is going to take 100hrs to complete by one worker you divide it among multiple worker lets between 10 workers who work parallel , then work of 100hrs get complete in 10hrs. So work partitioning helps to complete works faster.

Once can apply work partitioning to process data faster by dividing work among set of machines (like in big data where large amount high volume data processed by set of machines located at on premise or at in cloud) or process incoming request by set of machines with help of Load Balancers. But in this post I am going to put information about partitioning work in Process/Application using Task Parallel library of C# language.

Below is code that make use of C# task parallel library and does the processing of lots of records, here is 1m records.

public List<TransFormedCustomer> GetProcessData()
{
    var processRecordCount = 10000;
    var retModels = new List<TransFormedCustomer>();
    var lotOfRecords = GetFakeData(); //example million records from datasource like database, web service, csv file

    int tasksCount = (lotOfRecords.Count / processRecordCount);
    if (lotOfRecords.Count % processRecordCount > 0)
        tasksCount++;

    var tasks = new Task<List<TransFormedCustomer>>[tasksCount];
    for (int i = 0; i < tasksCount; i++)
    {
        IEnumerable<Customer> datas;
        int skip = (processRecordCount * i);
        int take = processRecordCount;

        if (i == 0)
            datas = lotOfRecords.Take(take);
        else
            datas = lotOfRecords.Skip(skip).Take(take);

        tasks[i] = Task.Factory.StartNew((obj) => GetProccessedData(datas), Tuple.Create(skip, take));
#if DEBUG
        if (i == tasksCount - 1 && lotOfRecords.Count % 10000 != 0)
           take = lotOfRecords.Count % 10000;
        Console.WriteLine($"task no {i} started, reading from {skip} to {skip + take}");
#endif
    }
    try
    {
        Task.WaitAll(tasks);
    }
    catch
    {
        //left empty as logging errors in below foreach block
    }

    foreach (var task in tasks)
    {
        if (task.IsCanceled || task.IsFaulted)
        {
            var state = (Tuple<int, int>)task.AsyncState;
            Console.WriteLine($"taks failed to process data from {state.Item1} to {state.Item2}");
        }
        else
            retModels.AddRange(task.Result);
     }

    return retModels;
}

Code works above works as follows

It sets number number of records one task can process , here in code its 10000 set in "processRecordCount" variable.
Code get 1m records from the datasoruce, here "GetFake()" method(code listed at the end) returns 1m customers records
"taskCount" variable stores number of task need to process received records ("GetProccessedData(datas)"- method listed below) i.e. here its 100000/1000 = 10 number of task required to process records.
In for loop with help of "Take" or "Skip" , each task get 10000 to process.
"Task.WaitAll()" wait for all task to finish work
After work get finished by each task, processed records get added to "retModels" collection.
If task to fail to process record then it logs information on console.

Output

As shown in above image each thread does processing of 10000 records and each pick different set of records.

Followings are advantages of work partitioning

Very huge amount of data get processed faster as it gets process parallelly with help of tasks i.e. workers\
It make use of multicore CPU i.e. computing efficiently as one task get processed by one core mostly

Code used to support above function

GetFakeData- method

Fake data produced by using Faker.Net "install-package Faker.Net"

private List<Customer> GetFakeData()
{
    var customers = new List<Customer>();
    for (int i = 0; i < 100000; i++)
    {
        customers.Add(
            new Customer()
            {
                FirstName = Faker.Name.First(),
                LastName = Faker.Name.Last(),
                EmailAddress = Faker.Internet.Email(),
                SSN = Faker.Identification.SocialSecurityNumber()
            }
            );
    }
    return customers;
}

GetProccessedData-Method

private List<TransFormedCustomer> GetProccessedData(IEnumerable<Customer> customers)
{
    var transFormedCustomers = new List<TransFormedCustomer>();
    foreach (var customer in customers)
    {
        //do processing on recevied data 
        //enrich data and add it to process collection 
        string formattedSSN = customer.SSN.Insert(5, "-").Insert(3, "-");
        string formattedName = customer.FirstName + ' ' + customer.LastName;
        string email = customer.EmailAddress;
        Regex regex = new Regex(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$");
        Match match = regex.Match(email);
        if (!match.Success)
            email = "dummy@dummy.com";
        var transFormedCustomer = new TransFormedCustomer()
        {
            Name = formattedName,
            SSN = formattedSSN,
            EmailAddress = email
        };

        transFormedCustomers.Add(transFormedCustomer);
    }
    return transFormedCustomers;
}

Customer & TransformCustomer Modal class

    public class Customer
    {
        public string EmailAddress { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string SSN { get; set; }
    }

    public class TransFormedCustomer
    {
        public string EmailAddress { get; set; }
        public string Name { get; set; }
        public string SSN { get; set; }
    }

Self Host Angular and WebApi Using Owin

pranayamr@gmail.com (Pranay Rana) — Thu, 31 Jan 2019 12:15:00 +0000

Full Source code at GitHub : OwinWebapiAngularHost

In development there are situations(organization restrictions, developing POC/Demo, there is need of control on server) where developer doesn't have Server application(IIS,Tomcat etc.), where developer got and deploy Web application. So to overcome these situation developer need environment which similar to Server application, basically issue can be resolved by having Self hosting application. Self hosting application allows to deploy web application and provide similar functionality as server application.
Question rises how to create self hosting application, answer is by making use of Owin like Framework. Below post is about how to create self hosting application with help of Owin framework which in turn allows to host Asp.Net WebApi and Angular application.

Creating Self Hosting application
To create self hosting application, developer can create either Console, WPF or Windows Form Application or Windows Service by choosing Console, WPF or Windows Form or WindowsService project type provided in visual studio.
For this post I am choosing Windows Service project as given in below image

Once click "ok button" it will create windows service application in visual studio. But when run application by pressing "F5" in visual studio it display message

To avoid error in development environment , do check for service running in user interactive check flag "UserInteractive". Below code shows how to do it

static class Program
{
        /// 
        /// The main entry point for the application.
        /// 
    static void Main(string[] args)
    {
        try
        {
            //flag check service running in user interactive mode i.e. debug mode 
            if (Environment.UserInteractive)
            {
                Service1 service1 = new Service1();
                service1.TestStartup(args); // start service in debug mode
                Console.WriteLine("Service Started at: http://localhost:8081/File/action");
                Console.ReadLine(); // stop service in debug mode
                service1.TestStop();
            }
            else
            {

                ServiceBase[] ServicesToRun;
                ServicesToRun = new ServiceBase[]
                {
                 new Service1()
                };
                ServiceBase.Run(ServicesToRun);
            }
        }
        catch(Exception ex)
        {
           Console.WriteLine(ex);
           //log error 
           Console.ReadLine();
        }
    }
}

Once done add below code in service.cs file which is related to windows service application

public partial class Service1 : ServiceBase
{
    public Service1()
    {
        InitializeComponent();
    }

    protected override void OnStart(string[] args)
    {
       if (ConfigurationManager.AppSettings["baseAddress"] != null)
          baseAddress = ConfigurationManager.AppSettings["baseAddress"].ToString();
       server = WebApp.Start(baseAddress);
    }

    protected override void OnStop()
    {
        server.Dispose();
    }

    internal void TestStartup(string[] args)
    {
        this.OnStart(args);
    }

    internal void TestStop()
    {
        this.OnStop();
    }
    
    private IDisposable server;
    string baseAddress = "http://*:8081/";
}

Line of code written in OnStart method of service file is most important code, "WebApp.Start()" this method start Owin web server at "8081" port by making use of settings provided in "OwinStartUp"(setup of this class discussed in detail below) class.

Installing Owin
After creating and setting Windows service, now it's time to install Owin framework which provide support for hosting web based application. Owing installation can be done via "Package Manager console (this console can be opened up from Visual studio menu Tools>>Nuget Package Manager >> Package Manager Console)" or by "Manage Nuget Packages(this is menu option comes by right clicking project in visual studio)".

//run below command in package manager console to install owin support
Install-package Microsoft.Owin.SelfHost
//or search package "Microsoft.Owin.SelfHost" in package management window

This command installs following packages, one can view in package.json file of project or in references as dll.

  
  Microsoft.Owin
  Microsoft.Owin.Diagnostics
  Microsoft.Owin.Host.HttpListener
  Microsoft.Owin.Hosting
  Microsoft.Owin.SelfHost
  Owin

Installation of basic packages enable Owin in windows service application. To make use of Owin, developer needs to add settings which decide what type of application/files can be served by self hosted owin server application. Below is basic "OwinStartUp" class that used by "WebApp.Start()" method to start server.

//OwinStartUp.Cs
public class OwinStartUp
{
    public void Configuration(IAppBuilder app)
    {
#if DEBUG
        app.UseErrorPage();
#endif
        app.UseWelcomePage("/");
    }
}

Enable WebApi Hosting
To enable WebApi hosting in above created self hosted owin based application, Add below package

//run below command in package manager console to install WebApi support
Install-Package Microsoft.AspNet.WebApi.OwinSelfHost
//or search package "Microsoft.AspNet.WebApi.OwinSelfHost" in package management window

This command installs following packages, one can view in package.json file of project or in references as dll.

  
  Microsoft.AspNet.WebApi.Client
  Microsoft.AspNet.WebApi.Core
  Microsoft.AspNet.WebApi.Owin
  Microsoft.AspNet.WebApi.OwinSelfHost
  Newtonsoft.Json

Once installation done, below line of code in start setting class enable support of WebApi hosting in application

public class OwinStartUp
{
    public void Configuration(IAppBuilder appBuilder)
    {
  // Configure Web API for self-host.
  //Install-Package Microsoft.AspNet.WebApi.OwinSelfHost

  //removing support of xmlformatter
  HttpConfiguration config = new HttpConfiguration();
  config.Formatters.Remove(config.Formatters.XmlFormatter);

  //webapi route configuration
  config.Routes.MapHttpRoute(
   name: "DefaultApi",
   routeTemplate: "api/{controller}/{action}/{id}",
   defaults: new { id = RouteParameter.Optional }
  );

  config.MapHttpAttributeRoutes();

  //adding config for WebApi support
  appBuilder.UseWebApi(config);
    }
}

After adding support for WebApi, developer can add WebApi controller as given below.

public class TestController : ApiController
{
    [HttpGet]
    public string GetFileName()
    {
        return "Test";
    }
}

Enable support for CORS
Above add support for WebApi, but it won't allows to access form other domain apart form hosted domain i.e. from Cross domain. Developer can resolve issue of CORS as below.

//run below command in package manager console to install Cors support
Install-Package Microsoft.Owin.Cors
//or search package "Microsoft.Owin.Cors" in package management window

This command installs following packages, one can view in package.json file of project or in references as dll.

  
  Microsoft.Owin.Cors
  Microsoft.AspNet.Cors

Once installation done, below line of code enable CORS

  
public class OwinStartUp
{
    public void Configuration(IAppBuilder appBuilder)
    {
        //webapi code done before remain as is
  
        //Install-Package Microsoft.Owin.Cors
        appBuilder.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    }
}

So now self host is ready with WebApi hosted in it.

Enabling Angular/Static file hosting
Enabling self host for angular is similar to enable self host for allowing browsing of static html files i.e. web site. Because angular is framework for creating single page application which access by accessing "index.html" file only.

Note:
For hosting angular application please perform prod build (by using angular cli command ng build --prod) of you application as it has prod generated code i.e. html page with javascript only. Guide for Angular deployment : https://angular.io/guide/deployment

To enable WebApi hosting in above created self hosted owin based application, Add below package

//run below command in package manager console to provide static website /angular app support
Install-Package Microsoft.Owin.StaticFiles
//or search package "Microsoft.Owin.StaticFiles" in package management window

This command installs following packages, one can view in package.json file of project or in references as dll.

  
  Microsoft.Owin.FileSystems
  Microsoft.Owin.StaticFiles

Once installation done, below line of code in start setting class enable support of Static Web app/Angualr app hosting in application

public class OwinStartUp
{
    public void Configuration(IAppBuilder appBuilder)
    {
       //hosting static files i.e. angular
       //install-package Microsoft.Owin.SelfHost
       //install-package Microsoft.Owin.StaticFiles
       var options = new FileServerOptions();
       options.EnableDirectoryBrowsing = true;
       options.FileSystem = new PhysicalFileSystem("./app");
       options.StaticFileOptions.ServeUnknownFileTypes = true;
       appBuilder.UseFileServer(options);

      //code done for WebApi remain as is if you want webapi support 
   }
}

Below is full source code done in this excercise

    
    public class OwinStartUp
    {
        public void Configuration(IAppBuilder appBuilder)
        {

            //hosting static files i.e. angular
            //install-package Microsoft.Owin.SelfHost
            //install-package Microsoft.Owin.StaticFiles
            var options = new FileServerOptions();
            options.EnableDirectoryBrowsing = true;
            options.FileSystem = new PhysicalFileSystem("./app");
            options.StaticFileOptions.ServeUnknownFileTypes = true;
            appBuilder.UseFileServer(options);


            // Configure Web API for self-host.
            //Install-Package Microsoft.AspNet.WebApi.OwinSelfHost
            HttpConfiguration config = new HttpConfiguration();
            config.Formatters.Remove(config.Formatters.XmlFormatter);

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.MapHttpAttributeRoutes();
            appBuilder.UseWebApi(config);

            //Install-Package Microsoft.Owin.Cors
            appBuilder.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
        }
    }

Full Source code at GitHub : OwinWebapiAngularHost

Return Given Type from Generic method

pranayamr@gmail.com (Pranay Rana) — Sat, 19 Jan 2019 19:23:00 +0000

In C#, Genetic method as below, which can return value of multiple types (i.e. below method can return value of any primitive types or reference types).

   public T GetValue<T>()
   {
  
   }

so one cannot return value directly from method. As T is template type & it can be any of type, so compiler doesn't allow direct conversation of return value to type T.

   public T GetValue<T>()
   {
     //Compilation error (line 13, col 10): Cannot implicitly convert type 'Customer' to 'T'
     return new Customer();
     //this error says that T is template type and it can be of any type (primitive or reference)
   }

Above will not work because Template type of Generic method get replaced at Runtime and Compiler of C# cannot able to figure out Generic type actual type at compile time. for example call to method is like as below

// call to method
GetValue<int>()

//then at runtime method will be like as below 
public int GetValue<int>()
{
 //assuming generic method return customer object only 
 return new Customer();
}

Solution
As explained in detail problem with generic method is to return value of requested return type (i.e. Runtime type which replaces generic Template type T). So to solve problem return value to object type(as object is base class of all types in C# .net) and then convert it to generic template type. Below is code for that solves problem

public T GetValue<T>()
{
  Type typeParameterType = typeof(T);
    Type typeParameterType = typeof(T);
  if(typeParameterType.ToString()=="System.Int32")
    return (T)(object)1;
   if(typeParameterType.ToString()=="Customer")
    return (T)(object)new Customer()
}

But problem with above code is ,for every new return type value new condition required to be added in method i.e it requires to change method for every new return type and it violates Single responsibility principle.

This can easily be resolved by making use of C# in built method Convert.ChangeType, below is code for the same

  (T)Convert.ChangeType(1, typeParameterType)//here T is generic type

Below is code for getting value of column form DataRow object which is based on above discussion

  public static T GetColumnValue<T>(this DataRow dr, string columnName)
  {
     //get type of Template type T
     Type typeParameterType = typeof(T);
     //get type of Template type T, this works when requested type is nullable
     typeParameterType = Nullable.GetUnderlyingType(typeParameterType) ?? typeParameterType;

     //check value present or not , if not return default value of generic type
     return dr[columnName] != DBNull.Value
                ? (T)Convert.ChangeType(dr[columnName], typeParameterType)
                : default(T);
   } 
//use of this method in code 

datarow.GetColumnValue<int>("id");
datarow.GetColumnValue<int?>("orderid");
datarow.GetColumnValue<double>("amount");

so above is Generic method to get value of datacolumn of given type. Method get value of return type from template type T and then does conversation of datacolumn value using Convert.ChangeType.

Below is example of Factory Design pattern using same technique

public class CommandFactory
{       
    //only create object of type which implement ICommand
    public static T GetCommand<T>() where T:  ICommand
    {
      //it create object using Template type T and by making use of reflection
      //once create factory this way there is no need to open it again for modification
        Type type = typeof(T);
        Object obj = Activator.CreateInstance(type);
        return (T)obj;
    }
}

Read about this in detail here : Factory Design Pattern With Generics

CSS to Less

pranayamr@gmail.com (Pranay Rana) — Sat, 18 Aug 2018 18:35:00 +0000

CSS to Less - It's about what are the motivating factor, which Less have that encourage developer to make use of this extended languages. Below post is not provide details information about Less, it provide introduction to features provided by Less. Post is helpful to those who are looking for brief introduction to features of Less, higher language developer who work sometimes with CSS and for the beginner.

CSS

CSS (Cascading style sheet) - it used with HTML element to to beautify web pages of web application. It use to define set of style(s) (i.e set of style rules), for mostly each element in web page to beatify each element. Style defined with CSS , gives each element same look. For Example

h1 {
 Color: red;
}

this style rule give each h1 element black color. If style changes i.e. color changed from read to green then it will affect all h1 element in web pages of web application.

Above brief explanation of what is CSS and why to use it in web application (find full details: https://www.w3.org/Style/CSS/Overview.en.html).

Following problem arise once CSS implemented for application

Every style rule go in one file, File size increases.
Modification becomes difficult Ex. same color used in multiple styles then one need to go every where and need to modify it.
If style sheet divided in multiple style sheet , browser create multiple request to download each individual CSS file.
If style sheet divided in multiple files then , modification of common color, font used becomes too difficult.
Nested element or Pseudo Style rules are difficult to understand and maintain as CSS file increases.

Less

Less (Leaner style sheet) which is CSS extension. Less, have features like allow to define Variables & Mixins (like functions), Set of Inbuilt function, Support for arithmetic operators, Tools supported Create single CSS file as output from multiple Less files etc. So feature provided by Less is some what equal to programming language and that in turn very much helpful to developer who are working more on programming language & less on CSS styles.

Browser only understand HTML + Javascript + CSS style rules when loading web page of application, which means that it doesn't understand Less. So, Like Typescript transpile to Javascript with help of transpilers. Less style rules get converted to CSS style rules as output by various available transpilers/compilers (check list here : http://lesscss.org/tools/#online-less-compilers).

Following way Less helps to overcome problem associated with CSS.

Difficulty in modification of style property which having same value and located in different rules. Ex. Colors, Font-Size, etc.

For example below CSS, each element style rule have color property. Now if there is need of changing this color value "#003152" to "red". As part of color changing exercise CSS developer needs to locate each rule and have to replace color value to red.
```
h1 {
 color: #003152;
}
body {
    color: #003152;
}
a:active {
    color: #003152;
}
```
Locating each rule and changing color to "red" can lead to a problem if CSS file size is big or if the CSS style rules are located in different files.

Solution - Less Variables
This can be resolve in Less by making use of variable, as given in below code.
```
@color: #003152;

h1 {
 color:@color;
}
body {
    color: @color;
}
a:active {
    color: @color;
}
```
So one value of color stored in variable , change needs be done is change value of variable.
Other use cases of variable is as below
```
@color: red;
@background-color: black;
@base-font-size : 10px;
@images: "./assets/images";
@font-family: "Times New Roman", Times, serif";

h1 {
 font-size: @base-font-size + 10px;
}
body {
    color: @color;
    font-family: @font-family;
    font-size: @base-font-size;
    background-color: @background-color;
}
.input {
  font-size: @base-font-size + 2px;
}
a:active {
    color: @color;
    font-size: @base-font-size + 2px;
}
.button {
  background-image: url("@{images}/backimage.ico");
}
```
Point to not in above Less code
- As listed in above variable in LESS , allows to store color values, string values, numeric values alone and with units (like %, px, etc.).
- Less allows to perform numeric operation like =, - on numeric values Ex. @base-font-size stores numeric value and + operation performed in .input,he style rules.
- Less allows string interpolation , Ex. in above code @image variable defines path , which can be used any where like used in .button style rule
Advantage
- Less Variable allows to store common values which can be used in multiple style rules not in single file but one can use same variable in multiple files (how to use in multiple files discussed below).
- Developer can store common and keep changing values in variable, so if have to perform modification just changing variable works.
- Less variable can easily allows to achieve multiple colored base Theme as just changing variable values different value is easy task.
- Variables in Less makes life too easy for developer who is working on CSS , specially those developer who are working on programming language like C#,java and some time work with CSS.
CSS style rules with common property need to be repeated in each rule.

In CSS even though multiple style rules use same property and with same value , its required to be repeated that in each style rule as given in below example
```
input {
    font-size: 12px;
    background-color: white; 
    height: 20px;
}

select {
    font-size: 12px;
    background-color: white; 
    height: 25px;
}

select[multiple] {
    font-size: 12px;
    background-color: white; 
    height: 250px;
}
```
so in above example each property get repeated for different input elements except height property which is having different value.

Solution - Less Mixins
Less solves this problem by providing Mixins. Below code show how Mixins solve problem of common properties.
```
.input-base {
    font-size: @base-font-size + 2px;
    background-color: @input-backcolor; 
}

input {
    .input-base();
    height: 20px;
}

select {
    .input-base();
    height: 25px;
}

select[multiple] {
    .input-base();
    height: 250px;
}
```
so in style rules , .input-base is treated as Mixin which get called by all input style rules just to make use of common properties.

Mixins like function in programming language , takes argument as input and also allows arguments with default value as in below code.
```
.input-base (@height, @font-size: @base-font-size) {
    font-size: @font-size + 2px;
    background-color: @input-backcolor; 
    height:  @height;
}

input {
    .input-base(20px);
}

select {
    .input-base(25px);
}

select[multiple] {
    .input-base(250px, @base-font-size + 2px);
}
```
So in above code Mixin .input-base takes two argument like function as input. Based on input value Mixins copy property values to given style rule.

Less Extend
Less also have one another way for above problem, which making use of &:extend(.stylerule), like as given in below code.
```
.input-base {
    font-size: @base-font-size + 2px;
    background-color: @input-backcolor; 
}

input {
    &:extend(.input-base);
    height: 20px;
}

select {
    &:extend(.input-base);
    height: 25px;
}

select[multiple] {
    &:extend(.input-base);
    height: 250px;
}
```
as name suggest extend , it extends CSS style rule. It's similar to inheritance in higher level programming language like C#,Java.

Difference between &:extends and Mixins are
- Mixins works like function i.e. takes argument as input, which is not possible with extend.
- The way CSS generated by Mixins and Extend.
  
  Mixins generate CSS as below
```
input {
    font-size: 12px;
    background-color: white; 
    height: 20px;
}

select {
    font-size: 12px;
    background-color: white; 
    height: 25px;
}

select[multiple] {
    font-size: 12px;
    background-color: white; 
    height: 250px;
}
```
  So Mixins copies each properties in each style rule , so it increase size of style sheet.
  
  Extend generate CSS as below
```
.input-base,
input,
select,
select[multiple] {
  font-size: 12px;
  background-color: white;
}
input {
  height: 20px;
}
select {
  height: 25px;
}
select[multiple] {
  height: 250px;
}
```
  So extend generate less style sheet and instead of copying each property in each style rule it actually extends existing style rule.
Difficulty in maintaining Nested element style rules.

In html document consist of nested element (like parent-child element). CSS allows to set style rule for this nested element relationship Example. <li> child element under parent <ui> or <a> child element under <li> , <li> child element under parent <ui>. Example given below
```
<ul>
  <li>
    <a href="http://google.com/" rel="noopener" target="_blank">google</a>
  </li>
  <li>
    <a href="http://localhost:8080/abc.com" rel="noopener" target="_blank">Test</a>
  </li>
</ul>
```
Below is style rules for nested elements
```
ul li {
  font-size: 13px;
  color: red; 
}
```
```
ul li a {
  font-size: 13px;
  color: blue; 
}
```
Problem with above is very difficult to understand and read if developer is not aware of CSS nested styling rules.

Less allows to write this nesting style rules as below which is easy to understand nesting (parent-child relation) and read.
```
ul {
    li {
       a {
          font-size: @base-font-size;
           color: @font-color;
        }
    }
}
```
Above structure of CSS easily tell that a is child of li, and li is child of ui. and this will get apply to nesting structure which is like ui --> li --> a.
Difficulty with managing element pseudo style rules.

CSS force to write separate rules for each pseudo class like anchor tag a element which allows to add style rule on focus or hover or input element allows to add style rule for focus.

Example CSS style rules for anchor tag a & hover on anchor tag, and input tag & focus on input
```
a {
  color: #b3b3b3;
}
a:active {
  color: #003152;
}
input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
  border: 2px solid green;
}
```
Solution - Less nesting rules can easily encapsulate pseudo element style rules as given below.
```
input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
  &:focus {
     width: 250px;
     border: 2px solid green;
  }
}

a {
  color: #b3b3b3;
  &:active {
    color: #003152;
  }
}
```
Allows to in smaller manageable CSS files

CSS allows to create smaller style rules files separately for different part of page like

global.CSS
navbar.CSS
form-element.CSS
etc.

and with help of import statement CSS allows to import this files in each other or in one file. Example :

In Application.CSS
@import "global.css";
@import "navbar.css";
@import "form-element.css";

But disadvantage are
- Separate http request got created for each file when application loaded in browser and it will increase network traffic. Which means CSS doesn't combine all CSS file in one file.
- One more disadvantage is if there need of changing common property like color , one needs to open each file and have locate style property to make change.
Less allows importing of files same as CSS , but in LESS tools merge all different files as generate single CSS file.

global.less
variables.less ( this file contains all variables which is used by common properties like color, font-size, background color etc.)
navbar.less
form-element.less

In Application.CSS
@import "variables"
@import "global"
@import "navbar"
@import "form-element"

this will generate one file only, which get downloaded in on http reuqest. And as all common property value is replaced by variables which is stored in variable.less file , managing and changing common properties also becomes easy.
Less having some set of inbuilt function.

Less have lot of inbuilt function that also very helpful, which are also helpful.

Example: below function helps to get different colors.
```
color: darken(@body-color, 20%);
border-color: lighten ( @body-color, 20%);
```
there are lot of different function in Less helps in build styles for properties, find all functions here : http://lesscss.org/functions/

Conclusion
CSS allows to beautify html pages but extension like Less is very helpful. Less helps to overcome issues one face with CSS, also provide easy to understand, manage and simplify style rules with the help of feature like variables, mixins, extends, nesting structure, in build set of functions etc. However above is just start or overview of Less. Read in depth here : http://lesscss.org/features/

Parsing Number with NumberStyles

pranayamr@gmail.com (Pranay Rana) — Sun, 15 Jul 2018 17:10:00 +0000

Parsing string value to number i.e. converting string representation of number into number type is one of the basic task and most of programming language provides support to perform it easily. But sometimes developer writes too much complex code to perform this (string to number parsing) task as not aware about the easy way provided by programming language.

Below is small tip about parsing string representation of number to number type with respect to C# language. C# language has below numeric types

integer types (sbyte, short, int, long, byte, ushort, uint, ulong),
non-integer (number with precision or floating) types (float, decimal)

and to convert string value in one of the above listed numeric type, C# language provide two methods

Above two method allows to convert string representation of number to string. For Example

int number = int.Parse("1234");
//or
//int number = -1;
//bool isPased = int.TryParse("1234", out number);
Console.WriteLine(number);

But it fails (i.e. throws run-time exception) when you try input as below

int parsedNumber = int.Parse(" -1234 ");
int parsedNumber = int.Parse("(1234)");
int parsedNumber = int.Parse("$1234");
int parsedNumber = int.Parse("1,234");
int parsedNumber = int.Parse(" (1,234) ")

So above all tried input throws run-time exception , but solution to is make use of overload of Parse and TryParse which comes with NumberStyles as input. Below is screen shot of overload of Parse method

below is code make use of overload and avoid run-time exception.

//output: -1234
int parsedNumber = int.Parse("(1234)", NumberStyles.AllowParentheses);

// output: 1234
int parsedNumber = int.Parse("1,234", NumberStyles.AllowThousands);

// output: -1234
int parsedNumber = int.Parse(" -1234  ", NumberStyles.AllowTrailingWhite |
                                              NumberStyles.AllowLeadingWhite |
                                              NumberStyles.AllowLeadingSign);

// output: -1234
int parsedNumber = int.Parse(" (1,234) ", NumberStyles.AllowTrailingWhite |
                                          NumberStyles.AllowLeadingWhite |
                                     NumberStyles.AllowParentheses |
                                          NumberStyles.AllowThousands);

// allows currency symbol
// output: 1234
Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
int parsedNumber4 = int.Parse("$1234", NumberStyles.Currency);

Different number allows different input values. As given in above code one can put logic OR between different value of NumberStyles and allows combination to permit various input format.

Try out other values of NumberStyles listed at MSDN: https://msdn.microsoft.com/en-us/library/system.globalization.numberstyles(v=vs.110).aspx

Different Kind of for loop construct in JavaScript/TypeScript

pranayamr@gmail.com (Pranay Rana) — Sat, 30 Jun 2018 11:23:00 +0000

For Loop is very basic type of loop exist in all programming language. For loops allows to go over each items in iterable objects and allows to access each item of iterable objects. Each programming language provide different type of for loop to achieve purpose of iterating over iterable object and access each element to perform operation.

All programming language provide for loop (for(int i=0; i< array.length; i++)) i.e. indexed based and ForEach ( foreach(var ele in array)) i.e. element base.

But JavaScript/ TypeScript provides different type of for loops apart from basic once. Below are 4 different kind of JavaScript/ TypeScript

1. for
One of the most used and basic for loop to allows iterate block of code for predefined number.

Syntax

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

Example code :

const array = [1,10,6,45,32];
for(let i=0;i< array.length;i++) {
 console.log(array[i]);
}

Above code shows one example how to use it, code prints each array item by rotating from 0 up to array length. Above example made using array of numbers but in real application one can create for loop just by setting numbers and execute block of code repeatedly for predefined numbers. So this loop is not restricted for iterables only.

2. for..of
allows to go over each item in iterable (Ex. like array, string, Map, Set, etc.)

Syntax

for (variable of iterable) {
  statement
}

Example code :

const array = [1,10,6,45,32];
for (const element of array) {
 console.log(element);
}

Above code does same thing as for loop code discussed above, go though each element of array and print.
But difference is for...of loop works only on the iterable objects and for each element of iterable, where as in basic for loop one externally need to set predefined number like from and to to execute block of code. So it helpful when want to execute on each element or by using each element of iterable.

Angular framework also have structural directive calle *ngFor for displaying data. Read more : Dynamic Html Structure with - *ngIf, *ngFor & ngSwitch

3. For In
allows to iterate over each property of object. This loop is different then other loops as it allows to go though object properties.

Syntax

for (variable in object) {
}

Example code:

const obj = { a : 1, b: 'Xyz', c:'123'};
for(let prop in obj) {
 console.log(prop +' : '+  obj[prop]);
}

code above prints each object property and value of it. Below is use cases when for..in very helpful.

Loop is useful when object structure is unknown (When object received as response from external api http call) and there is need of go through each property of object and display it.

It also useful when there is indexed (interface, class) object in type script and there is need of go through each indexed item without knowing key.
Example:

interface Product {
    [key: number]: string;
}

let products : Product = { };
products[10]='xyz';
products[20]='abc';

for(let key in products) {
 console.log(key + ' : ' + products[key]);
}

4. forEach(ele=> {} );
allows to iterate over each item in array and execute function for each element in iterable.

Syntax

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

Example code:

const array = [1,10,6,45,32];
array.forEach((element,index)=> {
 console.log(index +' ' +element);
});

Above code execute function for each element of array and prints element value & index of element in array.
Different from basic for is, execute function for each element without knowing size of iterable & improves redability and difference from and for..of is also allows to get index of each element which is not possible in for..of.

Wrapping up
Javascript/typescript provides 4 different which can be useful in different way based on simplicity & redablity of code , performance of loop and sometimes based on situation like for..in used for go through each property of object or each index of indexed class/interface..

Way to handle Parallel Multiple Requests

pranayamr@gmail.com (Pranay Rana) — Tue, 12 Jun 2018 18:34:00 +0000

In web application Multiple requests means when there is need of making more then one Http requests to get result response and display to end user on web page. Multiple requests can be

Dependent Request
Http Request is dependent request when it waits for result which needs to be given by other Http request i.e. parent request. Read more about how to perform Dependent request in angular here : Angular Dependent Request
Parallel Request

Parallel Http requests are required when application need to make simultaneously to get data and display result to end user. For Example - In online shopping application, on order history page when use clicks on old Order to get detail , details page should display order details with all products detail which is associated with order.
Mostly in application database when order get saved its will save order details with associated product ids not full product. so to achieve this requirement once order data available with product ids, client code need to get fire multiple requests basically for each product id to get detail of product associated with order.

Below picture shows how parallel request get executed by approach going to discuss below.

Below are the way client code make parallel Http request and handle response of the requests to display final result with help of RxJs functions.

1. MergeMap

RxJs function mergeMap allows to fire out multiple request and handle response of each request to produce result. Function flatten inner observable(s) and allow to control each observable. Read more : MergeMap

    import { mergeMap, catchError } from 'rxjs/operators'; 
    megeMapTest() {
    const prouctIds: number[] = [1, 2, 3];
    const requests = from(prouctIds)
      .pipe(
      mergeMap(id => this.productService.getProduct(id))
      );

    requests.subscribe(
      data => console.log(data), //process item or push it to array 
      err => console.log(err));
 }

In above code, important thing to note out is mergeMap, it merges all parallel requests fired to get product in one observable stream (array of observable) and then allows that request to handle individually.

Advantage
a. One of the advantage with mergemap is, it create single stream of observable and allows to process response of each request individually.
So if there is any request fails i.e. throws server side error, then it doesn't affect other parallel requests. Failed request(s) call error function in above code and succeeded request calls success function. (Which is advantage over second approach i.e. forkJoin function discussed below)

b. mergmap function start processing request as it get response i.e. in case of multiple parallel request it process request which completes first ,doen't wait for other request to get completed. (Which is advantage over second approach i.e. forkJoin function discussed below)

Disadvantage
a. It doesn't preserve sequence (i.e. order in which it fire) of requests, means if there are 10 request fired parallelly then which request complete first will display result first.

Solution to this is

    import { mergeMap, catchError } from 'rxjs/operators'; 
    list: Product[] = [];
    megeMapTest() {
    const prouctIds: number[] = [1, 2, 3];
    const requests = from(prouctIds)
      .pipe(
      mergeMap(id => this.productService.getProduct(id))
      );

      requests.subscribe(
      data => {
        this.list.push(data);

        this.list.sort((a: Product, b: Product) => {
          const aIndex = prouctIds.findIndex(id => id === a.Id);
          const bIndex = prouctIds.findIndex(id => id === b.Id);
          return aIndex - bIndex;
        });
      }, //process item or push it to array 
      err => console.log(err));
 }

above solution code sort order of received response using index of array.

b. megeMap only merge request of same return type only. To understand this have look to above code again, all request is going to return observable of Product type which is going to be return by getProduct method of productservice.

Making use of forkJoin function can resolve this issue. Which is second approach discussed below.

2. ForkJoin

RxJs function forkJoin take one or more observable as input and provide steam of observable as result, which contains value last value emitted by each inputted observable to function. Read more : forkJoin

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { forkJoin } from 'rxjs/observable/forkJoin';
  forkJoinTest() {
    const prouctIds: number[] = [1, 2, 3];
    const productRequests = prouctIds.map(id => this.productService.getProduct(id).pipe(
      catchError(error => of(`Bad Promise: ${error.message}`))
    ));

    const requests = forkJoin(productRequests);
    requests.subscribe(
      data => console.log(data) //process item or push it to array 
    );
  }

In above code, as per definition forkJoin takes observable requests as input and returns result.

Advantage
a. forkJoin reserve sequence (i.e. order in which request sent), so order in which requests inputted to forkJoin in same order it gives response result.

b. forkJoin can take multiple request which returns different type observable.

async forkJoinTest() {
    const customerRequest =this.customerService.getCustomer(1).pipe(
      catchError(error => of(`Bad request: ${error.message}`))
    );    
    const orderRequest =this.orderService.getOrder(1).pipe(
      catchError(error => of(`Bad request: ${error.message}`))
    ); 
    const productRequest =this.productService.getProduct(1).pipe(
      catchError(error => of(`Bad request: ${error.message}`))
    );

    const requests = await forkJoin(customerRequest,orderRequest,productRequests).toPromise();
    
    console.log('Customer ' + requests[0]);
    console.log('order ' + requests[1]);
    console.log('product ' + requests[2]);
  }

In above code , forkJoin takes three requests (customer, product, order) which returns different type of observable. Also code make use of async/await advance typescript/javascript concept, which allows to wait till request completes. (Which is advantage over first approach i.e. mergeMap function discussed below)

Disadvantage
a. forkJoin waits for all inputted Http requests to get completed before calling subscribe function. So even though some request get completed it has to wait till other or lets say last request to complete. (This can be avoided with mergeMap function as it process requests as it get completed).

b. if one of the inputted request to forkJoin fails , then forkJoin also fails and return error even other inputted request completed successfully. To check run code as below and return error from server

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { forkJoin } from 'rxjs/observable/forkJoin'; 
  forkJoinTest() {
    const prouctIds: number[] = [1, 2, 3];
    const productRequests = prouctIds.map(id => this.productService.getProduct(id));

    //.pipe(
    //catchError(error => of(`Bad Promise: ${error.message}`))
    //));

    const requests = forkJoin(productRequests);
    requests.subscribe(
      data => console.log(data), //process item or push it to array
      err => console.log(err) 
    );
  }

In above code catchError function is commented, that means if any of request fails then forkJoin also fails and return that error. (this is not case with mergeMap)
To avoid the make use of catchError function as given in above code.

Which one is better
Both of them is not good or not bad. It all depends on requirement at the end. Because there might be case when have requirement to wait for all request to complete or want to parallely executed request which return different value or do not want to produce result if one of sent requests fails then go for forkJoin and there might be case when have requirement for do not wait till all request get compete or do not want to reserve order of request or want to process requests even one of the request fails then go for mergeMap.

Factory Design Pattern With Generics

pranayamr@gmail.com (Pranay Rana) — Tue, 22 May 2018 18:25:00 +0000

Factory Method design pattern is one of the highly used design pattern, which is used in project to centralize creation of similar family object in application. It's part of creation design patterns as it helps to create objects in application.

Why to Centralize Object creation with Facotry?

To avoid object creation every where in application with New.
To create object at run-time which serves purpose, based on requirement (i.e. based on input parameters).

Factory Pattern Implementation

Below is class diagram and code implementation of Factory pattern.

Below code, centralize creation of command objects with help of Factory design pattern. Code below works as below

Code below creates different command to perform task such as addemployee, editemployee etc.
It's scalable as if developer wants to add new command let's say deleteemployee then it require to create new DeleteEmployee command which inherits from ICommand as other commands do.
CommandFactory , its factory pattern base class which has method GetCommand to return requested command based on input string argument. Modification required in GetCommand method when new command need to be added in application.
Program is client class which make use of CommandFactory and execute returned command.

    class Program
    {
        static void Main(string[] args)
        {
            ICommand cmd = CommandFactory.GetCommand("AddEmployee");
            Console.WriteLine(cmd.GetType());
            Console.ReadLine();
        }
    }

    public class CommandFactory
    {
        public static ICommand GetCommand(string cmdName)
        {
            if(cmdName=="AddEmployee") 
            {
                return new AddEmployee();
            } 
     else if(cmdName=="EditEmployee") 
            {
                return new EdutEmployee();
            }

            return new NullCommand();
        }
    }

    public class NullCommand : ICommand
    {
        public bool CanExecute()
        {
             Console.WriteLine("Null command");
    return true;
        }

        public void Execute()
        {
           Console.WriteLine("Null command");
        }
    }

    public class AddEmployee : ICommand
    {
        public bool CanExecute()
        {
            //validation
   return true;
        }

        public void Execute()
        {
          //code to execute
        }
    }
 
    public class EditEmployee : ICommand
    {
        public bool CanExecute()
        {
            //validation
             return true;
        }

        public void Execute()
        {
          //code to execute
        }
    }

    public interface ICommand
    {
        bool CanExecute();
        void Execute();
    }

Following are issues with above code

One big issue with above code is , it's violate Open Close principle. Because whenever new command added in application, developer need to go to Command Factory and need to add if condition for creating it.
For Example: when there is need of adding Delete command , developer need to open CommandFactory class and need to add if clause for that.
CommandFactory, GetCommand takes string argument to create and return instance of command. If developer pass wrong string argument value it will end up with NullCommand object (which is based on Null object pattern).
So its not type safe implementation.
CommandFactory, GetCommand can only return ICommand. If developer added new property/method let's say xyz which is specific to command ex. AddEmployee, then developer cannot access it like addCommandObj.xyz as return Command is of type ICommand and it doesnt has that property.

Generics Based Factory Pattern Implementation

Solution to problem listed above is make use of factory pattern using Generics. Below is diagram and code of implementation

    class Program
    {
        static void Main(string[] args)
        {
            ICommand cmd = CommandFactory.GetCommand<AddEmployee>();
            Console.WriteLine(cmd.GetType());
            AddEmployee addEmployeeCmd = CommandFactory.GetCommand<AddEmployee>();
            Console.WriteLine(addEmployeeCmd.NewEmployeeId);
            Console.ReadLine();
        }
    }

    public class CommandFactory
    {       
        //only create object of type which implement ICommand
        public static T GetCommand<T>() where T:  ICommand
        {
          //it create object using Template type T and by making use of reflection
          //once create factory this way there is no need to open it again for modification
            Type type = typeof(T);
            Object obj = Activator.CreateInstance(type);
            return (T)obj;
        }
    }

    public class EditCommand : ICommand
    {
        public bool CanExecute()
        {
            //validation
            return true;
        }

        public void Execute()
        {
            //code to execute 
        }
    }

    public class AddEmployee : ICommand
    {
        private int newEmployeeId;
        public int NewEmployeeId
        {
            get { return newEmployeeId; }
        }

        public bool CanExecute()
        {
            return true;
        }

        public void Execute()
        {
            //execute code to create employee
            this.newEmployeeId = 1;//created employeeid 
        }
    }

    public interface ICommand
    {
        bool CanExecute();
        void Execute();
    }

Following are advantages (solutions for previous approach problem) of generics based implementation

It doesn't violate open close principle as object get created using reflection and using Generics Template type T in CommandFacoty class - GetCommand method. Check CommandFacotry Class in above code.
By making use of Generics, it makes CommandFactory strongly type and there is no need string as argument based on which GetCommand method creating object in previous implementation.
```
 public static T GetCommand<T>() where T:  ICommand 
```
if you see signature of GetCommand now, it force Template type T must implement ICommand interface and so that it only going to create object of types which implement ICommand.
Now factory can return object of specific implemented type like AddEmployee
```
  AddEmployee addEmployeeCmd = CommandFactory.GetCommand<AddEmployee>();
```
Above line of code in Program class Main method proves point that now factory can return implemented type that can also be convert to to parent type ICommand.

Wrapping up
Factory pattern is one of the highly used deign pattern which used in most of the application to create and centralize object creation. So when it written not strongly type based way can lead to problem. So it's better to implement it strongly type based way (Generics implementation) to avoid issues and it helps to stick your code with SOLID principle.

Angular Application Structure

pranayamr@gmail.com (Pranay Rana) — Sun, 13 May 2018 09:32:00 +0000

Setting up application structure of application is one of the most important part of application development. Because well structured application allows to scale/grow application with less efforts, saves lot of effort in maintenance of application, allows to locate files and resources easily.

No framework forces to follow how to structure application (how to arrange files in different parts of application) , same goes for Angular 2 framework. It doesn't force developer to structure application, like how to arrange components, directives, pipes, services etc. created by developer. But angular team propose guideline one must follow for structuring application in style guide here : StyleGuide

Application Structure

Below diagram is visual presentation of structure of Angular application, which is as per the guide lines from angular team.

Application Module - It's Start point of angular application. This is first module get called when application get loaded. This module automatically get created when application created with the help of Angular-cli.
Point to note , all feature modules and core module is going to register themselves in this module.

Core Module - In angular application, It's module going to have application level singleton services (Ex. HttpInterceptor used for intercepting http request, LoggerService, LoggedInUserService) or application level component (Ex. Navigation Bar).

Core Module have all singleton services, so only the root AppModule (Application Module) should import the CoreModule to make same instance of service in all modules of application. If a lazy-loaded module imports it too, lazy module will create its own instance of core module services and use that newly created instance of services instead of application level singleton services. To avoid that problem make use of forRoot method and guard clause, code for that given below. https://angular.io/guide/singleton-services

@NgModule({
  imports: [CommonModule]
  declarations: [XyzComponent],//needed if there component
  exports: [XyzComponent]//needed if want to export component
})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }
 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        LoggerService ,UserService
      ]
    };
  }
}

Shared Module - In angular application, It's module going to have all dump angular Pipes, Directives , Components, Function etc. i.e. all who are dumb and receive input from, component which uses it. Ex. Extended Form Validation Component (Check Here), Confirmation Model Popup, Formatting Pipes, Validation & Common functions used through out application, Directive used by controls etc its like utilities used in application .
Point to note, It should not going to have angular services.

Feature Modules - In angular application, Feature modules are going to have have features which is going to be provided by application. (Ex. CustomerModule, OrdersModule, ProductsModule, ShippingModule).
This features modules also going to have shared features modules in which is going to be shared between this features module only. For Example. ProductDataService module which is going to be shared between ProductModule and OrderModule.

Module Dependency ( Flow of Services )

Below diagram shows dependency between modules (i.e. it shows the flow of services) discussed above.

Hows modules dependent or Service flow

Feature Modules - these modules are going to consume singleton services form Core Module (Via application module in which it registered) and shared dumb pipes, component, directives, functions from shared module.
Which means Feature modules depends on Core Module and Shared module i.e. service flow from core & shared modules to feature modules.
Important point to note here is, Service flows from top towards bottom, not from bottom to top. This means top level Core module, Application module and shared module must not consume service from feature modules.

Core Module - this module going to consume service from shared module if needed. Mostly it's doesn't need service from shared module but sometime need to access common function or formatting pipes for its component , that's why diagram has dotted line.
So service flows from shared module to core module if needed, otherwise this is independent module which provides application level singleton services and component.

Application Module - this module is simple module just going to to have one component to provide start point of application. It's going to consume services from Core Module and if needed consume services from shared module.

Shared Module - It's utility module. This module have all the dumb angular components, pipes , directives and utility functions. So this module provides its services to all the modules (Application Module, Core Module, Feature Modules) in applications.
But its not going to consume service from other modules.

Conclusion
Angular framework doesn't force developer to follow discussed structure for developing application. But it's must need when application going to grow & developer wants to scale it up, and also helps in identifying different part of application in turns helps in maintaining application.

Putting component, service, pipe, directives in proper folder structure its not end of story. To make property structure developer must need to setup dependency properly between module i.e. flow of service as discussed.

Note
Above article is based on my reading on angular.io portal and structure applied in my application. Please comment if something wrong.

Angular Dependent Request

pranayamr@gmail.com (Pranay Rana) — Sun, 22 Apr 2018 13:30:00 +0000

In software application, screen(s) where to display data application needs to make dependent request i.e. First have to make Request A (to server or database), based on result of A request data have to make Request B.

Example : In shopping application, on product screen , when user select product it will display product details and based on product make region it also display in which region it available or which region it's available.

So achieve in application there is need of dependent request , which works this way

It request (server/database) to get full product detail
Based on product region , it makes request (server/database) to get available regions

In code most of the developer write below code

this.productService.getProduct(1)
 .subscribe(data => {
          this.product = data;
          this.productService.getAvailableRegion(data.regionId)
                   .subscribe(region => this.avilableRegion = region);
});

code above does the task. But its complex (in terms of readability) and not easy to understand when there is more depedent request are there (if there are more dependent request like Request C , depends on Request B and which depends on Request A) as it goes deep and deep for each request.

Below are some way to avoid complexity and easy to understand code.

RxJs Way
Above example just make use of one RxJs function which subscribe, and does thing in that function only. For second request (dependent request) it does same thing which makes code complex. But RxJS provides number of functions apart of subscribe which make things simple. Below is code how to reduce complexity of above code by making use of other function provided by Rxjs.

this.productService.getProduct(id)
  .pipe(
       map(data => this.product = data),
       switchMap (cust => this.productService.getAvailableRegion(this.product.regionId) )
   ).subscribe(region => this.avilableRegion = region);

this does the same task as above code, but better way. Following functions to not down which makes code easy

pipe - its RxJs function which allows number of RxJS function as input and combine them to perform operations one by one on observable received from previous function.
In above code it combines map and switchMap RxJs operator.
map - it used to map returned observable value to other value. In this case it maps returned response to product.
switchMap - it used for switching from one observable to other observable, in this example it switch from product to list of regions.
Finally subscribe - this allows to subscribe to response observable stream of provided from pipe function after operation done in it.

Advance Typescript (async/await on Promise)

Another way to achieve same is make use of advance typescript concept , which making use of async/await. Below is code for the same

async getDetails(id) {
   this.product = await this.productService.getProduct(id).toPromise();
   this.avilableRegion = await this.productService.getAvailableRegion(this.product.Id).toPromise();
}

Points to note with this approach is:

async/await is used with Promise object only.
In code, promise object got created from returned observable by making use of toPromise method.

when method getDetails called from anywhere in code, executing stops when await keyword got encountered, and it waits till getProduct server request returns. Execution get resumed once server returned response which in this case return product. Then it stops execution again on encounter of await, which used to wait till availableResion request retuns.

At the End

So there are two approach

RxJs and
TypeScript

none of them is better then another one , it all on developer preference. But both the way it makes code simple and easy to understand. It also help developer in maintaining code for long time as not much complexity involved.

Angular Custom Validation Component

pranayamr@gmail.com (Pranay Rana) — Sat, 31 Mar 2018 06:23:00 +0000

Full Source at GitHub : AdvCustomValidationComponent

Validation is very important feature of application which allows to data entry (allows to enter data in application) as invalid data can leave application in inconsistent state, invalid date entry crash application and if data is not validated it can allows injection attacks on application. In Web application validation can be done at server side (i.e. on server like IIS, apache in language C#, PHP etc.) and at client side (i.e in browser windows using javascript).

Here, following post is about validation in Angular 2 application , which means its about validation on client side not about server side. Angular framework allows to do validation following two way

Template Driven Form
Reactive Form

One of this approach or mix of both approach can be used in application for validation. Not going to discuss about it as it provided in detail over here : Forms & Validation. But following post is going to discuss about custom component, which works with both the validation approach provide by angular 2 framework and encapsulate validation code in it.

Custom Validation Component
Let's first create validation component and make use of it in application. For fresh start of application follow this post : My first Angular 2 app - tutorial. After creating application create shared module in application by running below command in integrated terminal of visual studio code.

 ng g module shared.

Shared module is where custom validation component will resides , as custom validation component is dumb and its going to be used by multiple features in application. Run command on integrated terminal create

 ng g component shared/custom-input

custom validation component.

custom-input.component.html

 <div class="form-group" >
  <label class="control-label">{{label}}</label>
  <br />
  <div [ngClass]="{'has-error':isError}" >

    <ng-content></ng-content>
    <ng-container *ngIf='isError'>
      <span class="text-danger" *ngFor="let msg of errorMessages"> {{msg}}</span>
    </ng-container>
  </div>
</div>

Above is modification done in component html, some of the points to note in html are

ng-content - which is very important tag in this html and important for validation component. This Angular 2 Framework tag allows to push any content in html when component loaded. For example:
```
<custom-input>
  <input inputRef class="form-control" type="text" />
</custom-input> 
```
when above code written in component it will become like this,

so input element put inside in ng-conent when component loaded in html page.
inputRef its directive associated with input element, that intrun allows to access input element in comoponent typescript (more discussed below).
When custom component render in browser it look as below:

So, html tags in component will create structure above as shown in below image

image above explain all the tags which made up component template. Just to note few points
1. Border around the text box controls comes when text box becomes invalid. Border to textbox get applied by 'has-error' class , which get applied isError becomes true (in which case it becomes true described by code in typescript file below),
2. "First Name Required"- this message comes when there is error i.e. in this image it error related to required validation. This passed as input to component described below
3. label,(First Name) - will come from typescript associated with component template. This passed as input to component described below.

custom-input.component.ts

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent implements OnInit {
  @Input() label: string;
  @Input() validations:  { [index: string]: string};
  @Input() info: string;

  @ContentChild(InputRefDirective) input: InputRefDirective;

  get isError() {
    return this.input.hasError;
  }

   get errorMessages() {
    const errors = this.input.errors;
    const messages = [];
    const keys = Object.keys(this.validations);

    keys.forEach(key => {
        if (errors[key]) {
          messages.push(this.validations[key]);
        }
      });
    return messages;
  }

  ngOnInit() { }

  constructor() { }
}

Above is Component Typescript file , code in file handles all the backend logic to control Component invalid/valid state, putting red border around control when there is error and displaying error message when control is in invalid state.

Type	Name	Description
Input
	label	display label text for control E.x. First Name in above image
	validations	its indexed object hold validations associated with input tag of component E.x. {'required' : 'First Name required', 'minlength': 'Minimum lenght is 3 char'} Note: indexed property name must need to match with type of validation E.x. 'required' key match with required validation
	info
variable
	input	this component variable allows to get access to input control (which replaces ng-content in template of component) associated with component, for example above image in this case 'input textbox'.
Properties
	isError	component property which find input element (with help of input directive) and get element has error or not, which in turn helps to put red border around input control
	errorMessages	component property which access errors associated input element (with help of input directive) and with help of input property validations object find proper error messages and return to display all.

Important thing to not here is InputRefDirective , which access input control. Below is code for input-ref directive.

input-ref.directive.ts ( created by ng g directive directive/InputRef )

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[inputRef]'
})
export class InputRefDirective {

  constructor(private formControl: NgControl) {
  }

  get hasError() {
    return this.formControl.dirty && this.formControl.invalid;
  }

  get errors() {
    if (this.hasError && this.formControl.errors) {
      return this.formControl.errors;
    }
    return '';
  }
}

Important part of input-ref directive is, with help of constructor injection (by using angular framework injection) NgControl get injected in the input-ref directive. By doing that directive class get access to input control.

Type	Name	Description
Properties
	hasError	property return true (when control is dirty and invalid state) or flase , to indicate there is error or not
	errors	property returns list of errors associated with input control

So its end of creation of validation component and its related directive. Now let's see how to use it in application.

app.component.html
Reactive Form

<form class="needs-validation" [formGroup]="detailForm" novalidate>
    <custom-input [label]="'First Name'" [validations]="{required:'First Name required'}">
      <input inputRef class="form-control" formControlName="firstName" type="text" />
    </custom-input>
    <custom-input [label]="'Last Name'" [validations]="{required:'Last Name required'}">
      <input inputRef class="form-control" formControlName="lastName" type="text" />
    </custom-input>
    <div>
      <button [disabled]="detailForm.invalid" type="button" class="btn btn-primary">Primary</button>
    </div>
</form>

Component.ts for Reactive form only
code below create form reactive way - point to note here no much code to access control and display error (discussed below in advantages).

export class AppComponent implements OnInit {
  title = 'app';
  detailForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit() {
  }

  private createForm() {
    this.detailForm = this.fb.group({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
    });
  }
}

Template Driven Form

<form class="needs-validation" #detailForm="ngForm" novalidate>
    <custom-input [label]="'First Name'" [validations]="{required:'First Name required'}">
      <input inputRef class="form-control" [(ngModel)]="firstName" name="firstName" type="text" />
    </custom-input>
    <custom-input [label]="'Last Name'" [validations]="{required:'Last Name required'}">
      <input inputRef class="form-control" [(ngModel)]="lastName" name="lastName" type="text" />
    </custom-input>
    <div>
      <button [disabled]="detailForm.invalid" type="button" class="btn btn-primary">Primary</button>
    </div>
</form>

It's not full template of application component code, but it part of template which uses Custom validation component in both ways Reactive Form and Template Driven Form way. So not much change in both way, except change forced by reactive form approach and template driven form approach.

Not much in app.component template to discuss as already discussed before in post. app.component template make use of custom validation component and pass all required input values (label, info and validation error).

Below is image of final form after doing all changes

Advantage of using Custom validation component

Less code in component template,
Template driven from

 <label class="control-label">First Name</label>
  <input
  type="text"
  name="firstName"
  [(ngModel)]="firstName"
  minlength="2"
  required>

<div *ngIf="firstName.errors?.required && firstName.touched && firstName.touched" 
class="label label-danger">
  Name is required
</div>
<div *ngIf="firstName.errors?.minlength && firstName.touched && firstName.touched" 
class="label label-danger">
  Minimum of 2 characters
</div>

Reactive from

 component.ts

 this.detailForm = this.form.group({
       firstName: [null, Validators.compose([Validators.required, Validators.minLength(2)])],     
    });

component.html
<label class="control-label">First Name</label>
<inpu.
  type="text"
  name="firstName"
  [(ngModel)]="firstName"
  minlength="2"
  required>

<div *ngIf="detailForm.get('firstName').errors?.required && detailForm.get('firstName').touched && detailForm.get('firstName').touched" 
class="label label-danger">
  Name is required
</div>
<div *ngIf="detailForm.get('firstName').errors?.minlength && detailForm.get('firstName').touched && detailForm.get('firstName').touched" 
class="label label-danger">
  Minimum of 2 characters
</div>

If there is no custom validation component , in both the way (Template driven or Reactive way) one need to write down separate div for displaying each error input control has, for example (div for required error and div for minlength).
But with custom validation control, there just need of passing validations in validations-property of control and it will take care of it.

    <custom-input [label]="'First Name'" 
               [validations]="{required:'First Name required', 'minlength':'Minimum of 2 characters'}">
      <input inputRef class="form-control" [(ngModel)]="firstName" name="firstName" type="text" />
    </custom-input>

Event there is no need to write extra label tag for displaying label for input control. This also taken care by custom validation control label-property.

Second major difference is, custom validation control encapsulate code of validation in one place only for full application. That means there is no need to write validation code in template in each and every data entry form.

Wrapping up
Custom validation control is easy and simple to use. It makes use of some advance stuff like ng-content, directive to get input control under the hood and encapsulate thing in it. Once control included in application it reduce amount of validation code & effort to write validation code in every data entry form.
Full Source at GitHub : AdvCustomValidationComponent

My first Angular 2 app - tutorial

pranayamr@gmail.com (Pranay Rana) — Sun, 25 Mar 2018 19:23:00 +0000

There are lof of developer now days started learning and devloping websites Angular 2, this is simple tutorial for those who are beginner and started learning & development with Angular 2. Tutorial is set of step one should follow to communicate with Restful Server service like Asp.net webApi to perfrom CRUD (Create, Read , Update & Delete) operation.

Tutorial is divided in two parts first part is creation of simple Asp.net WebApi i.e Restful server side service and second part is creation of Angular 2 application which consiste of just one page to consume webapi.

First part - Creation of Restful Service (webApi)
What is Asp.net WebApi? Asp.net Webapi is MVC based framework provided by Microsoft to create Resful web Api (i.e. restful web servie). one of advantage of web api is easy to create and cosnume. As its restul its compiable with HTTP protocol and HTTP verb. One should follow this link to learn more about it : Asp.net WebApi Before start creating webApi one must need to have Visual Studio installed on machine. Once one have visual studio follow the below steps

1. Create new solution and add new project in it. As shown in below image

Selecte language of development (here C# is chosen)
Selecte Web unser language
Selecte 'Asp.net Web Application' template
Enter project name (here Employeemengementapi is project name)
Click Ok.

2. On next window

Select 'Empty' Template
and Select 'WebApi' checkbox
click Ok.

3. Once proper input is given during project creation, Visual studio create project structure as given in below image. Now one is ready to code Restful webApi.

4. Once project structure is ready, first task is to add Model Class. Model class is object which can be sent from server to client as response from controller or object received by contoller from client as part of request. To add model class just right click on Model foler and click add class.

5. Add enter name of model class as shown in below image and click add it will create plain class under model folder.

Below is simple Employee Class created as model, which is going to be used in the tutorial.

namespace EmployeeManagmentApi.Models
{
    public class Employee
    {

        public int ID { get; set; }

        [Required]
        public string firstname { get; set; }

        public string lastname { get; set; }
    }
}

6. Once project structure is ready, first task is to create Contoller. Contoller in MVC framework does heavy lifting job of hadling income client request and providing proper response to client. As given in below image one need to right click on solution folder and select add contoller.

7. Once add click , it display template for controller and as there is no fancy stuff involved (i.e. no entity framework related things) and as its WebApi for this tutorial 'Web API Contoller with read/wrtie actions' selected as given in below image.

8. Once clicked on Add in above screen it will display from where one should enter name of controller. once clicked it will create conroller with read/write action.

Below is code of contoller which is written for this tutorial. As part of tutorial just going to demostrate HttpGet request so only created one new method which is going to return Employee object.

one important thing to note here is [EnableCors(origins: "*", headers: "*", methods: "*")] line which is above controller , thats line is added to provide support for cross domain request (i.e. request which comes from other domain). More about cross domain request : CORS

namespace EmployeeManagmentApi.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class EmployeeController : ApiController
    {
        // GET: api/GetEmployees
        public IEnumerable<Employee> GetEmployees()
        {
            List<Employee> emplist = new List<Employee>
            {
                new Employee{ ID=1, firstname="Pranay", lastname="Rana"},
                new Employee{ ID=2, firstname="abc", lastname="xyz" }
            };

            return emplist;
        }

        // GET: api/Employee/5
        public string Get(int id)
        {
            return "value";
        }

        // POST: api/Employee
        public void Post([FromBody]string value)
        {
        }

        // PUT: api/Employee/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE: api/Employee/5
        public void Delete(int id)
        {
        }
    }
}

9. once done with Controller and Model, one should modify the WebApiConfig.cs file which helps to configure webApi, such that it meets with the requirements like handling of Cross Domain request, Respose formate, Routes to serve request etc. Below is code for the same.

namespace EmployeeManagmentApi
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services
            config.Formatters.Remove(config.Formatters.XmlFormatter);
            
            // Cross domain reuest configuration 
            config.EnableCors();

            // Web API routes
            config.MapHttpAttributeRoutes();
             
            config.Routes.MapHttpRoute(
               name: "NamedactionApi",
               routeTemplate: "api/{controller}/{action}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );


            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Note : make sure you must install Microsoft.AspNet.WebApi.Cors package that is required for cross domain request handling code.

10. once done one can easily test web api just by typing url in browser as given in below image. It working as its get request but if want to test for other type request like Delete (HttpDelete), Update(HttpPut), Create (HttpPost), one should make use of Postman or fiddler.

This is end of first part of this tutorial, creation of webapi. In tutorial Asp.net WebApi is used but its not necessary to use it one can make use of other serside techonlogy.

Second part : Creation of Angular 2 App
Before starting with second part i.e. Angualr 2 App, one must needs to be ready with development environment. one must need to have following installed in machine

Visual Studio Code
Visual Studio code is development tool provided by Microsoft. Some of the majaor advatnages of it is it's free and not heavy tool as Visual Studio, lot of plugin/ etension avaiable which helps in development.
Node.Js &npm :
It's required to manage and install libaray / packages. It's runtime which convert typescript code in javascript code which broswer understand and run application in browser.
Angular Cli
It's helpful commandline utility which helps from project start (setup new application) till end (deployment of project). Some of the advantages are easy project creation, allows to create module, component, service, model class, pipe etc. (i.e used for scofolding) just help of commands, setup lint which helpful in code formatting during development, webpack - which help in bundling typescript/javascript/css files and create chunk of code,testing, minifying, .
Version Control Tool (ex. GitHub)
It's helpful for keeping code which at location, from which you can retive code and keep version of code so allow to compare between diffrent version of code.
BootStrap
This is not must needed pacakge, but it's helful if you don't want to spend much time in styling your application. It's css libarary comes up with ready made Styles (CSS) and some simple jQuery stuff. I makes development faster.

Once all the above installed (except BootStrap which requried to be install after project get created) , we are ready to go with first Angualr 2 app

1. Create application by running angular cli command 'ng new [projectname]', as given below

This command will create folder with all necessary things required for angular 2 app and it's also install necessary packages which is listed in package.json file.
Note: command ran with --routing argument, it will create routing module with new application , its needed as sooner or later you need more number of pages in your application and want to navigate betwen that pages.

Once folder got created in local drive suggestion is close command prompt window. And if you see failure during installtion of package just leave it and close command prompt.

2. Now open Visual Studio Code on your machine and click on open folder, then navigate to the path where folder got created and click 'Select Folder'.

3. Visual Studio code shows folder structure as below in visual studio code.

Important file in folder strucutre are

Package.json - File which contains all packages that installed for the project i.e. file used for managing packages in project.
tsconfig.json - File cotains setting related to typescript compiler , i.e. setting to compile typscript .
src - folder going to contains all the code (module, component, pipe, service etc.) for creating application.
src> Application -When new application get created it got created with default Application Module and Application Component.
src > asset - folder conatins style, images used in project.
node_module - folder conatins all installed packages. which lis listed in package.json.
src > environment - contains files which is having setting realted to current running environment. i.e. contains settings file for dev, prod and test evnvironment related settings file.
e2e - stand for end to end testing.
src > polyfill.js - file contains code to render application on all broswer.
tslint.json - File contains all setting related to linting code i.e. formatting code properly duing development.
angular-cli.json - file contains setting related to angular cli utility, this setting used by angular cli utility.
index.html - page get loaded in when user brows and its page which load angular application.
main.ts - file contains application bootstaping realted code. It conatins reference to module which first needs to be get loaded when application start. In newly created application it contains reference to 'ApplicationModule'.

4. After opening application, start integarter terminal in visual studio, by clickin on View > integrated terminal. This will open up command line in visual studio.
run command 'npm install' if pacakage installation not done during proect creation. after that first run 'ng serve' command it will run application and to check it worked correctly. Go to url : http://localhost:4200 it will open up defaultly created application.
Now, remove all unecessary stuff i.e. html from index.html file.

5. Run command npm install bootstrap and install bootstrap in project. After intallation done to make use of bootstrap in project, there is need of modifying angular.cli.json file as below.

      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

Go to Angualr cli.json locate styles and scripts array and add path of .css and .js file of bootstrap.

6. Now run following command in integrated terminal i.e. command line same given in below image.

ng g module feature/employees --routing
This command create new mdoule called employess with routing feature.
ng g component feature/employees
command create feature called employees in employee module.

Both command as seen in image below run with --dry argument to command. This agrument allows to see one what modification command will do in project before running it.

Note: Please follow : style guide for recomended angular application structure.
As per guide application should have follwing folder under src folder

Application - this folder is already there when you create new project, its folder which contains application module.
Feature - this folder conatins all the feature going to be part of applicatio. for eample in Employeemangment application its will going to have feature like Employees (componet for employee add,delete,update & read), Department (componet for employee add,delete,update & read)etc.
Core - this folder going to contains application core, it contains all the singleton services that is going to be used by features modules , it will contains service like application wide exception service, application wide user profile service, nav bar etc.
Shared - this folder going to contains all the comman services , pipe, component, directives which is going to be used by features modules.

Once command run it will create feature called Employees in project. One of the adavantage of creating module/component with angular it will do all necessary modification in project like adding routing, adding newly created component to module, so it saves effort of going to each file add adding this details. It also create module,compoent,servie,pipe, directive with proper etension like xyz.mdoule.ts. xyz.component.ts etc. as per style guide to identify given file is for compoenet or module or service etc.

7. Next step is to add model in feature its interface going to have structure similar response structure which comes after making http call from service. It's kind of plain property class.
command : ng g interface feature/employees/model creates model interface model.

Modify model.ts as below

export interface Employee {
    ID?: number;
    firstname?: string;
    lastname?: string;
}

8. Once module, component get created. Make use of below command it will add service i.e. data service which is going to be used by Employee module. DataService mostly going to have code which communicate with serverside api.
command : ng g service feature/employees/employees -m=feature/employees/employees.module create dataservice called employee and also add service as provider list in module defination file as given in below image.

Modify employees.service.ts as below

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Employee } from './model';

@Injectable()
export class EmployeesService {

  apiUrl = 'http://localhost:1800/api/demo/';
  constructor(
    private http: HttpClient
  ) { }

  getEmployees(): Observable<Employee[]> {
    const url = `${this.apiUrl}getemployees`;
    return this.http.get <Employee[]>(url);
  }
}

Some of change to note here is

HttpClient - injected in employee service. it's service provided as part of Angular 2 framework for communicating with serverside service. In this tutorial its going to comuunicate with EmployeeManagementApi webapi created in first part.
getEmployees - method of service which make use of http service and calls getEmployees method of web api to get all employees.

Note: Tutorial is just making use of HttpGet call to bring data but one can easily read other methods provided by HttpClient put, post etc. which map with other HttpVerb to perform operation like Create, Update and Delete.

9. Once done with above changes do modify , componet files as below

employees.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeesService } from './employees.service';
import { Observable } from 'rxjs/Observable';
import { Employee } from './model';

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {

  employees: Observable<Employee[]>;
  constructor(
    private employeesService: EmployeesService
  ) { }

  ngOnInit() {
    this.employees = this.employeesService.getEmployees();
  }
}

typescript code in this inject employeeservice. Make call to employeeservice > getemployees method form ngInit to get employees from server and it stores response coming out from servers in observalbe of employee array.

employees.component.html

 <div class="container">
  <h2>Employees</h2>
      
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Id</th>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody *ngIf='employees'>
      <tr *ngFor="let employee of employees | async">
          <td>{{employee.ID}}</td>
          <td>{{employee.firstname}}</td>
          <td>{{employee.lastname}}</td>
      </tr>
    </tbody>
  </table>
</div>

html code make use of async pipe of angular framework to subscribe obersable employees created in typescript file and get actual employee array. Code also make use of *ngFor angular framewrok directive to go through all the employess in received array and create table row.

10. Afer all change done run command 'ng lint' to find out if there is any lint error i.e. code formatting error.

11. Below screen shot shows final output of the tutorial.

Conclusion
Tutorial covers most of the basic which one needs to start with angula 2 application (except testing of application). One should find full code of tutorial here : WebApi - EmployeeManagementApi AngularApp - EmployeeManagment

Extension method / Type Extension in TypeScript

pranayamr@gmail.com (Pranay Rana) — Sun, 11 Feb 2018 18:43:00 +0000

During programming, most of the developers encounter scenario where there is need of adding behavior (method / operation) to existing type provide by framework (mostly by language) or into the type provided by third party library, which one can use in project multiple places without rewriting code again and again. And can access the extension code easily.

For example one want to extend Date Type and wants to add compareDate, so that it get attached to Date type as given in below image. just to note Date type is already provided Typescript language.

how to achieve behavior like that, answer is extension method.

Extension method
Extension method (programming language C# has this feature already) is way to extend existing type without modifying actual code file, means with help of the extension method one can add behavior (operation or method) without touching or modifying actual implementation file.
Now question arise how to create extension method, answer is by making use of Declaration Merging.

Declaration merging
Declaration merging in typescript allows to merge two declaration, for example if do like as below in typescript

 
interface User {
    name: string;
    id: number;
}

interface User {
    email: string;
}

and when create object of user as below

email is also part of User object as in above screen shot, it because of declaration merging. Compiler under the hood create User type as given below as it merge both the declaration of User interface defined above.

 
interface User {
    name: string;
    id: number;
    email: string;
}

Extension method on Date Type
So based on declaration merging, extension method can be added as below.

interface Date {
    compareDate(date: Date): number;
}

above code defined interface called Date with method name comparedate. So this will merge merge method called compareDate on existing Date type.
But above code just add method declaration without its implementation. Below is code which provide implementation of compareDate method.

Date.prototype.compareDate = function (date: Date) {
    if (this.toLocaleDateString() === date.toLocaleDateString()) {
        console.log('equal');
        return 0;
    }
    else if (this > date) {
        console.log('greater');
        return 1;
    } 
    else if (this < date)
    {
        console.log('less');
        return -1;
    }
}

so once implementation added , compareDate method get added to Date type of typescript and ready use. Below screen

Below is output of compareDate method.

Code to test

var date1 = new Date('4-3-2015');
var date2 = new Date('4-2-2015');

console.log(date1.compareDate(date2));

Dynamic Html Structure with - ngIf, ngFor & ngSwitch

pranayamr@gmail.com (Pranay Rana) — Sun, 17 Dec 2017 19:27:00 +0000

Directives in Angular Js 2 is used for structuring html document(DOM) (web page) and for changing behavior of html elements (Html page element like <input>, <form> etc.). Following kind of directive provided by angular js 2

Component – is most commonly used and most of the developer aware about it from the first day of development. One cannot start learning Angular js without learning it. It is only directive which comes with template attached with it. @Compnent is metadata value by which developer can make mark created directive is component. More at: https://angular.io/guide/displaying-data
Attribute – is directive which can change behavior of the element (html tag, component), with which is get attached as attribute. Most common attribute directive is ngModel, this allows bind element with the backend typescript object property, and provide (oneway-twoway) binding between model and view. @Directive is metadata value by which developer can make mark created directive is attibute directive. More at : https://angular.io/guide/attribute-directives
Structure – is type of directive which can change structure of html document. Directives are capable of adding-removing elements in html document. @Compnent is metadata value by which developer can make mark created directive is structure directive. More at : https://angular.io/guide/structural-directives

Angular js not only provide some build in directives but also provide way to create custom directives , find more at : https://angular.io/.

Not going in much details of directives , how to build them as post is focused on three most important structural directives *ngFor, *ngIf and ngSwitch & how to use them to build dynamic structure. Before jumping in lets understand this directives one by one

*ngIf – is in build directive which allows to show or hide element on page (i.e. to control display of element).

Example:

<div *ngIf=”IsShow” class="alert alert-danger"> Display Error!!! </div>

In example, IsShow is component model property which value get controlled by logic. For example : IsShow=true then is error and div get displayed or IsShow=false then is no error and div get hidden.

*ngFor – is in build directive to display element repeatedly on html page. It basically for loop on html document to create similar element on page but with different value and it works with Arrays of object (object can be user-defined class object or in build type object).

Example:
AppComponent.ts

export class AppComponent  {
  items:Array<number> = new Array<number>(1,2,3);
 }

Component.html

<ul>
  <li *ngFor="let item of items">
    {{item}}
  </li>
</ul>



<div *ngFor="let item of items">
    {{item}}
</div>



<select>
  <option *ngFor="let item of items" value="item">
    {{item}}
  </option>
</select>

In above example *ngFor works with Array of number and display all number repeating element. In 1. Case it displays list of 3 elements by repeating li element under ul, in 2. Case it displays 3 div element by repeatedly, In 3. Case it displays 3 option in select list.

Note:
*ngFor can decrease performance of your UI if not handled correctly. Because *ngFor works with arrays and if any element removed from array or added in array, *ngFor remove all created element from DOM (html page) and recreate it with the new values.
So to avoid this behavior Angular team provided trackBy to this method to *ngFor directive to track changes. It works as below

Example :
If model is like this

Employee.ts

export class Employee
{
  Id:number;
  Name:string;
  Designation: string;
  Department:string;
}

Then your html component html will be like as below with trackBy

AppComponent.html

<div *ngFor="let emp of employees; trackBy: trackEmployeeById">
  ({{emp.id}}) {{emp.name}}
</div>

And in your component.ts you have to add method for trackBy like as below.

AppComponent.ts

trackEmployeeById (index: number, emp: Employee): number { return emp.id; }

By adding trackBy Angular Js track element and do not recreate full structure when element get removed or added in array.

Index : like for loop *ngFor also allows access to index of element, one can access it as below

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item}}</div>

ngSwitch – is directive which is similar to switch statement in programming construct, it only emits element in Html page (DOM) when condition is matched.

Example:
AppComponent.ts

export class AppComponent  {

  items:Array<number> = new Array<number>(1,2,3,4);

 }

Component.Html

 <div *ngFor="let item of items">
  <div ngSwitch="{{item}}">
    <div *ngSwitchCase="'1'">
      display 1 
    </div>
    <div *ngSwitchCase="'2'">
      display 2
    </div>
    <div *ngSwitchDefault>
      {{item}}-- display other element
    </div>
  </div>
</div>

As you see in above html, ngSwitch is similar to switch statement in programming language, similar to switch …case it also has ngSwitchCase. So when above html get executed then for array value 1 , it display 1 , value 2 it display 2 , for value 3 & 4 it displays “3—display other element” & “4—display other element”.

Important note:
Important point to not here is, one cannot apply two Structural directives on one html element like as done in following code.

<div *ngIf="items.length>0" *ngFor="let item of items">
    {{item}}
</div>

So when above get executed following error get displayed on console of browser. Which says multiple template binding on one element.

It can be easily get resolved by doing as following

<div *ngIf="items.length>0">
  <div *ngFor="let item of items">
    {{item}}
  </div>
</div>

<ng-container>
But problem with above is one more div element get added in Html page (DOM). So to avoid it angular js provided <ng-container> element , which you can use as below

<ng-container *ngIf="items.length>0">
  <div *ngFor="let item of items">
    {{item}}
  </div>
</ng-container>

Now there is no extra div element get added on html page(DOM). <ng-container> doesn’t affect structure of html page it used by angular js only just to note that it container which is having group of element under it.

Dynamic Structure with Structure Directives
Above is very simple and easy example with the structural directives, and it shows how you can easily achieve things in html without using line of javascript code, which developers are doing without angular js.
Now question may come how complex dynamic structure one can create with help of the structural directives ? to understand lets consider below example :

AppComponent.ts

export class AppComponent  {
  newTmpArr = [
    ["567", "2017-04-17T14:22:48", "45000", "button"],
    ["568", "2017-04-17T14:22:48", "45000", "button"],
    ["569", "2017-04-17T14:22:48", "45000", "link"],
    ["570", "2017-04-17T14:22:48", "45000", "button"]
  ];

  DoWork(ele:any)
  {
    //here you can do work , this get 
     //called when you press "click" button in table 
    alert(ele);
  }

For example, consider above data received by application component from external source like json File or from web service call.
Now requirement is as following

Create html Table structure using this data structure
Where ever property value is “button” html button needs to be get created & when value is “link” html hyper link needs to be get created , and display other values as is as text element in html.
Created link or button element must call function ”DoWork() (defined in script file above)” in script to process further.

Now if think of javascript, to achieve table structure with given data how many line of code needed. But in angular it can be done very easily

Component.Html

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Date</th>
      <th>Ammount</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let ele of newTmpArr; trackBy: trackByIds">
      <td *ngFor="let val of ele">
        <ng-container ngSwitch="{{val}}">
          <ng-container  *ngSwitchCase="'button'">
            <input type="button" (click)="DoWork(ele)" value="click" />
          </ng-container>
          <ng-container *ngSwitchCase="'link'">
            <a href="#" (click)="DoWork(ele)">click</a>
          </ng-container>
          <ng-container *ngSwitchDefault>
            {{val}}
          </ng-container>
        </ng-container>
      </td>
    </tr>
  </tbody>
</table>

It display below output in html page

When button get click it display as below

Download File in Angular 2 Application

pranayamr@gmail.com (Pranay Rana) — Sun, 10 Dec 2017 18:21:00 +0000

Downloading file from web application is one of the feature provided by most of the web application, when user visit web site and application want to share required document (Ex. Dynamically generated report) to visitor of website. Downloading file using serverside front end technology like Asp.Net MVC is very easy, but downloading file using client side language JavaScript is difficult so in turn with angular like client side framework also.

Below post is about how easily file downloading can be achievable in angular framework based web application.

Angular JS2 – TypeScript code

Below is code in angular which allows downloading file from server

  constructor(private http:Http)
  {}

  DownloadFile():void
  {
    this.getFile("http://localhost:1800/api/demo/GetTestFile")
    .subscribe(fileData => 
      {
      let b:any = new Blob([fileData], { type: 'application/zip' });
      var url= window.URL.createObjectURL(b);
        window.open(url);
      }
    );
  }

  public getFile(path: string):Observable<any>{
    let options = new RequestOptions({responseType: ResponseContentType.Blob});
    return this.http.get(path, options)
        .map((response: Response) => <Blob>response.blob())  ;
  }

Following explain part of code

Angular component makes use of HTTP service which allows to call server WebAPI which provide file
DownloadFile is function get called from component html , on button click
getFile method in code takes URL of Restful service to which need to be called for getting file as response
When making call to serverside method using HTTP from getFile function , http-get function make use of Request option which specify responsetype as Blob.
One receiving response from server .map() method, map response to <Blob> type.
After getting return value observable from getFile function, DownloadFile function create Blob of received value and also make use of property type which is “application/zip” it can be other type also like “application/xls”
Finally URL is get created from received blob and it get passed to window.oepn() method where download file dialog get prompt to user for downloading.

WebAPI

Writing code in Angular Js2(typescript) code for downloading file is not enough, there is also need of writing server side code which provide response as file. Below is server side code , this code is done with the help of WebAPI – its framework provided by Microsoft for building web service.
Below is function defined in WebAPI which provide repose as file

[HttpGet]//http get as it return file 
public HttpResponseMessage GetTestFile()
{
    //below code locate physical file on server 
    var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.zip");
    HttpResponseMessage response = null;
    if (!File.Exists(localFilePath))
    {
        //if file not found than return response as resource not present 
        response = Request.CreateResponse(HttpStatusCode.Gone);
    }
    else
    {
        //if file present than read file 
        var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);
        //compose response and include file as content in it
        response = new HttpResponseMessage
        {
            StatusCode = HttpStatusCode.OK,
            Content = new StreamContent(fStream)
        };
        //set content header of reponse as file attached in reponse
        response.Content.Headers.ContentDisposition =
        new ContentDispositionHeaderValue("attachment")
        {
            FileName = Path.GetFileName(fStream.Name)
        };
        //set the content header content type as application/octet-stream as it      
              //returning file as reponse 
        response.Content.Headers.ContentType = new 
                      MediaTypeHeaderValue("application/octet-stream");
    }
    return response;
}

Above code is as follows

WebAPI method GetTestFile() , receives request when DownloadFile() function get called in front end
On receiving request it first checks requested file is exists or not, Note: here file is hardcoded but in real time file may be generated dynamically or may be client pass file name as request parameter
If server code not able to locate file then it send response as file i.e. resource not exist on server
If server code able to find file then , it read file content and compose repose with file need to be deliver (important thing in code is media type format which is "application/octet-stream” )

Full Source code

AppComponent.Html

<input type="button" (click)="DownloadFile()" value="DownloadFile"/>

AppComponent.ts

import { Component } from '@angular/core';
import { Http, Response, Headers, RequestOptions, ResponseContentType } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http:Http)
  {}
  
  DownloadFile():void
  {
    this.getFile("http://localhost:1800/api/demo/GetTestFile")
    .subscribe(fileData => 
      {
      let b:any = new Blob([fileData], { type: 'application/zip' });
      var url= window.URL.createObjectURL(b);
        window.open(url);
      }
    );
  }

  public getFile(path: string):Observable<any>{
    let options = new RequestOptions({responseType: ResponseContentType.Blob});
    return this.http.get(path, options)
        .map((response: Response) => <Blob>response.blob())  ;
  }
}

WebAPI code

    public class DemoController : ApiController
    {
        [HttpGet]//http get as it return file 
        public HttpResponseMessage GetTestFile()
        {
            //below code locate physcial file on server 
            var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.zip");
            HttpResponseMessage response = null;
            if (!File.Exists(localFilePath))
            {
                //if file not found than return response as resource not present 
                response = Request.CreateResponse(HttpStatusCode.Gone);
            }
            else
            {
                //if file present than read file 
                var fStream = new FileStream(localFilePath, FileMode.Open, FileAccess.Read);
                //compose response and include file as content in it
                response = new HttpResponseMessage
                {
                    StatusCode = HttpStatusCode.OK,
                    Content = new StreamContent(fStream)
                };
                //set content header of reponse as file attached in reponse
                response.Content.Headers.ContentDisposition =
                new ContentDispositionHeaderValue("attachment")
                {
                    FileName = Path.GetFileName(fStream.Name)
                };
                //set the content header content type as application/octet-stream as it returning file as reponse 
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            }
            return response;
        }
    }

Abort/Cancel Task

pranayamr@gmail.com (Pranay Rana) — Sun, 03 Dec 2017 17:43:00 +0000

Below post is based on one of the question(Stop hanging synchronous method) I answered on StackOverflow, in which questioner wants to cancel task when its taking too long time to respond i.e. taking too much time in execution and returning result. But when I tried to provide answer of that question I found there is no direct way to cancel task when its making call outside world i.e. making call to WebService or making call to Database to get data via third party library XenAPI in my case, which is hanging application and not allowing to proceed. To understand this have look to below code.

Var task = Task.Factory.StartNew(()=> CallWebServiceandGetData());

Above line of code creating task which is making call to webservice to get data. Now developer want to write code, such a way that if task take more than 10 second, task get cancel. But in TPL library there is no way to cancel task i.e. there is no direct method or there is no other way to make this task cancel.
So task.Cancel() or task.Abort() like method not exist in TPL. Below post is about how developer can really abort task.

Aborting thread vs Cancelling task

What is really difference between aborting thread and cancelling task.
Aborting thread – In System.Treading , which is library provided for threading prior to TPL library. (Just to note : old System.Threading is still part of.net framework but as TPL provide more control on Task( which is wrapper around thread) provide more control ). In this library to abort thread there is as method called Abort() is available. With help of this method developer can ask execution environment i.e. CLR to abort thread. Below is example code for the same

Thread newThread = new Thread(() => Console.WriteLine("Test"));
newThread.Start();
Thread.Sleep(1000);//sleeping main thread
newThread.Abort();

main thread aborting newly created thread.

Cancelling Task – In newer library TPL (System.Threading.Tasks) , there is no direct method on Task which cancel or abort underlying thread. But there is way to cancel task by using CancellationTokenSource class which allows you to pass CancellationToken as one of the input parameter when you create task. (more on this discussed below). Below is code for cancelling task

var source = new CancellationTokenSource();

CancellationToken token = source.Token;Task.Factory.StartNew(() => { 
 for(int i=0;i< 10000;i++)
 {
   Console.WriteLine(i);
   if (token.IsCancellationRequested)
    token.ThrowIfCancellationRequested();
 }
}, token);
source.CancelAfter(1000);

So above code make use of CancellationTokenSource and CancellationToken provided by it. In above code CancellationTokenSource calls method CancelAfter which set taskCancellation flag. This flag is watched inside delegate via IsCancellationRequested property on CancellationToken. And once it sees in for loop that IsCancellationRequested flag is true it calls ThrowIfCancellationRequested() method and cancels thread.

So in simple term abort thread allows developer to abort executing thread and CancellationToken in new TPL library does same thing, which is called cancelation of task. So basically newer(TPL) and older(Threading) have different way to cancel/abort thread.

But one of the major difference between Abort() thread and Cancel task is Abort() can leave application in inconsistent state ( on Abort()system immediately abort thread not allow to perform any operation to put application in consistent state ), especially when doing file operation or doing create/update operation , so it better to take care when aborting thread or write code such way that application remain in consistent state. That is one of reason TPL come up with Cancellation mechanism, so those who write code can watch cancellation flag and if it gets true than they can write code to put application in consistence state.

Returning to problem of Cancelling task

By reading above section of “Cancellation Task” one can say there is provision to cancel task which in turn cancel thread also and put system in consistent state, so it’s better approach. But if we now go to back to scenario where task is got created to fetch data from webService or DataBase which is taking too much long time. So code will be like as below with cancellation mechanism

var source = new CancellationTokenSource();
CancellationToken token = source.Token;
Task.Factory.StartNew(() => { 
    try
    {
        //below is third party library(XenAPI) method 
        HTTP_actions.put_import(…//parameter of method);
        //instead of this there can be database call to get data
        //which takes too much time 
    }
    catch (HTTP.CancelledException exception)
    {
    }
    //execution never comes here till above method get complete           
    if (token.IsCancellationRequested)
        token.ThrowIfCancellationRequested();
              
}, token);
source.CancelAfter(1000);

So in above scenario once call made to API method it never comes back, so control of execution will not return to application and so the code which checks cancellation never get executed till call returns. Which means Task not get cancelled even though after 1000 ms it cancellation flag set to true for cancellation of task.

Above scenario is based on Third party API so it might difficult to understand context. So for easy understanding have look to below code (just one change here , TaskCompletionSource is used to wrap underlying task)

static Task<string> DoWork(CancellationToken token)
        {
            var tcs = new TaskCompletionSource<string>();

            //comment this whole this is just used for testing 
            Task.Factory.StartNew(() =>
            {
                //Simulate work (usually from 3rd party code)
                for (int i = 0; i < 100000; i++)
                    Console.WriteLine("value" + i);

              //execution never comes here till above for loop or        
              //may be long execution /computation get completed           
               if (token.IsCancellationRequested)
                    token.ThrowIfCancellationRequested();

                Console.WriteLine("Task finished!");
            },token);
            tcs.SetResult("Completed");
            return tcs.Task;
        }
       public static void Main()
        {
            var source = new CancellationTokenSource();
            CancellationToken token = source.Token;
            DoWork(token);
             source.CancelAfter(1000);
            Console.ReadLine();
        }

So in above code instead of third party code I replaced it with for loop (or consider long calculation task), now when execution going on application cannot get chance to read cancellation flag which is setup by main thread i.e. from main method. So application cannot able to cancel task till computation get over and control reach to point where cancellation flag check is done. In both of the scenario major problem is when log computation or long call is going on application cannot cancel task, Cancellation mechanism provided in TPL not work and there we need solution to cancel this task other way.

Solution code is

    class Program
    {
        //capture request running that , which need to be cancel in case
        // it take more time 
        static Thread threadToCancel = null;
        static async Task<string> DoWork()
        {
            var tcs = new TaskCompletionSource<string>();
            //comment this whole this is just used for testing 
            await Task.Factory.StartNew(() =>
            {
                //Capture the thread
                threadToCancel = Thread.CurrentThread;
                //Simulate work (usually from 3rd party code)
                for (int i = 0; i < 100000; i++)
                     Console.WriteLine("value" + i);
               Console.WriteLine("Task finished!");
            });
            tcs.SetResult("Completed");
            return tcs.Task.Result;
        }

        public static void Main()
        {
            var source = new CancellationTokenSource();
            CancellationToken token = source.Token;
            DoWork();
            //another task check for cancellation flag
            //cancels long running task by calling thread abort method 
            Task.Factory.StartNew(() =>
            {
           //while true below is just for example , in real time 
           //you should replace this with either timer or by thread sleep
           //to save CPU time (or may be better solution other than that) 
           //it better to play around that 
                while (true)
                {
                    if (token.IsCancellationRequested && threadToCancel != null)
                    {
                        threadToCancel.Abort();//abort long running thread
                        Console.WriteLine("Thread aborted");
                        return;
                    }
                }
            });
            //here 1000 can be replace by miliseconds after which you want to 
            // abort thread which calling your long running method 
            source.CancelAfter(1000);
            Console.ReadLine();
        }
    }

Comment in code explains most of the things but let go in detail how it’s going to work. Following are changes in code

Async/await used to make DoWork method asynchronous
threadToCancel variable in code stores reference of the Tread of underlying Task by calling Thread.CurrentThread, this variable allows to cancel thread of Task
One more Task got created in main which keep checking Cancellation flag which setup by source.CancelAfter(1000); after 1000 miliseconds
Task created in Main is running While loop with true, which keep check Cancellation flag true to not, once it gets true this task executes method threadToCancel.Abort(); to abort underlying thread of long running task

So Real magic part in code is reference of underlying thread is stored via Thread.CurrentThread. And separate task runs in main method abort long running task thread when cancellation flag set to true by CancellationSoruce.

TPL : Find Failed Task

pranayamr@gmail.com (Pranay Rana) — Mon, 27 Nov 2017 18:02:00 +0000

TPL - Task paralle library is new libaray added by microsoft in .net framework 4.0. This libaray allows one to create task i.e Thread, which means multi threading application. Task created by this libarary allows greater control on task(thread) which is very diffcult with previous Threading library, one of them is exception handling specially when one use ThreadPool for doing work. Below post is about handling exception in TPL and about how to find which of task failed when multiple task excuted.

Exception Handling : Single Task (synchronous)

Exception handling is very easy when Task(thread) creaed by TPL. But to find out task failed or executed without exception one must need to use "Wait()" method or need use "Result" property. Below is example of same.

 try
 {
     //below throws divide by zero exception
     var task = Task.Factory.StartNew(() => { return 10 / 0;});
     task.Wait();//or use task.Result
     //or there may be multiple taks 
     // example
     // Task[] task = new Task[3](); 
     // task[1] = Task.Factory.StartNew(() => { return 10 / 0;});
     // task[2] = Task.Factory.StartNew(() => { return 10 / 0;});
     // task[3] = Task.Factory.StartNew(() => { return 10 / 0;}); 
     //Task.WaitAll(task); //for this multiple senario we need Aggregate exception.
 }
 catch (AggregateException ex)
 {
     Console.WriteLine(ex.InnerException.ToString());
 }

above code throw DivideByZeroException. and same get printed as output of the above code. One thing to note here is it throws AggregateException exception, so one need to go to InnerException for getting exact exception message.AggregateException is need because in real time senario there might be running and if all throws exception than there need to be structure like AggregateException who stores excpetion of all task.

Exception Handling : Single Task (asynchronous)

Below is same code with asynchronous.

public static async void CallDivide()
{
  try
  {
     var task = Task.Factory.StartNew(() => Divide(0));
     await task;
  }
  catch (Exception ex)
  {
     Console.WriteLine(ex.ToString());
  }
}

it will give output same as previous one. One thing to note here there is no need to use AggregateException as asynchronous as when task fails it exception get unwarped and get throw to captured context or on thread which is going to execute continuation. If there are multiple task than only first failed task exception get reported as asynchronous unwrap AggregateException and throw first one.

So there is not problem when you are execution one task and it fails , in that case you know which one failed. But actual problem occurs when you are executing multiple task and one of task fails, then there is no way which one failed.

Exception Handling : Multiple Task (synchronous)

To undestand this let go throgh below code

 public static void Main(string[] args)
 {
    List<int> lstInt = new List<int>(){1,11,4,3,0,7,0};
    List<Task<string>> tasks = new List<Task<string>>();
    foreach(int i in lstInt)
    {
        var task =Task.Factory.StartNew((obj)=> Divide(i),"Task " + i);
        tasks.Add(task);
    }
    try
    {
        Task.WaitAll(tasks.ToArray());
    }
    catch(AggregateException e)
    {
        for (int j = 0; j < e.InnerExceptions.Count; j++)
        {
            Console.WriteLine("\n--------------------\n{0}", e.InnerExceptions[j].Message);
        }
    }
    var failedTask = tasks.Where(t=> t.IsFaulted);
  }
        
  public static string Divide(int i)
  {
      var val = 10/i;
      Console.WriteLine(val);
      return "Value : " + i +" : " + val;
  }

Above code output is :

10
0
3
2
1

--------------------
Attempted to divide by zero
Attempted to divide by zero.

Exception Handling : Multiple Task (asynchronous)

Same output will be there when you try below asynchronous task based approch. But asynchronous only prints first failed task exception as asynchronous unwrap received AggregateException and report first one only.

public static async void CallDivide()
{
    List<Task<string>> tasks = new List<Task<string>>();
            try
            {
                List<int> lstInt = new List<int>() { 1, 11, 4, 3, 0, 7, 0 };
                
                foreach (int i in lstInt)
                {
                    var task = Task.Factory.StartNew((obj) => Divide(i), "Task " + i);
                    tasks.Add(task);
                }

                await Task.WhenAll(tasks.ToArray());
            }
            catch (Exception ex)
            {
                var exceptions = tasks.Where(t => t.Exception != null).Select(t => t.Exception);
                Console.WriteLine(ex.ToString());
            }
}
public static string Divide(int i)
{
    var val = 10 / i;
    Console.WriteLine(val);
    return "Value : " + i + " : " + val;
}

Above code output is :

10
0
3
2
1

--------------------
Attempted to divide by zero
 ///Attempted to divide by zero.- will not come in case of asynchronous

By the output you get to know one task failed, but you dont know which task failed or in simple term you dont know for which input my method failed when data coming from database or some external soruce(means right now we have static list of interger for example in real application this list of int is may be coming from via argument or via database).
Or imagine senario where you are querying multiple database via multiple task and one of the database query have problem and thro exception i.e. one of the task fails. In that senario you like to know which database failed.

Solution

Solution for this i.e. to find which task failed easy way is to attach "State" with task. When you attache State with Task you will get state value when you access property called "AsyncState". Below is line of code which shows how you can attach sate with task. To attach state one(developer) just need to pass one more argument after called function, which is "Task " + i in in this case.

var task = Task.Factory.StartNew((obj) => Divide(i), "Task " + i);

Below is full code how this solution works

Find Faild Task : Multiple Task (synchronous)

 static  void Main(string[] args)
        {
            Console.ReadLine();
            List<int> lstInt = new List<int>() { 1, 11, 4, 3, 0, 7, 8 };
            List<Task<string>> tasks = new List<Task<string>>();
            foreach (int i in lstInt)
            {
                var task = Task.Factory.StartNew((obj) => Divide(i), "Task with input " + i);
                tasks.Add(task);
            }
            try
            {
                Task.WaitAll(tasks.ToArray());
            }
            catch 
            {
                   var failedTask = tasks.Where(t => t.IsFaulted);
                   foreach (var t in failedTask)
                   {
                      Console.WriteLine(t.AsyncState.ToString());
                       Console.WriteLine(t.Exception.InnerException.ToString());
                   }
            }
            
            Console.ReadLine();
        }

Find Faild Task : Multiple Task (asynchronous)

  public static async void CallDivide()
        {
            List<Task<string>> tasks = new List<Task<string>>();
            try
            {
                List<int> lstInt = new List<int>() { 1, 11, 4, 3, 0, 7, 8 };

                foreach (int i in lstInt)
                {
                    var task = Task.Factory.StartNew((obj) => Divide(i), "Task with input" + i);
                    tasks.Add(task);
                }

                await Task.WhenAll(tasks.ToArray());
            }
            catch 
            {
                var failedTask = tasks.Where(t => t.Exception != null);
                foreach (var t in failedTask)
                {
                    Console.WriteLine("Failed Task is : " + t.AsyncState.ToString());
                    Console.WriteLine("Failed Task Excetption is : " + t.Exception.InnerException.Message);
                };
            }
        }

output of above code

10
0
2
1
1
3
Failed Task is : Task with input 0
Failed Task Excetption is : Attempted to divide by zero.

both of the way will give you same output. But if you see output caefully , you see Task with input 0 failed. Here i just attached input but in real time senario like when querying datase you can attach name of database or you can also give some meaning ful vaue in state or even you can pass object as state. But point here is you can get to know which task failed when you attach state with Task.

Diffence between list of user defined types

pranayamr@gmail.com (Pranay Rana) — Tue, 12 Apr 2016 17:38:00 +0000

Below is discussion about finding out difference between two lists of elements.

Easiest way to find out difference between two list is make use of method Except, which is introduced with Linq feature in .Net framework 3.5.

Except method works as below

So when except method is applied on two List A and List B, it get list of all element which are present in list A only.

Let’s understand same by writing Code

List<int> a = new List<int>() { 2, 4, 7, 9, 4 };
List<int> b = new List<int>() { 8, 6, 7, 3, 4 };

var lst = a.Except(b);
foreach (var ele in lst)
{
    Console.WriteLine(ele);
}

Above code defines two list of integer, and apply Except method to find difference between them.

Output

Output prints 2 & 9, which are the element in “List a” and not in “List b”. If one want to find out element which are present in “List b” and not in “List a”, than code will be like

var lst = b.Except(a);//pint output 8,6 & 3

Note:
Except method returns element of the collection which is on left side, it doesn’t get list of those element of the right side collection element which is not part of left side collection.

Except on User Defined typed List
Below is explain about how Except works when applied on user-defined data type, to understand this let’s defined employee class

public class Employee
{
    public int ID { get; set; }
    public string Name { get; set; }
}

After defining Employee class below code creates two list of Employee and applies Except method on it

List<Employee> lstA = new List<Employee>() { new Employee { ID = 1, Name = "Abc" }, 
                         new Employee { ID = 2, Name = "Pranay" },
                         new Employee { ID = 3, Name = "Hemang" }};
 List<Employee> lstB = new List<Employee>() { new Employee { ID = 4, Name = "Xyz" }, 
                         new Employee { ID = 2, Name = "Pranay" },
                         new Employee { ID = 5, Name = "Virendra" }};

var lst = lstB.Except(lstA);
foreach (var ele in lst)
{
     Console.WriteLine(ele.ID + " " + ele.Name);
}

Output

So output print out all the element of list B, rather than printing elements which are not present in list A.
Problem here is when Except method applied on user-defined datatype it tries to compare references of object to find difference between lists.

Resolution
To resolve problem, there is need to use Except overload method which takes list as first input and Custom Equality Comparer as its second parameter for type. Custom Equality comparer helps to do comparison between object of list and returns difference between list.

public class EmployeeComparer : IEqualityComparer<Employee>
{
     bool IEqualityComparer<Employee>.Equals(Employee x, Employee y)
     {
        if (x == null || y == null)
            return false;

        return x.ID == y.ID;
     }

    int IEqualityComparer<Employee>.GetHashCode(Employee obj)
    {
       if (obj == null)
           return 0;

       return obj.ID.GetHashCode();
    }
}

Above code defines Custom Employee comparer which implements IEqualityComparer and does comparison of employee objects based on ID property defined in employee class.

Now when Except method applied on list as in below code,

List<Employee> lstA = new List<Employee>() { new Employee { ID = 1, Name = "Abc" }, 
                         new Employee { ID = 2, Name = "Pranay" },
                         new Employee { ID = 3, Name = "Hemang" }};

List<Employee> lstB = new List<Employee>() { new Employee { ID = 4, Name = "Xyz" }, 
                         new Employee { ID = 2, Name = "Pranay" },
                         new Employee { ID = 5, Name = "Virendra" }};

var lst = lstB.Except(lstA, new EmployeeComparer());
foreach (var ele in lst)
{
     Console.WriteLine(ele.ID + " " + ele.Name);
}

Output

Output prints element of list B which are not present in List A of employee. So comparer makes it easy to find difference between two lists.

Event Vs Deleagte

pranayamr@gmail.com (Pranay Rana) — Sun, 20 Mar 2016 11:41:00 +0000

Post is explains basics of Events & Delegate and most importantly explains what is difference between both.
Both Event & Delegate is based on overserved pattern of GOF, which is based on giving notification of change in one thing (object) to all others who is interested in change. Below image is graphical interpretation of same.

Delegates
Delegate in C# is reference type, which hold reference to the function and invokes function when called with Invoke method. If one is coming from C++/C background, delegate is like pointer to function which points to function.
To understand delegate better way have look to below sample code.

    public class DelegateTest
    {
        public delegate void Print(string val);

        public DelegateTest()
        {
            Print p = new Print(PrintValue);
            p += new Print(PrintData);
            p.Invoke("Test");
        }

        private void PrintData(string s)
        {
            Console.WriteLine("PrintData" + s);
        }

        public void PrintValue(string s)
        {
            Console.WriteLine("PrintValue" + s);
        }
    }

When above class get invoked following output will get printed
PrintData Test
PrintValue Test

Key points in above code

It defines delegate which can points to method with void return type and take string as input
In constructor of type, it create reference object of delegate which points to method “PrintData” and “PrintValue”.
Invoke method of delegate calls both methods one by one

Read more about Delegate : https://msdn.microsoft.com/en-in/library/900fyy8e(v=vs.71).aspx

Events
Event in C# is of type Delegate, which means that if one wants to use event than one must need to define delegate first. Event can have multiple event-handler functions which are of signature like delegate which get called when event raised by some event in application Simple Example is Button click on UI. Event is very useful to create notification.
To understand delegate better way have look to below sample code.

    public class EventTest
    {
        public delegate void Print(string val);
        public event Print PrintEvent;

        public EventTest()
        {
            this.PrintEvent +=  PrintData;
            this.PrintEvent += PrintValue;
        }

        public virtual void OnPrintEvent()
        {
            if (PrintEvent != null)
                PrintEvent("Test");
        }

        private void PrintData(string s)
        {
            Console.WriteLine("PrintData" + s);
        }

        public void PrintValue(string s)
        {
            Console.WriteLine("PrintValue" + s);
        }
    }

When above class object is created and then “OnPrintEvent” method invoked following output will get printed
PrintData Test
PrintValue Test

Key points in above code

Its creates delegate which can point to method with return type void and take string as argument
It defines Event which is of type defined delegate
In Constructor, event holds two delegate i.e. Event handlers. It can also be written like

          this.PrintEvent += new Print (PrintData);
          this.PrintEvent += new Print (PrintValue);

OnPrintEvent method checks event is holding event handler function or not, if there is any event handler(s) it calls all event handlers.

Read more about Event : https://msdn.microsoft.com/en-in/library/8627sbea%28v=vs.71%29.aspx

Event VS Delegate
Both event and delegate does the same task, which is hold event handlers and call them when delegate/event invoked. So one always has question, what is need of Event in language C# when one can achieve same thing with Delegate.

Answer is Event is wrapper on Delegate type.

Problem With Delegate
Let’s understand this, using same class defined above which is “DelegateTest”.

    class Program
    {

        static void Main(string[] args)
        {
            Program p = new Program();
            DelegateTest delegateTest = new DelegateTest();
            delegateTest.p = new DelegateTest.Print(p.TestString);
            delegateTest.p = null;
        }

        public void TestString(string s)
        {
        }
    }

Above doe does following things

It creates object of type DelegateTest
Its assigns new delegate reference to delegate Print and override value assigned in constructor
Its assigns “null” to Print delegate and removes all added function.

Problem with Delegate is that one can easily override delegate property and that lead to error or serious issue. That means one cannot use delegate as public property.

Solution with Event
To avoid above problem C# has Events, Which defines wrapper around delegate. (Below code make use of EventTest class defined above and as form above code PrintEvent is wrapper around Print delegate).

static void Main(string[] args)
        {
            Program p = new Program();
            EventTest eventTest = new EventTest();
            //eventTest.PrintEvent = null;//Not allowed in C#
            eventTest.PrintEvent += p.TestString;
        }

        public void TestString(string s)
        {
        }

Above does following things

It defines object of type EventTest
its assigns eventhandler to PrintEvent event of EventTest

One cannot do below things with Event

	eventTest.PrintEvent = null;//Not allowed in C#
	eventTest.PrintEvent = new PrintEvent()//Not allowed in C#

So Event type resolve problem of exposing delegate outside class by defining wrapper around delegate. Below image is presentation of Event & Delegate.

Another Difference between Event & Delegate is

Event is very helpful to create Notification system. Same is not possible with delegate because delegate cannot be exposed as public.
Delegate is very helpful to create call back function i.e can pass delegate as function argument, which is not possible with Event.

Conclusion
Event and Delegate are both follows Observer pattern. Difference between both is Event wraps Delegate type and which makes delegate not modifiable in terms of changing reference i.e. assign new object is not possible.

Reference type modification vs change of reference

pranayamr@gmail.com (Pranay Rana) — Tue, 09 Feb 2016 16:45:00 +0000

Post is regarding misconception related to modifying reference type variable and assigning new reference object to reference type variable.

Let’s understand misconception by using code, below is customer class created to understand it.

Public class Customer 
{
 Public int ID{get; set;}
 Public string Name {get; set;}
}

Modification of Reference type

Customer cust = new Customer { ID = 1, Name = "abc" }; //defines new class 
Console.WriteLine("cust name : " + cust.Name);
cust.Name = "xyz"; //modifies value of name field and modifies cust variable
Console.WriteLine("modified cust name : " + cust.Name);

Above code creates new object of customer class and modifies it.

Customer cust1 = cust; //cust1 now has reference to cust
cust1.Name = "abc xyz"; // modification to Name field of cust1 modifies both cust1 and cust
Console.WriteLine("after cust1 modification name " );
Console.WriteLine("cust name : " + cust.Name);
Console.WriteLine("cust1 name : " + cust1.Name);

Output

Above code assigns reference of already created object cust to cust1. Because cust1 holding reference to same object as cust1 modification to cust1 also change cust. This means both cust and cust1 points only to one object.

Change of Reference i.e. Assigning new reference type object

But what happens when assigns null to cust variable

cust = null;
Console.WriteLine("after cust=null");
if (cust==null)
   Console.WriteLine("cust is null ");
Console.WriteLine("cust1 name : " + cust1.Name);

Ouput

Now most of developer thinks as cust is null than cust1 is also null. But this is not true because when you give new reference to cust , both cust and cust1 point to different location.

Assigning null cust variable is can also be as below

Customer cust = new Customer { ID =2 , Name =”customer abc”}

So when you assign new value to any reference its point to new memory location i.e. new object. Which also means that assigning new value to reference variable is doesn’t affect old reference variable.

What happens in case of method?

Now Consider scenario where developer pass reference variable to method

Modification of Reference type

Customer cust = new Customer { ID = 1, Name = "abc" }; //defines new class 
Console.WriteLine("cust name : " + cust.Name);
Program p = new Program();
p.ChangeCustomer(cust);
Console.WriteLine("modified cust name after call to changecustomer : " + cust.Name);

public void ChangeCustomer(Customer cust)
{
     cust.Name = "xyz"; //modifies value of name field and modifies cust variable
     Console.WriteLine("modified cust name in changecustomer : " + cust.Name);
}

Above code defines new customer object and pass customer object to method which does modification to object.

Method modifies customer name, so does it modifies customer object also. Output below prints modified customer name in method and same name after call returns to caller.

So this is similar to case discussed above.

Output

Change of Reference i.e. Assigning new reference type object

Now consider below scenario

Customer cust = new Customer { ID = 1, Name = "abc" }; //defines new class 
Console.WriteLine("cust name : " + cust.Name);
Program p = new Program();
p.ChangeCustomer1(cust);
Console.WriteLine("modified cust name after call to changecustomer1 : " + cust.Name);

public void ChangeCustomer1(Customer cust)
{
    cust = new Customer { ID = 1, Name = "abc xyz" };
    Console.WriteLine("modified cust name in changecustomer1 : " + cust.Name);
}

Above code defines new customer object and pass customer object to method which does modification to object.

Method in this code assigns new customer object to pass cust variable. So it print output as below

Output prints different name. Reason behind this is method doesn’t modify varible but it’s changing reference value it points by assigning new customer object.

So this is similar to case discussed above.

Solution to above is either return newly created object as below

public Customer ChangeCustomer1(Customer cust)
{
    cust = new Customer { ID = 1, Name = "abc xyz" };
    Console.WriteLine("modified cust name in changecustomer1 : " + cust.Name);
    return cust;
}

Or make use of ref with variable name

public void ChangeCustomer1(ref Customer cust)
{
    cust = new Customer { ID = 1, Name = "abc xyz" };
    Console.WriteLine("modified cust name in changecustomer1 : " + cust.Name);
}

Conclusion

Above discussion it’s clear that modification to reference variable happens when you do change in original reference variable and assigning new object to variable does modify the reference i.e. memory location object points to.

Collection Interface In .NET

pranayamr@gmail.com (Pranay Rana) — Mon, 07 Sep 2015 16:45:00 +0000

Introduction

.NET framework provides interfaces that implements by collections in language to provide functionality of iterating over objects in collection, adding and removing object from collection to randomly access object from collection.

As different interfaces provide different set of functionality most of the developers has problem when to use which interface to achieve functionality. The following post provides information about interfaces implemented by collection.

Interfaces

The following diagram is for relation between the interfaces.

Note:

Class diagram are not having all the methods but contains important method that belongs to each collection interface.
Collection interface is available in both generic and non-generic form, so in diagram obj type is object in nongeneric form and obj type is T(template type) in generic form.

	Functionality Provided	Read	Count	Add & Remove	Index Based Read	Index Based Add & Remove
IEnumerable	Provide Read only Collection. Allow to read each object of collection in forward only mode.	Y	N	N	N	N
ICollection	Allow to modify collection. Allow to get size of collection. Allow to Add and Remove object in/from collection.	Y Inherited)	Y	Y	N	N
IReadOnlyCollection	Allow to read collection. Allow to get size of collection.	Y (Inherited)	Y	N	N	N
IList	Allows to access collection by Index. Allow to Add and Remove object in/from collection by index.	Y (Inherited)	Y (Inherited)	Y (Inherited)	Y	Y
IReadOnlyList	Allow to read collection by Index.	Y (Inherited)	Y (Inherited)	N	Y	N

Note:
In above diagram (Inherited), the columns indicate that the features are inherited from parent and to find out from which parent one must look in the interface collection diagram.

So from above table three main interfaces functionality concluded in following way:

IEnumerable – interface provide minimum functionality which is Enumration.

ICollection – interface provide medium functionality which is getting size, adding, removing and clearing collection i.e. modification of collection. As it inherited from IEnumerable so includes functionality of IEnumerable.

IList – interface provide full functionality which is index base accessing of collection element, index base adding, index base removing from collection. As it inherited from ICollection it includes functionality of Enumerable and ICollection.

The following are some important things to know:

IEnumerable interface under the hood make use of IEnumerator for providing reaonly and forward mode read.
IReadOnly*** and IEnumerable are used for providing readonly collection. But difference is that IEnumerable allows collection to read in forward only mode where IReadOnly*** provide feature of Collection /List but only in readonly mode i.e. without modification feature like add & remove.
IReadOnly is part of collection interface from framework 4.5.

Above table list down the features provided by each interface when collection gets converted to interface type or class implement interface to provide feature of collection.

Conclusion

It’s very important for developers to understand these interfaces because the rule says its always good to depend on interface rather than on the concrete type.

ContinueWith Vs await

pranayamr@gmail.com (Pranay Rana) — Mon, 07 Sep 2015 15:10:00 +0000

TPL is new library introduced in C # 4.0 version to provide good control over thread, to make use of multicore CPU by mean of parallel execution on thread. Below discussion is not about TPL but its about ContinueWith function available on Task Class of TPL and await keyword introduced in C# 5.0 to support asynchronous calls.

ContinueWith - its method available on the task which allows executing code after task finished execution. In simple word it allows continuation.

Things to note here is ContinueWith also return one Task. That means you can attach ContinueWith on task return by this method.

Example :

public void ContinueWithOperation()
{
   Task<string> t = Task.Run(() => LongRunningOperation("Continuewith", 500));
   t.ContinueWith((t1) =>
   {
       Console.WriteLine(t1.Result);
   });
}

In above code new created task runs LongRunningOperation and once task execution completed ContinueWith execute operation on retuned task and print result of task.

ContinueWith operation thask get executed by default thread scheduler, one can also provide other scheduler for running task on it, this discussed in later in this article.

Note: below code is LongRunningOperation called by task. LongRunningOpertion here is just example in real program one cannot call long running operation on task, and if one want to call longrunning task than one need to pass TaskCreationOperation.LongRunning.

private string LongRunningOperation(string s, int sec)
{
  Thread.Sleep(sec);
  return s + " Completed";
}

await – its keyword that cause runtime to run operation on new task and cause executing thread to return and continue with execution (In most of the cases executing that is main thread of application). Once await operation get finished it returns to statement where is left of (i.e. returns to caller i.e. it returns according state saved) and start executing statements.

So await wait for newly created task to finish and ensures continuation once execution of waiting task is finished.

await keyword used with async to achieve asynchronous programming in C#. It’s called asynchronous programming because runtime capture state of program when it encounter await keyword (which is similar to yield in iterator) and restore state back once waited task finish so the continuation runs on correct context.

Example :

public async void AsyncOperation()
{
    string t = await Task.Run(() => LongRunningOperation("AsyncOperation", 1000));
    Console.WriteLine(t);
}

In above example new created task calls LongRunningOperation and execution left of once main thread encounter await keyword i.e. main thread return to caller of AsyncOpetion and execute further. Once LongRunningOpertaion completed than result of task get printed on console.

So here because state saved when await encountered flow returns on same context one operation on task executed.

Note: State is having detail about executioncontext/synchronizationcontext.

So form above its clear that both Task.ContinueWith and await Task wait for task to finish and allows continuation after task completion. But both works differently.

Difference between ContinueWith and await

Saving Sate for And return on Execution context
ContinueWith doesn’t save any kind of state, continuation operation attached using ContinueWith run on default thread scheduler in case not scheduler provided.

await – on encounter of this keyword state get saved and once task on which await done get completed execution flow pick up saved state data and start execution statement after await. (Note: State is having detail about executioncontext/synchronizationcontext.)
Posting Completed Task result on UI Control
Below is example with ContinueWith and await to display completion task result on UI control.

ContinueWith :

Consider below code which display result of completed task on UI label.
```
public void ContinueWithOperation()
       {
         CancellationTokenSource source = new CancellationTokenSource();
         source.CancelAfter(TimeSpan.FromSeconds(1));
         Task<string> t = Task.Run(() => LongRunningOperation("Continuewith", 500
));

            t.ContinueWith((t1) =>
            {
                if (t1.IsCompleted && !t1.IsFaulted && !t1.IsCanceled)
                    UpdateUI(t1.Result);
            });
}

private void UpdateUI(string s)
       {
         label1.Text = s;
}
```
Note : LogRunningOperation is already given above.

When above code is get executed below runtime exception occurs.

This exception occurs because Continuation operation UpdateUI operation runs on different thread, in this case thread will be provided by default threadschedular which is ThreadPool and it doesn’t have any information about Synchronization context on which to run.

To avoid exception, one must need to pass thread scheduler which pass data on UI SynchronizationContenxt. In below code TaskScheduler.FromCurrentSynchronizationContext() method pass UI related thread scheduler.
```
t.ContinueWith((t1) =>
            {
                if (t1.IsCompleted && !t1.IsFaulted && !t1.IsCanceled)
                    UpdateUI(t1.Result);
            }, TaskScheduler.FromCurrentSynchronizationContext());
```
await :

Consider below code which display result of completion on UI.
```
public async void AsyncOperation()
{
    try
    {
       string t = await Task.Run(() => LongRunningOperation("AsyncOperation",
                        10000));
       UpdateUI(t);
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);
    }
}
```
Code written with await doesn’t throw any exception when posting data to UI control, No special code required for await. This happens because as discussed in 1 point of difference , on encounter of await state data get saved which has information about SynchronizationContext.

So if one need to post data on UI than await is good option because there is no need of extra care/code to post data on UI.

Handling Exception and Cancellation
Consider below example code for ContinueWith and await method for handing exception and cancelled task.

ContinueWith

Below is example code how the exception/cancellation handled using ContinueWith.

public void ContinueWithOperationCancellation()
       {
            CancellationTokenSource source = new CancellationTokenSource();
            source.Cancel();

            Task<string> t = Task.Run(() =>
                LongRunningOperationCancellation("Continuewith", 1500,
                    source.Token), source.Token);

            t.ContinueWith((t1) =>
            {
                if (t1.Status == TaskStatus.RanToCompletion)
                    Console.WriteLine(t1.Result);
                else if (t1.IsCanceled)
                    Console.WriteLine("Task cancelled");
                else if (t.IsFaulted)
                {
                    Console.WriteLine("Error: " + t.Exception.Message);
                }
            });
}

In above code cancellation/exception in continuation handled with by using TaskStatus. Other way to do same thing by making use of TaskContinuationOptions.OnlyOnRanToCompletion

t.ContinueWith(
    (antecedent) => {  },
     TaskContinuationOptions.OnlyOnRanToCompletion);

await

Below is example code how the exception/cancellation handled using await.

public async void AsyncOperationCancellation()
       {
         try
         {
           CancellationTokenSource source = new CancellationTokenSource();
           source.Cancel();
           string t = await Task.Run(() =>
               LongRunningOperationCancellation("AsyncOperation", 2000, source.Token),
                   source.Token);
                Console.WriteLine(t);
         }
         catch (TaskCanceledException ex)
         {
                Console.WriteLine(ex.Message);
         }
         catch (Exception ex)
         {
                Console.WriteLine(ex.Message);
         }
}

Above code doesn’t make use of task status as continuewith, it makes use of try ..catch block to handle exception. To handle cancellation there is need of catch block with TaskCanceledException.

So from above example my view is cancellation/exception handling is done very clean way when one use continuation.

Below is code for LongRunningOperationCancellation method.

private string LongRunningOperationCancellation(string s, int sec,CancellationToken ct)
       {
         ct.ThrowIfCancellationRequested();
         Thread.Sleep(sec);
         return s + " Completed";
}

Above three cases shows difference of coding between ContinueWith and await. But below one shows why await is better than ContinueWith.

Complex flow
Consider below function which used for calculation factorial of number

   public KeyValuePair<int, string> Factorial(int i)
        {
            KeyValuePair<int, string> kv;
            int fact = 1;
            for (int j = 1; j <= i; j++)
                fact *= j;
            string s = "factorial no " + i.ToString() + ":" + fact.ToString();
            kv = new KeyValuePair<int, string>(i, s);
            return kv;
        }

Above function calculate factorial of number and return KeyValuePair to caller to display calculation.

Now problem statement is above function to calculate factorial of number 1 to 5.

ContinueWith

Below is code to calculate factorial of numbers between 1 to 5. Expectation from the code below is calculating factorial of number, display it in order and once it completed “Done” message will get printed on the console.

public void ContinueWithFactorial()
       {
            for (int i = 1; i < 6; i++)
            {
                int temp = i;
                Task<KeyValuePair<int, string>> t = Task.Run(() => Factorial(temp));
                t.ContinueWith((t1) =>
                {
                    KeyValuePair<int, string> kv = t1.Result;
                    Console.WriteLine(kv.Value);
                });
            }
            Console.WriteLine("Done");
}

Once code get executed one will find that “Done” message get printed immediately i.e. first than factorial of number get displayed on screen. One more problem is number factorial is not get displayed in order. Below is output of the code execution.

So to resolve problem with above code , code need to be refactored like this

public void FactContinueWithSeq(int i)
{
            Task<KeyValuePair<int, string>> t = Task.Run(() => Factorial(i));
            var ct = t.ContinueWith(((t1) =>
            {
                KeyValuePair<int, string> kv = t1.Result;
                int seed = kv.Key;
                if (seed < 6)
                {
                    Console.WriteLine(kv.Value);
                    seed++;
                    FactContinueWithSeq(seed);
                }
                else
                {
                    Console.WriteLine("Done");
                    return;
                }
            }));
}

Above function will be called like this p.FactContinueWithSeq(1).

In above code to maintain sequence, task need to be fired one by one. And for that once one task completes its execution Contuation on it with the help of ContinueWith method call function again. It’s like doing recursive calling to function.

And to display “Done” message at the end need to check for the seed to function. Which checks seed value increases 6 or not.

But now there is need for attaching continuation on completion of FactContinueWithSeq, to achieve this code need to be done as below.

TaskCompletionSource<string> tcs = new TaskCompletionSource<string>();
        public Task<string> FactAsyncTask { get { return tcs.Task; } }
        public void FactContinueWithSeqAsync(int i)
        {
            Task<KeyValuePair<int, string>> t = Task.Run(() => Factorial(i));
            var ct = t.ContinueWith(((t1) =>
            {
                KeyValuePair<int, string> kv = t1.Result;
                int seed = kv.Key;
                if (seed < 5)
                {
                    Console.WriteLine(kv.Value);
                    seed++;
                    FactContinueWithSeqAsync(seed);
                }
                else
                {
                    tcs.SetResult("Execution done");
                }
            }));
        }

p.FactContinueWithSeqAsync(1);
            Task<string> t = p.FactAsyncTask;
            t.ContinueWith((t1)=> Console.WriteLine(t.Result));

await

public async void AwaitWithFactorial()
{
   for (int i = 1; i < 6; i++)
   {
       int temp = i;
       Task<KeyValuePair<int, string>> t = Task.Run(() => Factorial(temp));
       await t;
       Console.WriteLine(t.Result.Value);
      }
      Console.WriteLine("Done");
 
}

Summary

From above difference/comparison of ContinueWith vs await it clear that in many scenario using and await is very helpful.
But there is also scenario where more complex things not required with proper error/cancellation handling in that case continuewith is helpful. But this scenario is very rare.

It’s always good to go with simple, easy and clear solution, for this my suggestion is always go with await rather than ContinueWith.

Flyweight Design Pattern

pranayamr@gmail.com (Pranay Rana) — Mon, 07 Sep 2015 14:25:00 +0000

The Flyweight Design Pattern is one of the structural patterns introduced by the GOF. The Flyweight Pattern is about creating a pool of objects that allows sharing already existing objects and causing the application to consume less memory.

So this pattern does the following two things because the pattern creates objects once and then saves them to a pool:

Increases application performance in terms of object creation since there is no requirement of creating an object for every request.
Causes the application to consume less memory, since the object already exists in memory and no new object must be created because of the pool.

Ultimately flyweight patterns make the application efficient in terms of memory and processing.

Basic UML class Diagram of Design Pattern

The following image shows the class diagram of the basic Flyweight Design Pattern.

UML class Diagram

IFlyweight: Basic contract to be implemented by derived types, in other words by concrete flyweight.
FlyweightFactory: It's a factory class used by a client class to get the data from the concreate flyweight. This class is also responsible for creating the pool of an existing object. So when the request for data come that is already requested it returns data from the pool.
ConcerateSharedFlyweight1: It's a concreate implementation of the flyweight interface. As the name suggests, an object returned by this class will be shared among the clients of it.
ConcerateUnSharedFlyweight1: It's a concreate implementation of the flyweight interface. As the name suggests an object returned by this class will be unshared. That means that every time the client requires a new object.
Client: uses the concreate implementation, it creates an instance of Decorate and uses the functionality of it.

Note:UnSharedFlyweight is not always required, it depends on requirements, but SharedFlyweight is always required when you use the flyweight pattern.

The following code is the implementation of the Flyweight Design Pattern and the Class Diagram was shown above.

namespace BasicFlyweightPattern
{
    #region basic implementation
    public class FlyweightFactory 
    {
        public static List<Item> GetStaticItemList(string key)
        {
            IFlyWeight flyWeight = null;
            ICacheManager _objCacheManager = CacheFactory.GetCacheManager();

            if (key == "A")
            {
                if (_objCacheManager.Contains("A"))
                {
                    return _objCacheManager["A"] as List<Item>;
                }
                else
                {
                    flyWeight = new ConcerateSharedFlyweight1();
                }
            }
            else if (key == "B")
            {
                if (_objCacheManager.Contains("B"))
                {
                    return _objCacheManager["B"] as List<Item>;
                }
                else
                {
                    flyWeight = new ConcerateSharedFlyweight2();
                }
            }

            var list = flyWeight.GetList();
            _objCacheManager.Add(key, list);
            return list;
        }
    }

    interface IFlyWeight
    {
        List<Item> GetList();
    }

    public class Item
    {
        public int id { get; set; }
        public string desc { get; set; }
    }

    public class ConcerateSharedFlyweight1 : IFlyWeight
    {
        private List<Item> ItemList;

        public ConcerateSharedFlyweight1()
        {
            ItemList = new List<Item>();
        }

        public List<Item> GetList()
        {
            ItemList.Add(new Item { id = 1, desc = "A1" });
            ItemList.Add(new Item { id = 2, desc = "A2" });
            ItemList.Add(new Item { id = 3, desc = "A3" });
            return ItemList;
        }
    }

    public class ConcerateSharedFlyweight2 : IFlyWeight
    {
        private List<Item> ItemList;

        public ConcerateSharedFlyweight2()
        {
            ItemList = new List<Item>();
        }

        public List<Item> GetList()
        {
            ItemList.Add(new Item { id = 1, desc = "B1" });
            ItemList.Add(new Item { id = 2, desc = "B2" });
            ItemList.Add(new Item { id = 3, desc = "B3" });
            return ItemList;
        }
    }

    class Program
    {
        static void Main(string[] args)
        {
            List<Item> list =FlyweightFactory.GetStaticItemList("A");
     //List<Item> list = FlyweightFactory.GetStaticItemList("B");            
     foreach (var item in list)
            {
                Console.WriteLine(item.id.ToString() + "  " + item.desc );
           }

            Console.ReadLine();
        }
    }

}

The following are points to remember about the preceding code implementation:

The client asks for data from FlyweightFactory by calling GetStaticItemList and passing the key as argument for getting the data.
FlyweightFactory has a static method GetStaticItemList that creates an instance of concrete and gets data if the request is for the first time, for a later request it returns an existing object.
FlyweightFacotry maintains a pool of existing objects using an Enterprise library caching block for sharing data among the clients, in other words different objects.
In the concrete implementation of flyweight, a hardcoded list is returned but in an actual scenario this will be replaced by data from a data source.
Item is a poco class, the list of which is returned from flyweight concrete classes. This class is represented by different items. The following actual scenario provides more detail.

Output

Here the output shows the result of A's same will use the result of B's. If the call comes a second time then the data is retuned from the cache.

Flyweight Design Pattern Example In an Actual Application

Problem Statement

A web application having a dropdown for displaying a list of Country, displaying a list of State, displaying a list of Product and so on in the dropdown and the dropdowns are part of multiple screens that are accessed by multiple users.

In this scenario, to display another kind of list for multiple user requests, the server must connect with the database server multiple times. This reduces the performance of the application and also consumes memory for creating and storing these lists.

Solution

The solution to the preceding problem is to use the Flyweight Design Pattern.

The following is a class diagram of the Flyweight pattern used in the application.

Mapping with Basic Implementation.

IFlyweightManager is equals to IFlyweight.
StaticDataListFlyweightFactory is equal to FlyweightFactory.
CountryStaticListManager and ProductStaticListManager is equal to ConcerateSharedFlyweight1 and ConcerateSharedFlyweight2.
StaticItem is equal to Item.

namespace FlyWeightPattern
{
    class Program
    {
        static void Main(string[] args)
        {

            List<StaticItem> countrylist = StaticDataListFlyWeidhtFactory.GetStaticItemList("Country");
            foreach (var item in countrylist)
            {
                Console.WriteLine(item.id.ToString() + "  " + item.Code + "  " + item.Description);
            }

            Console.ReadLine();
        }
    }
 public class StaticDataListFlyWeidhtFactory
    {
        public static List<StaticItem> GetStaticItemList(string key)
        {
            IFlyWeightManager manager = null;
            ICacheManager _objCacheManager = CacheFactory.GetCacheManager();

            if (key == "Country")
            {
                if (_objCacheManager.Contains("Country"))
                {
                    return _objCacheManager["Country"] as List<StaticItem>;
                }
                else
                {
                    manager = new CountryStaticListManager();
                }
            }
            else if (key == "ProductType")
            {
                if (_objCacheManager.Contains("ProductType"))
                {
                    return _objCacheManager["ProductType"] as List<StaticItem>;
                }
                else
                {
                    manager = new ProductTypeStaticListManager();
                }
            }

            var list = manager.GetList();
            _objCacheManager.Add(key, list);
            return list;
        }
    }

    interface IFlyWeightManager
    {
        List<StaticItem> GetList();
    }

    public class CountryStaticListManager : IFlyWeightManager
    {
        private List<StaticItem> StaticItemList;

        public CountryStaticListManager()
        {
            StaticItemList = new List<StaticItem>();
        }

        public List<StaticItem> GetList()
        {
            StaticItemList.Add(new StaticItem { id = 1, Code = "IND", Description = "India" });
            StaticItemList.Add(new StaticItem { id = 2, Code = "SRL", Description = "Sri Lanka" });
            StaticItemList.Add(new StaticItem { id = 3, Code = "SA", Description = "South Africa" });
            return StaticItemList;
        }
    }

    public class ProductTypeStaticListManager : IFlyWeightManager
    {
        private List<StaticItem> StaticItemList;

        public ProductTypeStaticListManager()
        {
            StaticItemList = new List<StaticItem>();
        }

        public List<StaticItem> GetList()
        {
            StaticItemList.Add(new StaticItem { id = 1, Code = "0123", Description = "Watch" });
            StaticItemList.Add(new StaticItem { id = 2, Code = "0234", Description = "Shoes" });
            StaticItemList.Add(new StaticItem { id = 3, Code = "0345", Description = "" });
            return StaticItemList;
        }
    }

    public class StaticItem
    {
        public int id { get; set; }
        public string Code { get; set; }
        public string Description { get; set; }
    }
}

Output

So the preceding code works the same as already described in the basic implementation of pattern. In the code another type of the list is fetched by passing a different key. For this implementation the keys are Country and Product. In a real application one can have more than this.

The preceding implementation follows the SOLID principle, just one exception is the Factory class that must be modifed when one wants to add a new key so it breaks the rule of single responsibility.

Note: Here the country and product list are hardcoded but in an actual program it is fetched from the database.

Conclusion

This pattern is very helpful in the scenario where one wants to create a pool of objects and share them among the clients (the clients are software programs or classes or web applications as in this example).

Note: This is my point of view regarding patterns. Please provide your feedback regarding it and also provide feedback if something you find is wrong in this.

Visual Studio Generate Class From JSON or XML

pranayamr@gmail.com (Pranay Rana) — Sun, 26 Jul 2015 07:41:00 +0000

Introduction

Below Article is on, one of the cool feature available in visual studio which helps/save effort of developer to generate class structure from json/xml string.

There is cases application written using .Net Framework written by developer received json/xml string from the web service or from the other 3rd party application it calling. After receiving xml/json string data there is need of further processing received data, which requires to deserialize received xml/json in .Net object. And for that .Net class structure need to be created which match with json/xml string data so that json/xml string deserialize correctly.

Problem Statement

For example:

Program receives following json string by calling webservice or 3rd party program.

JSON

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

XML

  <employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

And now there is need for deserializing received json/xml string to .Net object, so further process will be done based on received data or on received data.

Approach 1: Do it manually

In this approach developer need to have knowledge of json/xml so that he/she can understand received json/xml string and it structure. Once getting detail of xml/json and received xml/json string, developer has to convert json/xml string into meaningful class structure so desterilization done without any issue/error.

So problem with this approach is lot of work need to be done by developer like

Require knowledge of json/xml
Understand jso/xmln string sent by exteranl program
create class strucutre for json/xml structure, which is trial and error approch because most of the time created structure doesn't work in first go
If json/xml string having complex structure than its difficult as well as require time to create class structure to deserialize json/xml string

Approach 2 : Automated using Visual Studio

In this approach make use of Visual studio to generate class just by copy pasting xml/json string.

Following steps need to be done for generating class

Copy json/xml string

JSON

XML
Go to Edit>Past Sepcial > Paste JSON As Classes or Paste XML As Classes

Visual studio generate Class structure for developer as below

Below is example of class structure created by copy and pasting JSON string

    public class EmployeeList
    {
        public Employee[] employees { get; set; }
    }

    public class Employee
    {
        public string firstName { get; set; }
        public string lastName { get; set; }
    }

Below is example of class structure created by copy and pasting XML string

/// 
    [System.Xml.Serialization.XmlTypeAttribute(AnonymousType = true)]
    [System.Xml.Serialization.XmlRootAttribute(Namespace = "", IsNullable = false)]
    public partial class employees
    {

        private employeesEmployee[] employeeField;

        /// 
        [System.Xml.Serialization.XmlElementAttribute("employee")]
        public employeesEmployee[] employee
        {
            get
            {
                return this.employeeField;
            }
            set
            {
                this.employeeField = value;
            }
        }
    }

    /// 
    [System.Xml.Serialization.XmlTypeAttribute(AnonymousType = true)]
    public partial class employeesEmployee
    {

        private string firstNameField;

        private string lastNameField;

        /// 
        public string firstName
        {
            get
            {
                return this.firstNameField;
            }
            set
            {
                this.firstNameField = value;
            }
        }

        /// 
        public string lastName
        {
            get
            {
                return this.lastNameField;
            }
            set
            {
                this.lastNameField = value;
            }
        }
    }

As you see in above code it will generate correct attribute for xml on class so deserialization done without any issue/error.

Advantage of this solution

No need to understand xml/json
No effort require for creating class

Summary

Visual studio feature of creating class based on string really helpful to developer because understanding json/xml string and creating class structure requires efforts and sometime very frustrating.

SOLID Principle In Detail

pranayamr@gmail.com (Pranay Rana) — Mon, 13 Jul 2015 17:42:00 +0000

SOLID principles are the set of principle fist given by Robert.C.Martin. SOLID principle as name given its set of principle that allows building SOLID software system (i.e. Application, Application Module), if one implement software according to this set of principle.

SOLID software system means its allows to build system that is

Easy to maintain
Easy to extend
Easy to understand
Easy to implement
Easy to explain

SOLID principles are related with the design and maintenance of software system. Most of the developer mix SOLID principles with OOD principles and Design patterns. Below image that removes confusion of OOD principles and Design patterns

Note: This is my interpretation of the arranging thigs.

So as per image

OOD Principle (Abstraction, Encapsulation, Inheritance, Polymorphism)
SOLID principle
Software Design Patterns (GOF patterns, Dependency injection & patterns)
Martin Flower’s Enterprise Application Architectures Pattern (additional but required)
Domain Driven Design Architecture (additional but required)

S.O.L.I.D is acronym for

Single Responsibility Principle

Principle is related to Designing software module, class or function that should perform only one task. So this principle is about Creation.

In Detail Read : Single Responsibility Principle In Detail
Open/Close Principle

Principle is applied after 1 (Single Responsibility Principle), again this principle is related to Designing module, class or function. But it about closing already designed thing for modification but opening designed thing for extension i.e. extending functionality. So this principle is about extension.

In Detail Read : Open Closed Principle
Liskov Substitution Principle

Principle is related to substitution of child in place of its parent. So principle is about relationship i.e. inheritance.

In Detail Read : Liskov Substitution Principle
Interface Segregation Principle

Principle is related to designing of interfaces as one of the basic rules of designing says depends on abstraction. Principle is about design interface such a way, so that client of interface not force to implement not required things. So principle is about efficient interface design.

In Detail Read : Interface Segregation Principle

Dependency Inversion Principle

Principle is related to designing decoupling modules, classes of software system. This principle mostly applied after 4 (Interface Segregation principle) because interface are one form of abstraction and this principle is related to Details (module/class) should depend on abstraction, and abstraction should not depend on detail. So this principle is about creating loosely coupled system.

In Detail Read : Dependency Inversion Principle