Mobile JavaScript
Brian LeRoux
 Nitobi Software
The majority of internet use will
     be via a mobile device in 5 years.
                     - Brian LeRoux, 2007 *




...
Small screens.
Less memory.
Less CPU.
Less hard drive space if any.
Sketchy connectivity.
Constraints == Focus




That is why 8 bit games still pwn.
Webkit




         6
Yay Webkit!


          Good!
          sqlite
          cache manifest
          css awesome
          custom fontage
Bad *




        * many variants
        ** not mozilla
Ugly
•   Blackberry less than 4.6 have no XHR

•   Windows Mobile runs IE 4

•   Or worse: IE 6 + 7
Execution speed is not a problem.
           The footprint is.
XUI
2.4 kb


10x Smaller than jQuery / Dojo
Good enough.

DOM / Event / Style / XHR / FX
Easily extended
What about UI components?
FUCK UI components.
Apps built w/ components look like it.
Solve your unique problem.

        goals > features
Tapbots, for example.
This is the modern equivalent of
                     Outlook Express.




Fuck components. Especially native components.
Solve your problem.
That said: jQTouch is Badass.
  If all you need is an iPhone solution.



           http://www.jqtouch.com/
XUI

By example.
Selectors
  // basics
  x$('div.foo');
  x$('ul#global-nav li.selected');

  // element literals
  x$(window);
  x$(docume...
Chaining, of course
x$('ul#nav li a:first').html('hey there').css({color:'blue'});
Helpful stuff

x$('ul li').has('ul li.selected');
x$('ul li').not('ul li.selected');
x$('.book').each(function() { ... });...
DOM manipulation basics




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



inner
outer 
top
bottom
remove
before
afte
By popular demand
// getter
var aboutUrl = x$('a.about').attr('href');

// setter
x$('a.mysite').attr('href','http://westc...
Style BS


 css
 addClass
 hasClass
 removeClass
Events   click
         load
         touchstart
         touchmove
         touchend
         touchcancel
         gestur...
FX
     x$('#fx').tween({background:'red', duration:1.5 });
Super hackable.
BTW!
Checkout: http://phonegap.com for (most) of these APIs:

Geolocation
Accelerometer
Notifications
Media playback
Camera...
Thanks!
              
      brian@nitobi.com
 http://westcoastlogic.com
http:twitter.com/brianleroux
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Mobile JavaScript
Upcoming SlideShare
Loading in...5
×

Mobile JavaScript

64,993

Published on

My retro take on mobile js.

2 Comments
17 Likes
Statistics
Notes
  • On slide 13. Javascript does not suck. The DOM is not 'broken'. Or do you mean Javascript sucks on mobile browsers and the DOM is broken on mobile browsers? In general, Javascript is very powerful. I thought Javascript sucked before I learned to use it well. The DOM is the building blocks that useful frameworks like jQuery are built on.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Appropriately on 8bit day btw.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
64,993
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
378
Comments
2
Likes
17
Embeds 0
No embeds

No notes for slide
  • Mobile JavaScript

    1. 1. Mobile JavaScript
    2. 2. Brian LeRoux Nitobi Software
    3. 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. 4. Small screens. Less memory. Less CPU. Less hard drive space if any. Sketchy connectivity.
    5. 5. Constraints == Focus That is why 8 bit games still pwn.
    6. 6. Webkit 6
    7. 7. Yay Webkit! Good! sqlite cache manifest css awesome custom fontage
    8. 8. Bad * * many variants ** not mozilla
    9. 9. Ugly • Blackberry less than 4.6 have no XHR • Windows Mobile runs IE 4 • Or worse: IE 6 + 7
    10. 10. Execution speed is not a problem. The footprint is.
    11. 11. XUI
    12. 12. 2.4 kb 10x Smaller than jQuery / Dojo
    13. 13. Good enough. DOM / Event / Style / XHR / FX
    14. 14. Easily extended
    15. 15. What about UI components?
    16. 16. FUCK UI components.
    17. 17. Apps built w/ components look like it.
    18. 18. Solve your unique problem. goals > features
    19. 19. Tapbots, for example.
    20. 20. This is the modern equivalent of Outlook Express. Fuck components. Especially native components.
    21. 21. Solve your problem.
    22. 22. That said: jQTouch is Badass. If all you need is an iPhone solution. http://www.jqtouch.com/
    23. 23. XUI By example.
    24. 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. 25. Chaining, of course x$('ul#nav li a:first').html('hey there').css({color:'blue'});
    26. 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. 27. DOM manipulation basics x$(‘#protection’).html( '<strong>hard wood</strong>' );
    28. 28. DOM helpers inner outer  top bottom remove before afte
    29. 29. By popular demand // getter var aboutUrl = x$('a.about').attr('href'); // setter x$('a.mysite').attr('href','http://westcoastlogic.com');
    30. 30. Style BS css addClass hasClass removeClass
    31. 31. Events click load touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend orientationchange
    32. 32. FX x$('#fx').tween({background:'red', duration:1.5 });
    33. 33. Super hackable.
    34. 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. 35. Thanks!   brian@nitobi.com http://westcoastlogic.com http:twitter.com/brianleroux
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×