Tuesday, July 26, 2016

What is side effect of a function in programming?


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


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;
    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.log = function(msg) {
  if (shouldSuccess) {
    shouldSuccess = !shouldSuccess;
  } 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


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


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.

Tuesday, July 5, 2016

Published .Net Orchestration library to nuget via AppVeyor


There is no need to explain about the importance of nuget package ecosystem to .Net development community. Now a days its very difficult to consider someone as .Net if he don't have a nuget package. Of course now I can tell because I just published my first nuget package :)

Its the same Orchestration library I have hosted some months back.

Standard way

How to package our .Net library(.dll or scripts) as nuget package and publish to www.nuget.org is documented very clearly in nuget web site. Link below.


So I followed the same guidelines and published it. All manual and using Visual Studio and command line tool nuget.exe. Its available in below location.


CI & CD way

Manually publishing every time from our development machine is really boring task. Its highly repetitive. Also how to ensure that the the library actually works after each change? If we cannot solve our this problem, how can we solve other's problem.

As everybody knows, the answer to this problem is continuous integration. If that is hosted its too easy. If its free too, don't ask any more questions, just do it.

As we have seen in some of previous posts, AppVeyor is the best place for doing free hosted CI & CD for .Net projects at this time. I will highly recommend than Microsoft's Visual Studio Online service which gives some free build minutes. Infact Microsoft itself using AppVeyor to do their integration.

Below are the official AppVeyor documentation about how to setup CI for nuget projects.


Compilation of the project and running unit tests are trivial. There won't be usually any issues at all. But we want to automatically create the nuget package and increment it's version, we may need to think twice.

There are basically 2 options. The first option is kind of obsolete now.
  1. Explicitly run our own script to auto increment the nupkg file version and fire the nuget pack command to create the .nupkg file
    1. http://www.codeproject.com/Tips/806257/Automating-NuGet-Package-Creation-using-AppVeyor
    2. https://code.msdn.microsoft.com/Create-and-Push-NuGet-c6072402
  2. Use AppVeyor's out of the box settings to auto increment the version.
    1. Enable Assembly patching in AppVeyor
    2. Use $version$ token in version property inside .nuspec file
    3. Enable the nuget build in AppVeyor to automatically package the file.
We can take the second approach which is out of the box which don't.require any coding. Remember less code less defects!!!. Once this is working file we can see the .nupkg file in the build artifacts. From there we can push via AppVeyor itself. We need to setup our nuget API key either in appveyor.yml (encrypted) or in the web interface.

I was in little trouble in the beginning to do things without custom scripts and contacted their support. They helped immediately. I really appreciate it.