Cross platform desktop development with HTML5 GUI

Question

Short story: is there a way to write a desktop application with a GUI in HTML5 and core in a cross-platform language like python (or even C#/Mono)?

Longer story: I'm a C# developer, for small personal projects I seldom do, running both under Windows and OSX, I use C# (Mono) with a frontend leveraging on Eto.Forms

I'd like to understand if there's a mature way to achieve the same results using an HTML5 GUI, since I'd like to learn that and believe it could be a good option for near-future Windows desktop UIs (or otherwise a nice tool to have in my skillset). Of course if the code running behind the scenes is C# I'll be more than happy, but also getting my feet wet in another, maybe more cross-platform like python would be good.

At this stage I'm not interested in any mobile-oriented solution.

Solution 1

Electron (formerly Atom shell) has really matured as of late. In fact it's what VSCode is built on.

There's a great tutorial and starter code on using Angular 2 and Typescript, and you can even use VSCode to write and build it.

For me this is the best way to transition from the WPF world to HTML5.

Solution 2

the NW.js look pretty promising... you might even be able to use TypeScript which would be much closer to C# than plain ol' js. If you're open to using PHP, you can check out the nightrain project https://github.com/naetech/nightrain.

Solution 3

Give http://www.tidesdk.org/ a try.

Your app will run on Windows 8, MacOS and Linux. You can use HTML5, Javascript and CSS3.

But you can also extend the functionality of your app with a scripting language you are comfortable with. TideSDK currently supports Python, PHP, and Ruby.

Solution 4

I have recently worked with Chromium Embedded Framework, basically a browser component for WPF an WinForms. It works very well and provides kind of a two-way interoperability from website to .NET-app and vice versa. Basically, you:

1. Create a WPF desktop app
2. Include CEFSharp and place a full-screen browser on the window
3. Call methods in JavaScript:

// .NET
var mainFrame = browser.GetMainFrame();
mainFrame.ExecuteJavaScriptAsync("any js code");

4. Bind a .NET-object

// .NET
browser.RegisterJsObject("boundObject", this);

4. Call methods on a bound .NET-object from the website/JS:

// JS 
boundObject.someMethod();

On this basis you could build a mediation layer (ViewModels, controllers, ...) between HTML/JS-UI and .NET logic...

View more solutions

Comments

[turdus-merula]

For javascript, there is nwjs.io :)

[Fernando Macedo]

@MrUniverse more than that... I did a research to find another link and found that TideSDK was discontinued and the company behind was disolved. Very bad news: stackoverflow.com/a/31369264/585592

[ccalboni]

I removed this as accepted answer since TideSDK was discontinued

[ccalboni]

I changed from TideSDK to this one as accepted answer, since TideSDK project was discontinued

[Jay Wick]

there's an incredible amount of apps out there already built on Electron, link: electron.atom.io/apps