Mobl – A New DSL for Creating HTML5 Mobile Applications

Mobl is an external DSL targeted at creating cross-browser applications for mobile devices by compiling the code into HTML5, and it has been developed by Zef Hemel as part of his Ph.D. thesis in model-driven engineering and domain-specific languages, being inspired by the WebDSL project. InfoQ has discussed with Hemel in an attempt to find out more about this approach to writing mobile apps.

Mobl is a statically typed inferred language using a scripting language very similar to JavaScript. The language has the following top-level constructs: entities, types, functions, controls, screens, styles and services. Entities are data elements that get persisted to a local storage, while types are a form of volatile data which is thrown away upon usage. Functions are similar to those defined in JavaScript, and the language can call JavaScript code. The UI is made up of screens containing various component and/or container controls with event handlers attached to them. A “Hello World” example looks like this:

screen root() {
  header("Hello world")
}

Another example using a custom control:

// Custom control:
control sayHello(name : String) {
  label(name) // using the label control
}

screen root() { // Main module definition
  sayHello("Hello World") // using my custom control
}

An observation is that the UI does not follow the MVC pattern, the controls being able to contain local state and logic. While that is possible, Hemel recommends to “move any complex logic to functions and keep them out of the user interface code.” The UI’s look and feel is created with styles similar to CSS.

Mobl has built-in syntax for creating interfaces to web services. An example of a service used to retrieve Twitter trending topics looks like this:

service Twitter {
  resource trends() : JSON {
    uri = "/_proxy/api.twitter.com/1/trends.json"
  }
}

Data is transferred between the application and the service in JSON format, JSON being a “sub-type of Mobl's Dynamic type, a special type that enables dynamic typing of parts of your program,” according the documentation (PDF).

All the code written in Mobl is automatically compiled into HTML5 elements on each file save. The application will run on any HTML5-enabled browser, the browser supporting the following HTML5 features:

Local cache

Geolocation (mobl::location), so you can request the user's current (GPS) position

Canvas (mobl::canvas), for basic 2D drawing

Notifications (mobl::notify): on-screen notifications. (although not many browser support it) 

Accelerometer (mobl::accelerometer): read the mobile accelerometer data (currently only works on iPhone and iPad, other platforms do not yet support this API) 

WebSockets (mobl::socket): Streaming communication with the server, using socket.io:

Hemel said he has focused on making Mobl work with WebKit-based browsers since these have the most HTML5 features implemented on mobile devices, but some work has been done to make it work with Firefox and Opera, and it will be extended to Windows Phone 7 when HTML5 is supported on it. Mobl applications can be deployed directly or via PhoneGap:

It is possible to deploy Mobl applications using PhoneGap. PhoneGap allows you to use web technologies to build "native" applications for various platforms, including iOS, Android, Windows Mobile, BlackBerry. One of the things I'm working on is to wrap the PhoneGap-specific APIs, to access phone functionality such as access to the camera and phone's contact list, as Mobl libraries. That's progressing well.

Mobl comes with an Eclipse plug-in enabling application development on Windows, Linux and Max OS and it has been released under the MIT license.