My retro take on mobile js.

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