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

[Openmind 2012] Mobile HTML5 in the Open World by Kimmo Puputti (Software Developer, Futurice)

COSS
September 19, 2012

[Openmind 2012] Mobile HTML5 in the Open World by Kimmo Puputti (Software Developer, Futurice)

Openmind 2012 / Open Knowledge Festival 2012
http://okfestival.org/open-source-software/

COSS

September 19, 2012
Tweet

More Decks by COSS

Other Decks in Technology

Transcript

  1. MOBILE HTML5 IN THE OPEN
    WORLD
    KIMMO PUPUTTI ☆ OKFESTIVAL SEP 19, 2012
    @kpuputti
    [email protected]

    View Slide

  2. ABOUT ME
    Frontend stuff at Futurice since May 2011
    Previously Hexagon IT, Zokem, TKK
    Graduated from Aalto University
    Master's Thesis (2012):
    Mobile HTML5: Implementing a Responsive Cross­Platform Application
    Available at: http://kpuputti.github.com/thesis/

    View Slide

  3. FUTURICE
    “Web, mobile and enterprise solutions, A Lean IT
    company”
    www.futurice.com/

    View Slide

  4. OUTLINE
    What is HTML5?
    Why should I care?
    Native vs. HTML5: where are we at?

    View Slide

  5. WHAT IS HTML5?

    View Slide

  6. http://en.wikipedia.org/wiki/File:HTML5­APIs­and­related­
    technologies­by­Sergey­Mavrody.png

    View Slide

  7. ...
    Standardized parsing
    Standardized existing features in browsers
    New elements and attributes
    Accessibility features (e.g. forms)
    CSS3
    APIs for web applications:
    Offline support
    Device APIs
    Multimedia and graphics (canvas!)
    Workers, sockets, drag and drop, etc.
    “ It's all about JavaScript ”

    View Slide

  8. EXAMPLE: GEOLOCATION
    Locate me!

    View Slide

  9. CODE
    n
    a
    v
    i
    g
    a
    t
    o
    r
    .
    g
    e
    o
    l
    o
    c
    a
    t
    i
    o
    n
    .
    g
    e
    t
    C
    u
    r
    r
    e
    n
    t
    P
    o
    s
    i
    t
    i
    o
    n
    (
    f
    u
    n
    c
    t
    i
    o
    n (
    p
    o
    s
    ) {
    a
    l
    e
    r
    t
    (
    p
    o
    s
    .
    c
    o
    o
    r
    d
    s
    .
    l
    a
    t
    i
    t
    u
    d
    e + "
    , " + p
    o
    s
    .
    c
    o
    o
    r
    d
    s
    .
    l
    o
    n
    g
    i
    t
    u
    d
    e
    )
    ;
    }
    , f
    u
    n
    c
    t
    i
    o
    n (
    ) {
    a
    l
    e
    r
    t
    (
    "
    C
    o
    u
    l
    d n
    o
    t g
    e
    t l
    o
    c
    a
    t
    i
    o
    n
    .
    .
    .
    "
    )
    ;
    }
    )
    ;

    View Slide

  10. WHY SHOULD I CARE?

    View Slide

  11. Mark Zuckerberg:
    “The biggest mistake we made as a company was
    betting too much on HTML5. While building native
    apps that were basically just a wrapper for the
    mobile web standard let it experiment quickly, it
    made the apps run way too slow. We burnt two
    years.”

    View Slide

  12. Wait a second... it continues:
    “... it just wasn’t there. And it’s not that HTML5 is
    bad. I’m actually, on long­term, really excited about
    it. One of the things that’s interesting is we actually
    have more people on a daily basis using mobile Web
    Facebook than we have using our iOS or Android
    apps combined. So mobile Web is a big thing for us.”

    View Slide

  13. Simon Cross (Developer Advocate at Facebook):
    “Facebook's problems are not everyone's problems.”

    View Slide

  14. View Slide

  15. SO WHICH ONE IS IT, WEB OR NATIVE?!
    SORRY, WRONG QUESTION.

    View Slide

  16. LET'S LOOK AT WHAT WE HAVE

    View Slide

  17. Charland, A., and Leroux, B. Mobile Application Development: Web vs. Native. Communications of the
    ACM 54, 5 (2011), 49­53.

    View Slide

  18. DEVICES
    Laptops Desktops ereaders Game consoles Notebooks
    Mobile phones Tablets Watches
    TVs
    Home theaters Fridges

    View Slide

  19. THEY ALL HAVE A WEB BROWSER!

    View Slide


  20. View Slide

  21. NATIVE APPS

    View Slide

  22. NATIVE APPS
    Best performance
    Best UX
    Best integration to the platform
    UI innovation

    View Slide

  23. HOWEVER, DO YOU NEED ALL THIS POWER?

    View Slide

  24. ARE YOU PROVIDING CONTENT OR A SERVICE?
    or
    ARE YOU PROVIDING AN EXPERIENCE?

    View Slide

  25. IS IT OK TO DROP A LARGE PERCENTAGE OF YOUR POTENTIAL USERS OUT OF
    REACH?
    IS IT ENOUGH TO PROVIDE YOUR SERVICE WELL FOR ONLY SOME PEOPLE?

    View Slide

  26. MIGHT BE
    http://upload.wikimedia.org/wikipedia/en/a/ac/World_Wide_Smartphone_Sales_Sha

    View Slide

  27. APPLICATION STORES
    Unnecessary burden or a golden possibility?
    App submission
    Updates
    Monetization
    Discoverability
    Analytics
    Integration to social networks
    THE WEB IS YOU APP STORE!

    View Slide

  28. HYBRID APPS

    View Slide

  29. HYBRID APPS
    “Combination of web and native technologies.”

    View Slide

  30. HYBRID APPS
    Complex
    Following platform UI guidelines
    Difficult workflow
    Awesome web app vs. crappy native app
    is great, but has a lot of surprises
    PhoneGap

    View Slide

  31. WEB APPS

    View Slide

  32. WEB APPS
    well...
    “Write once, run everywhere.”

    View Slide

  33. MOBILE HTML5 APPS ARE HARD
    Browsers
    Supported features and APIs
    Not anymore just a collection of jQuery plugins

    View Slide

  34. IT'S ALL ABOUT PERFORMANCE!
    Follow up what has been doing for the past 5 years.
    Steve Souders

    View Slide

  35. KNOW YOUR TOOLS
    AMD RequireJS MVC Grunt Modernizr
    Backbone.js Yeoman
    Sass less Functional programming JSHint Jasmine BDD
    Responsive design HTML5 Boilerplate Progressive enhancement

    View Slide

  36. SUMMARY
    Cross­platform is hard
    Cross­platform HTML5 is hard
    You have to be on the web anyways
    Your site will be accessed with all types of devices
    Responsive web design
    Go native, if really needed
    Know the good and bad parts of web/native
    Know your place between idealism and realism

    View Slide

  37. Tim Berners­Lee, Scientific American, 2010:
    “people must be able to put anything on the Web, no
    matter what computer they have, software they use or
    human language they speak and regardless of
    whether they have a wired or wireless Internet
    connection. ”
    “And it should be accessible from any kind of
    hardware that can connect to the Internet: stationary
    or mobile, small screen or large. ”

    View Slide

  38. THANKS!
    These slides available at:
    Contact info:
    http://kpuputti.github.com/mobile­html5­presentation/
    @kpuputti
    [email protected]

    View Slide

  39. View Slide