Translate C# WPF Applications To HTML5 with WPF.Polymer Part I – The GUI

Hi everyone,

I will show you in this post a concept of how to turn arbitrary desktop software that was written for example in C#/WPF into HTML5 cross platform solutions, with the help of new HTML5 features like Web Components. Or in other words, the next generation of hybrid software.

But before we jump into the details, I will provide some background information, why this technique can save you as developer a lot of time and your company tons of money:

Probably the biggest problem of modern software development

The demand in well designed and intuitive UIs and therefore the complexity in UI development has heavily increased over the last years. For this reason, modern software studios need more than just guys who produce code. Roles like e.g. UI engineers, user experience(UX) designers, graphics designers or usibility testers are highly requested, if you want to develop good software that matches today’s standards. Moreover, from a software engineering perspective it’s a good idea to seperate the GUI development and the application from the beginning. These two circumstances lead to the fact, that you will usuallly have at least two different teams and projects: one for the user interface and one for the application logic.

For this reason, modern programming languages, frameworks, toolkits and tools allow developers to write the GUI in a declarative way, while the behavior and the application logic are written in code. This allows designers and UI engineers to develop the visible parts, without having to write code and enables them to easily share their work with developers. The developers in turn, just have to fill in stubs and method bodies, in the next steps, to get the UI to life.

If you are developing a C# software for Windows then you are really lucky. Microsoft not only provides you with a full feature rich and extremely comprehensive GUI framework, Windows Presentation Foundation(WPF), but also with an extremely powerful IDE (Visual Studio, Expression Blend), that supports you and your team with all technologies in a seamlessly integrated way. But, and this is a but with a capitalized ‘B’, as soon as you are going to leave the Microsoft/Windows world you are forsaken.

Here are the options, i.e. what you can do to get your software running on different devices and platforms:

1. Rewrite everything that you have done in another language. You will then have to use different technologies (IDEs, Frameworks) and target at the specified platform, which can look like this:
SWTeamsMultiPlatforms
(Image description: you will need a bunch of people, that you normally would not need. All with their own unique skill set. You will need developers and designers for every UI toolkit and technology and you will probably try to create an artificial, shared resource base. You will need team leaders for each team as well as engineers since the problems in architecture and design are fundamentally different. Your coordinator will quit her job after two weeks, because the smartphone app for iOS and Android look totally different)

2. … actually, that’s it. A lot of people might want to scream now “that’s not true! you have stuff like Silverlight and Mono”, but be honest, this won’t work:

“There’s absolutely no way you can run full-fledged WPF app on Mac. I’m not even sure if this is possible in Parallels. The best thing you can do is to use Silverlight, which was previously named “WPF/E” and does run on Macintosh.”

Top answer – http://stackoverflow.com/questions/580970/running-a-c-wpf-application-on-a-mac

“Silverlight will continue to be a cross-platform solution, working on a variety of operating system/browser platforms, going forward, he said. “But HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform,” Muglia said.”

Bob Muglis, Ex Microsoft President in charge of the company’s server and tools business

“But in the past few months, Microsoft’s backing of HTML 5 has gotten more aggressive. Microsoft is pushing HTML 5 as the way developers can make their Web sites look more like apps. (“HTML5 enables you to make engaging and interactive sites. With full hardware acceleration of the browser, HTML5 pages feel and run like an app or a game,” said IE chief Dean Hachamovitch during the opening PDC keynote yesterday.)”

http://www.zdnet.com/blog/microsoft/microsoft-our-strategy-with-silverlight-has-shifted/7834

“If you intend to build dynamic interfaces that will last longer than the next model of Windows phone, acquire HTML5 tools — don’t buy into the “it’s not really dead” line. ‘Supported’ isn’t the same as ‘alive'”

“I’m sitting here waiting for Visual Studio to install a bunch of Silverlight crap. Please, Microsoft, kill it. Adobe isn’t even developing the real thing, Flash, for mobile. It’s all HTML5, although the hand-coding in HTML5 is awful.”

https://social.msdn.microsoft.com/Forums/silverlight/en-US/f9e15a37-8c5a-4c32-9d38-1d5b57da68de/is-silverlight-dead?forum=silverlightdevtools

A Concept for Crosscompilation

SWCrossCompilation
This graphic is showing what we would like to have. We would like to develop in “our” language with the tools and frameworks we like and leave the rest to a compiler. I think everyone knows that multi platform development is a creature from hell and no one likes this stuff- wouldn’t it be great to have a compiler doing the work for us? Now, I want to talk about this little black box entitled “compiler” and how it can be developed.

In order to “compile” or translate a project from C# WPF, we basically have to perform two steps:

  1. Translate the GUI to Polymer
  2. Develop a strategy for the “Code-Behind” (Next Post)

Translate the GUI to Polymer

The declarative language for WPF is XAML, which is a XML dialect. If you are interested, here is a list of user interface markup languages on wikipedia, with a dozen more. All these languages have one thing in common: they can easily be translated into another XML representation. And the XML I’m targeting for is HTML or more precise XHTML.
220px-XSLT_en.svg

All we need to do is to define a XSLT document with translation rules. And you will be surprised how easy it is to translate XAML for example into HTML. The XSLT I used actually has less than 30 lines of code. What I am simply doing is shown in the code below.

As you probably have noticed, the only difference is that I prefixed all the elements with “WPF-“. If you would now open your browser and throw this code into it, it would just ignore everything because span, div, or body are valid tags while WPF-Grid, certainly is not. At least not now.

Enter Polymer

Polymer is an awesome cross-browser framework, created by Google, that enables all the new Web Components features in your bowser today! It allows you for example, to get rid of the “span and div soup” and to create your own tags with readable semantics. All the messy stuff, that is needed for the browser to understand your tag is encapsulated in the so-called shadow dom. That means: I can define my own Grid-Tag with Polymer, which is internally constructed of all the tags that are understandable for the browser, and from now on, every other browser will be able to understand this tag. So I started to define these tags…

WPF.polymer

WPF-Class-Hierarchy

Unfortunately, WPF has a lot of tags. Tags in WPF correspond to classes, since XAML is just another way of constructing and initializing objects. Whenever, I needed a new tag like “WPF-Grid” I implemented all the classes, i.e. Polymer components down the hierarchy path and attached the methods and properties according to the MSDN class specifications. Since Polymer supports inheritance out of the box (and a lot more), it was really easy for me, to came up with a quick proof of concept.

Proof of Concept

The first application that I translated was a MediaPlayer example from the MSDN pages. At the lowest layer, most WPF.polymer components are just wrapper for existing elements.
An early version of the MediaElement for example is this:

As you can see, the MediaElement extends the FrameworkElement. It does not have to specify Width and Height properties since they are inherited. It consists at its core just of a single video tag, which is HTML5 standard conform. And it exposes a new Source attribute to set the content of this element.

If you define the relevant elements and run your slightly modified desktop / XAML code in the browser, you will have the EXACT SAME GUI + BEHAVIOR!

WPFMediaPlayer

WPF.polymerMediaPlayer

Summary and next post

This post tried to explain that a lot of development time of modern software is spend on the GUI and that this is usually done in a declarative way as with WPF & XAML. Moreover, I wanted to show an approach how extensible user interface markup languages can be transformed into HTML5 and how we get the browser to understand the information using Polymer and Web Components.

In the next post I will explain, what to do with the tricky code-behind file. How to deal with local resources like databases. How you manage to write code once and deploy it on Smartphones, a Mac, in the Web, Tablets and all other devices. Last but not least, I will open source my example code and describe the next steps, i.e. what you need to do in order to transform your boring desktop software into a cross platform experience.

Project Files

WPF.polymer @ GitHub
The “UHU” C#/WPF to HTML5 Crosscompiler @ GitHub

I’m Going To MIT

1024px-MIT_Building_10_and_the_Great_Dome,_Cambridge_MA

It has been more than half a year, since I was accepted at MIT. After all the exams, the visa and scholarship application; after selling a complete household, my car, and being one month ‘homeless'; after filling out dozens of forms and getting gray hair, I’m just relieved and happy to enjoy a beautiful summer here in Cambridge.

The next year will be exciting and I’m looking forward to take part in promising and challenging projects, meet and work together with talented people, travel a lot and enjoy my new American everyday life.

I will try to share my insights, lessons learned, impressions and a lot more on this blog and thereby try to improve my English skills ;-)

Stay tuned!

Build A CRM Chrome Extension To Manage Over 10k Google Contacts

Hello,

this post is about creating a Chrome Extension to enrich the functionalities of Google Contacts and to manage more than 10k entries in an easy way.

The story starts one month ago, when I was confronted with the following requirements:

  1. “Build a Chrome Extension that is capable of managing all our Google Contacts (12k+)”
  2. “We want a simple login”
  3. “We want inplace editing for some cells, as well as batch editing for a subset of all cells”
  4. “The extension should support fuzzy search, sorting, inverse search(exclude matching entries), multimail, quick filtering by age, notes/tags, …” – unfortunately, Google’s Contacts API is lacking a lot or nearly all this functionality right now

Continue reading Build A CRM Chrome Extension To Manage Over 10k Google Contacts

Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Welcome to the last part of this series on how to create an animated HTML5 logo for your blog.
Hopefully you’ve finished your animated logo and are now ready to integrate it into your WordPress blog. (You should have finished it – you had half a year to do so ;-) )
This post will be on

  • how to improve the stability of our code
  • some cross browser considerations
  • we will introduce a multi purpose animator class

and finally go live with our logo!

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Make a fancy animated HTML5 Logo for your WordPress with pure JS (2/3)

Today is all about animations. In simple terms, animation is movement over time.
However, we won’t change multiple images over time as it is known from the cartoon, but animate parts of one entity on the canvas.
Tha basis for this will be the stickman (or our own logo) which we created in part I of this series.

What we need right now is:

  1. a movement specification – which parts are animated and in which way
  2. a time interval – how long will the animation run
  3. the animation speed –  how much movement do we want to have in one timeframe

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (2/3)

Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)

I was very inspired by the amazing Google Doodles and decided to create my own animated HTML5 logo. There is an older post on how Google creates its Doodles on HTML5 Rocks: http://www.html5rocks.com/en/tutorials/doodles/lem/
In this post, Marcin Wichary explains some really helpful and advanced animation concepts and if you are interested in this stuff you should definitely read it. Unfortunately, I discovered this post just, when I had finished my own series. You will see that even the complexity of my “stupid” stickman logo is incredible. The Stanislaw Lem Doodle e.g. has 17,000(!) lines of JavaScript code and its own engine! Anyways..

This will be a beginners series about animating the WordPress header/logo. I will try to keep it simple but informative.
One thing in advance: please use the described techniques carefully and ensure that visitors are not annoyed (I’m not a good example – I don’t care about my visitors ;-) )

We will not use jQuery or any other framework. Everything will be written in pure JavaScript. The only HTML we will produce is a HTML5 canvas tag. It should be no problem, if you’re not familiar with canvas and HTML5 technologies. However, if you do not know much about it, I promise that there is a lot you can learn in this series. The template for this series is the current standard WordPress theme which is “Twenty Thirteen” and my own (super creative) stickman logo.

List of contents:

I – Scaffolding & HTML5 Canvas Logo
a) Create a local Page Dummy
b) Dynamic Creation of the Canvas
c) Draw to Canvas (from graphics editor to code)
d) Overlay the Logo and make Adjustments

II – Animations: The Stickman comes to Live
e) Animation Now and Then
f) A simple Animation
g) Time Controlled Animations

III
h) Make it responsive
i)  Make it cross browser
j) OO
k) Going live: WordPress Integration

Continue reading Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)

Amazon EC2 Micro Instance and Graylog2 / ElasticSearch

Ok, this is not becoming my next “How to install …”
Instead I will only give a tip to those people trying to run Graylog2 on an Amazon EC2 instance type t1.micro.

If you just started and your first project includes the installaton of Graylog2 do not expect miracles from your tiny t1.micro instance ;-)

The AWS instance type site lists the specifications for all instance types:

t1_micro

Graylog2 comes with its own full-fledged MongoDB, ElasticSearch and Ruby on Rails web interface + web server.
Running all this stuff with only 0.615 GiB of Memory probably looks like this:

graylog_error
Continue reading Amazon EC2 Micro Instance and Graylog2 / ElasticSearch

How to install Couchbase for Node.js on Amazon Elastic Beanstalk

Hello and welcome to this week’s episode of “How to install Couchbase” ;-)
(I could have called it “How to debug AWS Elastic Beanstalk” but I wanted to keep the tradition)

Since more and more people stumble across my blog in search for Couchbase installation tips, I wrote this guide in the same style.

This time I tried to deploy my HelloWorld app to an AWS Elastic Beanstalk instance.
Unfortunately, the only solution that worked for me was a little bit hacky and is not scalable(!).
I would be very happy about suggestions!
Continue reading How to install Couchbase for Node.js on Amazon Elastic Beanstalk

Metaprogramming experiments: Selector Properties

Hello everyone!

A few days ago I wrote a post about “Virtual Instances in JavaScript with Proxy API – JSDataViews“.
It’s an approach on how to calculate the data representation of a variable at runtime with the help of the new Proxy API.

Today I want to show another feature which is part of the core of JSDataViews

Selector Properties

A lot of people are familiar with jQuery. The development of jQuery is driven by the fact that the DOM is a hierarchical, complex data structure and people need an easy way to access and manipulate different parts of it.
Since JavaScript objects can reach a similar complexity I was looking for an easy and nice way to run similar queries on them.
Continue reading Metaprogramming experiments: Selector Properties