Embed Size (px)
DESCRIPTION
The Web is becoming the common operating system across all devices, both mobile and desktop. In this talk Dion will explain the technology that you need to understand to make sure your app is ready for the next era where all web apps will need to be mobile. This is going to give web developers a HUGE advantage and opportunity to deploy their apps to multiple devices, and it's vital to understand what's coming down the pipeline. Dion will explain exactly that, and prepare you for what's coming. Exciting!
Citation preview
craigslist
Apple
Nokia
Palm
Sony
RIMHTC
LG Motorola
1,500,000,000+
Chrome’s V8 Safari’s SquirrelFish Extreme Firefox’s TraceMonkey Opera's Carakan
2.01.0 1.0
Alpha
100x
User Interface
BackgroundThread
2X
Browser
1
Web Workers
HTML5
Web Apps Packaged Apps
Web deployment model✓Use HTML5 app featuresfor caching + integration
✓Package applications✓Deploy to “store”✓
Client Server
HTML / CSS / A little JavaScript
All Business LogicNearly 100% Application Logic
Dumb Forms
Client Server
HTML / CSS / JavaScript
Some Business LogicSome Application LogicSome Application Logic
Data (e.g., JSON)
Some Business Logic
“Web Services”
Client Server
Some Business LogicAll Application LogicSome Business Logic
“Web Services”
Data (e.g., JSON)
Fluid
Appcelerator Titanium
PhoneGap
Palm webOS
Embedded WebKitInstance
+ JS runtime (e.g., V8)
Device-native Application Shell
Titanium Desktop
supports php, Python, Ruby, and Javascript
Titanium Mobile
“We started developing it on Saturday and finished on Monday for both iPhone and Android.
Without Titanium, we would not have been able to get it done.”
• Device
• Notification
• Media
• GeoLocation
• Accelerometer
• Contact
• Camera
PhoneGap
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
// 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();
})
Getting Touchy
Tweetie 2Feel the refresh
Palm PreGesture back
Haptics are coming :)
Software keyboard Hardware keyboard
NewsroomViewport on a world
Shake Shake ShakeDefining the new Ctrl-C’s
What does the user want?
Physics Matters
