Tuesday, May 24, 2016

Embed Google V8 JavaScript engine in .Net application

Background

JavaScript is everywhere whether we accept or not. Now a days the trend in new languages is to transpile to JavaScript. That's the way they don't need to worry about runtime. Thanks to fast JavaScript engines such as V8. People are sure once their code is in JavaScript, the engines will run it in the highest speed, even it works in server side with the help if NodeJS technology. For client side desktop development also we can rely on JavaScript using the Electron technology. In all these places JavaScript engines power the execution.

So what about DSLs? Why can't we write our DSL in JavaScript and execute via JavaScript engines? The only constraint here is from our technology / runtime we should be able to send and receive objects to and from JavaScript engine. In simple terms, in our C#.Net application there is a salary calculation which is dynamic and needs to be customizable by user. If we can pass the Employee object to and from JavaScript engine, we can use JavaScript as DSL for our app.

The problem narrows down to
  • Starting JavaScript engine from our technology of choice. Send the JavaScript code to the engine.
  • Passing objects from our application JS engine to manipulate.
Since JS is dynamic and not strictly typed, we can pass any string as program into the engine. Engine will fail the code only during the execution. In this post, we can see how such an interaction can be done between .Net and Chrome V8 JavaScript engine.

Selecting Chrome V8 Engine

There are many implementations out there for Chrome V8 engine. Most of those are compatible directly with native code. From .Net its little difficult to interface with those.

We are going to use one out there named JavaScriptDotNet.

Setting up the environment

Download the binaries from the below repository. They moved the code to Github. But unfortunately the ready made binaries are not there.

http://javascriptdotnet.codeplex.com/

Create our .Net project and refer corresponding binaries. There are .Net 3.5 & 4.0 folders and each folder has 32 and 64 bit versions. Since Chrome is a native unmanaged library and JavaScriptDotNet only provides a managed wrapper over that, we need to be careful in selecting which version. The assembly we need to refer to our .Net project is Noesis.JavaScript.The other dlls should be present in the \bin or running directly of our ,Net application.

How to run JavaScript

Its simple as creating JavaScriptContext and calling Run().

using (JavascriptContext context = new JavascriptContext())
{
    var result = context.Run("3+2");
    MessageBox.Show(result.ToString());
}

How to pass .Net objects to JavaScript and vice versa

Now lets see how can we pass .Net objects into JavaScript. If we can't pass the objects there is no meaning in embedding JavaScript engine inside .Net

Lets take one simple Employee class
public class Employee : INotifyPropertyChanged
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Basic { get; set; }
    public double HRA { get; set; }
}
Employee emp = new Employee() {Basic=100, Name = "Joy" };
Object is also created with one property 'Basic' set to 100. Now lets see what the below code will do on this object.
using (JavascriptContext context = new JavascriptContext())
{
    // Setting the externals parameters to the context
    context.SetParameter("emp", emp, SetParameterOptions.RejectUnknownProperties);
    try
    {
        // Running the script
        context.Run("emp.Total = emp.Basic * 2; emp.HRA = emp.Basic / 2;");
        MessageBox.Show(emp.HRA.ToString());
    }
    catch (Exception ex)
    {
        MessageBox.Show("Error");
    }
}

It will show 50 as the emp.HRA is calculated when JavaScript engine run. Yes now we have embedded JavaScript engine in .Net and JavaScript can now be used as DSL in our C# application.

http://stackoverflow.com/questions/172753/embedding-javascript-engine-into-net

Tuesday, May 17, 2016

TypeScripting AngularJS 1.x - using $http

This is a continuation of older posts in TypeScripting AngularJS 1.x series. Here lets see, how we can use the $http service in typed way using TypeScript.

The API

The main TypeScript type, we need to understand here, is the ng.IHttpService. This is the equivalent type of $http object. This comes via the AngularJS typedefinition file which can be downloaded from nuget. The another type is the ng.IHttpPromiseCallbackArg<T>. This is the container which is returned via the Then() method.

Sample

Before coding the client side, lets see the server side code which is going to be called from browser.
public class HomeController : Controller
{
    public ActionResult GetCountryMetaData(string id)
    {
        RegionInfo rInfo = new RegionInfo(id);
        return Json(new
        {
            DisplayName = rInfo.DisplayName,
            Currency = rInfo.CurrencyEnglishName,
            CurrencySymbol=rInfo.CurrencySymbol
        },JsonRequestBehavior.AllowGet);
    }
}

This action method takes id as string and return the country / region details. Anonymous return type has 3 properties which are all strings.
If we host this inside IIS using web application named testapi, we can invoke the API by browsing the below url.

http://localhost/testapi/home/getcountrymetadata/nz
Result will be - 
{"DisplayName":"New Zealand","Currency":"New Zealand Dollar","CurrencySymbol":"$"}

Let's see how this can be invoked from TypeScript without using 'Any' type.
export class CountryController {
        testprop: string;
        emp: Country;
        http: ng.IHttpService;
        Countries: Array<Country> = new Array<Country>();
 
        constructor($scope: any,
            $http: ng.IHttpService,
            this.http = $http;
            $scope.Countries = this.Countries;
        }
        getForChina() {
            this.http
                .get('http://localhost/testapi/home/getcountrymetadata/cn')
                .then((result: ng.IHttpPromiseCallbackArg<Country>) => {
                    this.Countries.push(result.data);
                });
        }
}
class Country {
    DisplayName: string;
    Currency: string;
    CurrencySymbol: string;
    constructor() {
 
    }
}

Casting in TypeScript

The first confusion will happen on the casting of http result to Country object. Where we are telling the return type is Country in TypeScript?

Here is the difference between the real type safe languages such as C# / Java and TypeScript. In TypeScript since its finally running as JavaScript, we can accept values in any type, if that looks similar to the incoming object. Here the output of web request has properties which are matching to properties of Country class so those are just copied. If there are no matching properties still this code compiles but at run-time the properties of result object will be undefined. No exception in any case.

We can make it more TypeSafe by adding generic type to the get method.
this.http
    .get<Country>('http://localhost/testapi/home/getcountrymetadata/cn')
    .then((result: ng.IHttpPromiseCallbackArg<Country>) => {
                    this.Countries.push(result.data);
    });

Passing typed parameters to $http.get()

The get() accepts an optional ng.IRequestShortcutConfig object too. Lets see how that can be passed into the method in type safe way.

var config: ng.IRequestShortcutConfig = {};
            config.cache = true;
            this.http
                .get<Country>('http://localhost/testapi/home/getcountrymetadata/cn',config)
                .then((result: ng.IHttpPromiseCallbackArg<Country>) => {
                    this.Countries.push(result.data);
                });

Interesting thing here in TypeScript is, we don't need to create the implementation class to use the interface. This again is feasible, since it runs in JavaScript engine where there is no type safety. After the compilation everything is JavaScript. We know that, there is nothing called interface in JavaScript runtime.

The {} creates an object just like in JavaScript. After that we can set required properties. Since we have declared the variable as ng.IRequestShortcutConfig, we will get intellisense on the config object. We don't need to remember all the properties, which we need to do in pure JavaScript programming.

Here config.cache.= true tells the $http, to cache the requests using Angular JS cache factory.

Happy TypeScripting...

Tuesday, May 10, 2016

TypeScript - Reflection ie create object from its class name in string

Reflection

Reflection is a mechanism to talk to the metadata of classes or other programming constructs in programming language and do things without coding it. For example to listing out all the methods of a class where the class name is in string, invoking a method name by accepting the method name from user. Also creating an object without new keyword etc... Refer what says wiki on reflection for more details.

Creating object by its name not using new

In this post, we are going to see how we can create an object by knowing its name in a string variable. Since the value/name of class can be changed runtime, we cannot use new keyword. If we want we can use a switch construct based on the value in the string and have new in the case blocks. But that will work only when all the possible class names are known in advance. In a plugin model where anyone can add implemented classes at a later point, this switch mechanism will not work.

This is the class, whose object we are going to create.
module Company.App.Module {
    export class Greeter {
        constructor() {
        }
        greet(message: string) {
            return "Hello, " + message;
        }
    }
}
Below is the con
import Greeter = Company.App.Module.Greeter;
var obj: any = ObjectFactory.create("Company.App.Module.Greeter");
var greeter: Greeter = <Greeter>obj;
alert(greeter.greet("Joy"));
Look at the argument to ObjectFactory.create(). Its a string. So the question is how do we write the create() function.

Forbidden,dangerous JavaScript method eval()

For some reason, there are some constructs in programming language which are taught to be dangerous and should not use. eval() is one among that. But in this scenario, we are going to use eval() to do our job easier.
class ObjectFactory {
    static create(className: string) {
        var obj;
        eval("obj=new " + className + "()");
        return obj;
    }
}
To be frank eval() is not a feature of TypeScript. Its there in JavaScript for long and TypeScript cannot take the credit for reflection. Since its demonstrated in TypeScript, the title of this post contains TypeScript.

Security warning

If the className is accepted from user, there are chances for attack. If they enter a string like below and we use that string as is to call this method, it will just execute malicious code.

String(); (function malicionsFunction(){//malicious code})();new String

Tuesday, May 3, 2016

TypeScripting AngularJS 1.x - Define module - improvements for big enterprise apps

Improvements for enterprise apps

We have see that there is a typed way to define modules and setup the Angular constructs such as services, controllers etc...This works great in small apps. But there is a problem, if we are developing an big enterprise app with many developers adding new controllers, directives frequently. In that situation, everybody will be competing for the one app / module file.

Below can be our aim when designing TypeScript Angular module class.
  • No need to repeat the ng-app name in every file.
  • There should be one central place for knowing what are the components registered.
  • Every angular component registered in the system should be testable using dependency injection.

How to fix it?

What if we expose a method in the Module to registerController, Directive etc...Those methods can be called by each file which contains different Angular components to register themselves? The object of Module can be exposed via singleton. Lets see the code below for the Angular module wrapper class.

CountryModule.ts

module CountryApplication {
    "use strict";
    export class CountryModule {
        //Do not expose the property as it is not expected to change from outside.
        private static currentCountryModule: CountryModule;
        public static getInstance(): CountryModule {
            return CountryModule.currentCountryModule;
        }
        private app: ng.IModule;
 
        constructor() {
            this.app = angular.module("CountryApp", []);
            CountryModule.currentCountryModule = this;
        }
        /** Acts as central place for registration. But somebody adds new controller they don't need to edit this file.
        */
        registerService(name: string, serviceConstructor: Function): void {
            this.app.service(name, serviceConstructor);
        }
        registerController(name: string, controllerConstructor: Function): void {
            this.app.controller(name, controllerConstructor);
        }
    }
    var hrApp: CountryModule = new CountryModule();
}

The code is self explanatory. We are just wrapping the actual Angular application inside CoutryModule class. Lets see how services can register to the ng application.

CountryMetadataService.ts

module CountryApplication {
    export class CountryMetaDataService {
        employees: Array<Country> = new Array<Country>(
            { id: 1, DisplayName: "India", Currency: "Indian Rupee", CurrencySymbol: "R" },
            { id: 2, DisplayName: "United States", Currency: "Dollar", CurrencySymbol: "$" }
        );
        GetAll(): Array<Country> {
            return this.employees;
        }
    }
    // Registering with angular app name in every file is difficult to maintain.
    // angular.module('CountryApp').service("CountryMetaDataService", CountryMetaDataService);
    CountryModule.getInstance().registerService("CountryMetaDataService", CountryMetaDataService);
}

An end to end template can be found in Github.com. This will get more scenarios on how to use TypeScript in AngularJS applications in TypeScript way.

Welcome to enterprise web app development.

Tuesday, April 26, 2016

Web App or Web Site ie Generating HTML at server v/s client

Most of the tech people know what is what and when to use what. But there are many developers out there in delivery companies who don't know what is the difference and they all call same thing web site sometimes and web app otherwise. This is just to consolidate my understanding about the difference between these 2

Web Site

This is collection of HTML web pages linked together. The pages may be residing as .html page in the web server or web server generates the pages based on the request. For generation of html pages dynamically server side technologies uses html templates which contains tokens. The tokens will get replaced based on the incoming request. Sometimes it reads database for the token value or calls another service for the same. The driving factor is the incoming request.

There were islands of more interactive components using embedding technologies such as Flash, Silverlight or native ActiveX components. JavaScript was used mainly to do simple nice to have things such as validation. The aim was even if the JavaScript is disabled in the browser the app should function properly.

These web sites were catering application needs as well. Eg: we can develop a Employee payroll application using this model.

Technologies
  • PHP
  • ASP.Net

Pros

  1. The site will function even if the JavaScript is disabled in browser
  2. Easy to develop with little js as js was behaving differently in different browsers

Cons

  1. Web Servers have to fetch data from database and mix it with html templates to produce final html which is directly viewable in browser. This overloads the web servers.

Web App

Here mode of accessing the application doesn't change from the end user side. They have to navigate to a provided URL. The content seen in browser is still html. But the difference is, the html template and data are downloaded separately from the server and the mixing happens in the browser. Sometimes if only needs data and instead of html templates it can use JavaScript programs to generate the viewing html.

Here JavaScript plays the key role. If the browser don't have JavaScript support, the application will not function.

Gmail Web interface is a classic example of a Web App.

Technologies

The same server technologies can be used. Just tell them we need only data. Preferably in JSON format. Don't mix with html template as we know how to display your data in browser.

There are technologies such as ASP.Net Web API which are more tailored to web apps.

At client side
  • JavaScript - This is essential
  • Client side frameworks such as AngularJS, knockout js, Bootstrap etc...

Pros

  • Web Servers act as just data provider. Their throughput increases. ie with same no of servers we will be able to serve more users
  • Easy to handle the browser specific formatting such as different view for mobile, tablet etc...Other words responsive UI.
  • Since the server only gives data, it can be consumed by desktop and native mobile apps.

Cons

  • Development team needs to have strong understanding of JavaScript. JavaScript is the tricky language as it contains unwanted things from the beginning. Also this is the language which has a book explaining good parts
    • There is a new trend of transpilation to get rid of this language problem. We can write in different language and then converted to JavaScript for execution.
  • Client side technologies are not stabilized yet. Everyday there are new frameworks getting introduced.

How to select?

We should always choose right technology to right solution. Most of today's apps demand Web App methodology. But there are scenarios where we can use WebSites. For example, simple sites created for personal / business profiles can follow web site methodology. This is because there are only 5-10 pages expected and those can be generated by web servers quickly.

Conclusion

WebSites and Web Apps differ mainly on where the html is generated. There is no change happened to browser during this shift except they increased the speed of JavaScript engine. HTML is HTML always. Most of today's client side machines are capable of generating html in their browsers without any performance lag. Choose the approach appropriately especially when choosing client side JavaScript framework.

References


Tuesday, April 19, 2016

Deserialize JSON string to C# dynamic type

Introduction

This is the age of APIs in computer science. To be more specific web APIs. Don't get confused with the specific technology of .Net Web API. Any methods or resources which are exposed via URL in a structure is an API. From our apps we can call them to do achieve the functionality.

Resources are now a days exposed via ReST protocol and the format is JSON. It works well with JavaScript. But when coming to .Net world, its little difficult to keep the JSON as is in our app. Often we need to convert those resources into entity classes. Creating entity class for each API response is a tricky tasks. It puts more time to complete the API integration tasks. Often after using one API for months we may need to switch to another API providing same service. At that time we need to rewrite it. Creating classes to get exact replica of response is really difficult to manage.

But its always suggested to have entity classes which are for our application regardless of the API we are using. As soon as we got the response from the web API, we should convert the response to our model and that should go on from that point on wards.

Dynamic object to hold JSON

In the beginning people were programming without type safety. Then the strong typed languages were introduced and everybody went behind that. Now its the time everybody again going to dynamic typing. May be its because of JavaScript's success.

VB always gave us the option to have dynamic typing. But in C# its introduced with .Net 4.0. The dynamic keyword is introduced to denote the variables which are not type safe. In other words a type which we don't know at compile time, what it is going to contain. Kind of key value store / dictionary.

Enough theory. Below is the code to convert a GitHub API response. The API url is 

private Project GetProjectFromJSON(string json)
{
    JavaScriptSerializer ser = new JavaScriptSerializer();
    dynamic projectNode = ser.Deserialize<dynamic>(json);
    return new Project()
    {
        Name = projectNode["name"],
        Description = projectNode["description"],
        SourceUrl = projectNode["html_url"],
        Url = projectNode["homepage"]
    };
}

JavaScriptSerializer is a .Net framework class. We don't need to add any dependency to third parties. There are other .Net libraries which are helping to convert JSON to dynamic object but those will add unwanted dependencies. Hope this is self explanatory.

Important thing to note here is the usage of dynamic. Do not ever return dynamic to outer world. This method should hide the complexities of getting the project from GitHub. The consumers of this method then don't need to change when the logic of GitHub API interaction changes.

More details about usage in real application can be seen in this file.

Tuesday, April 12, 2016

Caution JavaScript Ahead - atob() and btoa() to deal with base64 encoding

Setting the ground

JavaScript is always tricky. Because it has many garbage with it, its dynamic etc...This post aims towards how to work with base64 encoding in JavaScript.

History

In JavaScript if we want to work with base64 the standard methods are 
  • atob() - Used to decdode
  • btoa() - Used to encode to base64
It seems there are not much about this naming. Some people says it stands for Binary To ASCII when encoding and vice versa. Another thought is it was following C function naming. We can also think that when this was developed the aim was to write small JavaScript programs. If the programs are big it will take more time to transmit from the server to client. Language designers were concerned about that.

Usage

Simple

It's just a function which can be called normally.

var output=btoa("Joy");

Output
Sm95

var output=btoa("Sm95");

Output
Joy

Unicode

The above works well if the input is not unicode. If the input is unicode there will be an exception and the message goes as follows
In Chrome

InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

In IE (11)
InvalidCharacterError

Base64 with unicode

The fix to this problem goes as follows for encoding


var encoded = btoa(unescape(encodeURIComponent("ജോയ് മോൻ")));


Output

4LSc4LWL4LSv4LWNIOC0ruC1i+C1uw==


To decode use the below


decoded = decodeURIComponent(escape(atob("4LSc4LWL4LSv4LWNIOC0ruC1i+C1uw==")));

Output
ജോയ് മോൻ

Problem

The problem with this is same. It works differently in different browsers. If the encoding and decoding happens in same place, it works. But suppose if the server encodes the data and JavaScript gets it via Ajax,what will happen?

Ideally atob() should decode it and it does in Chrome and Firefox. But its not working in IE. Even in IE 11.

To be more precise the scenario is to decode the content coming from Github API. Below is a typical Github API url and it gets context in base64.

https://api.github.com/repos/joymon/joyful-visualstudio/readme

When we try to decode the base64 using atob() it will work well in Chrome and Firefox. But throw the the same error message in IE 11.

Solution - Use custom base64 library

The solution to this is to use a custom base64 library. Below is one url to such a library.


Refer this library in to the site and use below line to encode to base64

encoded = Base64.encode(inputText);

To decode

encoded = Base64.decode(encodedText);

Refer the source code of library to get more understanding of how its done.

Sample

Sample code is in jsFiddle. Url below
http://jsfiddle.net/joygeorgek/tv3b7feL/10/