mobile javascript
fuck yah!

you guys ready for this?

obligatory linkdump • http://twitter.com/brianleroux •
http://phonegap.com • http://xuijs.com • http://brianleroux.github.com/lawnchair

nitobi software • http://nitobi.com •
Vancouver, Canuckistan • Lots of JavaScript bullshit • free software, etc

wtfbrian • mobile js tooling
• phonegap • native vs web vs hybrid • cool shit thats going down

mobile js tooling Pretty rough
scene, dude.

XUIJS • a stop gap
solution • super tiny jquery work-alike • Good enough and shipping nao.

// basic matches by selector
x$('div.foo'); x$('ul#global-nav li.selected'); // element literals x$(window); x$(document); // lists of elements x$('li', 'div'); // arrays even x$(['div#foo', 'div.bar']);

chaining // method chaining x$('ul#nav
li a:first').html('hey there').css({color:'blue'});

eventing • click <--bad! •
load <--questionable! • touchstart • touchmove • touchend • touchcancel • guesturestart • guesturechange • guestureend • orientationchange • deviceready

fx // basic animation support
by way of Emile x$('#fx').tween({background:'red', duration:1.5 });

alternates • jqTouch • iUI
• Dashcode, perhaps • TouchScroll • GloveBox • iScroll

jQuery mobile! • NOT stop
gap solution • is jQuery • shippin soon!

emerging techniques • Single page
apps via index.html • Lazy eval JavaScript • Conditional builds

going offline • Cookies •
DOM storage • SQLite • Other hacks: flash, window.name, etc.

Ghetto, Actually • DOM Storage
is key/value only; Slightly nicer than cookies but way lamer name • SQLite seems like a bad idea: schemas, migrations, impedance mismatch, oh my

pull up a lawnchair

wtflawnchair • JSON document store
(not key/value) • Designed for mobile; very light • Clean and simple async oo API • Adaptor pattern for store customization

var people = new Lawnchair({adaptor:'dom'});

// Saving a document var
me = {name:'brian'}; people.save(me); // Saving a document async people.save({name:'frank'}, function(r) { console.log(r); }); // Specifying your own key people.save({key:'whatever', name:'dracula'});

// Get that document people.get(me.key,
function(r){ console.log(r); }); // Returns all documents as an array to a callback people.all(function(r){ console.log(r); }); // List all with shortcut syntax people.all('console.log(r)');

// Remove a document directly
people.get(me.key, function(r){ people.remove(me); }); // Remove a document by key people.save({key:'die', name:'duder'}); people.remove('die'); // Destroy all documents people.nuke();

// Classic iteration people.each(function(r){ console.log(r);
}); // Classic with terse shorthand syntax people.each('console.log(r)');

// Iterate documents conditionally! //
The first function is a conditional. // The second is a callback exec on records returned by the first people.find( function(r) {return r.name == brian}, function(r) {console.log(r)} ); // Iterate conditionally via shorthand people.find('r.name == "brian"', 'console.log(r)'); // You can mix and match shorthand btw people.find('r.name == "brian"', function(r){ console.log(r) });

The purpose of PhoneGap is
for PhoneGap to cease to exist.

PhoneGap Actually • Build native
apps to mobile devices with web technology. • Implementation while we wait for the browser to give us a first class dev platform.

Mind the Gaps Apple iPhone
OS Objective C Google Android Dalvik Java RIM Blackberry J2ME Java Nokia Symbian / MeeGo * Palm webOS web Windows Mobile/Phone C,C++,C# (.NET)

Supported Platforms • iPhone OS
• Android • webOS • Blackberry • Symbian • Meego * fledgling desktop support too!

3.3.1

Android does this too •
ASE + Rhino • Some success w/ NodeJS

Supported APIs • Geo •
Accelerometer • Camera / photos • Vibration • Contacts • SMS / telephony • Sound / video • Reachability • Magnometer • Plus, anything a browser can do

The PhoneGap technique • Instantiate
a platform browser. • Bind native code to JavaScript. • Fuckin, eh.

Its web dev! • write
once • debug everywhere

mobile-spec

Free Software!

MIT License Governance / Foundation
coming soon?

the “Roadmap” PhoneGap 1.0 PhoneGap
1.1 PhoneGap 2.0 Also: http://wiki.phonegap.com/Roadmap

PhoneGap 1.0 • Ratified the
messaging API • Inclusion of xmpp • Native maps • File I/O • Docs! • Build tooling

Proposed Project Structure

config smell http://www.w3.org/TR/widgets/#configuration-document0 http://code.google.com/chrome/apps/docs/developers_guide.html http://developer.android.com/guide/topics/manifest/manifest-intro.html
http://developer.palm.com/index.php? option=com_content&view=article&id=1748&Itemid=43 http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/ GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B.html

PhoneGap 1.1 • Bondi APIs
• CommonJS require / modules • Samsung Bada • Push Notifications API (w/ Urban Airship) • In app purchasing • native oAuth

PhoneGap 2.0 • Native GUI
controls • Rendering compliance

Nothing prevents you from authoring
native code!

Going Native

“Standards” w3c bondi jil •
http://www.w3.org/2009/dap/ • http://dev.w3.org/html5/spec/Overview.html • http://www.w3.org/TR/widgets/

More PhoneGap • http://groups.google.com/group/phonegap •
http://wiki.phonegap.com • http://twitter.com/phonegap • #phonegap on http://irc.freenode.net

thx txjs!