![Page 1: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/1.jpg)
Mobile and Cross-Platformusing web technologies
![Page 2: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/2.jpg)
Hello!My name is Misha Reyzlin I’m JavaScript Engineer @SoundCloud
![Page 3: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/3.jpg)
![Page 4: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/4.jpg)
Why mobile?
![Page 5: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/5.jpg)
Why mobile?mobile is huge, really huge
![Page 6: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/6.jpg)
Why mobile?mobile is huge, really huge91% people in the world own mobile device
![Page 7: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/7.jpg)
Why mobile?most of our plays come from mobile
![Page 8: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/8.jpg)
![Page 9: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/9.jpg)
Mobile?
![Page 10: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/10.jpg)
![Page 11: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/11.jpg)
title, date, 01 of 10
![Page 12: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/12.jpg)
HTML
title, date, 01 of 10
● accessible, no installs
![Page 13: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/13.jpg)
HTML
title, date, 01 of 10
● accessible, no installs● one codebase
![Page 14: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/14.jpg)
HTML
title, date, 01 of 10
● accessible, no installs● one codebase
● no review process
![Page 15: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/15.jpg)
Native
title, date, 01 of 10
● More APIs available
![Page 16: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/16.jpg)
Native
title, date, 01 of 10
● More APIs available● Performance
![Page 17: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/17.jpg)
Native
title, date, 01 of 10
● More APIs available● Performance
● Complex UI is easier
![Page 18: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/18.jpg)
Phonegap
title, date, 01 of 10
Wraps HTML apps in native, providing access to some APIs
![Page 19: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/19.jpg)
HTML & Native
title, date, 01 of 10
They compliment each other:● Hit URL and listen to sound● Download app, do more
complex interactions
![Page 20: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/20.jpg)
Standards
title, date, 01 of 10
In 2007 iPhone came out with support for rich media <audio> and <video>No Flash
![Page 21: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/21.jpg)
Standards
title, date, 01 of 10
Google:<input type="text" x-webkit-speech />
![Page 22: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/22.jpg)
Standards
title, date, 01 of 10
Microsoft:pointer events, mixed input – touch and mouse
![Page 23: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/23.jpg)
Standards
title, date, 01 of 10
Mozilla:A lot of general enhancements to JavaScript
![Page 24: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/24.jpg)
Standards
title, date, 01 of 10
Mozilla:A lot of general enhancements to JavaScript
![Page 25: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/25.jpg)
How is SoundCloud built?
![Page 26: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/26.jpg)
History (2005)
title, date, 01 of 10
● user types URL● Apache+PHP parse req.● Query DB● print HTML as response
![Page 27: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/27.jpg)
History (2005)
title, date, 01 of 10
● browser renders HTML● fetches resources (JS,
CSS)● JS enhances UX
![Page 28: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/28.jpg)
History (2006)
title, date, 01 of 10
● Prototype.JS with $ function
● YUI ● jQuery
![Page 29: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/29.jpg)
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
![Page 30: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/30.jpg)
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
![Page 31: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/31.jpg)
title, date, 01 of 10
$('.images').beautifulGallery();$('.navigation a').each(function (link) { link.click(function (event) { event.preventDefault(); $('.animated').animate({ top: '-100px' }, 500); });});
![Page 32: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/32.jpg)
● Desire to match application performance
● No hard page refreshes ● AJAX
History (2007)
title, date, 01 of 10
![Page 33: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/33.jpg)
● init state from URL● HTTP requests to API● render HTML from the API
data
Move to JS
title, date, 01 of 10
![Page 34: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/34.jpg)
● lack of modules & dependency management
● testability and isolating units● no separation of concerns● memory management
How to write JS?
title, date, 01 of 10
![Page 35: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/35.jpg)
"Pro JavaScript Design Patterns"Creation of objects, architecture, behaviour
Solutions (2007)
title, date, 01 of 10
![Page 36: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/36.jpg)
● 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
![Page 37: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/37.jpg)
Lightweight frameworkpromoted MVC patternfor UI development (on the client side)
Backbone (2010)
title, date, 01 of 10
![Page 38: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/38.jpg)
The main idea is separation of concerns
MVC
title, date, 01 of 10
![Page 39: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/39.jpg)
Model and View types implement pub/sub pattern
Backbone MVC
title, date, 01 of 10
![Page 40: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/40.jpg)
var model = new Model();var view = new View(model);// in View::constructormodel.on(‘change’,view.render
);
title, date, 01 of 10
![Page 41: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/41.jpg)
var model = new Model();var view = new View(model);// in View::constructormodel.on(‘change’,view.render
);
title, date, 01 of 10
![Page 42: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/42.jpg)
title, date, 01 of 10
![Page 43: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/43.jpg)
title, date, 01 of 10
![Page 44: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/44.jpg)
title, date, 01 of 10
![Page 45: Cross-platform development in the context of mobile web](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0f7cc1a28ab8a2a8b45c5/html5/thumbnails/45.jpg)
Thank you
http://twitter.com/gryzzly