Thinking Aloud

Today, no big application goes through programming language monopoly. For some time, in recent past, C# programmers were mainly challenged with C++ native or COM interop. With Javascript becoming one of the most popular languages for both on UI and server side ( thanks to Angular JS & NodeJS respectively ), every C# developer will be facing C#-Javascript interop sooner or later.

I am sure there are more than one javascript library to achieve C# to javascript interop, but in this post I will focus on ClearScript mainly because :

• It has Microsoft support ( officially or unofficially )
• Small but active developer group contributing to CodePlex project.
• It has simple syntax and returns strongly typed objects to C#.

This post will provide a basic guidance on :

• Things you need before using ClearScript
• Things to do before using ClearScript
• Code to call javascript from C# and vice-versa

Pre-requisite :

Before we jump-in to code and start having fun with C# and JavaScript lets do some house keeping. Make sure we have the following in place:

• Windows 7 or higher OS
• Visual Studio 2012 or higher.
• Internet Connectivity.
• Willingness to try out.

Great! Now we are ready to get ClearScript and V8 engine. And yes, we are going to get the source code and build it on our own. ( Magic of open source in action now! )

 Be in self service mode:

1. Open your favorite browser and navigate to https://clearscript.codeplex.com/SourceControl/latest .

2. Download the latest source code by clicking on “download” link.

3. The download is a zip file. Extract the complete content in a directory ( e.g. C:\ClearScript ).

At this point you have ClearScript source code available within C:\ClearScript directory.

In the next steps we will be building the clearscript dlls which will be used in our C# application. ClearScript supports javascript via V8 and JScript. So lets get V8 engine now. To do this, install Subversion (http://subversion.apache.org/packages.html) and add it to your executable path. I recommend SlikSvn in the list.

Now you are just one step away before the magic begins.

Fire your visual studio developer command prompt and navigate to C:\ClearScript directory.

Run “V8Update.cmd Release” on command propmt. This command may take some time as it downloads around 2 GB of data from internet and builds V8 engine binaries.

Now we are ready to build ClearScript libraries. Open the ClearScript solution in Visual Studio.

NOTE: The first time you open the solution, Visual Studio may prompt you to upgrade one or more projects to the latest platform toolset or .NET Framework. Select “Cancel” or “Don’t Upgrade”.

Build the solution and we have all the binaries available at location – C:\ClearScript\bin\Debug .

 The Fun Begins:

If you have reached till here, I am sure you are serious about ClearScript. Boring things over, lets have some fun with C# and JavaScript now.

Lets write a simple C# code that will make a call in javascript file to call a HelloWorld function. This function will in turn call another method to print this message on console. At this time we will make C# hook in and actually process the console message in C# code. So this is what we are going to do :

C# [ call javascript HelloWorld] -> javascript [ call another javascript function SayHello] -> C# [ out put the message from SayHello ]

This will complete C# to javascript to C# call interop using ClearScript.

1. Create a C# console application in your visual studio.

2. Add a reference to clearscript.dll and clearscriptv8-32.dll you built in previous section.

3. Add a javascript file to your project ( with name HelloWorld.js ). This file contains the definition of ToCsharp and FromCSharp as follows:

//ToCSharp : The method SayHello will be overriden in C#.
var ToCSharp = {
SayHello : function (message) {
console.log(message);
}
}

//FromCSharp: The HelloWorld method is called from C#
var FromCSharp = {
HelloWorld: function () {
ToCSharp.SayHello("JavaScript says Hello to the C# world");
}
}

Our javascript content is ready. Lets C# next.

4. In programs.cs include section,  add :

using Microsoft.ClearScript.V8;

Lets create v8Engine in C# and initialize it with javascript content. in Main method add the following code:

//Create V8Engine
V8ScriptEngine _v8Engine = new V8ScriptEngine( V8ScriptEngineFlags.EnableDebugging);

string jsFilePath = @"..\..\HelloWorld.js";
string jsContents = File.ReadAllText(jsFilePath);

_v8Engine.Execute(jsContents);

At this point V8 engine is up and is loaded with contents of HelloWorld.js file. We can straight away make a call to FromCSharp.HelloWorld() function now, but since this function in-turn makes a call ToCSharp.SayHello, lets override the SayHello function and grab the console message in a C# object.

To override the SayHello function from javascript file, add the following in Main method:

//Any call to Console from javascript is handled by MyConsole object.
_v8Engine.AddHostObject("Console", new MyConsole());

//Override ToCSharp.SayHello function in javascript file.
string callBackScriptCode = @"ToCSharp.SayHello = function (message){
Console.WriteLine(message);
};";

_v8Engine.Execute(callBackScriptCode);

The above code tells simple thing to V8 engine : Any calls to ToCSharp.SayHello, please call this method I am overriding and any call on “Console” from javascript, please forward it to MyConsole class object registered with you. Simple!

So lets define how MyConsole class may look like in this scenario. Add a new class to you project with name MyConsole. Define the class as follows:

public class MyConsole
{
    public void WriteLine(string message)
    {
       Console.WriteLine(message);
    }
}

All set, now we are ready to make the call from c# to javascript. Add the following line to call FromCSharp.HelloWorld() function in javascript:

//C# to javascript call
_v8Engine.Script.FromCSharp.HelloWorld();

At the end your Main method in program.cs should look like like below:

static void Main(string[] args)
{
  //Create V8Engine
  V8ScriptEngine _v8Engine = new V8ScriptEngine( V8ScriptEngineFlags.EnableDebugging);

  string jsFilePath = @"..\..\HelloWorld.js";
  string jsContents = File.ReadAllText(jsFilePath);

  _v8Engine.Execute(jsContents);

  //Any call to Console from javascript is handled by MyConsole object.
  _v8Engine.AddHostObject("Console", new MyConsole());

  //Override ToCSharp.SayHello function in javascript file.
  string callBackScriptCode = @"ToCSharp.SayHello = function (message){
    Console.WriteLine(message);
  };";

  _v8Engine.Execute(callBackScriptCode);

  //C# to javascript call
  _v8Engine.Script.FromCSharp.HelloWorld();

}

Phewwww!!! That’s all we need. Build and run your project. You should see the following output on console:

Conclusion:

We have successfully built V8, clearscript libraries & a sample code to interop between C# and javascript using clearscript.

 

I have tried my best to keep the steps minimal and sufficient to get you going. Please provide you feedback/comments if you faced any issue or otherwise.

 

Coming Up Next : How to debug javascript and C# together?