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

Lessons Learned in Mobile Web App Development

Lessons Learned in Mobile Web App Development

Brandon Keepers

May 23, 2011
Tweet

More Decks by Brandon Keepers

Other Decks in Programming

Transcript

  1. Ordered List
    Brandon Keepers
    Grand Rapids Web Development Group
    May 23, 2011
    Lessons Learned
    in Mobile Web App Development

    View full-size slide

  2. The App
    Static HTML

    View full-size slide

  3. The App
    Static HTML
    CSS

    View full-size slide

  4. The App
    Static HTML
    CSS
    JSON API

    View full-size slide

  5. The App
    Static HTML
    CSS
    JSON API
    JavaScript

    View full-size slide

  6. The App
    Static HTML
    CSS
    JSON API
    JavaScript
    JavaScript

    View full-size slide

  7. The App
    Static HTML
    CSS
    JSON API
    JavaScript
    JavaScript
    JavaScript

    View full-size slide

  8. CSS
    challenges

    View full-size slide

  9. -webkit-*
    iOS Android Blackberry Palm Symbian

    View full-size slide

  10. position: fixed;

    View full-size slide

  11. Header
    Footer
    Scrollable
    Content

    View full-size slide

  12. ader
    oter
    llable
    ntent

    View full-size slide

  13. header {
    position:fixed;
    top:0; right:0; left:0;
    height:56px;
    }
    .content {
    margin:56px 0 48px 0;
    }
    footer {
    position:fixed;
    bottom:0; right:0; left:0;
    height:56px;
    }
    fixed
    ader
    oter
    llable
    ntent

    View full-size slide

  14. header {
    position:fixed;
    top:0; right:0; left:0;
    height:56px;
    }
    .content {
    margin:56px 0 48px 0;
    }
    footer {
    position:fixed;
    bottom:0; right:0; left:0;
    height:56px;
    }
    fixed
    doesn’t
    w
    ork
    ader
    oter
    llable
    ntent

    View full-size slide

  15. header {
    position: absolute;
    top:0; right:0; left:0;
    height:56px;
    }
    .content {
    position: absolute;
    top:56px; bottom: 48px; right:0; left:0;
    overflow: auto;
    }
    footer {
    position: absolute;
    bottom:0; right:0; left:0;
    height:56px;
    }
    absolute
    ader
    oter
    llable
    ntent

    View full-size slide

  16. header {
    position: absolute;
    top:0; right:0; left:0;
    height:56px;
    }
    .content {
    position: absolute;
    top:56px; bottom: 48px; right:0; left:0;
    overflow: auto;
    }
    footer {
    position: absolute;
    bottom:0; right:0; left:0;
    height:56px;
    }
    absolute
    doesn’t
    w
    ork
    ader
    oter
    llable
    ntent

    View full-size slide

  17. START
    FINISH
    DEMO

    View full-size slide

  18. START
    FINISH
    DEMO

    View full-size slide

  19. CSS3 Effects

    View full-size slide

  20. CSS3 Effects
    -webkit-box-shadow

    View full-size slide

  21. CSS3 Effects
    -webkit-box-shadow
    background: -webkit-gradient(…)

    View full-size slide

  22. CSS3 Effects
    -webkit-box-shadow
    background: -webkit-gradient(…)
    -webkit-transform

    View full-size slide

  23. Acceleration
    Hardware

    View full-size slide

  24. START
    FINISH
    DEMO

    View full-size slide

  25. START
    FINISH
    DEMO

    View full-size slide

  26. Solution
    No CSS3 fanciness
    No animation on Android

    View full-size slide

  27. JavaScript
    challenges

    View full-size slide

  28. Debugging
    is hard

    View full-size slide

  29. Execution Priority
    iOS prioritizes UI
    Android prioritizes JavaScript

    View full-size slide

  30. Organization
    Code

    View full-size slide

  31. Controllers
    Views Views
    Models
    ?

    View full-size slide

  32. $ find public/javascripts/ -type f | wc -l
    70
    $ du -sh public/javascripts/
    916K public/javascripts/

    View full-size slide

  33. Concated & Minified
    161K

    View full-size slide

  34. Lessons Learned

    View full-size slide

  35. Lessons Learned
    mobile devices are slow-ish

    View full-size slide

  36. Lessons Learned
    mobile devices are slow-ish
    the browser can but the device can’t

    View full-size slide

  37. Lessons Learned
    mobile devices are slow-ish
    the browser can but the device can’t
    lack of consistency across Android
    devices

    View full-size slide

  38. Resources
    http://www.html5rocks.com/tutorials/speed/html5/
    http://bit.ly/grwebdev-mobile

    View full-size slide

  39. Ordered List
    Thank you!
    [email protected]
    @bkeepers
    Brandon Keepers
    Grand Rapids Web Development Group
    May 23, 2011

    View full-size slide