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.

1. Mobile JavaScript

2. Brian LeRoux
Nitobi Software

3. The majority of internet use will
be via a mobile device in 5 years.
- Brian LeRoux, 2007 *
* credible expert with vested interest in the mobile web

4. Small screens.
Less memory.
Less CPU.
Less hard drive space if any.
Sketchy connectivity.

5. Constraints == Focus
That is why 8 bit games still pwn.

6. Webkit
6

7. Yay Webkit!
Good!
sqlite
cache manifest
css awesome
custom fontage

8. Bad *
* many variants
** not mozilla

9. Ugly
• Blackberry less than 4.6 have no XHR
• Windows Mobile runs IE 4
• Or worse: IE 6 + 7

10. Execution speed is not a problem.
The footprint is.

11. XUI

12. 2.4 kb
10x Smaller than jQuery / Dojo

13. Good enough.
DOM / Event / Style / XHR / FX

14. Easily extended

15. What about UI components?

16. FUCK UI components.

17. Apps built w/ components look like it.

18. Solve your unique problem.
goals > features

19. Tapbots, for example.

20. This is the modern equivalent of
Outlook Express.
Fuck components. Especially native components.

21. Solve your problem.

22. That said: jQTouch is Badass.
If all you need is an iPhone solution.
http://www.jqtouch.com/

23. XUI
By example.

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

25. Chaining, of course
x$('ul#nav li a:first').html('hey there').css({color:'blue'});

26. Helpful stuff
x$('ul li').has('ul li.selected');
x$('ul li').not('ul li.selected');
x$('.book').each(function() { ... });
...and a bunch more.

27. DOM manipulation basics
x$(‘#protection’).html( '<strong>hard wood</strong>' );

28. DOM helpers
inner
outer
top
bottom
remove
before
afte

29. By popular demand
// getter
var aboutUrl = x$('a.about').attr('href');
// setter
x$('a.mysite').attr('href','http://westcoastlogic.com');

30. Style BS
css
addClass
hasClass
removeClass

31. Events click
load
touchstart
touchmove
touchend
touchcancel
gesturestart
gesturechange
gestureend
orientationchange

32. FX
x$('#fx').tween({background:'red', duration:1.5 });

33. Super hackable.

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

35. Thanks!
brian@nitobi.com
http://westcoastlogic.com
http:twitter.com/brianleroux