Thursday, November 27, 2014

What and Why of CDN

What is CDN?
CDN is short for Content Delivery Network. A CDN in simple terms is a collection of servers that are spread across the globe. In other words, a CDN is a network of servers in which each request will go to the closest server.

Why Do We Need CDN?
For any web application, data can be categorized into either static or dynamic content. Dynamic content is the one which generally comes from a database. Static content is the one like CSS, images, JavaScript, flash files, video files, etc.

Now one may ask, how are requests served when a user enters an URL in the browser? Interesting… let’s take a look at it. Before knowing a CDN and its usage, it is very important to understand this process.

How is a Web Page Served?
When a client requests any URL, let’s say www.google.com in the browser, there is a server configured to listen to any request that comes in for www.google.com. A server in turn performs some computations and sends raw HTML back to the client.

Raw HTML contains lots of links like CSS, JavaScript, etc. Now for each and every link (CSS, JavaScript, etc.), the client will make more requests to other servers, which means for each and every static resource, the client will make a request to the server. Now one can easily imagine the number of requests sent for a single web page. You can view this by using any of the debugging tools.

In case of a small website, all these requests are served from a single server. So, a single client is having many connections with the same server.

For a server to be serving millions and millions of requests, it may run out of resources. Can’t we optimize something here?











If you will look at the figure shown above, the points marked in red are the intermediate nodes which serve free of cost and nodes at both ends fall in the paid category. We may have very good bandwidth at the first and last node but those intermediate nodes hardly guarantee for any performance or throughput. In essence, the further the user is from our infrastructure, the more he will notice these performance issues.

A CDN has been designed to solve all these shortcomings. There are many CDN providers available in the market today (i.e. Akamai, Interwoven). One of the CDNs that I worked with is KeyCDN.

KeyCDN
KeyCDN has points of presence (POPs) all around the world. So, whenever a request for a webpage is submitted by a client, it will go to the closest server available. In this manner, your request doesn’t need to go a long distance plus there won’t be many number of requests between the actual server and the client. KeyCDN also provides various ways to control your settings including delivery status and reporting. It also has a very intuitive dashboard and the most impressive thing is, it is affordable!

A CDN will deliver all the static content. So, actual dynamic content is kept on company’s server and the static content is redirected to CDN provider. So, there are multiple advantages of doing this.

Advantages of using CDN
  • Client request will go to the closest POP to get the static content rather than going all the way to the web server.
  • The actual web server will have more bandwidth available as the CDN takes a lot of load.
  • Failover: In case a server goes down, the CDN will automatically reroute the traffic to the next available server
  • The biggest advantage is caching. Whenever a request comes in for the first time, the content will be cached on an edge server. When the next request comes in, it will read the data directly from its cache.
Enjoy learning!!!

Saturday, November 22, 2014

Handling UI control's events in ViewModel [Prism 5.0]

Recently I came across a requirement in which I was supposed to data bind a command from my viewModel to an event. In other words, my code-behind was not supposed to contain any code related to event handlers of a control.

After digging more into Prism, luckily I found my answer. Above requirement can be achieved using InvokeCommandAction provided in Prism 5.0.

Well, so my article will elaborate more on how to achieve this.

InvokeCommandAction
InvokeCommandAction consents us to invoke ICommand implementation on our viewModel to an event that exist on our control. It basically means, we are no longer bound or required to have a command property on a control in order to invoke a command.

Now, you may say you have seen this similar thing before.
And you are right because Blend SDK ships one. But the InvokeCommandAction which Prism provides is little bit different in two ways:
  • First, it manages the state of the element. It updates the enable state of the control that is attached to based on the return value of the command CanExecute. So, here you are getting the same behavior that you do for any control, which is super cool. Isn't it?
  • Second, it allows us to pass event arguments as a parameter to the command.
Now one may ask a question, whether we have to pass entire EventArgs as an parameter or we can just pass the required stuff ?

And the answer is YES. Of course, you are not forced to pass entire EventArgs to your viewModel. One can also pass specific portion of an EventArgs which is really required. This can be achieved by setting TriggerPathParameter on the InvokeCommandAction.
Let's quickly jump on to the code.

Using Code
In order to explain the notion of InvokeCommandAction, I'll create a very simple application having a ListBox and a Label.  The Label will be updated based on the selected item in the list.
Expectation: Whenever an item is selected in the list, we have to listen to the SelectionChanged event and then handle that event in viewModel through command and then update the selected text item on Label.

Setting up a View
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
      <ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single"/>
      <LabelFontWeight="Bold" Width="170" Height="30" Content="Please select"/>
</StackPanel>
I am setting datacontext for this view in code-behind. But same can be done in XAML also.

Setting up a ViewModel
Here I'll not explain each and every line of viewModel's code as I already covered the same in my other articles in detailed manner.
public class MainWindowViewModel:BindableBase
    {
        public ObservableCollection<string> ListOfItems { get; set; }
        public ICommand SelectCommand { get; set; }

        private string _selectedItem = string.Empty;
        public string SelectedItem
        {
            get { return _selectedItem; }
            set { SetProperty<string>(ref _selectedItem, value); }
        }

        public MainWindowViewModel()
        {
            ListOfItems = new ObservableCollection<string>() {"One","Two", "Three", "Four", "Five"};
            SelectCommand = new DelegateCommand<object[]>(SetSelectedItem);           
        }

        private void SetSelectedItem(object[] listOfItems)
        {
            if (listOfItems != null && listOfItems.Count()>0)
            {
                 SelectedItem=listOfItems.FirstOrDefault().ToString();
            }
        }
    }
 
If you will notice the parameter of DelegateCommand, it is an object array. That's because our viewModel is going to expect a command action in the form of object array from the list of items we want to choose from.
Next thing is to handle a SelectionChanged event of our ListBox but we don't want to handle that in our code-behind as we are dealing with MVVM structure. So, in order to achieve this behavior, we will use triggers.

Let's go ahead and add a reference of System.Windows.Interactivity and add the namespace in XAML as:

xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity"

Now above namespace can be used to attach the interaction triggers to the attached property as:
<ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single">
<interactivity:Interaction.Triggers>
        ...
 </interactivity:Interaction.Triggers>
</ListBox>
 
Next we need to add is the EventTrigger with EventName property set as SelectionChanged. Please note, your EventName should match with the event of the control. In this case, we are interested in ListBox's SelectionChanged event.
Now whenever this event occurs, we want to invoke our command. So, this is where we are using our Prism's InvokeCommandAction as:


Let's quickly run the application and see how it reacts.

As soon as you try to select any item in ListBox, you will get a BIG exception:


It looks like, the parameter being passed to a command is the SelectionChangedEventArgs. We don't want that. We want something specific, we want our object. So, let's come back to our InvokeCommandAction and set property TriggerParamaterPath with the path of incoming EventArgs of the trigger. In our case, we want the AddedItems. Hence,
 <ListBox Height="100" Width="300" Margin="1,20,0,0" ItemsSource="{Binding ListOfItems}" SelectionMode="Single">
       <interactivity:Interaction.Triggers>
           <interactivity:EventTrigger EventName="SelectionChanged">
                  <prism:InvokeCommandAction Command="{Binding SelectCommand}" TriggerParameterPath="AddedItems"/>
           </interactivity:EventTrigger>
       </interactivity:Interaction.Triggers>
 </ListBox>

Now when you will run the application, you will get the output as expected.

Hope you enjoyed learning!!!

Friday, November 14, 2014

Skype calls in browser

Microsoft just announced that soon we will be able to make voice and video calls from our web browser. This Skype for Web (beta) calls will work on Firefox, Safari, Chrome and of course IE. As of now, it will work as a plugin but soon it will work natively on all browsers without plugins. So, are you excited to try this out ???

Friday, November 7, 2014

Microsoft to unveil its first Nokia-less Lumia on November 11

Yes, its true. Soon Microsoft is about to reveal its own Lumia having 5-inch display, 1.2 GHz processor, 1GB of RAM, 8GB of storage and 3G-only connectivity. First look of this Lumia is already out:














More info