mobile javascript
DESCRIPTION
My retro take on mobile js.TRANSCRIPT
![Page 1: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/1.jpg)
Mobile JavaScript
Monday, December 7, 2009
![Page 2: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/2.jpg)
Brian LeRouxNitobi Software
Monday, December 7, 2009
![Page 3: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/3.jpg)
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
![Page 4: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/4.jpg)
Small screens.Less memory.Less CPU.Less hard drive space if any.Sketchy connectivity.
Monday, December 7, 2009
![Page 5: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/5.jpg)
Constraints == Focus
That is why 8 bit games still pwn.Monday, December 7, 2009
![Page 6: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/6.jpg)
Webkit
6
Monday, December 7, 2009
![Page 7: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/7.jpg)
Good!sqlitecache manifestcss awesomecustom fontage
Yay Webkit!
Monday, December 7, 2009
![Page 8: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/8.jpg)
Bad *
* many variants** not mozilla
Monday, December 7, 2009
![Page 9: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/9.jpg)
• Blackberry less than 4.6 have no XHR
• Windows Mobile runs IE 4
• Or worse: IE 6 + 7
Ugly
Monday, December 7, 2009
![Page 10: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/10.jpg)
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
![Page 11: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/11.jpg)
many windows to the web
http://rubyurl.com/jtNs
11
Monday, December 7, 2009
![Page 12: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/12.jpg)
JavaScript Sucks
(But it is ubiquitous.)
Monday, December 7, 2009
![Page 13: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/13.jpg)
jQuery / Dojo / YUI / MooTools
etc. etc. etc. Basically: the DOM is broken.
Monday, December 7, 2009
![Page 14: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/14.jpg)
Execution speed is not a problem.The footprint is.
Monday, December 7, 2009
![Page 15: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/15.jpg)
XUI
Monday, December 7, 2009
![Page 16: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/16.jpg)
2.2 kb
10x Smaller than jQuery / DojoMonday, December 7, 2009
![Page 17: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/17.jpg)
Good enough.
DOM / Event / Style / XHR / FX
Monday, December 7, 2009
![Page 18: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/18.jpg)
Easily extended
Monday, December 7, 2009
![Page 19: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/19.jpg)
What about UI components?
Monday, December 7, 2009
![Page 20: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/20.jpg)
FUCK UI components.
Monday, December 7, 2009
![Page 21: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/21.jpg)
Apps built w/ components look like it.
Monday, December 7, 2009
![Page 22: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/22.jpg)
Solve your unique problem.
goals > features
Monday, December 7, 2009
![Page 23: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/23.jpg)
Tapbots, for example.
Monday, December 7, 2009
![Page 24: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/24.jpg)
Fuck components. Especially native components.
This is the modern equivalent of Outlook Express.
Monday, December 7, 2009
![Page 25: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/25.jpg)
Solve your problem.
Monday, December 7, 2009
![Page 26: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/26.jpg)
XUI
By example.
Monday, December 7, 2009
![Page 27: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/27.jpg)
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
![Page 28: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/28.jpg)
Chaining, of course
x$('ul#nav li a:first').html('hey there').css({color:'blue'});
Monday, December 7, 2009
![Page 29: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/29.jpg)
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
![Page 30: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/30.jpg)
DOM manipulation basics
x$(‘#protection’).html( '<strong>hard wood</strong>' );
Monday, December 7, 2009
![Page 31: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/31.jpg)
DOM helpers
innerouter topbottomremovebeforeafter
Monday, December 7, 2009
![Page 32: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/32.jpg)
By popular demand
// gettervar aboutUrl = x$('a.about').attr('href');
// setterx$('a.mysite').attr('href','http://westcoastlogic.com');
Monday, December 7, 2009
![Page 33: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/33.jpg)
Style BS
cssaddClasshasClassremoveClass
Monday, December 7, 2009
![Page 34: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/34.jpg)
Events click <- bad. no.loadtouchstarttouchmovetouchendtouchcancelgesturestartgesturechangegestureendorientationchange
Monday, December 7, 2009
![Page 35: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/35.jpg)
FX
x$('#fx').tween({background:'red', duration:1.5 });
Monday, December 7, 2009
![Page 36: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/36.jpg)
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
![Page 37: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/37.jpg)
Super hackable.
Object.prototype is your friend.
Monday, December 7, 2009
![Page 38: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/38.jpg)
Alternatives!
38
Monday, December 7, 2009
![Page 39: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/39.jpg)
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
![Page 40: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/40.jpg)
jQuery Mobile!
• http://github.com/jquery/jquery/commits/mobile
40
Monday, December 7, 2009
![Page 41: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/41.jpg)
That said: jQTouch is Badass.If all you need is an iPhone solution.
http://www.jqtouch.com/
Monday, December 7, 2009
![Page 42: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/42.jpg)
jQuery Mobile!
• http://github.com/jquery/jquery/commits/mobile
42
Text
Monday, December 7, 2009
![Page 43: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/43.jpg)
The lazy eval technique *
*Term coined by Toby about 1 hr agoMonday, December 7, 2009
![Page 44: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/44.jpg)
Dojo: also badass.
Rad build system. Possibly contains kitchen sink.
Monday, December 7, 2009
![Page 45: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/45.jpg)
DashCode
• Also: iPhone only. (so. whatever.)
45
Monday, December 7, 2009
![Page 46: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/46.jpg)
Maybe you don't even need native features?
Use a mobile specific stylesheet.Progressive enhancement of functionality w/ js.
Monday, December 7, 2009
![Page 47: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/47.jpg)
Lawnchair
• http://brianleroux.github.com/lawnchair
•
Clientside JSON document store.
For any mobile browser.
Monday, December 7, 2009
![Page 48: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/48.jpg)
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
![Page 49: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/49.jpg)
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
![Page 50: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/50.jpg)
mobile-spec
Monday, December 7, 2009
![Page 51: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/51.jpg)
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
![Page 52: Mobile JavaScript](https://reader033.vdocuments.net/reader033/viewer/2022051610/549a4b8aac7959412e8b5a7f/html5/thumbnails/52.jpg)
Thanks!
[email protected]://westcoastlogic.com
http:twitter.com/brianleroux
Monday, December 7, 2009