Tuesday, August 23, 2016

My lead doesn't like commented code

Boss, look at the code. I didn't comment it. Why did you reject the check in?

        public void Foo()
        {
 
#if false
            Console.WriteLine("This is a sample which will never get executed");
#endif
            Console.WriteLine("Current code goes here");
        }

I had hard time with people who doesn't understand the problems with the commented code. According to them it needs to be there because that functionality might be requested by business in future.

My answer to them as a software craftsman is to use any source control system, if they are not using. But now a days there will be no company in the world which doesn't use source control for development. At least they can host in free Github account. Sometimes I had to show dev leads, how to get history from TFS.

Another argument people put forward is the reusability. Don't confuse with real reusability of code. This is about going back to previous logic after some time period. They argue that if the code is commented,it can be simply uncommented. If we delete, we have to go back to history and take it back. Sometimes, new developers will not be knowing that the same had been deleted in the past and they will write the old logic again. My answer is to use dependency injection. This still feels too technical to most of the people. But its very simple to those who had tried it at least one time. Follow the single responsibility pattern religiously to split up the code to small units and compose the application by injecting dependencies. if there is a change requested, have that logic in a new class by implementing required interface and change the dependency injection catalog so that the new change will take effect. Let the old class be there unused. We can use it in future.
  

Tuesday, August 16, 2016

Explaining what is full stack web application development to kids

Let me try explaining full stack web development to kid..

Ask the kid "have you ever thought how the food is coming to your table?" Kid may probably say No.
Lets explain him how its coming.

We goes to the store to buy the food in our car. We ask them for the vegetables, fruits, etc...

Where do they get it from?
They go to whole sale distributors or warehouses with their big trucks.

Where do they get it from ? They collect it from farmers. Farmers produce the food.
Some grocery stores directly gets from farmers.

The web works in similar fashion.
We ask the web page from browser. Browser ask it to the web server.

Web server ask to the database servers or any caching services in between. Once the content is available in browser it renders for us.

Here browser is your mom.
Our Car -> Boradband connection to the web server/site.
Grocery store -> Web server
Grocery trucks -> Big internet backbones
Farmers -> database server
Distributors -> Caching / CDN servers.

Look at your grand parents living in countryside. They do farming. They stock those for yearlong. They take from storage whenever needed and cook themselves. They feed us whenever we go there. They does everything.

There are programmers who can develop end to end just like your grand parents. They really do full stack web application development.

Tuesday, August 9, 2016

Why its called as Virtual Machine?

Introduction

We might have heard the term virtual machine a lot of times when we work with languages which compiles to intermediate format instead of machine code. Some examples are Java, C#, Vb.Net etc...

We might have also complained that application is slow because it is running in virtual machine. There are 2 types of virtual machines in software engineering. One is the virtual machines which are running an operating system inside another operating system. Such as Linux running inside Windows machine. The machines we are getting in cloud providers are virtual machines. There are managing softwares such as Hyper-V and all to manage those machines.

But this is not the virtual machine when we talk in terms of programming languages and platforms. Lets get an understanding about those virtual machines

Machine

What is a machine refers here? Its nothing but an execution hardware which can handle a finite set of instructions. In another words a turing machine which takes one instruction process it and takes next and go on. Instructions may be simple 'add A,B' for adding 2 CPU registers to complicated GPU instructions. 

Unmanaged world / the bare metal machine

The software execution world was running without a manager in the beginning.  In the beginning programmers were talking in terms of 1's and 0's to each other and to machine. It was very difficult to deal with. If we want to add 2 numbers we had to use something like

11001100 1010,0011 // To add 10+3. Assume 11001100 is the instruction for add.

This instruction is commonly known as opcode too. Short form of operation code. This tells the executor here its the CPU/Processor chip to perform an add operation and place the result in a predefined location. Mostly it will be accumulator.

Machine language

The above notation can be called as machine language. Only 1's and 0's which machine can understand as presence or absence of voltage. This was similar to days when developers were using punch cards to enter their programs to computers.

Soon developers started denoting the numbers in hex where the above machine language can be written as

CC 0A,03

There are still some universities having 8085 based programming paper which gives this mode of entering programs in to computer. Even today we can open executable files and see it in hex format.
Everything in computer is actually in binary but for better understanding purpose, we can convert it to hex and display. Don't get confused with the ASCII representation at the right side. That is just coincidence. For example the opcode for add and ASCII code for 'D' may be same. Here the viewer application from where the screen shot is taken is trying to convert to ASCII for more readability.

Assmembly language

Soon people started using more human friendly instructions instead of hex instructions. That was called as assembly language. The above code can be written in assembly language as follows

Add 0A,03

Only the instruction / opcode changed data remained in hex.

Smart people created text editors in assembly language to write assembly language. That made the life of new developers easy as they can write programs editor which is built using assembly language itself.

There are no loops or most of the machines doesn't supported it. But we had an option to change the execution order based on conditions. Instructions such as JMP, JC JNC (Jump, Jump on Carry, Jump on No Carry) are some examples. Using these instructions developers were able to get loops implemented.

Till this point the developers were directly writing in the language the machine / hardware understands. After the assembly language, there were some programs started involving in between the program and machines.

Programs that prepare programs for execution

The concepts like macros, pre-processors etc...introduced the need for particular programs to prepare other programs for execution. In other words, if we are writing assembly language using English opcodes that needs to be converted to corresponding machine code. If we consider the above sample of

Add 0A,03

Someone has to convert this text 'Add' opcode to CC which is the binary equivalent of 11001100 for add instruction. The programs which are doing this conversion is called Assembler.

Still the assmebly language has instrcutions which can be directly mapped to an instruction which machine support. ie we have to read the manual of processor chip to know what are the instructions it supports.

High level languages

One to one relation between assembly language instruction to machine instruction was some kind of limitation and later people thought of more intuitive languages to program. A more human readable approach where instructions in program doesn't needs to have one to one relation to the machine code. Like assemblers, the program can be converted to machine language before execution. When converting, one instruction in this language can be converted as one more more machine instructions.

Yes the high level languages are born. Excellent example is C. We write in high level more human readable format and converted / compiled to machine instructions before execution.

This produced the concept of loops, functions variable types etc...Earlier it was all just bits and bytes with a jump instruction.

Internally loops might be using jump instructions, but to the developer, the details of machine was hidden. This helped more and more people to become developers. The don't need to how the machine works in the chip level or what is voltage or binary but still able to write programs.

Summary - unmanaged world

We can summarize this as a model where we prepare machine instructions either writing directly, or converting / compiling assembly or high level languages. Once it is ready just start execution. There is no one to manage its the machine and it just executes our code. 

Pros

  • Talks directly to the machine. Able to leverage full power as there is no additional overhead

Cons

  • Needs comparatively high skill
  • Development is time consuming as there are less reusable things and abstractions.
  • Needs to worry about many things such as memory allocation security etc...
    • Security here refers to access data from concurrently running program in case there is no operating system level process separation.
  • The machine instructions vary by the macnufactuer of the chip. The instructions supported by Intel chip may not be available in the chip produced by AMD and viceversa. So the developer need to compile their program multiple times to produce the executable for different chips. Also the instructions may vary by the 32 bit and 64 bit.

Managed world

Normally when people say managed, they refer to the technologies such as JVM or CLR based execution where there is a program which runs our program. To be more specific,
  • Developer write the programs in any of the programming language supported.
  • The compilation produces an intermediate code / byte code which the hardware/machine cannot understand .
  • There will be another program (JVM / CLR) which is in machine code, reads intermediate code  produced by developer and execute instructions one by one.
  • This executor program acts like a hardware machine which can understand a specific set of instructions.

So what is virtual machine?

Under the hood its the same machine instructions which are executed by the processor chip. But it is hidden from an end programmer such as a .Net / Java developer. Developers see only the instructions supported by intermediate / byte code as the machine instructions ie a machine which is not there physically. So they target their code written in high level language to the byte code / intermediate code which is understood by the executor program / ie a virtual machine. In .Net world its called as CLR and in Java its JVM. Executor program reads it and carry out the task by giving required machine instructions to the chip. 

The executor program need to be compiled for different chips because it is in the machine language. But that needs to be done by less development teams such as the JVM and CLR. The rest of the development world don't need to worry about compiling their code against different types of chips. So more development teams take the route of managed world.

Since the executor program is reading the developers program to execute, it can easily enforce so many rules and regulations to manage the execution. Some limits the developers capabilities and example are the lack of pointers. Some reduces the overhead of developers and increase productivity. Examples are the memory management (garbage collection), standard libraries. Standard libraries, even we had in unmanaged world as well.

If the chip manufactures were having a worldwide standardization consortium and they produced chips which supports same instructions the managed world might not have been invented.

Pros

  • Portability of intermedite code makes the deployement easy
  • The virtual machine can enforce rules
  • Multiple languages can be compiled to the intermediate code if there are compilers.
  • The above helps to refer an internediate language library written one language by another language.

Cons

  • Little overhead on converting the intermediate code to machine code during runtime,
  • Lack of features such as pointers and limits developer from talking to the bare machine though it can be worked around.
  • Delays the usage of new hardware features till that is supported by the virtual machine. eg: Parallel instructions in new processors

Is Operating System a virtual machine?

If we are writing windows programs we feel that OS is an virtual machine as we are targeting the Windows APIs. Also when we look at the process boundaries and limited access to memory, we can see OS as virtual machine which kind of hides the hardware. But since our programs are compiled to machine language, OS is not truly a virtual machine.

Reference

http://c2.com/cgi/wiki?VirtualMachine

Tuesday, August 2, 2016

Made JoymonOnline.in responsive without bootstrap

Background

Now a days 'responsive web site' is not an separate requirement. Whatever site we are developing, it must be responsive. But it was not the case with my personal site www.JoymonOnline.in . It was developed long ago when there were not much mobile users. It still uses ASP.Net using Web Forms and there are my own reasons to do so which is explained in one of previous post.

It was difficult to keep my personal site as desktop only. Whenever the url is shared people immediately open in their mobile and looks like is this really belongs to an Application Architect who blogs about JavaScript, HTML5, AngularJS etc...Soon the decision to 'make JoymonOnline.in responsive' has been taken as one of the 2016 goal.

Analysis

The biggest decision was whether to move to ASP.Net MVC or AngularJS along with this effort. Another factor was whether to use any library or framework for making site responsive such as bootstrap. Now a days most of the app including enterprise apps are using bootstrap to make the site responsive.
Since the earlier experience with third party libraries were not good, the decision was to be brave and do it by knowing what is meant by making a HTML page ersponsive instead of just following Boostrap's guidelines. Another decision factor was this is one of opportunity I will be getting to make site responsive without bootstrap. In my day job, Bootstrap seems the default.

Though we have to do from scratch which may take some time to settle down its worth doing atleast one site responsive without Bootstrap to know the basics. Then its easy to approach Bootstrap.

Responsive site without bootstrap

As everybody knows, the secret is media queries in CSS3. I could get a nice article explaining how to make the site responsive in simple steps without Bootstrap. Just followed that and the site became responsive in 2 days.

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Responsive Fonts / Typography

This is still a to do item. Though currently font size is not changing its readable in small devices, There are some good articles in internet which explains how this can be done. Its better to follow modular scale if there is not much design background or we are not sure how to decide the font sizes.

Testing for responsive

There are many sites to validate our site for its performance, code quality etc... But I didn't see much automated sites for testing responsiveness of web sites.

There are some sites which loads our site side by side in different device sizes which helps us to understand how our site looks in devices. But I would recommend the F12 browser tools for testing.

http://responsivedesignchecker.com/joymononline.azurewebsites.net
http://mattkersley.com/responsive/

Let me know if you find any bugs related to responsiveness in my site www.joymononline.in

Tuesday, July 26, 2016

What is side effect of a function in programming?

Introduction

This articles explains what is side effect of function and advantages of avoiding side effects

Background

We all work with object oriented programming for years and our normal thinking goes to desinging application as similar to real world as much as possible. We use object oriented design principles to achieve the same. Shoud we really make everything object with its own class level properties? We are trying to investigate is there any better way to write code which is maintainable

What is side effect of a function

When we write a function / method in the first place, what is our intention? It does a job. It may or may not accept parameters. Sometimes it returns a value. That is the effect of the function invocation.
But there might be situations, that a function may start doing things which are not controlled by that  function. Look at the below code. 

//
// ES6 code which has a function with side effect.
//
class Calculator {
  constructor() {
    this.op = "add";
  }
  calculate(n1, n2) {
    if (this.op === "add") {
      this.op = "sub";
      return n1 + n2;
    } else {
      this.op = "add";
      return n1 - n2;
    }
  }
}


Here what is the effect? As consumers we call the calculate() the effect we are expecting is the calculated value. But what is happening here?

We get the calculated value. But in the mean time its doing something else on class level variable which we as consumers, don't expect.

It makes our next call gives different output for the same input values. Those are considered as side effect of the function. Side effect will be seen, if we look from the consumer's view.

Below is the code to invoke the function 3 times with same input.

var calc = new Calculator();
alert(calc.calculate(20, 12));
alert(calc.calculate(20, 12));
alert(calc.calculate(20, 12));

Drawbacks on functions with side effect

The functions with side effects make it difficult to reason about code. What is reasoning about code? If we simulate the working of code, it is little difficult as we need to remember the state too along with the steps. This makes it difficult to achieve development speed and often cause bugs as it is difficult to think about all the possibilities.

This again brings constraint on calling order especially when there are multiple threads using same object to call the methods. When those kind of scenarios occur, it would be difficult to reproduce the bug at the developer end. Normally when developers encounter these types of thread issues, they simply put a lock around critical section. That simply brings us the effect of old single core processors. Our program will not be able to take advantage of multi cores if we just put locks in our code as it make the threads wait for each other. This may lead to deadlocks as well.

What else brings side effect to a function

Not only changing the global state is considered side effect. Whatever we are doing to the state of outside world is considered side effects. Consider the modified code.

// ES6 code which has a function with side effect. It doen't alter class level variable.
class MyCalculator {
  calculate(n1, n2, op) {
    var result;
    if (op === "add") {
      result = n1 + n2;
    } else {
      result = n1 - n2;
    }
    console.log("success");
    return result;
  }
}

This seems like side effect free. But if we look at the logging code, we can see its changing the outer world. So has side effect. If somebody has run the below code before invoking above method, only alternate calls will succeed.

// Redirect the console.log
var shouldSuccess = true;
console.realLog=console.log;
console.log = function(msg) {
  if (shouldSuccess) {
    shouldSuccess = !shouldSuccess;
    console.realLog(msg);
  } else {
    shouldSuccess = !shouldSuccess;
    throw "I am tired!!"
  }
};

In the real scenarios, there might be situations similar to this and that will cause the function fail inconsistently.

Can we write everything without side effects

The world is stateful. Its not possible to write every method in production code to be side effect free. But we should try to minimize the side effect as much as possible. Especially when we are writing sequential algorithms, transformations etc...Also we can we immutable objects to avoid risks.

Points of Interest

There are concepts like pure functions, idem potent functions which are related to side effects. The function programming concept too trying to solve the side effects to an extent.

Tuesday, July 19, 2016

Communication between WPF Windows App & HTML Page hosted in WebBrowser control

Context

This can be considered as a continuation of one old post in this same blog. In that post we can see the technique to establish communication between HTML Page inside WebBrowser controls and and .Net application. In this post we are going to see the approach in detail. Code is available for download and is self explanatory.

Technical details


  • For WPF to JS communication
    • WebBrowser control has a method called InvokeScript.
    • This can be used to invoke any JavaScript function present in the rendered web page and pass parameters.
  • For Web page/JS to WPF .Net communication
    • WebBrowser has a property called ObjectForScripting which will be available in JS as window.external
    • If we set an object to ObjectForScripting property, that .Net object will be available in JS and from JS we can call any method on that object which will in turn call the .Net code.

What’s not done

This just proves the technique. Performance testing is not part of this.

Source code

  • The HTML page is inside the WPF.
  • WebBrowser loads the HTML page by using pack: uri syntax.
  • WebBrowser's ObjectForScripting Object is set when the window loads
  • A class which is comvisible is used for the above property
  • From JavaScript the SetAValue() is called to pass data from JS to WPF
  • For WPF to JS myWebOC.InvokeScript() is invoked
  • In JS the data is received in the setSomeText() function.
Download from the below url.

Tuesday, July 12, 2016

Using GitHub API to show our projects in personal sites or blog

Introduction

There are still debates going on regarding whether Github is a developer's resume or not. Whatever happens it is good to show the list of GitHub projects in a software engineer's personal site to whom he/she is contributing to.

Integrating Github API to www.JoymonOnline.in

Below is the diagram shows how I have integrated GitHub into my personal site.

www.JoymonOnline.in is a web site

Most of us know the difference between web site and web app. Here in this case we are dealing with a web site where the HTML is generated at server side and send to client. Client browser is supposed to just render the markup given by web server.

How the GitHub API looks like

Its just a URL. More specifically ReST urls which points to resources. Below is one example API url. This gives details about the repository joyful-visualstudio. Just copy paste the url into browser address bar and hit enter. The data will be displayed.

How to call GitHub API

Coming to technical programming aspects. Here in this site the API is called using WebClient class. This is a simple class in .Net framework which can be used to deal with web sites and web APIs.

Authentication / Security

If the request is not authenticated, we can perform read operations. But there is a limit in such calls. That limit is based on the IP address from where the call originates. In this case the call originates from ASP.Net code of http://joymononline.in web site. The site is hosted in shared hosting plan. It means there will be other sites in same server machine. They may call GitHub without authentication and from GitHub point all originate from same IP and it limits.

To get rid of that problem we can authenticate the requests with token. The simple way is to obtain the token from GitHub and keep in the site and transfer via header. The header name used is 'Authorization'. Now the limit is per token, its high limit and no need to worry about shared hosting.

Securing API token

Make sure the token is not public. In JoymonOnline where source is hosted in public repository in Github itself, token is not visible. Its inserted during the deployment time from AppVeyor CI solution.

.Net Client SDK

GitHub also has client sdk to make the interaction easier. If we are using client SDK we don't need to worry about low level http related WebClient class.