Dart and Sencha Touch for Mobile Web Apps

You can use Dart's JS-Interop to integrate Dart code into your existing Sencha Touch application. This allows you to take advantage of Sencha Touch's mobile-first framework and Dart's productivity, language, and libraries.


Sencha Touch is a full-featured JavaScript framework for mobile web apps. It supports layouts for multiple devices, touch, lots of widgets, models, a resource framework, and more. I've used Ext JS (a cousin of Sencha Touch) in a previous job, and was quite happy.

I'm also quite happy with Dart, the new scalable web programming platform from Google. Dart compiles to JavaScript, and even interoperates with JavaScript. It's a new language, libraries, package manager, VM (for client AND server apps), and rich tools. I feel really productive in Dart.

I've never used Sencha Touch, so my first question was: how do I insert Dart into an existing Sencha Touch application?

Getting Sencha Touch

Sencha already has great docs, so I won't repeat them here. This post assumes you have a Sencha Touch app already, but if not, check out http://www.sencha.com/products/touch. Make sure to download both the SDK and the sencha command line utility. I needed both to get started.

Getting Dart

Installing Dart is super easy. The best way is to install Dart Editor, which includes the editor, Dart SDK, and Dartium (Chromium + an embedded Dart VM). Even if you don't intent to use the editor, you almost certainly want Dartium for easy development testing (think: edit, reload, there is no step three).

If you are new to Dart, might I recommend the Language Tour and the Tutorials.

The Setup

There are effectively two apps in play:

  1. The Sencha Touch app
  2. The Dart app
Both apps need to fully initialize and load (possibly loading multiple scripts) and there's no guarantee that one app will load before the other.

The Dart app needs a way get a handle on the Sencha App, but only after the Sencha app is loaded and initialized. This scheme needs to work in both Dartium (JS and Dart VM) and across the web (via dart2js, which compiles Dart into JavaScript).

Modify your Sencha Touch app

(Note: I'm a Sencha Touch n00b, so maybe there's a better way. Please let me know in the comments.)

This isn't pretty, but here's what I did:

 var senchaLaunchComplete = false;  
   // ....  
   launch: function() {  
     // ...  
     senchaLaunchComplete = true;  

Notice I added a global "senchaLaunchComplete" variable that flips to true when the launch is complete. Again, not proud of this, and I'd like to learn more about how Sencha initializes. I can't fire a postMessage event from the Sencha App because it might get lost before the Dart app has a chance to load and initialize.

Ideas welcome, but let's move on, shall we? :)

Waiting for the Sencha app to load

The Dart app starts by repeatedly polling the senchaLaunchComplete variable from JavaScript. Dart uses JS-Interop to reach into the JavaScript world. JS-Interop works in both Dartium and when compiled with dart2js.

All Dart programs start with a main() function. This makes it very easy to understand where your program actually starts running. Inside main() I setup a Timer to check the variable. (Again, sorry for the ugly code.)

import 'dart:html';
import 'dart:async';
import 'package:js/js.dart' as js;

main() {  
  // TODO: make this better  
  new Timer.periodic(const Duration(milliseconds: 100), (Timer t) {  
   if (js.context.senchaLaunchComplete) {  

When senchaLaunchComplete is true, initDart() runs and the timer stops. The js.context is a handle into the JavaScript side of the world.

Adding a button and panel with Dart

Now that both apps are loaded, and initialized, Dart code can add new objects to the Sencha Touch app. Let's add a new panel, which contains some text and a button.

Sencha Touch apps can be declared with JSON, or imperatively constructed. I show both methods below. Remember, everything that follows is Dart code:

 initDart() {  
  // Grab the app's main panel  
  var mainPanel = js.context.Ext.Viewport.items.getAt(0);  
  // You can create a new object imperatively using a Proxy  
  var button = new js.Proxy(js.context.Ext.Button)  
   ..setText('Click Me')  
   ..setHandler(new js.Callback.many((b, e, _, __) {  
    // Respond to clicks with callbacks  
    js.context.Ext.Msg.alert('Success!', 'This is a Dart function, run from JavaScript.');  
  // You can also create objects declaratively using ExtJS style.  
  var dartPanel = js.map({  
   'title': 'From Dart',  
   'iconCls': 'star',  
   'html': 'Hello from Dart! This panel was created from Dart code.',  
   'items': [button]  
  // Add the panel from Dart land into JS land  

The main panel was constructed by the main Sencha Touch app over in JavaScript land. We get a handle to the main panel via JS-Interop and the js.context.

Use js.Proxy to construct a new JavaScript object and get its reference. In the code above, a new Ext.Button is created from Dart, and configured. The double-dot syntax (..) is method cascadeshttps://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html#classes

Notice a click handler is installed on the button, as a js.Callback. The callback can be fired multiple times. When the button is clicked, a new Ext.Msg.alert is displayed.

The new panel is created as an example of Sencha's declarative configuration. The js.map is an efficient way to convert a Dart map into a JavaScript object. Notice how the Dart map contains a direct reference to the button (a Proxy object).

The new panel, which contains the button, is then added to the main panel. This combines the two worlds.


The star button comes from Dart. The home button comes for JavaScript. They basically are hugging! :)

When the button is clicked, it calls a Dart function. How cool!

All the code (and details)

The code for a sample Sencha Touch + Dart app is available here: https://github.com/sethladd/dart-sencha-touch-demo.  You'll need the sample code to see how a Dart application is arranged, and how to include both the Sencha JavaScript files and the Dart files. Specifically, check out https://github.com/sethladd/dart-sencha-touch-demo/blob/master/web/index.html

What's next?

This small demo simply shows how to insert some Dart logic into an existing Sencha Touch app. However, Sencha Touch is quite full featured, and there are more areas to explore. For example, how to interact with a Sencha model from Dart? How to create a Dart class and use it as a Sencha model? Good topics for future posts!


You can extend an existing Sencha Touch app with Dart with Dart's JS-Interop. If you use Sencha Touch for your mobile HTML5 web apps, try using Dart's language, libraries, and tools as you add new features to your app. Go forth and build awesome mobile-first web apps!
Post a Comment

Popular posts from this blog

  • Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! This is the second article in a Box2D series, following the Box2D Orientation article. The Box2DWeb port of Box2D contains a nice example to show off the basics of integrating physics simulations into your web app. This post will provide a walkthrough of the example, explaining the high level concepts and code. First, let's see the example in action. The code for the above is open source and available on GitHub. It was adapted from Box2DWeb's example . Animating Before we look at Box2D, it's important to understand how the above simulation is animated. You might think setInterval or setTimeout is
  • In which I port a snazzy little JavaScript audio web app to Dart , discover a bug, and high-five type annotations. Here's what I learned. [As it says in the header of this blog, I'm a seasoned Dart developer. However, I certainly don't write Dart every day (I wish!). Don't interpret this post as "Hi, I'm new to Dart". Instead, interpret this post as "I'm applying what I've been documenting."] This post analyzes two versions of the same app, both the original (JavaScript) version and the Dart version. The original version is a proxy for any small JavaScript app, there's nothing particularly special about the original version, which is why it made for a good example. This post discusses the differences between the two implementations: file organization, dependencies and modules, shims, classes, type annotations, event handling, calling multiple methods, asynchronous programming, animation, and interop with JavaScript libraries. F
  • Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes components, Then comes elements, Then comes the interop with the node dot bind. Angular , a super heroic MVC framework, and Polymer , polyfills and enhancements for custom elements built on top of Web Components, can live harmoniously in the same app. This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart . Angular and Polymer I get asked "Should I use Angular or Polymer?" a lot. My answer is, "Yes". That is, both libraries have distinct strengths, and you can use both in the same app. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services. Here are som