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.

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
    misha@soundcloud.com
    http://twitter.com/gryzzly
    

    View Slide