What “mobile” means and how mobile web fits into that. How SoundCloud’s mobile web application is built.
Mobile and Cross-Platformusing web technologies
View Slide
Hello!My name is Misha ReyzlinI’m JavaScript Engineer@SoundCloud
Why mobile?
Why mobile?mobile is huge, really huge
Why mobile?mobile is huge, really huge91% people in the worldown mobile device
Why mobile?most of our plays comefrom mobile
Mobile?
HTML● accessible, no installs
HTML● accessible, no installs● one codebase
HTML● accessible, no installs● one codebase● no review process
Native● More APIs available
Native● More APIs available● Performance
Native● More APIs available● Performance● Complex UI is easier
PhonegapWraps HTML apps in native,providing access to someAPIs
HTML & NativeThey compliment each other:● Hit URL and listen to sound● Download app, do morecomplex interactions
StandardsIn 2007 iPhone came outwith support for rich media and No Flash
StandardsGoogle:speech />
StandardsMicrosoft:pointer events, mixed input– touch and mouse
StandardsMozilla:A lot of generalenhancements to JavaScript
How isSoundCloud built?
History (2005)● user types URL● Apache+PHP parse req.● Query DB● print HTML as response
History (2005)● browser renders HTML● fetches resources (JS,CSS)● JS enhances UX
History (2006)● Prototype.JS with $function● YUI● jQuery
$('.images').beautifulGallery();$('.navigation a').each(function (link) {link.click(function (event) {event.preventDefault();$('.animated').animate({top: '-100px'}, 500);});});
● Desire to matchapplication performance● No hard page refreshes● AJAXHistory (2007)
● init state from URL● HTTP requests to API● render HTML from the APIdataMove to JS
● lack of modules & dependencymanagement● testability and isolating units● no separation of concerns● memory managementHow to write JS?
"Pro JavaScript DesignPatterns"Creation of objects,architecture, behaviourSolutions (2007)
● Massive UI frameworks(sproutcore, EXT.js)● Compiled (Objective-J and GWT)● Rich widget libs (YUI, DOJO,jQuery plugins)Solutions (2008-09)
Lightweight frameworkpromoted MVC patternfor UI development(on the client side)Backbone (2010)
The main idea isseparation of concernsMVC
Model and View typesimplement pub/sub patternBackbone MVC
var model = new Model();var view = new View(model);// in View::constructormodel.on(‘change’,view.render);
Thank you[email protected]http://twitter.com/gryzzly