The Mobile Web @ 2010 JSConf

42
JSConf 2010, Washington DC Saturday, April 17, 2010

description

Dion Almaer and Matt McNulty talk about the future of mobile and how the Open Web can be the unifying platform across devices!

Transcript of The Mobile Web @ 2010 JSConf

Page 1: The Mobile Web @ 2010 JSConf

JSConf 2010, Washington DC

Saturday, April 17, 2010

Page 2: The Mobile Web @ 2010 JSConf

“It's better to be a pirate than join the navy.”

Saturday, April 17, 2010

Page 3: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 4: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 5: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 6: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 7: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 8: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 9: The Mobile Web @ 2010 JSConf

craigslist

Saturday, April 17, 2010

Page 10: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 11: The Mobile Web @ 2010 JSConf

Apple

Nokia

Palm

Sony

RIMHTC

LG Motorola

Saturday, April 17, 2010

Page 12: The Mobile Web @ 2010 JSConf

1,500,000,000+

Saturday, April 17, 2010

Page 13: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 14: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 15: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 16: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 17: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 18: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 19: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 20: The Mobile Web @ 2010 JSConf

Chrome’s V8 Safari’s SquirrelFish Extreme Firefox’s TraceMonkey Opera's Carakan

2.01.0 1.0

Alpha

100xSaturday, April 17, 2010

Page 21: The Mobile Web @ 2010 JSConf

User Interface

BackgroundThread

2X

Browser

1

Web Workers

Saturday, April 17, 2010

Page 22: The Mobile Web @ 2010 JSConf

HTML5

Saturday, April 17, 2010

Page 23: The Mobile Web @ 2010 JSConf

Web Apps Packaged Apps

Web deployment model✓Use HTML5 app featuresfor caching + integration

✓Package applications✓Deploy to “store”✓

Saturday, April 17, 2010

Page 24: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 25: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 26: The Mobile Web @ 2010 JSConf

Fluid

Appcelerator Titanium

PhoneGap

Palm webOS

Saturday, April 17, 2010

Page 27: The Mobile Web @ 2010 JSConf

Embedded WebKitInstance

+ JS runtime (e.g., V8)

Device-native Application Shell

Saturday, April 17, 2010

Page 28: The Mobile Web @ 2010 JSConf

Titanium Desktop

supports php, Python, Ruby, and Javascript

Titanium Mobile

Saturday, April 17, 2010

Page 29: The Mobile Web @ 2010 JSConf

• Device

• Notification

• Media

• GeoLocation

• Accelerometer

• Contact

• Camera

PhoneGap

Saturday, April 17, 2010

Page 30: The Mobile Web @ 2010 JSConf

function watchAccel() {

var win = function(a) {

document.getElementById('x').innerHTML = a.x;

document.getElementById('y').innerHTML = a.y;

document.getElementById('z').innerHTML = a.z;

};

var fail = function(){};

var opt = { frequency: 100 };

watchId = navigator.accelerometer.watchAcceleration

(win, fail, opt);

}

PhoneGap

Saturday, April 17, 2010

Page 31: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 32: The Mobile Web @ 2010 JSConf

// watch for swiping

$('#swipeme').bind('swipe', function(event, info) {

console.log(info.direction);

});

// orientation changes

$('body').bind('turn', function(event, info) {

console.log(info.orientation); // landscape/profile

});

// animations

$('#portfolio').bind('pageAnimationEnd',

function(event, info) {

if (info.direction == 'in') loadWorks();

})

Saturday, April 17, 2010

Page 33: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 34: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 35: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010

Page 36: The Mobile Web @ 2010 JSConf

Getting Touchy

Saturday, April 17, 2010

Page 37: The Mobile Web @ 2010 JSConf

Tweetie 2Feel the refresh

Palm PreGesture back

Saturday, April 17, 2010

Page 38: The Mobile Web @ 2010 JSConf

Haptics are coming :)

Saturday, April 17, 2010

Page 39: The Mobile Web @ 2010 JSConf

Software keyboard Hardware keyboard

Saturday, April 17, 2010

Page 40: The Mobile Web @ 2010 JSConf

NewsroomViewport on a world

Shake Shake ShakeDefining the new Ctrl-C’s

Saturday, April 17, 2010

Page 41: The Mobile Web @ 2010 JSConf

What does the user want?

Saturday, April 17, 2010

Page 42: The Mobile Web @ 2010 JSConf

Saturday, April 17, 2010