Downloaded 29 times
![// 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']);](https://image.slidesharecdn.com/txjs-100609153057-phpapp02/85/Txjs-10-320.jpg)
Uploaded byBrian LeRoux
Txjs
The document is a detailed discussion about mobile JavaScript development, focusing on tools like PhoneGap for building native apps using web technologies. It covers various JavaScript libraries, event handling, and emerging techniques for offline usage and data storage. The content also outlines the evolution of PhoneGap, its supported platforms, and future roadmaps for enhancing mobile app development.
More Related Content
Txjs
- 1. mobile javascript fuck yah!
- 2. you guys readyfor 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 stopgap solution • super tiny jquery work-alike • Good enough and shipping nao.
- 10. // basic matchesby 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#navli 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 animationsupport by way of Emile x$('#fx').tween({background:'red', duration:1.5 });
- 14. alternates • jqTouch • iUI •Dashcode, perhaps • TouchScroll • GloveBox • iScroll
- 15. jQuery mobile! • NOTstop 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 • DOMStorage 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 alawnchair
- 20. wtflawnchair • JSON documentstore (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 adocument 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 thatdocument 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 adocument 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 documentsconditionally! // 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 ofPhoneGap is for PhoneGap to cease to exist.
- 30. PhoneGap Actually • Buildnative 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 AppleiPhone 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 • iPhoneOS • Android • webOS • Blackberry • Symbian • Meego * fledgling desktop support too!
- 33.
- 35. Android does thistoo • 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.
- 41.
- 42. MIT License Governance /Foundation coming soon?
- 43. the “Roadmap” PhoneGap 1.0 PhoneGap1.1 PhoneGap 2.0 Also: http://wiki.phonegap.com/Roadmap
- 44. PhoneGap 1.0 • Ratifiedthe messaging API • Inclusion of xmpp • Native maps • File I/O • Docs! • Build tooling
- 46.
- 47.
- 48. PhoneGap 1.1 • BondiAPIs • CommonJS require / modules • Samsung Bada • Push Notifications API (w/ Urban Airship) • In app purchasing • native oAuth
- 49. PhoneGap 2.0 • NativeGUI controls • Rendering compliance
- 50. Nothing prevents youfrom authoring native code!
- 51.
- 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.