Developing HTML5 Multitouch Apps Locally

Yesterday, I attended Mozilla Toronto’s DevDerby Workshop. Mozillian Jen Fong gave an excellent introduction to HTML5 multitouch, demoing just how easy it is to get started with the help of GitHub Pages and an iPhone or Android. I came into the event not knowing how to use touch in HTML5 and left feeling pretty confident in my understanding.

The workflow she presented made it dead simple to get up-and-running:

1. create a new repository on github
2. git clone https://github.com/username/repo
3. git checkout -b gh-pages
4. check in an index.html
5. git push origin gh-pages
6. wait up to 10 minutes the first time for the page to publish
7. view https://username.github.com/repo on your mobile device

For each change:

1. git commit -am "made it more awesome"
2. git push origin gh-pages
3. reloading on your mobile device

Go Local

While GitHub Pages are a great way to verify the app is working on real devices, and share with others, this method adds a lot of time to the feedback loop when developing. I prefer to find out what is working and what is not working without committing and pushing. Luckily, Mac and Unix systems have python on their side by default.

Run the following command from the repository to serve the entire directory on port 8000

python -m SimpleHTTPServer

With a server spinning, we can boot either an Android or iPhone simulator.

• On Android, you can access your machine with magic IP 10.0.2.2:8000
• On iPhone, it’s simply localhost:8000

No need to restart the server, commit, or push. For each change:

1. reload the webpage in the simulator