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

Cross-platform development in the context of mobile web

Cross-platform development in the context of mobile web

What “mobile” means and how mobile web fits into that. How SoundCloud’s mobile web application is built.

Misha Reyzlin

January 16, 2014
Tweet

Other Decks in Programming

Transcript

  1. Mobile and Cross-Platform
    using web technologies

    View Slide

  2. Hello!
    My name is Misha Reyzlin
    I’m JavaScript Engineer
    @SoundCloud

    View Slide

  3. View Slide

  4. Why mobile?

    View Slide

  5. Why mobile?
    mobile is huge, really huge

    View Slide

  6. Why mobile?
    mobile is huge, really huge
    91% people in the world
    own mobile device

    View Slide

  7. Why mobile?
    most of our plays come
    from mobile

    View Slide

  8. View Slide

  9. Mobile?

    View Slide

  10. View Slide

  11. View Slide

  12. HTML
    ● accessible, no installs

    View Slide

  13. HTML
    ● accessible, no installs
    ● one codebase

    View Slide

  14. HTML
    ● accessible, no installs
    ● one codebase
    ● no review process

    View Slide

  15. Native
    ● More APIs available

    View Slide

  16. Native
    ● More APIs available
    ● Performance

    View Slide

  17. Native
    ● More APIs available
    ● Performance
    ● Complex UI is easier

    View Slide

  18. Phonegap
    Wraps HTML apps in native,
    providing access to some
    APIs

    View Slide

  19. HTML & Native
    They compliment each other:
    ● Hit URL and listen to sound
    ● Download app, do more
    complex interactions

    View Slide

  20. Standards
    In 2007 iPhone came out
    with support for rich media
    and
    No Flash

    View Slide

  21. Standards
    Google:
    speech />

    View Slide

  22. Standards
    Microsoft:
    pointer events, mixed input
    – touch and mouse

    View Slide

  23. Standards
    Mozilla:
    A lot of general
    enhancements to JavaScript

    View Slide

  24. Standards
    Mozilla:
    A lot of general
    enhancements to JavaScript

    View Slide

  25. How is
    SoundCloud built?

    View Slide

  26. History (2005)
    ● user types URL
    ● Apache+PHP parse req.
    ● Query DB
    ● print HTML as response

    View Slide

  27. History (2005)
    ● browser renders HTML
    ● fetches resources (JS,
    CSS)
    ● JS enhances UX

    View Slide

  28. History (2006)
    ● Prototype.JS with $
    function
    ● YUI
    ● jQuery

    View Slide

  29. $('.images').beautifulGallery();
    $('.navigation a').each(function (link) {
    link.click(function (event) {
    event.preventDefault();
    $('.animated').animate({
    top: '-100px'
    }, 500);
    });
    });

    View Slide

  30. $('.images').beautifulGallery();
    $('.navigation a').each(function (link) {
    link.click(function (event) {
    event.preventDefault();
    $('.animated').animate({
    top: '-100px'
    }, 500);
    });
    });

    View Slide

  31. $('.images').beautifulGallery();
    $('.navigation a').each(function (link) {
    link.click(function (event) {
    event.preventDefault();
    $('.animated').animate({
    top: '-100px'
    }, 500);
    });
    });

    View Slide

  32. ● Desire to match
    application performance
    ● No hard page refreshes
    ● AJAX
    History (2007)

    View Slide

  33. ● init state from URL
    ● HTTP requests to API
    ● render HTML from the API
    data
    Move to JS

    View Slide

  34. ● lack of modules & dependency
    management
    ● testability and isolating units
    ● no separation of concerns
    ● memory management
    How to write JS?

    View Slide

  35. "Pro JavaScript Design
    Patterns"
    Creation of objects,
    architecture, behaviour
    Solutions (2007)

    View Slide

  36. ● Massive UI frameworks
    (sproutcore, EXT.js)
    ● Compiled (Objective-J and GWT)
    ● Rich widget libs (YUI, DOJO,
    jQuery plugins)
    Solutions (2008-09)

    View Slide

  37. Lightweight framework
    promoted MVC pattern
    for UI development
    (on the client side)
    Backbone (2010)

    View Slide

  38. The main idea is
    separation of concerns
    MVC

    View Slide

  39. Model and View types
    implement pub/sub pattern
    Backbone MVC

    View Slide

  40. var model = new Model();
    var view = new View(model);
    // in View::constructor
    model.on(
    ‘change’,
    view.render
    );

    View Slide

  41. var model = new Model();
    var view = new View(model);
    // in View::constructor
    model.on(
    ‘change’,
    view.render
    );

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. Thank you
    [email protected]
    http://twitter.com/gryzzly

    View Slide