JavaScript for Mobile and Tablet HTML Apps

							                 Getting the Native Feel
                             JavaScript for Mobile and Tablet HTML5 Apps



                                                  Bill Fisher
                                               @fisherwebdev
                                           bill.hotstudiodev.com




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


Tuesday, September 6, 2011
                                          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




Tuesday, September 6, 2011
Tuesday, September 6, 2011
Tuesday, September 6, 2011
                             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


Tuesday, September 6, 2011
                                     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”




Tuesday, September 6, 2011
                  touchy: a jQuery plugin
         • github.com/HotStudio/touchy
         • 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

Tuesday, September 6, 2011
                                      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);




Tuesday, September 6, 2011
                event handlers: use css3
         • Use CSS 3D Transforms 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




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




Tuesday, September 6, 2011
                             things to avoid

                    • DOM manipulation: hit the DOM once
                    • accidental browser layout reflow
                    • animated css shadows and gradients



Tuesday, September 6, 2011
            example uses of js + css3

                    • HTML5 Rocks
                    • http://desandro.com/
                    • Touchy examples



Tuesday, September 6, 2011
                    further considerations
                    • base64 encoded images
                    • requestAnimationFrame
                    • offline use: save to homescreen + cache
                             manifest + local storage
                    • W3C widgets


Tuesday, September 6, 2011
                                      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


Tuesday, September 6, 2011
                             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/




Tuesday, September 6, 2011
                                             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/




Tuesday, September 6, 2011
                             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




Tuesday, September 6, 2011
                             Thanks!
                             bill.hotstudiodev.com




Tuesday, September 6, 2011