The rather raucous closing presentation of Txjs that removed all doubt that unicorns are no longer cool.

1. mobile javascript
fuck yah!

2. you guys ready for this?

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

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

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

7. mobile js tooling
Pretty rough scene, dude.

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

10. // 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']);

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

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

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

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

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

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

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

18. 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

19. pull up a lawnchair

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

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

22. // 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'});

23. // 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)');

24. // 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();

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

26. // 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)
});

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

30. 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.

31. 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)

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

33. 3.3.1

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

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

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

38. Its web dev!
• write once
• debug everywhere

40. mobile-spec

41. Free Software!

42. MIT License
Governance / Foundation coming soon?

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

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

46. Proposed Project Structure

47. 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

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

49. PhoneGap 2.0
• Native GUI controls
• Rendering compliance

50. Nothing prevents you from
authoring native code!

51. Going Native

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

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

55. thx txjs!