Getting the Native Feel JavaScript for Mobile and Tablet HTML5 Apps                      Bill Fisher                   @fis...
overview• HTML5 Apps vs. Native Apps• Touchy: a jQuery plugin for touch events• Get accelerated: js optimization + css  an...
iLose• expensive to build for multiple platforms• app store fees and rules• loss of control over customer data• no control...
Financial Times• Built by Assanka. Raises the bar.• Use of HTML5 technologies and hacks to achieve  an optimal user experi...
Hot Studio• Recent work has been geared toward  mobile or tablet• Application frameworks like Sencha Touch  or jQuery Mobi...
touch event libraries• touchscroll.js• iscroll-4• JSGestureRecognizer• touchy - github.com/HotStudio/touchy
touchy: a jQuery plugin• layered on top of ontouchstart, ontouchmove and  ontouchend• loosely based on native iOS gesture ...
using touchyExample #1var handleTouchyPinch = function (e, $target, data) {   $target.css(webkitTransform,scale( + data.sc...
event handlers: use css3• Use 3D CSS for hardware acceleration• *-transform: translateZ(0) or translate3d(0,0,0)    hardwa...
event handlers: javascript• throttled frame rates• name anonymous functions so they may be  profiled• separate reading and ...
things to avoid• DOM manipulation: hit the DOM once• accidental browser layout reflow• animated css shadows and gradients
example uses of js + css3 • HTML5 Rocks • http://desandro.com/ • Touchy examples
further considerations• base64 encoded images• requestAnimationFrame• offline use: save to homescreen + cache  manifest + l...
FTW• build and advocate for optimized HTML5 apps• create and contribute to open source projects  that make development eas...
Links: HTML5 AppsHTML5 Apps vs. Native Appshttp://www.readwriteweb.com/mobile/2011/08/android-users-prefer-native-ov.phpht...
Links: TouchTouch Events and Touchy jQuery Pluginhttps://github.com/HotStudio/touchyhttps://github.com/davidaurelio/TouchS...
Links: CSS3 and PerfCSS3 Transforms and Animationshttp://www.webkit.org/blog/386/3d-transforms/http://desandro.github.com/...
Thanks!bill.hotstudiodev.com
Getting the-native-feel
Getting the-native-feel
Upcoming SlideShare
Loading in …5
×

Getting the-native-feel

1,013 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,013
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • \n
  • lots more research...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Getting the-native-feel

    1. 1. Getting the Native Feel JavaScript for Mobile and Tablet HTML5 Apps Bill Fisher @fisherwebdev bill.hotstudiodev.com
    2. 2. overview• HTML5 Apps vs. Native Apps• Touchy: a jQuery plugin for touch events• Get accelerated: js optimization + css animations• Further considerations
    3. 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. 4. 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
    5. 5. 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”
    6. 6. touch event libraries• touchscroll.js• iscroll-4• JSGestureRecognizer• touchy - github.com/HotStudio/touchy
    7. 7. 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
    8. 8. using touchyExample #1var handleTouchyPinch = function (e, $target, data) { $target.css(webkitTransform,scale( + data.scale + , + data.scale + ));};$(#my_div).bind(touchy-pinch, handleTouchyPinch);Example #2var 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);
    9. 9. 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
    10. 10. 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
    11. 11. things to avoid• DOM manipulation: hit the DOM once• accidental browser layout reflow• animated css shadows and gradients
    12. 12. example uses of js + css3 • HTML5 Rocks • http://desandro.com/ • Touchy examples
    13. 13. further considerations• base64 encoded images• requestAnimationFrame• offline use: save to homescreen + cache manifest + local storage• W3C widgets
    14. 14. 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
    15. 15. Links: HTML5 AppsHTML5 Apps vs. Native Appshttp://www.readwriteweb.com/mobile/2011/08/android-users-prefer-native-ov.phphttp://www.mobiletech.mobi/blog/mobile-web-vs-native-apps-revisited/11672/http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.phphttp://www.readwriteweb.com/archives/web_vs_native_mobile_app_forrester_says_do_both.phpFinancial Times HTML5 Apphttp://vimeo.com/26604635http://www.ft.com/
    16. 16. Links: TouchTouch Events and Touchy jQuery Pluginhttps://github.com/HotStudio/touchyhttps://github.com/davidaurelio/TouchScrollhttps://github.com/mud/jsgesturerecognizerhttps://github.com/cubiq/iscrolldeveloper.apple.com:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.htmlhttp://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/
    17. 17. Links: CSS3 and PerfCSS3 Transforms and Animationshttp://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 Optimizationhttp://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
    18. 18. Thanks!bill.hotstudiodev.com

    ×