8 steps to building a lean and mean HTML5 application

Guest post from Marc Lapierre, HMI developer for the QNX CAR 2 application platform

Have you seen photos of the QNX reference vehicle? If so, you've already caught a glimpse of the rich user experience that HTML5 can bring to car infotainment systems. The vehicle's head unit, in particular, makes extensive use of HTML5.

The members of the QNX CAR 2 team have considerable experience with HTML5, and we follow a number of “best practices” to achieve optimal performance. If you use HTML5, here are 8 techniques proven to help applications perform as smoothly and responsively as possible:

1. Use 3D, rather than 2D, transformations — For example, instead of translateX(x), use translate3d(x,y,z). This will hardware-accelerate the translation. Similar methods exist for most other transformations. Also, avoid animating with JavaScript libraries!

2. Use opacity, rounded corners, and gradients sparingly — If you use these elements sparingly and on mostly static objects, you should achieve decent performance. But when you mix them with animations, buttons, or anything else that gets redrawn often, performance will suffer. Consider using images for framing rather than building components with many specific CSS attributes.

3. When modifying elements, remove them from the DOM — This technique is especially helpful when updating several DOM fields at once. For example, if you are scrolling through a list of 100 contacts and want to refresh them, updating them one by one will cause the list to redraw 100 times. But if you remove the entire list, update it in memory, and then re-add it, you will incur only 2 redraws.

4. Avoid canvas and SVG — Hardware acceleration for canvas isn’t always available in WebKit or other browsers, and might incur performance hits in some cases. Likewise, SVG isn’t always accelerated on mobile and embedded platforms.

5. Hide elements you don’t need — Adding display:none to elements that don’t need to be displayed will prevent them from being rendered.

6. Don’t link across pages — When developing websites, it is common to link across pages. But in mobile applications, this approach detracts from the user experience — when using an app, it can be jarring to see the white screen that often appears when moving from one page to another. For a better UX, use AJAX requests to pull in data dynamically, and update your interface accordingly when the result is received.

7. Avoid libraries intended for the desktop — Some JavaScript libraries are designed for use on a desktop browser with a powerful CPU. Try to limit the number of third-party JavaScript libraries included in your application or seek out versions optimized for mobile use.

8. Use image sprites for pre-loading active element states — For example, using sprites for buttons with a “pressed” state allows you to have the alternative state pre-cached and ready to display, rather than having to load or draw assets on demand.

What about you? Do you have any resource-saving or performance-optimizing techniques that you’d like to share?

---

Marc Lapierre is an HMI developer on the QNX CAR 2 application platform team, where he focuses on development of user applications using HTML5, JavaScript and CSS3, and on improving coding efficiency and standards in this environment. Before joining QNX Software Systems, Marc worked at RIM, developing social networking and multimedia applications for smartphones and the BlackBerry PlayBook tablet.