New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Getting the-native-feel
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
4.
5.
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”
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/
bill fisher, hot studio, slides in pdf at url, html5 app vs. web app \n
peter-paul koch: html5 app\ntouch\ngetting the native feel in the event handlers\ni’ll briefly touch on other issues in developing html5 apps\n
apple wants 30% from publishers...?\n
\n
\n
Gives FT huge flexibility and leverage in negotiating with Apple. Do they even need Apple?\n\n
Can’t talk directly about recent work, but it was an HTML5 app.\nLots of interest in mobile / tablet\nBecause touch is inherently more limited than a mouse and keyboard, the relationship between different actions can result in conflict...\n
\n
webkit cross browser -- mobile safari and android browser\nlink to ben alman at the end\ndata - pinch not only scale, but current center point. pinch only works in recent android.\n
not necessary to maintain the lexical scope for “this” because you get $target\n\n3d transforms - next slide.\n\n
more research here...\n\nold android and rotate + 3d ?\n
Frame rates don’t need to be faster than 30fps, typically. definitely not more than 60fps, the refresh rate of the screen. Events fire more rapidly, so the response needs to be throttled.\nHTML5 Rocks, link at end.\n\n
Manipulate DOM fragments, then plug them in.\nLots of things can trigger reflow. Any display:none, any check of offsetWidth, etc.\nCheck out Paul’s 30min video on browser optimization.\n