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. Mobile and Cross-Platform using web technologies

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

  3. None
  4. Why mobile?

  5. Why mobile? mobile is huge, really huge

  6. Why mobile? mobile is huge, really huge 91% people in

    the world own mobile device
  7. Why mobile? most of our plays come from mobile

  8. None
  9. Mobile?

  10. None
  11. None
  12. HTML • accessible, no installs

  13. HTML • accessible, no installs • one codebase

  14. HTML • accessible, no installs • one codebase • no

    review process
  15. Native • More APIs available

  16. Native • More APIs available • Performance

  17. Native • More APIs available • Performance • Complex UI

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

    APIs
  19. HTML & Native They compliment each other: • Hit URL

    and listen to sound • Download app, do more complex interactions
  20. Standards In 2007 iPhone came out with support for rich

    media <audio> and <video> No Flash
  21. Standards Google: <input type="text" x-webkit- speech />

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

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

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

  25. How is SoundCloud built?

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

    • Query DB • print HTML as response
  27. History (2005) • browser renders HTML • fetches resources (JS,

    CSS) • JS enhances UX
  28. History (2006) • Prototype.JS with $ function • YUI •

    jQuery
  29. $('.images').beautifulGallery(); $('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({

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

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

    top: '-100px' }, 500); }); });
  32. • Desire to match application performance • No hard page

    refreshes • AJAX History (2007)
  33. • init state from URL • HTTP requests to API

    • render HTML from the API data Move to JS
  34. • lack of modules & dependency management • testability and

    isolating units • no separation of concerns • memory management How to write JS?
  35. "Pro JavaScript Design Patterns" Creation of objects, architecture, behaviour Solutions

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

    GWT) • Rich widget libs (YUI, DOJO, jQuery plugins) Solutions (2008-09)
  37. Lightweight framework promoted MVC pattern for UI development (on the

    client side) Backbone (2010)
  38. The main idea is separation of concerns MVC

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

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

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

    // in View::constructor model.on( ‘change’, view.render );
  42. None
  43. None
  44. None
  45. Thank you misha@soundcloud.com http://twitter.com/gryzzly