BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

Mobl – A New DSL for Creating HTML5 Mobile Applications

by Abel Avram on Feb 10, 2011 |

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.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

xtext by mehdi adda

interesting!
is it based on xtext?

beautiful though high-maintenance by Gerald Loeffler

A beautiful example of what can be achieved when a small and coherent group of people (or just one mind) implement their vision starting with a clean slate - just capitalizing on existing experience and knowledge but not being encumbered by backwards compatibility.

The problem is that the real-world usefulness of this approach will highly depend on the quality of the translation into the code actually executing in the runtime environment (the browser): JavaScript, HTML, CSS. This is quite similar to the translation from Java that GWT depends on. My fear is that it takes a company with the resources of Google to pull this off for the mess that are present-day browsers, in other words: to take it beyond the proof-of-concept stage.

But without doubt a beautiful idea nicely executed!

cheers,
gerald

www.gerald-loeffler.net

Re: xtext by Raymond Feng

Cool project!

It seems that the DSL is built using strategoxt.org/.

I like xtext :-).

Re: xtext by Zef Hemel

No, it's implemented using Spoofax, a language workbench that is more suited for complex language and compiler that require complex transformations.

Re: xtext by Jean-Jacques Dubray

Zef,

this is very impressive work. Spoofax looks like a strong alternative to Xtext. I would not be surprised if someone writes an Xtext -> Spoofax converter soon.

I have built a similar tool to build native mobile applications (www.moppr.com) using Xtext.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

5 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT