April | 2015 | I learned it. I share it.

When the Microsoft Managed Languages team announced in December 2013, that they replaced the existing C# and Visual Basic compiler, and they use a new compiler to create the daily builds of the next version of Visual Studio, it became obvious to all developers, that something big is coming. The new tool, codename “Roslyn”, has far more capabilities than the previous csc.exe and vbc.exe, so it is not a coincidence that .NET Compiler Platform became its official name.

Roslyn is not only about converting our source code to an executable format, we already had a excellent tools for that for many years. The goal of Roslyn is to open the power of the compiler to developer and development environments (such as for Visual Studio), so this is a compiler-as-a-service solution.

Why do we need that? Compilers are very complicated, and during their execution they collect a huge amount of information about our source code:

It would be a huge mistake, if we would lock that information into a single tool, instead let other tools benefit from this knowledge. The compiler is our only tool that really understands our source code, as it obviously knows from every single character in our source code whether it is code, data, comment etc. Using this knowledge, we can build much better tools, for example many features of the Visual Studio 2015 would never exist without Roslyn.

Here you can see the Roslyn architecture (click for a larger image):

If you want to understand all little boxes feel free to visit the project home page, I just want to point out that you can find here everything from understanding the source code to generating the executable output, and because it is a platform, naturally you have API for everything.

The key item is the Syntax Tree highlighted with yellow, which is the inner representation of our source code, created by the Parser. The API for that is the Roslyn Syntax API, which allows you not only to analyze your source code from source code, but you can even change that on the fly. Let’s take this simple expression as an example:

Regex.Match("my text", @"\pXXX");

Roslyn builds the following syntax tree from that:

(I borrowed the example from the Use Roslyn to Write a Live Code Analyzer for Your API article of the MSDN Magazine, which shows you how to build a Visual Studio plugin on top of Roslyn.)

It is totally up to you, whether you want only analyze or modify this tree.

This has been also recognized by the TypeScript team, and they are using Roslyn from version 1.3 to provide the necessary data for several Visual Studio IDE features. As a result of that the architecture of the TypeScript compiler became much cleaner and much more understandable:

For us the two important components are in the lower box: the Parser and the Emitter. Parser is responsible for building the syntax tree – in this case from the TypeScript source –, and Emitter is responsible for generating the compiler output based on the syntax tree – in this case the JavaScript (.js), the definition (.d.ts) or the source map (.js.map) file.

It is important to note that the architecture of Roslyn and TypeScript are pretty similar: first they build a syntax tree, and then they generate the output based on the tree. For Roslyn this is C# –> tree –> IL, for TypeScript it is TypeScript –> tree –> JavaScript.

Because the two trees are similar, we can combine them, and now we have the following solution:

This means we can compile C# to JavaScript with Roslyn and TypeScript!

The huge benefit of this architecture is that the input is the original C# source code (in contrary to the JSIL project for example that compiles Common Intermediate Language to JavaScript), which contains way more information (e.g. inheritance, scoping, etc.) that are lost in the output of the C# compiler. This gives us the opportunity for more efficient code optimization!

Let’s take the Raytracer demo from the JSIL project as an example. The original C# source is 429 lines, the JSIL-generated JavaScript is 793 lines. You could say, that at least it runs, however the memory management is far from optimal:

Processing the same source code with the Roslyn Parser + TypeScript Emitter combo you can get the following results:

We also measured the CPU utilization and Visual throughput (FPS) with the UI Responsiveness tool in Internet Explorer Developer Tools (F12), and we got better results for both metrics as well.

Obviously better memory management and better performance do not come free, the generated code is bigger, in this case 1844 lines of code. The significant increase is the result of the richness of the syntax tree: in contrast to the IL code, it contains information about the classes and member visibility, which can be translated only to complex JavaScript code, but if we do (and the TypeScript Emitter can do that), than we can get better performance with the price of more code to download. We experienced the same result when we analyzed other applications.

This method works not only with browser based applications, but also with native JavaScript apps, for example with your Node.js app. These are the required steps:

Install the Node.js Tools for Visual Studio plugin, which gives you everything you need to develop Node.js apps with Visual Studio.
Download and install the Node.js with C# plugin from the Visual Studio Gallery (coming soon).
After installation, you will see a “Node.js application” project template within the C# project templates. Create your new project with that template.
Implement your application in C#, and of course you can use Visual Studio for that.
You can debug and run your code as usual, because the project template contains the necessary MSBuild targets, that compiles your code with Roslyn and TypeScript, and then passes it to the Node.js Tools for Visual Studio which in turn runs it with Node.

We are looking for beta testers! Before publishing the Visual Studio plugin, we would like to do a broader test and collect feedback from you. If you would like to try our tool, please read these guidelines and leave a comment below, and I will contact you with the download link. Thank you!

Update:

This article hit the top of the node.js subreddit: