Object.observe, Crosswalk and the Intel XDK

After my recent blog on Object.observe(), I of course tried it out in the XDK. It worked fine in the emulator (after clearing up a few typos) so I created an app and installed it on my phone. There I didn’t have as much luck. It didn’t do anything. So I tried it in the debugger with my phone connected via usb to my laptop. It worked fine, so I knew it wasn’t a problem with the code.

Using the XDK Debugger is close to running your final app on a device, closer than running it in the emulator, but there are still a few differences. One is that if you’re using cordova plugins that are not built into the debug environment, any objects related to those plugins will be undefined(This is no longer a problem with the release of version 2496. Yeah!). The other difference, which I’ve run into once or twice, is that the debugger runs in a Crosswalk environment, while your built app is using a default webview.

Crosswalk is a custom webview that’s built into your app. It generally increases the size of your app quite a bit, but it has a number of advantages that can make that growth worthwhile. It’s built for performance with good support for GPU accelerated WebGL. It provides some unique API’s and features not available elsewhere (https://crosswalk-project.org/documentation/about/demos.html). Perhaps the best advantage is that you get consistent features and behavior across multiple Android versions, so your HTML5 app is not at the mercy of whatever webview is available. In my case, though, the feature I was looking for is support for newer HTML5 features, in particular Object.observe.

The problem I had on my phone was that the system webview (even though it’s a Chrome webview) didn’t support Object.observe. Unfortunately for me, Android 4.4 doesn’t quite have the latest stuff (“This WebView does not have full feature parity with Chrome for Android ...”). No worries though, I just built the same app with “Crosswalk for Android” in the XDK build page, installed the result on my phone and it worked, just as it had in the debugger.

If you want to try this yourself, it’s pretty easy. Just create a new project in the XDK, choosing Templates->Blank->HTML+Cordova. This will create a number of files in the www folder. What we need to do is create a simple DOM element in the body of index.html and create and initialize an object to bind with in js/init-app.js. Then all we need to do is modify the object, which we can do at the press of a button in js/app.js, then we should see the result. First add this to the body section in index.html:

    <h1 id=me></h1>

Then our initialization code goes in the function app.initEvents in js/app-init.js.

    window.lights = {howmany: 3};    // Global object to modify
    var myEl = document.getElementById('me');

    function changeLights() {
        myEl.innerHTML = 'There are '+lights.howmany+' lights';
    };

    changeLights();    // Initialize myEl
    Object.observe(lights, changeLights);  // Bind myEl to lights

Finally, in js/app.js in the function myEventHandler, just modify the lights object, for example:

    lights.howmany++;

Now when you touch the button, it should increase the number of lights and reflect that fact in the sentence “There are 4 lights”.

But if you’re a Star Trek fan, you might want to stop there.

For more info on Crosswalk and the XDK, check out these links:

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.