Embed Size (px)
DESCRIPTION
My retro take on mobile js.
Citation preview
Mobile JavaScript
Monday, December 7, 2009
Brian LeRouxNitobi Software
Monday, December 7, 2009
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 webMonday, December 7, 2009
Small screens.Less memory.Less CPU.Less hard drive space if any.Sketchy connectivity.
Monday, December 7, 2009
Constraints == Focus
That is why 8 bit games still pwn.Monday, December 7, 2009
Webkit
6
Monday, December 7, 2009
Good!sqlitecache manifestcss awesomecustom fontage
Yay Webkit!
Monday, December 7, 2009
Bad *
* many variants** not mozilla
Monday, December 7, 2009
• Blackberry less than 4.6 have no XHR
• Windows Mobile runs IE 4
• Or worse: IE 6 + 7
Ugly
Monday, December 7, 2009
The many flavours of WebkitiPhone OS 3.0 Webkit 528.16 BuildiPhone OS 2.2 Webkit 525.20 BuildiPhone OS 2.02 Webkit 525.20 BuildiPhone OS 1.5 Webkit 419.3 BuildAndroid 1.5 Webkit Nov 2008 ForkAndroid 1.1 Webkit Rev r30692Android 1.0 WebkitPalmPre OS WebkitNokia S60 Webkit ForkNokia WRT Webkit Fork
http://quirksmode.org/m/table.html
Monday, December 7, 2009
many windows to the web
http://rubyurl.com/jtNs
11
Monday, December 7, 2009
JavaScript Sucks
(But it is ubiquitous.)
Monday, December 7, 2009
jQuery / Dojo / YUI / MooTools
etc. etc. etc. Basically: the DOM is broken.
Monday, December 7, 2009
Execution speed is not a problem.The footprint is.
Monday, December 7, 2009
XUI
Monday, December 7, 2009
2.2 kb
10x Smaller than jQuery / DojoMonday, December 7, 2009
Good enough.
DOM / Event / Style / XHR / FX
Monday, December 7, 2009
Easily extended
Monday, December 7, 2009
What about UI components?
Monday, December 7, 2009
FUCK UI components.
Monday, December 7, 2009
Apps built w/ components look like it.
Monday, December 7, 2009
Solve your unique problem.
goals > features
Monday, December 7, 2009
Tapbots, for example.
Monday, December 7, 2009
Fuck components. Especially native components.
This is the modern equivalent of Outlook Express.
Monday, December 7, 2009
Solve your problem.
Monday, December 7, 2009
XUI
By example.
Monday, December 7, 2009
Selectors
// basicsx$('div.foo');x$('ul#global-nav li.selected');
// element literalsx$(window);x$(document);
// listsx$('li', 'div');
// arrays evenx$(['div#foo', 'div.bar']);
Monday, December 7, 2009
Chaining, of course
x$('ul#nav li a:first').html('hey there').css({color:'blue'});
Monday, December 7, 2009
Helpful stuffx$('ul li').has('ul li.selected');x$('ul li').not('ul li.selected');x$('.book').each(function() { ... });
...and a bunch more.
Monday, December 7, 2009
DOM manipulation basics
x$(‘#protection’).html( '<strong>hard wood</strong>' );
Monday, December 7, 2009
DOM helpers
innerouter topbottomremovebeforeafter
Monday, December 7, 2009
By popular demand
// gettervar aboutUrl = x$('a.about').attr('href');
// setterx$('a.mysite').attr('href','http://westcoastlogic.com');
Monday, December 7, 2009
Style BS
cssaddClasshasClassremoveClass
Monday, December 7, 2009
Events click <- bad. no.loadtouchstarttouchmovetouchendtouchcancelgesturestartgesturechangegestureendorientationchange
Monday, December 7, 2009
FX
x$('#fx').tween({background:'red', duration:1.5 });
Monday, December 7, 2009
Emile
• SUPER tiny. (<50 loc) 1.7kb• Works on most mobiles.• http://script.aculo.us/downloads/emile.pdf• http://github.com/madrobby/emile
36
Monday, December 7, 2009
Super hackable.
Object.prototype is your friend.
Monday, December 7, 2009
Alternatives!
38
Monday, December 7, 2009
DashCode
• Keep in mind: iPhone only.• But it is rad.• Might *might* be hacked to work in Android 2.0
39
Monday, December 7, 2009
jQuery Mobile!
• http://github.com/jquery/jquery/commits/mobile
40
Monday, December 7, 2009
That said: jQTouch is Badass.If all you need is an iPhone solution.
http://www.jqtouch.com/
Monday, December 7, 2009
jQuery Mobile!
• http://github.com/jquery/jquery/commits/mobile
42
Text
Monday, December 7, 2009
The lazy eval technique *
*Term coined by Toby about 1 hr agoMonday, December 7, 2009
Dojo: also badass.
Rad build system. Possibly contains kitchen sink.
Monday, December 7, 2009
DashCode
• Also: iPhone only. (so. whatever.)
45
Monday, December 7, 2009
Maybe you don't even need native features?
Use a mobile specific stylesheet.Progressive enhancement of functionality w/ js.
Monday, December 7, 2009
Lawnchair
• http://brianleroux.github.com/lawnchair
•
Clientside JSON document store.
For any mobile browser.
Monday, December 7, 2009
Native Web App!
<meta name="apple-‐mobile-‐web-‐app-‐capable" content="yes" />
<link rel="apple-‐touch-‐icon" href="myCustomIcon.png" />
<meta name="apple-‐mobile-‐web-‐app-‐status-‐bar-‐style" content="black" />
<link rel="apple-‐touch-‐startup-‐image" href="loading.png" />
48
Monday, December 7, 2009
Other weird awesome
Buy this book when it comes out:http://building-‐iphone-‐apps.labs.oreilly.com/
49
<input type=”range” />
-webkit-tap-highlight-color:rgba(0,0,0,0);
Monday, December 7, 2009
mobile-spec
Monday, December 7, 2009
BTW!Checkout: http://phonegap.com for (most) of these APIs:
GeolocationAccelerometerNotificationsMedia playbackCameraDevice infoContactsOnline/OfflineSMS / TelephoneMagnetometer
On these devices:
iPhone / iPod TouchAndroidBlackberryNokiaPalmWindows Mobile
Monday, December 7, 2009
Thanks!
[email protected]://westcoastlogic.com
http:twitter.com/brianleroux
Monday, December 7, 2009
