cross-platform development in the context of mobile web

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

misha@soundcloud.com

http://twitter.com/gryzzly