TX Dev Fest Native UX for the Web notes

nativeuxfortheweb.txt

Native UX for the Web
  Andrew Miller - Atlas Learning
  Current web - access content, consume content
    Want to create applications on the web
      Gesture-based rather than link based on mobile
      Websites on tablets feel different, off
  Example: LiveSlide
    drawing, touch interaction, editing all through browser JS
  IE is not an excuse
    Force users to upgrade
    Think about who users are
      Do you lose more people by making a native app or by not supporting old versions of IE?
  "Javascript is slow"
    Spectral analysis of 10,000 floating point numbers vs. C: very slow
    But
      Javascript is not whole application
      Browser handles CPU and GPU-intensive tasks
      Use CSS3 transforms and browser features when you can, don't have to worry about JS slowness
  Single page, small updates
    Angular
    Node.js + Socket.io
    MeteorJS
      Not production-ready
      Packaged solution
  Memory
    Mobile Safari has very little memory
    Garbage collection?
      Ambiguous in JS spec
      Does not work the way you want it to
      Set an object to null, Safari will crash before GC'ing that element
    How to avoid problems
      Avoid unnecessary variables
      Recycle complex objects
        Helpful Obj-C thing: [UITableView dequeueReusableCellWithIdentifier:@"foo"]
      Use prototypes
        Will make functions on objects once and reuse them
    Do
      Prefer native JS functions (feels like subtle dig at jQuery and underscore)
      Use timeouts to break up large tasks
      Progressively enhance
    Don't
      Don't use UIWebView
        Doesn't have Mobile Safari's Javascript acceleration (Nitro engine)
          Similar to V8, precompiling, etc.
      Don't touch the dom
        Offload it to something like Angular if you have to
        Slows app down
        Do all at once if you can
  Not Javascript
    What's wrong with HTML5 apps?
      The last 10%
        Facebook put in the first 90% on their HTML5 app but left out the bits that make it feel like a tablet application
    Facebook problems
      Developers abandon niceties
        Header moves with drawer
        No animation
        Doesn't seem to use absolute positioning
          Not good for text wrapping, but works great for applications
          Especially great when you know your screen size
        CSS niceties
          Take the extra time to make CSS styles for things that need it
          Very quick, very easy, especially with media queries
        Safari linen
          Desktop has it as well
          Defining characteristic of website, not of apps
          Easy to prevent
            Prevent default (return false) on finger drag
            Reapply for elements you want to scroll
    Animation
      Don't use JS animations if you can avoid it
        Blocking
        Slows app down
      Animate absolutely positioned elements
        Removed from flow of document
        Will look better
      Use Translate3d as frequently as possible
        3D transform forces graphics processing onto GPU
        Even 2D animations much faster
    Helpful tidbits
      Make Retina graphics
      Make sprites and minify code
      Change classes, not attributes
        Page reflows
          How do we show an element?
            el.show();
            el.css('display', 'block')
            el.addClass('show')
          Performance difference between three options is noticable
            Adding class faster than attributes by about 10-15%
  Improving design
    Fewer buttons and more gestures
      Should be inherently obvious what to do without text
    Disable pinch and zoom
      Goes along with canvas for eliminating "website feel"
      Meta tag will get rid of this
    Less text
    Scrolling is not the answer
      Too much to fit on screen, come up with new UI
  Looking forward
    WebGL
      Another way of offloading from Javascript
    Web Workers
      Threading
    Web RTC
      P2P media
    Google
      Blink
      Fiber
      V8
  Misc.
    Easy to make iPad icon with meta tag
    Modernizr has low memory use
    Text-heavy apps by Atlas have accessibility mode, make text larger
    3rd-party browsers on iPad lose Nitro optimizations
    Enterprise distribution is difficult to coordinate, browser-based licensing system is much easier
      Mobile Device Managment is an option
      However, web apps give client device options