Translate C# WPF Applications to HTLM5 with WPF.polymer Part III – UHU the C# to JS Compiler

Hi,

some people asked me for the cross compiler and the next steps. Unfortunately, I don’t have the time to fully elaborate on all the details so this is a work in progress post. I’ll try to make some updates and comments to this post when I find the time. If you are interested in a particular thing leave a comment so that I can address it first.

Roslyn

The C# to JS cross compiler is written in C# and is using Roslyn:

The .NET Compiler Platform (“Roslyn”) provides open-source C# and Visual Basic compilers with rich code analysis APIs

A lot of things have changed since my early tests with Roslyn one year ago: Roslyn is now a very popular and focused project. This also means that a lot of things have changed in the Roslyn code. Please have this in mind when using the code listings that are provided here.

The goal of the Roslyn project is to provide an API to the C# compiler pipeline.

compiler-api-lang-svc
Source

Roslyn is an advanced code analysis tool that can help us (among other things) to translate C# code to Javascript. The way this works is that Roslyn gets a C# code file as input and constructs a syntax tree. Next, it uses a smart software pattern to process this tree and to notify us about each step. This design pattern is called visitor pattern and is a powerful tool in the software engineer toolbox.

C# Syntax Walker

roslyn-syntax-tree

Roslyn traverses the syntax tree with a “visitor” or “walker”. That means, the algorithm will start at one point, usually the root, and then continue visiting all subsequent nodes in a certain order. Whenever the visitor reaches a node he will notify us. So now, we have a tool that processes the source code and calls us back when it reaches a class definition or function and the only things we have to do is to come up with the right re-write rules to turn a C# class into a JS class and so on.

You can find my C# walker that was used in the proof of concept in the UHU repository in my github.

It contains some rules and tricks to convert C# into JS code. But we don’t want to translate all the C# code into JS. We only need to process some of the UI specific part in the code behind file.

I found the “Learn Roslyn Now” blog post series from Josh Varty a very helpful resource.

UI Element Visibility

When it comes to translation of WPF to JS there is one tricky thing which is UI element visibility. In WPF application, one can basically reference all the UI nodes that have a name like this:

“myMediaElement” is an element that is defined in the XAML file. All these elements need to have unique identifiers aka names and are globally visible in the code behind. They are never introduced or declared in the code file which is a problem when we analyze the syntax tree. So to fix this, we need to analyze the XAML first and collect all the names of the elements for a namespace. Then we pass this namespace to the wlaker to understand how the code is linked to certain elements and to translate these constructs into Javascript.

This code snippet shows, how one can use the xsl definition to translate a xaml file into (x)html.

The GetNodeNames method collects all the names from the XAML.

Main App

Once we have the XAML translated and the names collected, we can start the syntax walker like this:

The walker translates the C# code into Javascript and that’s it. We’ve translated our C# project into a Web Project.
There are still some puzzle pieces left that I’m going to cover in a future post or updates but this should help to get the main ideas.

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload the CAPTCHA.