cross-platform development in the context of mobile web
TRANSCRIPT
Mobile and Cross-Platformusing web technologies
Hello!My name is Misha Reyzlin I’m JavaScript Engineer @SoundCloud
Why mobile?
Why mobile?mobile is huge, really huge
Why mobile?mobile is huge, really huge91% people in the world own mobile device
Why mobile?most of our plays come from mobile
Mobile?
title, date, 01 of 10
HTML
title, date, 01 of 10
● accessible, no installs
HTML
title, date, 01 of 10
● accessible, no installs● one codebase
HTML
title, date, 01 of 10
● accessible, no installs● one codebase
● no review process
Native
title, date, 01 of 10
● More APIs available
Native
title, date, 01 of 10
● More APIs available● Performance
Native
title, date, 01 of 10
● More APIs available● Performance
● Complex UI is easier
Phonegap
title, date, 01 of 10
Wraps HTML apps in native, providing access to some APIs
HTML & Native
title, date, 01 of 10
They compliment each other:● Hit URL and listen to sound● Download app, do more
complex interactions
Standards
title, date, 01 of 10
In 2007 iPhone came out with support for rich media <audio> and <video>No Flash
Standards
title, date, 01 of 10
Google:<input type="text" x-webkit-speech />
Standards
title, date, 01 of 10
Microsoft:pointer events, mixed input – touch and mouse
Standards
title, date, 01 of 10
Mozilla:A lot of general enhancements to JavaScript
Standards
title, date, 01 of 10
Mozilla:A lot of general enhancements to JavaScript
How is SoundCloud built?
History (2005)
title, date, 01 of 10
● user types URL● Apache+PHP parse req.● Query DB● print HTML as response
History (2005)
title, date, 01 of 10
● browser renders HTML● fetches resources (JS,
CSS)● JS enhances UX
History (2006)
title, date, 01 of 10
● Prototype.JS with $ function
● YUI ● jQuery
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
● Desire to match application performance
● No hard page refreshes ● AJAX
History (2007)
title, date, 01 of 10
● init state from URL● HTTP requests to API● render HTML from the API
data
Move to JS
title, date, 01 of 10
● lack of modules & dependency management
● testability and isolating units● no separation of concerns● memory management
How to write JS?
title, date, 01 of 10
"Pro JavaScript Design Patterns"Creation of objects, architecture, behaviour
Solutions (2007)
title, date, 01 of 10
● Massive UI frameworks (sproutcore, EXT.js)
● Compiled (Objective-J and GWT)● Rich widget libs (YUI, DOJO,
jQuery plugins)
Solutions (2008-09)
title, date, 01 of 10
Lightweight frameworkpromoted MVC patternfor UI development (on the client side)
Backbone (2010)
title, date, 01 of 10
The main idea is separation of concerns
MVC
title, date, 01 of 10
Model and View types implement pub/sub pattern
Backbone MVC
title, date, 01 of 10
var model = new Model();var view = new View(model);// in View::constructormodel.on(‘change’,view.render
);
title, date, 01 of 10
var model = new Model();var view = new View(model);// in View::constructormodel.on(‘change’,view.render
);
title, date, 01 of 10
title, date, 01 of 10
title, date, 01 of 10
title, date, 01 of 10
Thank you
http://twitter.com/gryzzly