Bill Fisher discusses the benefits of HTML5 Apps, and how to get them to look and feel like native apps for mobile devices.

1. Getting the Native Feel
JavaScript for Mobile and Tablet HTML5 Apps
Bill Fisher
@fisherwebdev
bill.hotstudiodev.com

2. overview
• HTML5 Apps vs. Native Apps
• Touchy: a jQuery plugin for touch events
• Get accelerated: js optimization + css
animations
• Further considerations

3. iLose
• expensive to build for multiple platforms
• app store fees and rules
• loss of control over customer data
• no control over distribution channel and
promotion/marketing issues

6. Financial Times
• Built by Assanka. Raises the bar.
• Use of HTML5 technologies and hacks to achieve
an optimal user experience
• User promptedlocalsave to homescreen and to
allow 50mb of
to
storage
• Last week: Financial Times kicked out of App Store
• Presentation on how they built it: http://
vimeo.com/26604635

7. Hot Studio
• Recent work has been geared toward
mobile or tablet
• Application frameworks like Sencha Touch
or jQuery Mobile are too heavy-handed
• Need good control over the touch
“environment”

8. touch event libraries
• touchscroll.js
• iscroll-4
• JSGestureRecognizer
• touchy - github.com/HotStudio/touchy

9. touchy: a jQuery plugin
• layered on top of ontouchstart, ontouchmove and
ontouchend
• loosely based on native iOS gesture recognizers:
drag, swipe, pinch, rotate, longpress
• architecture based on Ben Alman’s jQuery special
events article
• event handlers receive the “phase” of the event in
a parameter, in addition to other data

10. using touchy
Example #1
var handleTouchyPinch = function (e, $target, data) {
$target.css('webkitTransform','scale(' + data.scale + ',' + data.scale + ')');
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
Example #2
var degrees = 0,
handleTouchyRotate = function (e, phase, $target, data) {
if (phase === 'move') {
degrees += data.degreeDelta;
$target.css('webkitTransform','rotate3d(0,0,0,'+ degrees +'deg)');
}
};
$('#my_div').bind('touchy-rotate', handleTouchyRotate);

11. event handlers: use css3
• Use 3D CSS for hardware acceleration
• *-transform: translateZ(0) or translate3d(0,0,0)
hardware acceleration debugging:
$ CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/
Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone
Simulator

12. event handlers: javascript
• throttled frame rates
• name anonymous functions so they may be
profiled
• separate reading and modifying of DOM values
into two distinct phases of operation

13. things to avoid
• DOM manipulation: hit the DOM once
• accidental browser layout reflow
• animated css shadows and gradients

14. example uses of js + css3
• HTML5 Rocks
• http://desandro.com/
• Touchy examples

15. further considerations
• base64 encoded images
• requestAnimationFrame
• offline use: save to homescreen + cache
manifest + local storage
• W3C widgets

16. FTW
• build and advocate for optimized HTML5 apps
• create and contribute to open source projects
that make development easier
• dream big and push the limits!
• open systems will win

17. Links: HTML5 Apps
HTML5 Apps vs. Native Apps
http://www.readwriteweb.com/mobile/2011/08/android-users-prefer-native-ov.php
http://www.mobiletech.mobi/blog/mobile-web-vs-native-apps-revisited/11672/
http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
http://www.readwriteweb.com/archives/web_vs_native_mobile_app_forrester_says_do_both.php
Financial Times HTML5 App
http://vimeo.com/26604635
http://www.ft.com/

18. Links: Touch
Touch Events and Touchy jQuery Plugin
https://github.com/HotStudio/touchy
https://github.com/davidaurelio/TouchScroll
https://github.com/mud/jsgesturerecognizer
https://github.com/cubiq/iscroll
developer.apple.com:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html
http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/
http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/

19. Links: CSS3 and Perf
CSS3 Transforms and Animations
http://www.webkit.org/blog/386/3d-transforms/
http://desandro.github.com/3dtransforms/
http://www.html5rocks.com/en/tutorials/3d/css/
http://www.joelambert.co.uk/cssa/
Browser Optimization
http://paulirish.com/2011/dom-html5-css3-performance/
http://www.html5rocks.com/en/tutorials/speed/html5/
http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/
http://calendar.perfplanet.com/2009/rendering-repaint-reflow-relayout-restyle/
http://www.slideshare.net/madrobby/extreme-javascript-performance

20. Thanks!
bill.hotstudiodev.com