Macadamian Blog

Mobile Web Development with HTML5: Lessons Learned

The following is information we learned from Dan Menard (dan-menard.com ) when he gave us an internal presentation on HTML5. This is the final post in this series on HTML 5.

In my last blog post I explained how you can stay up-to-date on the latest HTML5 topics. In my final HTML5 post (for now!) I’ll cover some of the on-the-ground lessons we’ve learned from recent mobile web development projects.

1) Mobile projects take a LONG time to ramp up

Getting a mobile web project ramped up will always take longer than you expect and the process can be painful. You need to be prepared to learn new things, make mistakes and accept delays. That’s because HTML5 tools, frameworks and technologies are always changing and you can’t simply replicate things from one project to the next. New, more effective tools are continuously available, so you will always need to set aside time beforehand to determine whether they will apply and, if so, how to use them.

Even if your development team is made up of superstars with lots of mobile web experience, our advice is to set aside more ramp up time than you think you’ll need, because there will always be a lot to learn.

2) You’re not going to get it right on the first try

Mobile web development is *really* hard. On almost every project I’ve been involved with, we’ve ended up throwing away the first bit of code we produced. There’s a learning curve associated with new HTML5 frameworks like Sencha Touch or jQuery mobile, and you’ll find that your initial code will need to be rewritten as you learn more about its intricacies.

As an example of this, we recently helped a customer develop a calendar app using Sencha components. Originally, we used dozens of Sencha components to create the timeline and scheduler, but they made the application much too slow. We then realized that we should have been using more markup to reduce the number of JavaScript objects stored in memory. In this particular case, we ended up rewriting the code at least twice.

To avoid having to write *too* much code, it can be helpful to set out guidelines for your team to ensure that you have a strong architectural pattern in place. This will help you to avoid making the same mistake over and over and will help you develop an app that is easier to maintain.

Also, you need to run good code reviews on mobile app projects. Strict code reviews early in the project will help you to stay organized and avoid negative design patterns.

3) Debugging JavaScript is no fun

It doesn’t take long to realize that debugging JavaScript is painful… To save a lot of time and effort, you should run the scripts in your browser and mock as much of it as possible. If you need to mock Cordova or PhoneGap for your project, do it. It’ll save you a lot of time.

Once you’re running the scripts, spend some time hacking away at them to produce accurate test results. JavaScript in your browser will run faster than it would on a mobile device, so you won’t be able to reproduce certain errors (like race conditions) properly. You’ll need to hack the system a bit – perhaps by adding timeouts, for example – to run your test conditions accurately, but it is worth the effort.

Final Thoughts on HTML5

We’re excited about HTML5 because it offers so many new features, supports the latest multimedia and can really speed and enhance development – especially for mobile apps. This blog series has only scratched the surface of what you’ll be able to accomplish with HTML5. If you have any specific questions or want help deciding whether HTML5 is right for an upcoming project, drop me a line!