Js On Mobile Devices

3,468 views

Published on

Slides from my talk at the JavaScript meetup Cologne.js

Published in: Technology, News & Politics
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,468
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide


  • * 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‘s a phone)!
    -> but, the main thing is:
  • On modern phones, perf is pretty good, but don‘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‘t be afraid, code - but test.

  • Js On Mobile Devices

    1. 1. JavaScript on Mobile Devices Jens Arps uxebu
    2. 2. We open the mobile web.
    3. 3. http://www.flickr.com/photos/63629542@N00/435549194/ JS on the desktop
    4. 4. http://www.flickr.com/photos/phily/263037865/ JS on mobile?
    5. 5. Mobile Devices • Smartphones
    6. 6. Mobile Devices • Smartphones • Featurephones
    7. 7. Mobile Devices • Smartphones • Featurephones • Non phone handhelds
    8. 8. Mobile Devices • Smartphones • Featurephones • Non phone handhelds • TVs
    9. 9. Mobile Devices • Smartphones • Featurephones • Non phone handhelds • TVs • Gaming Consoles
    10. 10. Mobile Embedded Devices • Smartphones • Featurephones • Non phone handhelds • TVs • Gaming Consoles
    11. 11. Browser Landscape • WebKit • Opera Mini / Mobile • NetFront, Blackberry, IE Mobile •…
    12. 12. Browser Landscape WebKit rules! For compatability charts, see @ppk‘s quirksmode: http://quirksmode.org/m/w3c_core.html
    13. 13. 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
    14. 14. Performance
    15. 15. Performance Again: My phone reads 1,000 entries from localStorage in 16.4ms.
    16. 16. 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
    17. 17. 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
    18. 18. WebApps (Yeah!)
    19. 19. WebApps? native? Tools like Phonegap or Titanium can turn your WebApps to native apps.
    20. 20. 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
    21. 21. 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)
    22. 22. 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/
    23. 23. 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
    24. 24. 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
    25. 25. Summary All‘s good, really. Code on.
    26. 26. Thanks. http://uxebu.com Jens Arps, uxebu arps@uxebu.com http://twitter.com/uxebu http://twitter.com/jensarps http://jensarps.de

    ×