Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tools of the Mobile Web

Tools of the Mobile Web

The deck from my talk at the inaugural Emerging Tech Meetup at Cantina.

Matthew Crist

February 29, 2012
Tweet

More Decks by Matthew Crist

Other Decks in Programming

Transcript

  1. MOBILE
    Tools of the
    MOBILE
    web

    View full-size slide

  2. Native
    Hybrid
    Mobile Web
    Frameworks

    View full-size slide

  3. All-in-one frameworks
    Sencha Touch too

    View full-size slide

  4. Frameworks allow for quick
    development of mobile apps.


    Place Puppy Mobile



    Puppies
    Slide
    Slide Up


    List of Puppies
    Another List of Puppies



    © 2012 Place Puppy


    No Sencha Touch example could fit in a slide.

    View full-size slide

  5. Frameworks are great for
    quick development, but...

    View full-size slide

  6. ...framework apps
    just never feel right.

    View full-size slide

  7. If an app looks native, it
    should perform natively.

    View full-size slide

  8. Framework experiences
    tend to be choppy...

    View full-size slide

  9. ...and their scrolling sucks.

    View full-size slide

  10. If you’re going with the
    web, embrace the web.
    The good & bad parts.
    http://cri.st/EUli

    View full-size slide

  11. It’s possible to use a framework
    while embracing the web.
    http://bagcheck.com

    View full-size slide

  12. Hybrid
    Mobile Web
    Frameworks
    à la carte

    View full-size slide

  13. 50% of mobile users abandon
    after 6-10 seconds.

    View full-size slide

  14. Server Response
    Processing
    +
    Page time

    View full-size slide

  15. Every library adds
    processing time.

    View full-size slide

  16. Backbone.js
    Sammy.js
    Spine.js
    Javscript MVC
    Agility.js
    Knockout.js
    Angular.js
    Ember.js
    Eyeballs.js
    Client side MVC...

    View full-size slide

  17. ... can be overkill.
    Handle with care.

    View full-size slide

  18. Micro libraries can ensure you
    only use what you need.
    jQuery Zepto Zest
    http://cri.st/EdMn
    http://zeptojs.com/
    > >

    View full-size slide

  19. Ender.js helps too...
    “Build only what you need, when
    you need it.”

    View full-size slide

  20. http://microjs.com/

    View full-size slide

  21. ~92% of mobile is webkit...

    View full-size slide

  22. ...build if it were 0%

    View full-size slide

  23. Replace JavaScript
    animations with CSS3...

    View full-size slide

  24. ...fall back to Javascript if
    you have to.

    View full-size slide

  25. CSS3’s translate3d utilizes
    hardware acceleration.
    .selector {transform: translate3d(0,0,0)}

    View full-size slide

  26. Use local storage to cache to
    maximize performance.
    window.localStorage.set(‘something’, variable);

    View full-size slide

  27. Cache manifest in HTML5 can
    reduce calls to the server.

    ...

    CACHE MANIFEST
    puppy.html
    puppy.css
    jquery.min.js
    puppy.js
    puppy.html
    puppy.appcache

    View full-size slide

  28. Mobile Web
    Frameworks
    à la carte
    Responsive
    Design

    View full-size slide

  29. Great for content
    sites and some apps.

    View full-size slide

  30. Doesn’t solve 100% of
    the problem.

    View full-size slide

  31. Use responsive principals
    for device targeted sites.

    View full-size slide

  32. Frameworks
    à la carte
    Responsive Design
    Fin.

    View full-size slide