$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. Native
    Hybrid
    Mobile Web
    Frameworks

    View Slide

  3. All-in-one frameworks
    Sencha Touch too

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Framework experiences
    tend to be choppy...

    View Slide

  9. ...and their scrolling sucks.

    View Slide

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

    View Slide

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

    View Slide

  12. Hybrid
    Mobile Web
    Frameworks
    à la carte

    View Slide

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

    View Slide

  14. Server Response
    Processing
    +
    Page time

    View Slide

  15. Every library adds
    processing time.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. http://microjs.com/

    View Slide

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

    View Slide

  22. ...build if it were 0%

    View Slide

  23. Replace JavaScript
    animations with CSS3...

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

  28. Mobile Web
    Frameworks
    à la carte
    Responsive
    Design

    View Slide

  29. Great for content
    sites and some apps.

    View Slide

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

    View Slide

  31. Use responsive principals
    for device targeted sites.

    View Slide

  32. Frameworks
    à la carte
    Responsive Design
    Fin.

    View Slide