Mobile JavaScript

Brian LeRoux Nitobi Software

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

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.

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$(document); // lists x$('li', 'div'); // arrays even x$(['div#foo', 'div.bar']);

Chaining, of course x$('ul#nav li a:ﬁrst').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() { ... }); ...and a bunch more.

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://westcoastlogic.com');

Style BS css addClass hasClass removeClass

Events click load touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend orientationchange

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

Super hackable.

BTW! Checkout: http://phonegap.com for (most) of these APIs: Geolocation Accelerometer Notiﬁcations Media playback Camera Device info Contacts On these devices: Online/Ofﬂine SMS / Telephone iPhone / iPod Touch Magnetometer Android Blackberry Nokia Palm Windows Mobile

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

http://www.slideshare.net	104
http://codebits.eu	26
http://bummerware.tumblr.com	1
http://translate.googleusercontent.com	1
http://constructioncompany.2015526.123-website-market.com	1

Mobile JavaScript

by Brian LeRoux on Sep 13, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 133

Statistics

Mobile JavaScript — Presentation Transcript