At their recent developer day in New York Palm / HP announced Enyo[1], a new framework for their upcoming mobile phones and tablets. Among many improvements, Enyo will allow developers to run and debug applications in their browsers, leveraging the impressive tool suite that is built into a modern day browser.

What few people seem to realize is that you can run and debug webOS applications in your browser even today! Some limitations apply, but webOS development in your browser is possible and it provides a good starting point to explore the webOS platform. In this post, we will explain how to

1. Run your webOS application in the browser
2. Interact with Mojo via the browser’s javascript console
3. Establish an instant reload mechanism whenever you make changes

We assume you have webOS SDK 1.4.5 installed, are working on a linux system and use chrome as your browser. The sources for this tutorial are available at GitHub[2]. While this tutorial explains each step in detail using the SDK’s tools only, the project includes a Rakefile which provides a target for each step making the tutorial more convenient and less error-prone.

View your app in your desktop browser

Here we will show you how to get the sample application of the SDK running in your browser. Use the SDK tools to create a sample application. The hello world sample bundled with the SDK will do but feel free to start with your own.

host> palm-generate -t hello_app -p "title=Hello" hello
host> palm-package hello
host> palm-install com.yourdomain.hello_1.0.0_all.ipk
host> palm-launch com.yourdomain.hello

Alternatively execute the following rake tasks

host> rake palm:generate palm:run

After deploying the application onto the emulator we will make it available to our desktop browser. The emulator runs a web server (centaur) on port 8080, which hosts the deployed applications. To view and run the applications installed, we have to forward that emulator’s port 8080 to a port on our local machine[3].

host> ssh -p 5522 -L 5581:localhost:8080 root@localhost

Alternatively execute the following rake task

host> rake ssh:tunnel

Now point your browser to http://localhost:5581/Apps/ and click the link for the previously deployed “hello” application. For multi stage applications you have to ensure that your browser does not block popups.

Running apps in your browser enables you to use the chrome developer tools to inspect the application’s DOM and CSS. Furthermore you can use chrome’s javascript console and debugger to explore the inner state of your application, inspect variables or the callstack.

Another feature is that you can escape the IFrame that the application is embedded in by prepending “index.html” to the device parameter of the URL. This allows you to work with Palm’s Mojo Framework directly, i.e. the Mojo object is available in your javascript console.

sample hello world application executing in chrome using js console to debug

Introducing Hot Deployment

To reflect any changes in the application’s source file, we still have to package and push the application to the emulator manually. This is tedious and slows down development. So, how can we improve this?

An obvious improvement of this process is automating the commands as we did in our Rakefile. But this still keeps you waiting while the application is being built and redeployed for every minor modification. We can do better than that! Using SSHFS we can edit our application’s files directly on the emulator allowing us to skip the deployment process all together.

Use SSHFS to speed up deployment

To achieve this, we have to install new software on our emulator. We will first install Preware, and then we use Preware to install the SFTP package.

As long as you are online installing Preware is straight forward. Simply connect to your emulator and execute the following commands[4]:

emulator> cd /tmp
emulator> wget http://bit.ly/preware-bootstrap
emulator> sh preware-bootstrap

To mount the emulator’s filesystem from your desktop we will install SFTP using Preware. Start Preware, search for SFTP and install the package. After that’s done you have to fix the missing symlink.

emulator> ln -s /opt/libexec/sftp-server /usr/libexec/sftp-server

Now to verify that the SFTP server is running and you can mount the emulator’s filesystem locally. The mount point remote has to exist in your working directory.

host> sshfs -d -p 5522 root@localhost:/ ./remote

You can drop the debug flag (-d) once you verified mounting works. Use the following command to unmount.

host> fusermount –u remote

Both commands also have associated rake tasks.

host> rake ssh:mount[/path/to/remote/directory]
host> rake ssh:umount

You can also use rake to mount a specific application by name, e.g.

host> rake ssh:app[hello]

Instant reload via WebSocket and nodejs

Now that we can access the application’s files on the emulator locally, any changes we make on those files are reflected in the browser when these files are reloaded.

On this premise we define the following workflow that should restart our applications whenever we make any changes to it.

1. Monitor our source files for modifications
2. When files are modified, copy those files to the locally mounted application directory
3. Inform the browser that files have changed
4. Use Palm’s Mojo framework to fetch those files and reload the application

Step 1, 2 and 3 are taken care of by a simple nodejs application. Step4 is done by a single javascript file you include in your application’s index.html file.

There is an easy and comfortable way to perform a local (i. e. in your home directory) installation of nodejs provided by a script available at GitHub[5]. In addition to node itself, the script also performs a local installation of npm, the node package manager.

bash < <(curl https://gist.github.com/raw/579814/d7c6ccee3c6946a7fdfaf37395218d9f8d2ae178/node-and-npm-in-30-seconds.sh)

We use npm to install the packages our node application needs.

host> npm install connect
host> npm install express
host> npm install socket.io

Once all required packages are in place you simply must update your application’s index.html by adding the following lines at the end of the header. If you used rake to generate the application, those lines have already been added for you.

<script src="http://localhost:3000/js/jquery.js" type="text/javascript" ></script>
<script src="http://localhost:3000/js/socket.io.js" type="text/javascript" ></script>
<script src="http://localhost:3000/js/reloader.js" type="text/javascript" ></script>

We have reached the last step of our tutorial. To take advantage of instant reloading you must ensure the application directory on the emulator’s filesystem is mounted locally and that the nodejs application is running. The nodejs application takes two arguments. The first parameter is the path to your local application and the second parameter is the path to the directory where you have mounted the application’s directory on the emulator.

host> mkdir –p remote
host> sshfs -d -p 5522 root@localhost:/ ./remote
host> node lib/app.js hello remote

Alternatively you can use the following rake task

host> rake node:run[hello]

Next, point your browser to http://localhost:3000 and give it some time to load the required resources (you can already use your chrome console to see what is going on). After your application rendered in the browser, it should now automatically reload with your changes applied whenever you modify a file.

Benefits and Limitations

Using the approach described above, you get rapid feedback on any change made during development and are able to track down programming errors more efficiently using a comfortable debugging tool. Also you can explore the Mojo framework directly from your browser’s javascript console. There are some problems with complex applications or widgets (e.g. the WebView widget) the approach introduced here is best used when building a new application from scratch. If you encouter any problems, please use the github project to report them and keep in mind that your application is running in your desktop browser. Always carry out acceptance tests on the actual device.

In conclusion we believe that developers are most efficient when they use the tools they are already accustomed with, so we believe that in browser development is the right way forward and we are excited to see that Enyo will embrace this concept. What are your thoughts on that?

Thanks to Florian Kaltner for helping out in writing this tutorial!