Tuesday, January 17, 2017

The great developer divide

This will be non interesting to someone who is looking for code snippets. This is gonna kind of theory or history class with some predictions. As always predictions may come true not guaranteed. Lets come to the point. What is meany by developer divide? In simple sense, the developers are going to be divided into 3 species.
  • Application integration developers
  • AI / Algorithm developers
  • System / infrastructure developers
    • Cloud  developers  - includes device driver writers.
Before we think oh there are already 2 groups of developers and are named the same for at least last 10-15 years. What is new?

Evolution in Biology

Lets look at how new species are evolved in biology. If you are an opponent of evolution, you may better stop reading as without understanding the biological evolution, its difficult to understand any evolution including the formation of new languages and all. In biological evolution when some group does different things than the other group of same species or they are separated geographically a new species is formed. If the divide is for small amount of time, they can mingle together and continue as one species. In the other case, there will be 2 species.
Another reason for survival or destruction of species is the ability to suit to the environment. For example, consider the famous evolution scenario explained in England related to industrial revolution.
This is kind of easy and old explanation. The real reason is the gene mutation, which goes to the next level. Only the members who got useful gene mutations will produce more off springs and after a long time they becomes new species which has clear distinction from the old.

Characteristics of these developer species

Coming back to the software, what are characteristics of these new species.

Application integration developers

These are the majority of developers. They write applications which accepts data from user and store somewhere. When user wants the data they just show them or send to them periodically by means of some push mechanism, Some transformations on the data will be done by them which are more towards formatting the data. They never create new data ie knowledge from the data except generation of logs.

More importantly this species of developers will be vanished or become low profile when other species of developers become stronger. It will be difficult for these application developers to convert to the other species though some may succeed and survive. Whatever these developers were doing will become a task of business people. For example business analyst will be able to assemble applications and do most of the customizations. 

Currently there are some environments where we can see this is happening. Visual Studio LightSwitch is one to name.

AI / Algorithm developers

This species will write complex algorithms and expose them as service with the help of infrastructure developers. Application integration developers will consume the algorithms written by this group before they get extinct with the invention of AI programs which does coding.

This type of developers will be high profile, high in number and gets job safety for longer time. They will be knowing basics of application integration but never know what and how the infrastructure developers work.

We can see examples already such as Algorithmia, Azure Machine learning etc...

System / infrastructure developers

This species will know how to deal with the bare metal machine whether it is silicon based or quantum based even carbon based biological machines. They cleverly abstract the hardware from the application integration developers and AI developers.

There will be less number of developers in this species. They control most of the things. They may consume the algorithms written by the other species without knowing how its done.

Reasons for this prediction.

No one can just predict something and run. They should have some kind of reasons for the prediction.

Bare metal is going away from developers

This is something everyone is agreeing now a days. There are many many abstractions coming over the hardware and the main reason is to code once and run everywhere. Another reasons we can hear is the reusability, less development cost etc...

Frameworks

When we were developing for Intel 8085, we had to know what are the CPU registers, their size, memory addressing and port addresses. Now if we ask how many registers are there in the CPU to a new gen .Net or Java or JavaScript developer, they will not have any clue. If we further go back in time, we know there was punch cards and developers had to know so many mechanical & electrical properties of the system. After 8085 days, we got assemblers, compilers and we entered into managed world.
Now from the managed world we are going to the world of integration. Connect some dots and the software will be ready. Even for device programming JavaScript is used which completes the story.

Cloud is abstracting

Another abstraction is happening in the distributed systems world. Distributed means something which is done with 2 Turing machines. or somewhere data is serialized and passing through. Cloud started slowly with IaaS where we got virtual machine. Then came PaaS where we don't need to worry about machines anymore. It is now reached to FaaS where each function is a service and can be deployed independently. Another sweet name is Serverless. Now people are telling that though the name Serverless, there are servers underneath but developer don't need to worry. 

But think of a time where the underlying machine is a quantum biological computer. Still we can call it a server but the underlying system has completely changed and there will be no clue to the consumers how the FaaS executes code.

AI Algorithms are too complex to be understood by all

Earlier colleges were teaching sorting and searching algorithms. But people who studied those were not coding those algorithms everyday as those came as part of the standard libraries. That helped the developers concentrate on the real business problem. That is good. After those days the business requirements got a new face of data analytics. Everyone wanted to analyze their data. Some at least know what they want from data. Some are just fiddling with data for treasure. That brought a good momentum to the field of algorithms. Many algorithms were developed but the same question came again. Should we just consume those algorithms like how we are consuming sorting and searching or should we learn those algorithms. Obviously the route is same. The consumption. 

Another reason is their complexity. It is very difficult for normal application developer to know how face recognition algorithm works as it requires prior knowledge in different fields. So the consumption is easy. This eventually boosts the developer divide.

There may be many more reasons which are not listed here. However the developers are getting unavoidable division which occur in every growing science and technology fields. The best practice is to select own field and be an expert in it.

Thanks for reading.

Tuesday, January 10, 2017

My JavaScript Module experiments

Background

After I wrote my post about the selecting Angular 1 for my personal site when Angular 2 is out, I seriously started thinking about myself. Am I too joining the group who hate changes? As mentioned in that post, the main bottleneck is not the concept or syntax of ng2 nor it's performance and stability. The problem was around tools. What are those tools doing? They help us to write modularized JavaScript. They do transpilation, bundling, minification etc...

If we download standard ng2 project starter template, we will get pretty much a good running starter. The tools will be already configured. From there we can simply add our own functionalities. Unless we have crazy requirements, that configuration will work. We just need to add features. Then what is the trouble? The trouble, at least I had was that I am not getting how those tools are doing the magic. I checked with some other people who has problems with ng2. I could see they also have trouble understanding the tool chain. Its very difficult to move ahead in that magic setup especially, if we are coming from little old school who want to know exactly how the software works. For most of the newbies, it doesn't matter. As far as the setup/tool chain is working they can code new features.

Is there a way to survive in web development without knowing bundling? The answer is 'no' as that is the way forward to build huge apps.

So what is the solution. Learn the JavaScript module system from basics with simple samples than  starters which are configured to use features such as transpilation, source map, minification, unit testing, dev & prod  modes etc...

This post explains how I learned module system in my way, though there are tons of tutorials explaining the JavaScript module system. Most of the steps will be pointing to external sites to avoid duplicate content and of course they explain better than me.

What is JavaScript module system

If we have background in Java, it is the equivalent of Java package system. For .Net people, it can be compared to assemblies. Simple as that. But since the JavaScript engines don't have native support for modules, we have to rely on different tools which does the module implementation. To me its like workaround till the browsers or the JS engines know what is module. May be at least in the case of module loading. I am not expecting any JS execution environment will ever help us to create a bundle.

What is the relation to Angular 2 and these module system? Angular 2 uses these module concept and it is good to follow the same for our app as well. So if we download any Angular 2 sample or starter, we can see it uses SystemJS or Webpack. As mentioned earlier, either we can just download a starter and extend it without knowing how the magic works or learn what is the module system from the scratch.

Selecting WebPack

If we google for JavaScript module tools we will see many. Browserify, RequireJS, SystemJS, webpack to name few. We can debate which one is better for days and that itself require one separate post. So for the time being selecting webpack as it is selected by Angular-cli and at least it is not in beta.

NodeJS n NPM are everywhere

It is very difficult now a days to do web development without knowing node and its package management tool NPM. Though Node & NPM doesn't have any role inside browser they are used in tooling side. Webpack also comes as NPM package. So this post assumes reader has knowledge about NodeJS & NPM 

Step 1 Understand via simple ECMA 5

The first thing as JS developer unless we are born to ES6 is to learn how we can modularize ECMA5 or ES5 or simply the traditional JavaScript code. There is no need to write one more tutorial to understand how ES5 can leverage webpack. Just go to 'getting started' tutorial of webpack and try it.

Please try till Section "THE FIRST  LOADER" in the below 'getting started' link.

http://webpack.github.io/docs/tutorials/getting-started/

Before using loader, it is good to know something else. Obviously we should come back to loaders. Because loaders does magic. 

After trying the above, remove the .js extension from require and run. Sample below.

var content = require("./content.js");
to 
var content = require("./content");

We can see still it is working. The file extension is something optional.

Step 2 - webpack.config.js

If we go through any webpack tutorial, we can understand that most of the issues using webpack is because of wrong webpack.config.js. So it is important.

Minimum config

Lets see what is the minimum config required for this webpack.config.js file. Have a look at the below link starting from "Defining a config file" section where it is explained clearly. Read till the "Webpack loaders and preloaders".

Watch mode

This is a useful mode in development. This is explained in the above tutorial.

Dev Server & hot reload

These are again development time features where we can start a light web server which monitors the development changes and reloads for us. This save good amount of time in switching to command window and typing commands. Yet to see what will happen on performance, if there are 100s of files.

The feature is explained in the above tutorial.

Step 3 - Enter TypeScript

A big no to ES6 at this point only because it lacks compile time type system. This is again debatable. If we are dealing with small applications, it is better to be dynamic typed ie pure JavaScript. But for bigger apps, type checking is must. Otherwise it will take a good amount of time  ie time needed for finding out what are the members of objects and what a function accepts and returns.

In this section we are going to see how TypeScript and webpack works together.

The below article below explains TypeScript and how to use TypeScrpt with Webpack. Read from beginning till "Watch Support"
http://www.jbrantly.com/typescript-and-webpack/

Why till "Watch Support". Because it then includes jQuery. Our focus is to understand how webpack can be used to process TypeScript not with jQuery.

Now its time to clone my webpack repo given below. This will be used going forward in this post.
https://github.com/joymon/webpack-starters

It has a folder named ECMA5-TypeScript. Point command line to that folder and run webpack command. We could see it transpiles the logger.ts & tscomponent.ts and output bundle.js along with other ES5 modules. Running the index.html from disk will show some log statements.

"TypeScript Worked !!! - logger module loaded" - Means a ES5 module was able to load TS module.
"TS component which has dependency on JS component worked" - Hope it is self explanatory

Lets see how it worked

Loaders in webpack - ts-loader

Loaders help to process the file, if those are in different formats. For example, today browsers don't know how to read and execute the TypeScript. So the TypeScript needs to be transpiled to JavaScript. That can be done by using the webpack loader mechanism. In this "webpack-starters" repo, ts-loader is used for that purpose. The configuration is present in the webpack.config.js.

After loader does its job, the final bundle.js is created as usual. index.html only knows bundle.js.

TypeScript loading ES5 modules

If we need ES5 code to load a TS module it is easy. Since ES5 don't care about types, we can write any valid js and at runtime only it checks the objects. But if we want to use ES5 module in TS, the first thing is to tell, what is require() function. TypeScript as language don't know what is require(). So to tell TypeScript about require() we have to use nodejs typing. Node typing has the definition for require(). 

To add Node typing the sample is using a package called  @types/node. Refer package.json. 

Please note since this post is not aiming at teaching TypeScript language and what are typing files,  more details on @types/node are omitted.

Step 4 - TypeScript with AngularJS 1.x

Here we are going to next step of using AngularJS 1.x via webpack module mechanism. The sample is present in the TypeScript-Angular1 folder of the "webpack-starters" repo mentioned above. Sample just shows a simple Angular 1 application with one component.

Setting up ng1+TS+webpack from scratch involves multiple steps which are given below
  1. Initial setup of TypeScript+webpack
  2. Include the NPM package for Angular
  3. Include the @types/angular.
  4. A module where angular.module() is called to setup angular. In the sample refer to ngModule.ts
  5. An entry point(bootstrap.ts) module where we can call the above module and add other Angular constructs such as components, services, filters etc...Big sorry for directives for easy conversion to ng2.
  6. Index.html to use required Angular directives.Minimum ng-app.
  7. While adding components export them
Now have a look at the TypeScript-Angular1 folder of the "webpack-starters" if not done already. Below are some questions which might have popped up. The answers are also given along with questions,
  • Why ngmodule.ts? 
    • This is just a class for wrapping the original angular object. This gives us a common place for registering the angular object such as registering components, filters, services etc...This is optional. Just make sure the code which is executing angular.module and other registration functions are getting called.
  • Why bootstrap.ts
    • This acts as entry point for the application. It imports all the other modules which contains the app is ngmodule and all the angular constructs. For simplicity the sample only includes a simple component.
  • How did the require("angular") worked? Who exported the angular library for webpack?
    • This is done by the node_modules\angular\index.js .It exports as angular. If we change this we can see the module is not found.
  • Why webpack-dev-server is needed. Can't we double click and run from the disk?
    • For just ng-app to work, there is no need of web server. But for angular to locate and load the html template, it requires app to be served via url not just from disk. We can even use IIS to serve the folder. Only requirement is to navigate via http protocol.
Any new questions can be asked in the comments which will be included into the post later with answers?

More

This post shows the tip of iceberg. There are many more things which are required to setup a professional application for development and production. With this basic understanding of module system, learning those will be easy.

Some links are given below which are related to JavaScript modules and bundling

Tuesday, January 3, 2017

TypeScripting AngularJS 1.x - Filters

This post is part of TypeScripting AngularJS 1.x series. Other posts are listed below. The sample code is created using Angular 1.5.9, TypeScript 1.8 & angularjs.TypeScript.DefinitelyTyped 6.5.6. 
  1. TypeScripting AngularJS 1.x - Define module
  2. TypeScripting AngularJS 1.x - Define module - improvements for big enterprise apps Improvement
  3. TypeScripting AngularJS 1.x - Using $http 
  4. TypeScripting AngularJS 1.x - Directives
  5. TypeScripting AngularJS 1.x - Filters

Angular Filters in TypeScript

These are small handy reusable functions which can help us to format the data while displaying without modifying the underlying model. Currency and date formatting are excellent examples. We don't need to keep one more property in the model which holds short date of another date object just for displaying. There are many filters built into Angular and it allows us to create new as well.

Below is a code snippet to create custom Angular filter named. HTMLTagRemover using TypeScript. As the name implies it removes any html tags in the string passed to it. 

export class HTMLTagRemover {
    public static filter(): Function {
        return (text: string): string => { 
            return text ? String(text).replace(/<[^>]+>/gm, '') : '' };
    }
AppModule.getInstance().registerFilter("removeTags", HTMLTagRemover.filter);
It is a simple factory function which returns the actual filter function. The last line registers the filter with Angular application. It requires some prior knowledge related to defining Angular module in TypeScript way to understand how to get the AppModule.getInstance() and how it works.

Below is the code of registerFilter() in the AppModule class
registerFilter(name: string,fun:Function) {
    this.app.filter(name, fun);
}
The app is the real Angular object

Dependency injection 

Without dependency injection Angular is never complete. How can we get the dependencies injected into this filter?
export class HTMLTagRemover {
    static $inject: string[] = ['$sce'];
 
    public static filter($sce: ng.ISCEService): Function {
        return (text: string): string => {
            console.log($sce.trustAsHtml(text));
            return text ? String(text).replace(/<[^>]+>/gm, '') : ''
        };
    }
}
This injects $sce which can be used to sanitize data into our filter. Similar to $sce we can inject our own services too.

Complete code can be found in my personal web site source in Github.

Tuesday, December 27, 2016

TypeScripting AngularJS 1.x - Directives

This post is part of TypeScripting AngularJS 1.x series.Other posts are listed below.

  1. TypeScripting AngularJS 1.x - Define module
  2. TypeScripting AngularJS 1.x - Define module - improvements for big enterprise apps Improvement
  3. TypeScripting AngularJS 1.x - Using $http 
  4. TypeScripting AngularJS 1.x - Directives

Angular Directives using TypeScript

Below is a mechanism to create typed Angular directives using TypeScript.

The main thing is that our directive class needs to implement ng.IDirective. After that we can have the corresponding ng.IDirective members. The advantage here is that we don't need to memorize or google for what are the members required for directive. Its all there in ng.IDirective

export class ProjectsDirective implements ng.IDirective {
    public restrict: string;
    public templateUrl: string;
    public controller: any;
    public controllerAs: string;
    public bindToController: boolean | { [boundProperty: string]: string };
    public scope: boolean | { [boundProperty: string]: string };
    constructor() {
        this.restrict = 'E';
        this.templateUrl = 'JS/app/projects.component.html';
        this.controller = "ProjectsController";
        this.controllerAs = "ctrl";
        this.bindToController = true;
    }
}

Above code snippet is taken directly from my personal web site. The members such as bindToController, controller etc... are optional. This is not enough to get the ProjectsDirective available in our application. For that we have to register it with Angular application.

Code snippet below shows the registration.

AppModule.getInstance().registerDirective("projects", () => {
    return new ProjectsDirective() 
});

It gets the instance of the Angular module and calls the registerDirective function. The object here is  a wrapper over real Angular module object. That function in turn calls the real Angular.directive function.

Dependency injection

The dependencies to the directive can be accepted by the directive factory / creation function. That function then can pass those injected objects to the directive constructor. 

Sample code

The code is from my personal web site and it is in GitHub.
Simply clone the repo and compile using Visual Studio 2015. It uses TypeScript 1.8.

Tuesday, December 20, 2016

Why I choose Angular 1.x for www.JoymonOnline.in while Angular2 is out

What is the present tech landscape?

If we look at present web development technologies, we can see everything is revolving around client side HTML generation. The interesting thing at client side web development is that, there are new tools and frameworks getting released every week. It is very difficult to select one and get something out using that. By the time we complete analysis on one tool or framework, the next one will be out by saying its better than the existing. If we keep analyzing, we never will be able to do something useful.

Recently, I decided to convert my personal web site to pure client side solely to avoid hosting cost. It currently is .aspx based server side html generation model. The server side code help me to connect easily with third parties such as Github, Blogger etc...I don't need to worry about whether the viewers network blocks GitHub or Blogger APIs. If I am converting to client side I had to write some JavaScript to do that third party integrations. Hence I have to analyze the client side technology stack. Important thing for me is to convert the app to pure client side app before March 2017 else I have to renew the hosting space again. So its is highly time bound

In short, I selected Angular JS 1.x over other technologies even by avoiding Angular 2. This post talks about my journey towards Angular JS 1.x to do this time bound task over Angular 2.

There is no standard tooling for ng2

We can easily compare the scenario with the US restaurants v/s Indian restaurants.
In India, if we got o middle or lower level restaurants and order Masala Dosa, they will give us a standard Masala Dosa. The standard changes from state to state and district to district. Very less options to customize. But if we are in American restaurant, they will ask so many questions, if we order a sandwich. What type of cheese, what ingredients, type of bread etc...

In Angular 1, things were pretty much like restaurants in India. There are standard tools. Only some confusion comes in the language. Whether to go with JavaScript, TypeScript or CoffeeScript.

But in Angular 2, there are many tools and we have to pick up the combination what works for us. What framework for module loading, how and when to compile TypeScript to JS, how to do packaging.  New tools are popping up frequently too. Though there is official recommended tool chain, I don't think it is working out for many developers. May be they are not productive or are complex which needs more technical knowledge. Else people will never spend time to invent more and more tools.

Though the ng2 framework is kind of mature the tools are not.

This may be controversial statement. There will be many disagreements as some tools works for some and all can find some combinations.

Many tools are in beta

The main tool came along with ng2 is the command line tool called  Angular cli. At the time of writing this post, it is still in beta. They recently switched from SystemJS to WebPack. 

Some tools doesn't mean for Windows

Suppose we take the risk of using a beta tool for doing development, there are still issues. Some are more tailored to OS other than Windows. Though we can mitigate the issues, it eats our time.

Compiling TypeScript in browser is for demos till browsers understand TypeScript

Now a days most of us agree that the compilation of TypeScript needs to be done along with build process. Though there are options available to compile TypeScript in browser, it will reduce the start time of our application. The other group is telling that, some browsers are expected to support TypeScript directly in future so the compilation can be done by detecting the browser.

This is same, if we select ES6 as well. Some says we should compile down to ES5 always the other side argues that it should be done at Browser by detecting the feature support.

Its all good if we are developing a demo to get a project or samples. But for something to be done in a time based manner, we cannot be trapped in these arguments.

Why not code Angular2 in ECMA 5 JS?

Come on...Though there are many good tutorials available which explains writing Angular 2 application using ES 5, I never want to do. There are many reasons. One big reason is going forward, if we struck in an issue the sample snippets or solutions provided will never be in ES5. We have to find out how to convert the ES6 or TS code into ES5.

But we should definitely try writing the Angular 2 code in ES5 for understanding purpose. Else if something goes wrong in our compiled ES5 code, we may not be able to find out.

Why not build a brand new site and switch one morning

This is a famous question we all might have faced during any migration effort. The developers who never tried rewriting a software under proper timelines, will always advocate this strategy. But others never agree on complete rewrite. When we look at any software which is running for long, we can see so many pain points of previous developers and hacks, anti patterns etc...If we just start rewriting,  we will also have to go to the same pain points. So why should we take unwanted risk? Lets always divide and conquer part by part.

In my personal web site scenario, I was the only developer and I am the one who is going to rewrite also. But I had taken so many things from here and there during initial development and unfortunately, I didn't document anywhere even in this blog. Since I use my brain mainly for generating ideas, I don't remember all the pain points now. Hence there is no need to take risk.

Again why should we take same old risks as there will be new risks during the conversion to client side.  By this time I already got an issue related to Angular date formatting in Windows Phone 7. Please don't ask apart from me who else using Window Phone.

The continuous delivery system

I currently use free service from AppVeyor to run continuous delivery of my web site. Since its a Visual Studio solution, AppVeyor detect it, compile the same, run tests, package and deploy to the server. To my best understanding ng2 heavily depends on NPN though there is a nuget package for ng2. AppVeyor can be configured to use NPN, but it is again time consuming.

When is the best time for ng2

None of the tools and technologies are going to be there for ever. The technologies are suitable to the current landscape. There are new cool technologies coming out. Below are some

  • ReactJS (This is already out. Though it is not a full fledged framework like Angular, it is a choice)
  • WebComponents
  • WebAssembly (we may be developing browser apps using C#. Remember the old Silverlight days)
The driving factor in this conversion is the cost to host ASP.Net site. After that based on the situation, there may be pressing situation to convert to any one of the above technologies. But right now, it is impossible to predict.

These are my own views about selection of AngularJS 1.x for a personal/portfolio site. These are not  applicable to all the scenarios. 

Tuesday, December 13, 2016

Handle once for many events via sliding timer.

As a developer we might have encountered many situations where we have to do certain things when something triggers but it triggers so frequently which makes our handler code run many times and it affecting performance. The functionality might be achieved by responding to last trigger. In .Net way, we can take events as triggers and if we want to handle event which is firing frequently it affects the performance.

Coming to an example for more clarity. Suppose we need to do something when the network is connected or disconnected, we can hook into the NetworkAvailabilityChanged or NetworkAddressChanged and write the code. But the network sometimes can get fluctuations, and these events may fires frequently but we don't need to respond for each event but to the last event. This is same if we want to show the MousePosition. We should only handle the last mouse move event. Not all. 

The event is firing rapidly. Need to handle the last one.

The major problem here is to identify which is the last one. In other words how much time we need to wait without any event firing to determine the last one.

This is purely the decision of the developer based on the situation. In some situations we can easily conclude that, if there is a 1 second delay the previous one was the last event. Sometimes that delay may be 5-10 seconds or can be small in milliseconds.

In short, many event firings happened but no need to handle once for all by determining a last point. This can be done using sliding timer mechanism or simple timer monitor.

Sliding timer

There is no  timer class in .Net framework called SlidingTimer. This is just a mechanism to reset the time based on triggers. If no event triggered, for a specified time, the timer ticks and the operation can be done.

When this should not be used

 If every event needs to be handled we cannot use this sliding timer mechanism. For example a sensor event or data feed where each and every event brings different data and needs to be processed.

Sample code

Below is a sample WPF implementation. This sample is trying to show the location of a window in a textblock whenever the window is moved. Since the LocationChanged event fires rapidly it uses SlidingTimer to determine when the user stops dragging the window. In other words, if the LocationChanged firing started and stops firing for 2 seconds, it the best time to update the location in textbox. First lets take a look at the consuming side.
private readonly int IdleTimeInMilliSecondsRequiredToProcessEvent = 2000;
SlidingTimer slidingTimer;
private void InitializeAndStartSlidingTimer()
{
    if (slidingTimer == null)
    {
        slidingTimer = new SlidingTimer(IdleTimeInMilliSecondsRequiredToProcessEvent);
        App.Current.MainWindow.LocationChanged += MainWindow_LocationChanged;
        slidingTimer.Tick += (sender, args) =>
        {
            this.Dispatcher.BeginInvoke(new Action(() =>
            {

                string loc = $"{App.Current.MainWindow.Left},{App.Current.MainWindow.Top}";
                this.LocationTextBlock.Text = loc;
                Console.WriteLine(loc);
            }));
        };
    }
}
private void MainWindow_LocationChanged(object sender, EventArgs e)
{
    Console.WriteLine("Event fired restart sliding timer");
    slidingTimer.StartOrRestart();
}
The above code can be in any WPF UI component's code behind file. Prerequisite is to have a TextBlock called LocationTextBlock in the UI class. InitializeAndStartSlidingTimer() can be called in the beginning or at any suitable time to initialize the SlidingTimer. Since the Window.LocationChanged is subscribed after initialization, its fine here. Those can vary depends on our scenario. 

Here the SlidingTimer is initialized with an idle timeout which required to tick after it is started or restarted. In the MainWindow_LocationChanged event handler, the slidingTimer is restarted. If there is no StartOrRestart() called continuously for 2000 milliseconds, the Tick event will fire. The Tick event handler uses dispatcher to manipulate the UI as the event fires in different thread.

Now lets see how the SlidingTimer class looks like
internal sealed class SlidingTimer
{
    Timer _internalTimer;

    private void OnTick(EventArgs args)
    {
        if(Tick !=null)
        {
            Tick(this, args);
        }
    }
    /// <summary>
    /// Fires in separate thread, when the there is enough delay to execute task.
    /// </summary>
    public event EventHandler Tick;
    int _intervalInMilliSeconds;
    public SlidingTimer(int intervalInMilliSeconds)
    {
        _intervalInMilliSeconds = intervalInMilliSeconds;
        _internalTimer = new Timer((state) =>
        {
            OnTick(EventArgs.Empty);
        });
    }
    internal void StartOrRestart()
    {
        _internalTimer.Change(_intervalInMilliSeconds, Timeout.Infinite);
    }
}
Here a thread timer is used for timing purpose. After it is started, the invocation of the callback event handler is controlled by the StartOrRestart(). Suppose the interval is 2 seconds, if internal timer starts and the StartorRestart() called after 1 seconds the total time slides to 3 seconds to get the event fired. This is simple sliding mechanism.

Monitoring timer 

The original use case can be done by using a normal timer as well. The event handler can just set a flag to indicate the processing is required. When the timer ticks it can check the flag and do the operation. After timer operation it needs to reset the flag.

Happy coding.

Tuesday, November 29, 2016

Welcome to Serverless

After Microservices, the next revolution in Software Architecture is Serverless. There are already many great blog posts on this subject and some I have indexed at the end. This is my own views on Serverless.

Some history 

As we know servers are just another computers. Similar to desktops they have Processor, RAM etc...fixed on mother board and motherboard needs power. Probably they might not be having dedicated keyboard or monitor instead they can be remotely controlled. These physical server machines normally will have high hardware configuration which is not needed for normal workloads. So there resources are shared by hosting multiple small machines inside it and we call them as virtual machines. Another reason for VMs is that we can easily manage the VMs by software. For example we can delete a windows VM and create Linux VM completely via virtual machine managing software. Also we can easily adjust virtual machine's RAM, Hard disk etc.... 

In a traditional in-house data center, we as operations engineering/infra team have to make sure there are enough physical servers so that we can respond to the dynamic needs of VMs from different apps. At any given time, most of the machines will be under utilized considering their capacity. From software developer perspective, they have to make sure these machines are having proper software installed and had to scale up / down / out based on the usage. The old gen cloud environment ie IaaS solves this issue of provisioning machines easily. At least the infrastructure operations team is happy.

The application software side was not happy with IaaS because their duties were not reduced. That's why cloud is evolved to more abstracted levels such as PaaS, SaaS etc...In every higher level, more abstraction is getting added and developer is going away from the hardware and concentrate on the software aspect of the system.

Enter PaaS

In PaaS, developers don't need need to worry about the platform and scaling is less painful than IaaS. Using a slider or command they are able to control scaling. Some cloud providers provides auto scaling at this level but developers had to write some code to determine when to scale. This really solves, if the software is going to be deployed as a package/bundle which does related task. eg: a website or APIs exposed via web.

In PaaS, since the unit of deployment is package, the scaling applies to all the tasks in it, regardless of the individual task usage. Eg: We have 10 APIs in a WebAPI deployment and only 5 are getting high traffic. But when we scale, entire WebAPI deployment get scaled.

Enter FaaS (Function as a Service)

We saw the scaling issue in PaaS. One way to individually scale each task is to split the deployment package to task level so that each deployment package has only one job/task. This is somewhat  Microservices tried to achieve. Split the app as much as possible.

But that still needs monitoring. Someone has to monitor and adjust scaling based on usage. Lazy developers wants to get out that as well and there comes FaaS. Here each function becomes a deployment unit. When it came to FaaS, the cloud providers were able to provide real auto scaling. Developer don't need to monitor anything. The provider does it.

What is Serverless

If we examine the PaaS, the cloud providers kind of started managing server. We just had to give a deployment package the rest will be done by provider. But there was monitoring overhead. When it came to FaaS the the cloud providers started taking entire ownership of servers. But those were not only the factors for the rise of Serverless.

Free high performance server side execution

Along with taking the hardware away from developers, many cloud providers started giving free tiers. Since its per function, the cost of starting a cloud based business became very less. At this point nearly 0. So obviously startups selected this way so that they can try out their ideas in this model without much investment. They can market things very fast and even if it fails, they are able to manage the financial loss. Earlier, there were very less options for getting free industry grade server side code execution.

Free industry grade HTML hosting 

Another boost is the availability of free HTML web hosting providers. It was there from the beginning but they were not ready to host high traffic sites. But that is not the case with git pages, amazon S3 hosting. Now with $0 hosting cost, anyone can start online business. Only thing they need to know is how to do basic HTML+JS coding and integration skills.  Integration skill are nothing but calling the above mentioned free server side APIs via XmlHttpRequest or simply AJAX.

Fremium SaaS

One more benefit came in the situation is the availability of many freemium services to do cross cutting concerns or shared capabilities. If we want to provide login integration with Google, Facebook etc..., its's now matter of some hours.

Success of standardized web & Availability of mobile & high speed internet

These are some additional positive things happened which boost the evolution of Serverless. If different browsers were behaving differently, jQuery & AngularJS were not invented, internet was giving in dial-up the word Serverless might not have been heard.

Overall, the startup community found it cost effective and since they are the drivers of innovation and conferences Serverless became the next Jargon. Obviously with the support of the real giants or the cloud providers. Very soon enterprises will also follow the same route.

Are there really no servers?

There are servers but entirely managed by the cloud provider or the SaaS provider. Without server ie some higher end computers or generally hardware, we cannot run our web based softwares except peer to peer such as torrents. The term just makes confusion. 

I am using FaaS. Am I in Serverless?

We have to understand first that the web applications has 2 ends. One is the front end which runs in browser, served from a web server. The other is the back-end, where the data lives and computation happens. Back-end we can again divide to computation layer(business layer) and data layer. Using FaaS make sure that our computation is Serverless. But what about data layer and front end. If the front end is served from in-house data center or from IaaS virtual machine, we cannot say the application is  Serverless. This is applicable to databases or files in data layer too.

So if we are not at all worrying about any server, we can say our application is Serverless. 

Does Serverless means free?

Serverless is an architecture pattern and doesn't mean it is free. But if we are choosing this architecture, we can have application up and running in zero hosting fees. Development cost is always there. Mostly everyone starts in free tier and upgrade to paid when they get success. That move doesn't usually involve any code change.

Does Serverless require strong upfront arch design?

Serverless provides great flexibility to development similar to Microservices. We can choose multiple languages which suit to the service / function. Easily get rid of technical debt by rewriting hot functions. Architecture can be easily changed as its only at the integration level.
But that demands a good architecture vision on integration. Else the functions will not work together to produce desired behavior.

Will there be function hell?

Yes, if the management & monitoring of the functions not done properly. If we let every Tim and Harry to start writing functions without a monitoring mechanism, we will soon end up in so many functions in the production environment and nobody knows why they exist.

Does the Serverless arch require CI,CD pipeline?

Though architecturally doesn't require, its advvised to setup proper CI, CD pipeline to take advantage of this model. This is applicable in Microservices too. Else it will take unnecessary integration efforts.   

Should I switch to Serverless tomorrow?

When the cloud is announced many industries were not ready to accept and the concern was security. But now we can see the direction is changing. Even banks are trying to use cloud as much as they can. There is no question that Serverless will be the future similar to how Microservices are doing now. But as always before we convert our existing app or start next app using Serverless, we have to compare the pros and cons. 

The below comparison assumes that Serverless uses FaaS along with SaaS. So some factors may seem suitable to FaaS or SaaS.

Pros

  1. Single responsibility at function level - This is something we were trying to achieve from the beginning of software but at the mercy of developers which is very difficult to get. But with Serverless, this is enforced by architecture. 
  2. Cost - Theoretically it should be less as we are truly paying for what we use. But has to wait for more real time high volume usage reports.   
  3. Scale out coding - Coding can be scaled out efficiently and done even in browser. But this is good, if there is proper high level integration plan.
  4. Ease of code management -  Also we can easily get rid of technical debt by rewriting functions.
  5. More selection of languages - We can select different languages for different functions similar to Microservices. But this is double edged sword.
  6. Easy switching of provider - Since the deployment is at function level we can switch provider gradually function by function.  

Cons

  1. Many points of failure - Since our app may depend on many SaaS, if one of them down our entire app may get down. Else we have to use fallback mechanisms.
  2. Not all SaaS available equally in the entire world - If we are using Facebook as the only login provider, people from countries where Facebook is banned cannot use our software. Also any country or region may block anything. So need to monitor the world. 
  3. Function hell
  4. Performance - The end user don't need to worry that the app is Serverless and the performance hit is due to X SaaS or Y cloud provider. To them the site /app is single unit and ensuring performance is the developer's duty.
  5. Integration complexity - The total business complexity of app cannot be changed but can be moved. In Serverless tt just moved from component level  to higher integration level.
  6. Performance of chained calls - If the business requires complex processing chain, it may affect performance. Better those should be queued.
  7. Performance of service instance activation - Upon a trigger the cloud runtime is expected to select one from existing or start a new runtime environment for the function before execution. The time to setup that environment affects the performance. This depend on the provider specific FaaS runtime implementation.  
  8. Less control - If we have a unavoidable scenario of long running service, the provider may kick out our service instance due to timeouts. Not an arch level disadvantage. Its provider dependent.
  9. Lack of tooling - This is a temporary disadvantage. Soon more tools, IDEs and offline testing solutions will evolve.
  10. Developer forgets hardware - This can be seens advantage as well as disadvantage. Discussed more below.

Serverless makes developers moving away from hardware

This is a debatable. But whatever debate we do a good chunk of developers are getting away from hardware. But is this started with Serverless?

Never. The move has started when the assembly language is invented. Instead of 1's ans 0's people then started using Mov A,B or PUSH B etc...The compilers took it further. Later the managed platforms came with virtual machines. Those were all driving the developers from bare metal machine.

The great developer divide 

But whatever happens, there is a hardware which understand 0's and 1's. Who control the machine. Obvisouly the compiler writers & runtimes coders. They are still with the machine and require high skills than the business application developers. We can now tie the cloud runtime developers into the same group. Those skills are not replaceble with AI. But the business developer will soon or later taken by AI. Another group of developers who will join with the system and cloud makers are the AI algorithm authors. There are already sites like Algorithmia who facilitate Algorithms as a Service.

This is more like the natural evolution. It take considerable amount of time to see 2 species of developers. Its again it's own topic to be discussed in separate post and not sure the term 'The great developer divide' suits to the phonomenon.

Whether the author use Serverless?

I always believe in solving my problems first before I solve other's with my code. Yes I am taking  2 of my personal projects to Serverless. My personal website http://www.joymononline.in & Karel simulator. My main motivating factor is the hosting cost than the eager to try out new Architecture. More updates will be shared later via this blog.

References

  • http://martinfowler.com/articles/serverless.html
  • https://read.acloud.guru/serverless-the-future-of-software-architecture-d4473ffed864
  • http://highscalability.com/blog/2015/12/7/the-serverless-start-up-down-with-servers.html