$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

  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