0
mobile javascript




     fuck yah!
you guys ready for this?
obligatory linkdump

• http://twitter.com/brianleroux
• http://phonegap.com
• http://xuijs.com
• http://brianleroux.github...
nitobi software
     • http://nitobi.com
     • Vancouver, Canuckistan
     • Lots of JavaScript bullshit
     • free soft...
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)...
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
• guest...
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...
pull up a lawnchair
wtflawnchair

• JSON document store (not key/value)
• Designed for mobile; very light
• Clean and simple async oo API
• Ada...
var people = new Lawnchair({adaptor:'dom'});
// Saving a document
var me = {name:'brian'};
people.save(me);


// Saving a document async
people.save({name:'frank'}, fu...
// Get that document
people.get(me.key, function(r){
    console.log(r);
});


// Returns all documents as an array to a
c...
// Remove a document directly
people.get(me.key, function(r){
    people.remove(me);
});

// Remove a document by key
peop...
// Classic iteration
people.each(function(r){
    console.log(r);
});


// Classic with terse shorthand syntax
people.each...
// Iterate documents conditionally!
// The first function is a conditional.
// The second is a callback exec on records re...
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
  b...
Mind the Gaps
Apple iPhone OS         Objective C

Google Android          Dalvik Java

RIM Blackberry          J2ME Java
...
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
• Reachabi...
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_guid...
PhoneGap 1.1
• Bondi APIs
• CommonJS require / modules
• Samsung Bada
• Push Notifications API (w/ Urban Airship)
• In app ...
PhoneGap 2.0



• Native GUI controls
• Rendering compliance
Nothing prevents you from
 authoring native code!
Going Native
“Standards”
                                w3c
                               bondi
                                 jil
...
More PhoneGap
•   http://groups.google.com/group/phonegap
•   http://wiki.phonegap.com
•   http://twitter.com/phonegap
•  ...
thx txjs!
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Upcoming SlideShare
Loading in...5
×

Txjs

5,323

Published on

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

Published in: Technology, Design
3 Comments
4 Likes
Statistics
Notes
  • ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    ONLY THREE DAYS TO VOTE IN THE CONTEST!.. VOTING ENDS NOV.29/10..
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·. .
    Hello My Friend ♥
    ☀ We would very much appreciate if you would kindly take the time to view & vote for Doina’s two shows http://www.slideshare.net/doina/end-of-life-presentation-horror-story-contest-slideshare-2010 http://www.slideshare.net/doina/andante-slideshare-2010
    The shows are now on videos so you don’t have to download .. Thank you very much and enjoy a wonderful day ..
    Spiderwebb99 on Slideshare .. Vanessa ♥
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • :O
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,323
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide























































  • Transcript of "Txjs"

    1. 1. mobile javascript fuck yah!
    2. 2. you guys ready for this?
    3. 3. obligatory linkdump • http://twitter.com/brianleroux • http://phonegap.com • http://xuijs.com • http://brianleroux.github.com/lawnchair
    4. 4. nitobi software • http://nitobi.com • Vancouver, Canuckistan • Lots of JavaScript bullshit • free software, etc
    5. 5. wtfbrian • mobile js tooling • phonegap • native vs web vs hybrid • cool shit thats going down
    6. 6. mobile js tooling Pretty rough scene, dude.
    7. 7. XUIJS • a stop gap solution • super tiny jquery work-alike • Good enough and shipping nao.
    8. 8. // 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']);
    9. 9. chaining // method chaining x$('ul#nav li a:first').html('hey there').css({color:'blue'});
    10. 10. eventing • click <--bad! • load <--questionable! • touchstart • touchmove • touchend • touchcancel • guesturestart • guesturechange • guestureend • orientationchange • deviceready
    11. 11. fx // basic animation support by way of Emile x$('#fx').tween({background:'red', duration:1.5 });
    12. 12. alternates • jqTouch • iUI • Dashcode, perhaps • TouchScroll • GloveBox • iScroll
    13. 13. jQuery mobile! • NOT stop gap solution • is jQuery • shippin soon!
    14. 14. emerging techniques • Single page apps via index.html • Lazy eval JavaScript • Conditional builds
    15. 15. going offline • Cookies • DOM storage • SQLite • Other hacks: flash, window.name, etc.
    16. 16. 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
    17. 17. pull up a lawnchair
    18. 18. wtflawnchair • JSON document store (not key/value) • Designed for mobile; very light • Clean and simple async oo API • Adaptor pattern for store customization
    19. 19. var people = new Lawnchair({adaptor:'dom'});
    20. 20. // 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'});
    21. 21. // 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)');
    22. 22. // 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();
    23. 23. // Classic iteration people.each(function(r){     console.log(r); }); // Classic with terse shorthand syntax people.each('console.log(r)');
    24. 24. // 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) });
    25. 25. The purpose of PhoneGap is for PhoneGap to cease to exist.
    26. 26. 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.
    27. 27. 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)
    28. 28. Supported Platforms • iPhone OS • Android • webOS • Blackberry • Symbian • Meego * fledgling desktop support too!
    29. 29. 3.3.1
    30. 30. Android does this too • ASE + Rhino • Some success w/ NodeJS
    31. 31. Supported APIs • Geo • Accelerometer • Camera / photos • Vibration • Contacts • SMS / telephony • Sound / video • Reachability • Magnometer • Plus, anything a browser can do
    32. 32. The PhoneGap technique • Instantiate a platform browser. • Bind native code to JavaScript. • Fuckin, eh.
    33. 33. Its web dev! • write once • debug everywhere
    34. 34. mobile-spec
    35. 35. Free Software!
    36. 36. MIT License Governance / Foundation coming soon?
    37. 37. the “Roadmap” PhoneGap 1.0 PhoneGap 1.1 PhoneGap 2.0 Also: http://wiki.phonegap.com/Roadmap
    38. 38. PhoneGap 1.0 • Ratified the messaging API • Inclusion of xmpp • Native maps • File I/O • Docs! • Build tooling
    39. 39. Proposed Project Structure
    40. 40. 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
    41. 41. PhoneGap 1.1 • Bondi APIs • CommonJS require / modules • Samsung Bada • Push Notifications API (w/ Urban Airship) • In app purchasing • native oAuth
    42. 42. PhoneGap 2.0 • Native GUI controls • Rendering compliance
    43. 43. Nothing prevents you from authoring native code!
    44. 44. Going Native
    45. 45. “Standards” w3c bondi jil • http://www.w3.org/2009/dap/ • http://dev.w3.org/html5/spec/Overview.html • http://www.w3.org/TR/widgets/
    46. 46. More PhoneGap • http://groups.google.com/group/phonegap • http://wiki.phonegap.com • http://twitter.com/phonegap • #phonegap on http://irc.freenode.net
    47. 47. thx txjs!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×