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.

9290526dffe58b45a651e8dec947f482?s=128

Misha Reyzlin

January 16, 2014
Tweet

Transcript

  1. 3.
  2. 8.
  3. 9.
  4. 10.
  5. 11.
  6. 19.

    HTML & Native They compliment each other: • Hit URL

    and listen to sound • Download app, do more complex interactions
  7. 20.

    Standards In 2007 iPhone came out with support for rich

    media <audio> and <video> No Flash
  8. 26.

    History (2005) • user types URL • Apache+PHP parse req.

    • Query DB • print HTML as response
  9. 32.
  10. 33.

    • init state from URL • HTTP requests to API

    • render HTML from the API data Move to JS
  11. 34.

    • lack of modules & dependency management • testability and

    isolating units • no separation of concerns • memory management How to write JS?
  12. 36.

    • Massive UI frameworks (sproutcore, EXT.js) • Compiled (Objective-J and

    GWT) • Rich widget libs (YUI, DOJO, jQuery plugins) Solutions (2008-09)
  13. 40.

    var model = new Model(); var view = new View(model);

    // in View::constructor model.on( ‘change’, view.render );
  14. 41.

    var model = new Model(); var view = new View(model);

    // in View::constructor model.on( ‘change’, view.render );
  15. 42.
  16. 43.
  17. 44.