Dart with desktop HTML application frameworks

Question

I'm planning to create a cross platform desktop application with Dart. Because there's no ready built frameworks supporting Dart yet, i have to compile Dart to Javascript first. I cannot develop completly in Dartium since the desktop frameworks built around HTML5 provide some custom Javascript API's (file system access, native library support, etc.) which i'm planning to use.

I've found the following frameworks which might suit my needs but i'm looking for best practices when developing with Dart.

• node-webkit: a fusion of Node and the Webkit browser engine. Provides many packages in the form of NPM. Node and Webkit shares the same thread so it's efficient in terms of communication between the different worlds. Writing and accessing native modules from Javascript seems problematic. Has good documentation. There's node-webkit.dart to access some of the API's from Dart.
• XULRunner: The Gecko engine behind Mozilla products as a reusable framework. Provides it's very own UI descriptor (XUL). Has an easier support for native modules (js-ctypes). Seems well documented on MDN. No Dart library written to support development yet.
• TideKit/TideSDK: Supports many languages (Dart might be supported later on [link] [link]). Built around Webkit. Seems well documented. Cannot seem to find pub packages supporting it.

Maybe there are some other options i haven't seen yet. I've excluded projects like AppJs (dead), and Cappucino (OSX only).

Answer 1

One option is the Electron framework. Originally created by GitHub for their Atom editor, it allows you to build cross-platform applications for Linux, OS X, or Windows, using web technologies. There is an available Dart wrapper as well. However, this wrapper lacks complete support for the API, and doesn't appear to be under active development.

Another method of using Electron is to call all the electron and node methods via dart:js interop. I've had more success with this method than the library.

Electron uses a main process, stored in main.js, to run the app, and create new BrowserWindows, which load your html. I've found it easier to simply write this file in Javascript, as wrapping too many JS methods is a pain, and this script is relatively light. However, you can use a main.dart file and simply build it with dart2js. Electron will be happy as long as it can find a main.js file.

You can essentially build pages for the app just as you would a regular webpage. You can write it in dart, debug in Dartium, and compile to Javascript for testing it in your app. Of course, your code can't access node APIs from the browser, so you'll have to build the app every time you want to use these. (If anyone has a better way, please point it out!)

One final caveat: Dart's IO libraries won't work with Electron. This is a bit of a drawback, as accessing files is important for pretty much any application. Your best bet will be to use node's filesystem library through dart-js interop. At times, this may feel like a bit of a hack (for example, when working with callbacks), but it gets the job done.