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
2. Hello! My name is Misha Reyzlin I’m JavaScript Engineer @SoundCloud
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
9. Mobile?
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 );
45. Thank you misha@soundcloud.com http://twitter.com/gryzzly