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

(short) Intro to Mobile Web App Dev

(short) Intro to Mobile Web App Dev

Presentation at the GOTO Berlin 2013 conference.

Adrian Kosmaczewski

October 17, 2013
Tweet

More Decks by Adrian Kosmaczewski

Other Decks in Technology

Transcript

  1. (short) Intro to
    Mobile Web App Dev
    Adrian Kosmaczewski - Trifork GmbH

    View Slide

  2. Adrian Kosmaczewski

    View Slide

  3. View Slide

  4. Trifork GmbH

    View Slide

  5. trifork.com
    [email protected]
    @akotrifork

    View Slide

  6. View Slide

  7. View Slide

  8. http://www.flickr.com/photos/thenovys/3908472000/

    View Slide

  9. Alternatives

    View Slide

  10. http://akosma.com/2009/10/29/iphone-apps-without-objective-c/

    View Slide

  11. http://t2impact.blogspot.com/2010/11/reflections-from-pcw17-november-2010.html

    View Slide

  12. Web or native apps?

    View Slide

  13. update frequency
    usage frequency
    UI complexity
    native
    apps
    web
    apps
    games
    calculator
    business apps
    reports
    compatibility with other
    mobile platforms

    View Slide

  14. View Slide

  15. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

    View Slide

  16. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

    View Slide

  17. Browsers
    Browser Share
    Safari 54%
    Android 22%
    Opera Mini 7%
    Chrome 7%
    BlackBerry 2%
    http://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1

    View Slide

  18. WebKit

    View Slide

  19. A family, actually

    View Slide

  20. http://www.quirksmode.org/webkit.html

    View Slide

  21. View Slide

  22. Technologies

    View Slide

  23. http://newvoicesforresearch.blogspot.com/2010_04_01_archive.html

    View Slide

  24. http://www.w3.org/2011/02/mobile-web-app-state.html
    SVG
    CSS3
    WOFF
    Canvas
    CSS 3D
    CSS Animations



    Touch events in DOM
    HTML Speech
    Web Storage
    Contacts API
    Calendar API
    File Writer API
    Geolocation API
    XMLHttpRequest
    Websockets
    Messaging API
    Application Cache
    HTML5
    Web Workers

    View Slide

  25. Cross-Browser

    View Slide

  26. Complexity

    View Slide

  27. Frameworks

    View Slide

  28. Pioneer

    View Slide

  29. View Slide



  30. iUI Demo



    <br/>@import "iui.css";<br/>
    src="iui.js">

    View Slide





  31. Search


    Artists
    Settings
    Stats
    target="_self">About
    Nothing


    B
    The Beatles
    Belle & Sebastian
    C
    Crowded House
    J
    Jenny Lewis
    John Mayer
    Z
    Zero 7

    View Slide

  32. View Slide

  33. Establishment

    View Slide

  34. jQuery Mobile
    Sencha Touch
    PhoneGap

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Custom Frameworks

    View Slide

  43. View Slide

  44. View Slide

  45. Remember

    View Slide

  46. Test in multiple
    devices

    View Slide

  47. View Slide

  48. Books

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Thanks!

    View Slide

  56. Questions?

    View Slide

  57. Slides created on Keynote for iPad
    No web app framework was harmed during this presentation
    This presentation is released under a
    Creative Commons Attribution-No Derivative Works 3.0 Unported
    License
    http://creativecommons.org/licenses/by-nd/3.0/

    View Slide

  58. Copyright 2013 (c) Trifork GmbH
    All Rights Reserved.

    View Slide