Improving Your HTML5 Mobile Development Experience

Building HTML5 mobile applications is increasing in popularity with the rise of tools like Kendo UI Mobile and PhoneGap. For those of us who want to reach multiple platforms with the ease of composition that HTML5 offers, this is far too good an opportunity to pass up.

As you begin your foray into building HTML5 mobile applications, you will notice the painful absence of an integrated stack to go from 0 to app store while testing along the way. This makes sense really. You build the application on a desktop, not a mobile device. The device has API’s and capabilities that your computer does not and vice versa.

Especially when working with PhoneGap, it can get a bit frustrating as you are constantly in a fragmented build iteration that doesn’t necessarily leave you with a good feeling about whether or not your application is actually going to work when you deploy it to your a device.  But there are some tricks that you can use to speed up your development time and give you a warm and fuzzy feeling about how your end product is actually going to look and function.

Get The Kendo UI Mobile Bootstrap

In cooperation with Adobe recently, I created a Kendo UI Mobile Bootstrap which gives you a basic mobile layout with which to jumpstart your projects. You can download the zipped version or fork the project. When you navigate to index.html, you can type :

MYAPP.run();

That will initialize the application in your browser. When you run this project in a PhoneGap project, it automatically calls the MYAPP.run when the device is ready. If you don’t want to use PhoneGap, just remove the reference from the index.html page and call MYAPP.run on page load.

Running Your App

Use emulate.phonegap.com

Now that you have the application running inside your browser, you need to be able to test and see how it’s going to perform with PhoneGap. Not being able to test that is a major stumbling block standing in your way. To do this, you are first going to need to install the Ripple Emulator from the Chrome Web Store. Once the extension is installed, navigate over to emulate.phonegap.com.

This is really just a front for launching the Ripple emulator with some parameters (as best I can tell), but that’s OK! Type in the web address of your project - it needs to be in a web accessible location on your machine. It does not appear to work with file references if you just open the index.html file from the file system in Chrome.

You may notice that the project has a reference to phonegap.js in the index.html file, but there is no phonegap.js file. That’s because the emulator adds it for you depending on which version you select. You can specify different versions of either the old phonegap.js or the now renamed cordova.js and it will load with those settings. I was only able to get the phonegap.js version to work for me.

Advantages

1. You can see what your application will look like on a plethora of different devices by changing the device.
2. You can emulate certain hardware API’s like shake, location.
3. You can simulate network lag.
4. You have some fine grained control over calling device events - like pause, resume, online and offline.
5. You can override the cross-domain request blocking that is an issue in the browser, but not on mobile.

Drawbacks

1. The emulator was a bit flaky for me at times. Sometimes it would load my app flawlessly, and sometimes not at all while giving a non-descriptive error.
2. It also doesn’t offer support for things like capturing images from the camera or reading contacts. Not having a FULL emulation experience doesn’t really get the job done, but it sure does mitigate some of the pain.

Use Chrome Dev Tools

If you don’t want to use the ripple emulator, you can actually override the user agent right within the Chrome Dev Tools.

Override The User Agent

Open the Dev Tools by pressing Ctrl + Shift + i on Windows, or Command + Option + i on Mac. Select the little gear in the bottom right-hand corner. A black overlay will come up with some settings. On the right-hand side, you can choose to change the user agent to be something else. Chrome will even resize the display area for you to match the resolution of the selected device if you select Override device metrics. This is an extremely convenient way to swap between different platforms to checkout how the Kendo UI Adaptive Rendering Framework is going to show your application.

Another interesting thing about doing this, is that if you browse to another site - say twitter.com - and you are spoofing a mobile device user agent, you get the mobile version of the site. This trick works well if you want to develop two versions of your site and you want to test them both without having a bunch of mobile testing devices.

Debugging

This is probably one of the hardest things to crack in HTML5 mobile app development. We already talked about the chasm between the desktop and the mobile device. Furthermore, the dev tools we have in browsers are just phenomenal. That’s what we have become accustomed to using.

Unfortunately for mobile, it’s a bit trickier. The PhoneGap wiki provides some information regarding this, but it’s by and large the wild wild west. You can use a tool like Weinre, but it tends to be hit or miss and it doesn’t give you all the visibility that you might want for a mobile application. Things like breaking into code are still not supported.

Ripple Emulator

As mentioned above, the Ripple Emulator does provide a certain level of debugging, but it’s via the Chrome Dev Tools. The combination of that with the emulation functions powered by Ripple is a good combo. However, it’s difficult to know exactly where the Ripple project is going since it’s acquisition by Blackberry.

Deployment

When it comes to deploying, you of course need to compile for different platforms and to do that, you need their tools. PhoneGap Build is a site that will build all of your applications for you for every supported PhoneGap platform. If you have an iOS developer key, you can even deploy straight to your iOS device. It’s a really neat concept and there will be an article coming soon on the Adobe Developer Connection that will walk you through using Kendo UI Mobile with PhoneGap Build so be on the lookout for it!

Cross-Domain Is A Pain

PhoneGap applications have the concept of a “whitelist”, which you can essentially set to “*”, and that allows all cross domain requests. This is kind of a bummer when you are trying to test, because your browser isn’t going to go for that - at all.

Enable Cross-Domain Requests In Chrome

You can override the cross-domain blocking that Chrome has in place by default. To do this, you need to launch Chrome.exe with a switch.

C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security

If you want to be able to browse to the file directly and still allow cross-domain requests, you will need to add the —allow-access-from-files switch as well.

C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security --allow-access-from-file

 

If you do this, do not forget that you are running in a very vulnerable state and you should NOT be randomly surfing the internet with these switches enabled.

The above syntax was lifted from Joshua McGinnis’s excellent blog post on the same subject.

Turn Any JSON Response Into A JSONP Response

If you don’t want to have to run Chrome in a mode where it’s completely naked and slightly embarrassed, you can actually turn any JSON response into a JSONP response without having to change anything on your server. How does that work? With an nifty little site called jsonp.jit.su. We here at Kendo UI approve of the martial arts reference there.

What you do is pass in the name of your callback and the URL of the straight JSON request and this little middle man site will translate it to JSONP for you. It’s not ideal for ongoing development, but its fantastic when you are mashing up your ideas. Here is a sample request that pulls the Reddit programming Feed.

http://jsonp.jit.su/?url=http://www.reddit.com/r/programming.json

There is a callback parameter as well, but you don’t need it because the Kendo UI DataSource will take care of sending this for you. Just remember to set your type on the transport to jsonp.

What About A Single End-To-End Solution?

Like I mentioned previously, it doesn’t exist yet.

Ideally, you would need your IDE to launch your mobile debugger that emulated native events and then the IDE should allow you to package your application for deployment on mobile devices. Regardless of the OS you are building on. Why pay $99 for a developer subscription to anything before you are confident that you can effectively write apps for the platform and see them run on YOUR device?

Actually, there’s hope for you and me both in this department. Unfortunately, I can’t say much about it right now - but I can recommend that you read this article. You will be glad you did.