* Js on desktop is all the juicy power * webGL, canvas-video, JS flash container * big question is: ->
is that js on mobile devices?? lets find it out! -> first, we need to define what mobile devices are:
iphone, ipad, android phones
phones that make it into the net somehow, like my old nokia
the ogo, or the psp
-> but, there are also:
yes, TV widgets! widget-capable tvs are already sold right now.
Wii, PS3 all have internet browsers
* so we need to speak of embedded devices instead (car dashboard) * but, we will focus on smartphones today -> some good fragmentation! and the browsers?
we have webkit (yeah!), the opera browsers, and many, many more... there is also fennec, but its not really there yet...
* webkit and opera do fine* webkit rules - but thats noth the whole truth about webkit, more later... * that table is more than a year old - but still ok to check. -> ow its time for some:
* to 3) May 2010, numbers by admob
* My phone reads 1,000 entries from localStorage in 16.4ms.
* (Chrome: 240ms, Firefox: 77ms, Safari: 1.4ms) * anyway, thats wicked fast (it&#x2018;s a phone)! -> but, the main thing is:
On modern phones, perf is pretty good, but don&#x2018;t go too far, and:
test your code on as many devices as possible!
-> but, what you will want to do, is:
* or, mobile-capable websites (still yeah!) * webapps and websites are the same (for me and for now, at least). * what applies to webapps, also applies to websites -> to turn an a webapp into a native app :
* so they can be ditsributed to appStores * but, no need, iTunes also holds webApps * or, on iOS, you can use ->
* the first leads to the navigator.standalone property * home-button -> website w/out chrome * device-width!! -> now back to js, and to some pitfalls
* most differences in JS are founded in different ages of the browsers * iOS 2.x is dead, but Android 1.5/1.6 is not
* iOS 4 does more, but only 50k * iOS 3.2 is shipped w/ iPad * dont just throw a super-sized JS-Framework into a phone!! * thanks to Ryan Grove from YUIBlog
* a div with onclick/ontouch event connection will not work using keyboards! * i know more than one app ported from iphone to android that simply dont work.
* dont just port JS code to a multitouch device, think about it! * click events are fired, but behave different (no dblclick, e.g.) * touch events are cool, check them out
* JS runs fine on modern mobile devices * don&#x2018;t be afraid, code - but test.
typeof(webkit) == “webkit“ // false
• 10+ WebKits out there
• iPhone‘s WebKit is great, Android
1.5‘s is not
• JS is pretty similar, except for new
features (localStorage, e.g.)
caching is limited
• iOS 3.2 does not cache components
larger than 25.6kb
• gzip does not count
Android is not iOS!
• Android has keyboard navigation
• Only <a> elements receive focus
• Android knows hover states
• Android doesn‘t trigger
click event != touch event
• click events are ﬁred
• iPhone ﬁres single click event
300ms after the touch event
• learn and use touch events, they are