Not everyone likes JavaScript, especially those from a more traditional OOP (Object Oriented Programming) background. A high-level and dynamic programming language, JavaScript is a core engine of Web content; it’s also object-based, and uses prototypes in lieu of classes for inheritance—a point of significant irritation to some developers who were raised on other object-based languages that leverage classes. Although classes have been added in ECMAScript (ES6), the evolving language specification on which JavaScript is standardized, old habits die rather hard when it comes to prototyping, in which you create a prototype object, then create copies. Before ES6, JavaScript’s big problem was difficulty in maintaining very large applications. In order to get around this, many developers have coded in an object-oriented language that uses classes, and then ported the code to JavaScript. It’s simply easier to maintain large applications with decent class hierarchies; in addition, many programmers also don’t properly use
prototypal inheritance. In order to carry out this porting, you need a programming language that can be transpiled to JavaScript. Programs that do this are known as
transpilers. The compiler can do better checking with classes at compile time, rather than run-time copying objects; the code is also both safer and faster. Ten years ago, Google created the first transpiler by letting you compile Java to JavaScript using the
Google Web Toolkit (GWT). It has been used in many projects at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, and Blogger. Java is a bit of a heavy language, though, so Google’s Dart language was created five years ago. And that’s not the only language available in this scenario: GitHub’s list of languages that compile to JavaScript
via transpilers is rather extensive; a lot of developers clearly want to handle JavaScript on their own terms.
Emscriptem is one well-known transpiler that takes C/C++ and compiles it into high-speed JavaScript. If you don’t believe it can run fast,
check out the demos. Bridge.NET wasn't the first C#-to-JavaScript transpiler—there are others—but it has the advantage of having been professionally developed by full-time programmers. It’s a platform worth exploring in detail for anyone who works with both C# and JavaScript, and perhaps wants to make their programming endeavours a little more streamlined. Having been written in C#, Bridge.NET transpiles faster than most other transpilers (except those written in C/C++ such as Emscriptem). (There are a couple of recent alternatives in that Github list that also transpile C# to JavaScript. These use
Roslyn, the Microsoft compiler technology that underpins C# 6 and was introduced in Visual Studio 2015.
WootzJs is open-source and focused on single-page applications, while
DuoCode is commercial, and must be purchased after one free year.)
Bridge.NET
Released in March 2015,
Bridge.net is now at version 1.12. It's available as a 5 MB download that installs in Visual Studio 2015, including the free Community edition; the C# source code is also available on Github. After installing it, you’ll see a new project type available: a Bridge.NET Class Library. Creating a demo project is the same as any Visual C# project, except there's no program.cs created and you can't run the project directly. The Main() function is in a file App.cs, as shown below. The demo shows a button that, when clicked, outputs success:
using System;
using Bridge.Html5;
namespace ClassLibrary1
{
public class App
{
public static void Main()
{
// Create a new Button
var button = new HTMLButtonElement
{
InnerHTML = "Click Me",
OnClick = (ev) =>
{
// When Button is clicked,
// the Bridge Console should open.
Console.WriteLine("Success!");
}
};
// Add the Button to the page
Document.Body.AppendChild(button);
}
}
}
After compilation, various JavaScript files are created and a Demo.html file is opened in a browser. It's not an executable, so there's nothing to load other than a website.
It's Online, Too
The online version (
Deck.net) is perhaps the better version for newbies. The site provides five examples, or you can type in your own C# project. The left vertical window holds the source code, the middle has the JavaScript generated by the Bridge.NET compiler, and the third window is the html file loaded into your browser. There's no need to run anything; it's done automatically, and you just click on the controls to see how the page works. Taking the example from above, the generated JavaScript looks like this:
Bridge.assembly("Demo", function ($asm, globals) {
"use strict";
Bridge.define("ClassLibrary1.App", {
$main: function () {
// Create a new Button
var button = Bridge.merge(document.createElement('button'), {
innerHTML: "Click Me",
onclick: $_.ClassLibrary1.App.f1
} );
// Add the Button to the page
document.body.appendChild(button);
}
});
var $_ = {};
Bridge.ns("ClassLibrary1.App", $_);
Bridge.apply($_.ClassLibrary1.App, {
f1: function (ev) {
// When Button is clicked,
// the Bridge Console should open.
Bridge.Console.log("Success!");
}
});
});
There's also a TypeScript tab in the middle window, which looks like boilerplate for the project. The online version calls itself a C# to JavaScript Compiler Playground, and it's more suited to trying things out than writing anything larger. It only uses one source code file, not the usual bunch you get with C# projects. For that, you need Visual C#.
Conclusions
Bridge.NET is impressive; it works as stated and appears very robust. For an open-source project it's pretty slick. Also, the online browser version is fun because you get the generated JavaScript back almost instantly. The only things I feel are lacking are a lot more examples and more detailed documentation. Also, while this aimed at C# developers, prior knowledge of JavaScript is probably a necessity if you want things to move efficiently. That lack of documentation means it’s easy to get started with the platform, but more difficult to proceed afterwards. For example, how do I create multiple page applications, or write code to develop secure sites (TLS)? If you’re familiar with C# and HTTP/HTML/JavaScript then you might be able to figure these out but if you aren’t I think it will be a steep learning curve.
