Js On Mobile Devices
•
8 gefällt mir•1,326 views
Slides from my talk at the JavaScript meetup Cologne.js
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (6)
Ähnlich wie Js On Mobile Devices
Ähnlich wie Js On Mobile Devices (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Js On Mobile Devices
- 1. JavaScript on Mobile Devices Jens Arps uxebu
- 3. We open the mobile web.
- 4. http://www.flickr.com/photos/63629542@N00/435549194/ JS on the desktop
- 5. http://www.flickr.com/photos/phily/263037865/ JS on mobile?
- 7. Mobile Devices • Smartphones • Featurephones
- 8. Mobile Devices • Smartphones • Featurephones • Non phone handhelds
- 9. Mobile Devices • Smartphones • Featurephones • Non phone handhelds • TVs
- 10. Mobile Devices • Smartphones • Featurephones • Non phone handhelds • TVs • Gaming Consoles
- 11. Mobile Embedded Devices • Smartphones • Featurephones • Non phone handhelds • TVs • Gaming Consoles
- 12. Browser Landscape • WebKit • Opera Mini / Mobile • NetFront, Blackberry, IE Mobile •…
- 13. Browser Landscape WebKit rules! For compatability charts, see @ppk‘s quirksmode: http://quirksmode.org/m/w3c_core.html
- 14. Browser Landscape Good news: 1) iOS and Android devices use WebKits 2) Most mobile WebKits are pretty good 3) 8 of the top 10 smartphones are iOS or Android
- 15. Performance
- 16. Performance Again: My phone reads 1,000 entries from localStorage in 16.4ms.
- 17. Performance differs! Some DOM modifcation test‘s results: HTC Desire 0.8s Samsung Wave 2.1s iPhone 3.1 11.1s iPhone 2.2 14.3s IE Mobile 6 died
- 18. Performance differs! Some DOM modifcation test‘s results: HTC Desire 0.8s TES T! Samsung Wave iPhone 3.1 2.1s 11.1s iPhone 2.2 14.3s IE Mobile 6 died
- 19. WebApps (Yeah!)
- 20. WebApps? native? Tools like Phonegap or Titanium can turn your WebApps to native apps.
- 21. iOS meta tags http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html - apple-mobile-web-app-capable - apple-mobile-web-app-status-bar-style - viewport
- 22. Pitfalls 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.) (check: http://quirksmode.org/webkit.html)
- 23. Pitfalls caching is limited • iOS 3.2 does not cache components larger than 25.6kb • gzip does not count http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
- 24. Pitfalls Android is not iOS! • Android has keyboard navigation • Only <a> elements receive focus using keys • Android knows hover states • Android doesn‘t trigger onorientationchange
- 25. Pitfalls click event != touch event • click events are fired • iPhone fires single click event 300ms after the touch event • learn and use touch events, they are powerful
- 26. Summary All‘s good, really. Code on.
- 27. Thanks. http://uxebu.com Jens Arps, uxebu arps@uxebu.com http://twitter.com/uxebu http://twitter.com/jensarps http://jensarps.de
Hinweis der Redaktion
- * 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.