Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile JavaScript

66,067 views

Published on

My retro take on mobile js.

  • 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

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

×