• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Txjs
 

Txjs

on

  • 6,143 views

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

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

Statistics

Views

Total Views
6,143
Views on SlideShare
5,862
Embed Views
281

Actions

Likes
4
Downloads
27
Comments
3

6 Embeds 281

http://www.slideshare.net 240
http://www.techgig.com 36
http://www.linuxforce.site40.net 2
http://facebook.slideshare.com 1
http://a0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    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 ♥
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    Are you sure you want to
    Your message goes here
    Processing…
  • :D
    Are you sure you want to
    Your message goes here
    Processing…
  • :O
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Txjs Txjs Presentation Transcript

  • 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!