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!

Txjs