Downloaded 378 times
![Selectors
// basics
x$('div.foo');
x$('ul#global-nav li.selected');
// element literals
x$(window);
x$(document);
// lists
x$('li', 'div');
// arrays even
x$(['div#foo', 'div.bar']);
Monday, December 7, 2009](https://image.slidesharecdn.com/mobilejavascript-090913152915-phpapp02/75/Mobile-JavaScript-27-2048.jpg)
![Selectors
// basics
x$('div.foo');
x$('ul#global-nav li.selected');
// element literals
x$(window);
x$(document);
// lists
x$('li', 'div');
// arrays even
x$(['div#foo', 'div.bar']);
Monday, December 7, 2009](https://crownmelresort.com/image.slidesharecdn.com/mobilejavascript-090913152915-phpapp02/75/Mobile-JavaScript-27-2048.jpg)
Uploaded byBrian LeRoux
Mobile JavaScript
The document discusses mobile JavaScript and constraints of mobile development. It summarizes that mobile web use will be via mobile devices in 5 years, mobile devices have small screens, less memory/CPU/storage, and sketchy connectivity. These constraints require a focus on solving unique problems rather than relying on components. It introduces the XUI mobile JavaScript framework as lightweight (2.4kb) and capable of DOM manipulation, events, styles, and other features to build mobile apps.
![iPhone Backup Analyzer 2 - presentation [ITA]](https://cdn.slidesharecdn.com/ss_thumbnails/slidepresentazione-ipba2-140317091558-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile JavaScript
- 1.
- 2. Brian LeRoux Nitobi Software Monday, December 7, 2009
- 3. The majority ofinternet use will be via a mobile device in 5 years. - Brian LeRoux, 2007 * * credible expert with vested interest in the mobile web Monday, December 7, 2009
- 4. Small screens. Less memory. Less CPU. Less hard drive space if any. Sketchy connectivity. Monday, December 7, 2009
- 5. Constraints == Focus That is why 8 bit games still pwn. Monday, December 7, 2009
- 6. Webkit 6 Monday, December 7, 2009
- 7. Yay Webkit! Good! sqlite cache manifest css awesome custom fontage Monday, December 7, 2009
- 8. Bad * * many variants ** not mozilla Monday, December 7, 2009
- 9. Ugly • Blackberry less than 4.6 have no XHR • Windows Mobile runs IE 4 • Or worse: IE 6 + 7 Monday, December 7, 2009
- 10. The many flavoursof Webkit iPhone OS 3.0 Webkit 528.16 Build iPhone OS 2.2 Webkit 525.20 Build iPhone OS 2.02 Webkit 525.20 Build iPhone OS 1.5 Webkit 419.3 Build Android 1.5 Webkit Nov 2008 Fork Android 1.1 Webkit Rev r30692 Android 1.0 Webkit PalmPre OS Webkit Nokia S60 Webkit Fork Nokia WRT Webkit Fork http://quirksmode.org/m/table.html Monday, December 7, 2009
- 11. many windows tothe web http://rubyurl.com/jtNs 11 Monday, December 7, 2009
- 12. JavaScript Sucks (But it is ubiquitous.) Monday, December 7, 2009
- 13. jQuery / Dojo/ YUI / MooTools etc. etc. etc. Basically: the DOM is broken. Monday, December 7, 2009
- 14. Execution speed isnot a problem. The footprint is. Monday, December 7, 2009
- 15.
- 16. 2.2 kb 10x Smaller than jQuery / Dojo Monday, December 7, 2009
- 17. Good enough. DOM / Event / Style / XHR / FX Monday, December 7, 2009
- 18.
- 19. What about UIcomponents? Monday, December 7, 2009
- 20. FUCK UI components. Monday,December 7, 2009
- 21. Apps built w/components look like it. Monday, December 7, 2009
- 22. Solve your uniqueproblem. goals > features Monday, December 7, 2009
- 23. Tapbots, for example. Monday,December 7, 2009
- 24. This is themodern equivalent of Outlook Express. Fuck components. Especially native components. Monday, December 7, 2009
- 25. Solve your problem. Monday,December 7, 2009
- 26. XUI By example. Monday, December 7, 2009
- 27. Selectors // basics x$('div.foo'); x$('ul#global-nav li.selected'); // element literals x$(window); x$(document); // lists x$('li', 'div'); // arrays even x$(['div#foo', 'div.bar']); Monday, December 7, 2009
- 28. Chaining, of course x$('ul#nav li a:first').html('hey there').css({color:'blue'}); Monday, December 7, 2009
- 29. Helpful stuff x$('ul li').has('ul li.selected'); x$('ul li').not('ul li.selected'); x$('.book').each(function() { ... }); ...and a bunch more. Monday, December 7, 2009
- 30. DOM manipulation basics x$(‘#protection’).html( '<strong>hard wood</strong>' ); Monday, December 7, 2009
- 31. DOM helpers inner outer top bottom remove before after Monday, December 7, 2009
- 32. By popular demand // getter var aboutUrl = x$('a.about').attr('href'); // setter x$('a.mysite').attr('href','http://westcoastlogic.com'); Monday, December 7, 2009
- 33. Style BS css addClass hasClass removeClass Monday, December 7, 2009
- 34. Events click <- bad. no. load touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend orientationchange Monday, December 7, 2009
- 35. FX x$('#fx').tween({background:'red', duration:1.5 }); Monday, December 7, 2009
- 36. Emile • SUPER tiny. (<50 loc) 1.7kb • Works on most mobiles. • http://script.aculo.us/downloads/emile.pdf • http://github.com/madrobby/emile 36 Monday, December 7, 2009
- 37. Super hackable. Object.prototype is your friend. Monday, December 7, 2009
- 38. Alternatives! 38 Monday, December 7, 2009
- 39. DashCode • Keep in mind: iPhone only. • But it is rad. • Might *might* be hacked to work in Android 2.0 39 Monday, December 7, 2009
- 40. jQuery Mobile! • http://github.com/jquery/jquery/commits/mobile 40 Monday, December 7, 2009
- 41. That said: jQTouchis Badass. If all you need is an iPhone solution. http://www.jqtouch.com/ Monday, December 7, 2009
- 42. jQuery Mobile! • http://github.com/jquery/jquery/commits/mobile Text 42 Monday, December 7, 2009
- 43. The lazy evaltechnique * *Term coined by Toby about 1 hr ago Monday, December 7, 2009
- 44. Dojo: also badass. Rad build system. Possibly contains kitchen sink. Monday, December 7, 2009
- 45. DashCode • Also: iPhone only. (so. whatever.) 45 Monday, December 7, 2009
- 46. Maybe you don'teven need native features? Use a mobile specific stylesheet. Progressive enhancement of functionality w/ js. Monday, December 7, 2009
- 47. Lawnchair Clientside JSON document store. For any mobile browser. • http://brianleroux.github.com/lawnchair Monday, December 7, 2009
- 48. Native Web App! <meta name="apple-‐mobile-‐web-‐app-‐capable" content="yes" /> <link rel="apple-‐touch-‐icon" href="myCustomIcon.png" /> <meta name="apple-‐mobile-‐web-‐app-‐status-‐bar-‐style" content="black" /> <link rel="apple-‐touch-‐startup-‐image" href="loading.png" /> 48 Monday, December 7, 2009
- 49. Other weird awesome <input type=”range” /> -webkit-tap-highlight-color:rgba(0,0,0,0); Buy this book when it comes out: http://building-‐iphone-‐apps.labs.oreilly.com/ 49 Monday, December 7, 2009
- 50.
- 51. BTW! Checkout: http://phonegap.com for (most) of these APIs: Geolocation Accelerometer Notifications Media playback Camera Device info Contacts On these devices: Online/Offline SMS / Telephone iPhone / iPod Touch Magnetometer Android Blackberry Nokia Palm Windows Mobile Monday, December 7, 2009
- 52. Thanks! brian@nitobi.com http://westcoastlogic.com http:twitter.com/brianleroux Monday, December 7, 2009