Fall 2010
jQuery Mobile
John Resig
I’ve been researching and trying to make
sense of the mobile space recently.
Started preparations in 2009 (with the creati...
Cross-browser mobile web development is crazy.
(...but not nearly as crazy as it use to be.)
A Simple Goal
✤ Started with a simple goal:
✤ To make sure that jQuery works on the most popular mobile
platforms and brow...
Questions:Answered
✤ Three questions that need to be answered before doing mobile
development:
✤ What platforms and browse...
Best Stats?
✤ Who has the best statistics on the mobile market?
✤ StatCounter and Gartner seem to be tops.
✤ StatCounter c...
Lack of Information
✤ Right now finding this information is a challenge.
✤ As a result, developers develop for what’s in fr...
Platforms
Platform Sales
Hard Question
✤ What versions of those platforms are popular?
✤ No one seems to know, or isn’t talking about it.
Browsers
Hard Question
✤ What versions of those browsers are popular?
✤ No one seems to know, or isn’t talking about it.
✤ Supposed...
Testing Strategy
✤ Draw a line in the sand
✤ Buy Devices, Download Simulators
✤ Automate testing (TestSwarm!)
Drawing a Line
✤ Yahoo!s Graded Browser Support technique is optimal.
✤ Qualify which browsers you will support (actively ...
Mobile Graded Browser Support: Market share + Browser quality
Testing Browsers
✤ Two options:
✤ Buy devices and/or
✤ Download simulators
✤ Simulators are good for most automated testin...
Simulators
✤ Simulators are available for most platforms and browsers.
✤ Most simulators require Windows to run (some requ...
AutomatedTesting
✤ Once you have simulators (or physical devices) up and running you’ll
want to interact with them as litt...
Platforms
✤ Symbian (S60 / UIQ)
✤ iPhone OS
✤ Blackberry OS
✤ Android
✤ Windows Mobile
✤ WebOS
✤ Maemo / Meego
Symbian
Symbian S60
✤ The most popular mobile OS - heavily used by Nokia.
✤ v5.0 is for touch screen devices (Equiv. to Safari 3.1...
Symbian S60
A
B
B?
Symbian UIQ
✤ A now-dead implementation of the Symbian OS last released in 2008.
✤ Appears to still be in use, some what, ...
Symbian UIQ
C C
iPhone OS
✤ Apple’s super-popular mobile OS
✤ Apple is very good about pushing
updates, almost all users are on the
latest...
iPhone Simulator
No 2.x
simulator!
B
A
A
Blackberry OS
✤ Blackberry continues to be enormously popular - and growing
rapidly.
✤ Ships with a custom browser, 6.0 is...
Blackberry OS
B
B
B
Android
✤ Rapidly growing OS from Google.
✤ Tons of manufacturers are
modifying and shipping it.
✤ Expect Android to grow
...
Android
A
A
A
Windows Mobile
✤ Windows Mobile 6.5 is the current release.
✤ Uses IE 6 as its rendering engine.
✤ Window Mobile 7.0 is ou...
Windows Mobile
B
F
WebOS
✤ Palm’s Mobile OS
✤ Has a minimal amount of traction.
✤ Built off of WebKit, easy to support.
✤ 1.4 simulator ships...
Maemo / Meego
✤ Linux-based OS used for tablets (and
potentially phones). Used by Nokia.
✤ Not very popular.
✤ Has a brows...
Platform-Independent Browsers
✤ A number of browsers target multiple platforms. Some work directly
with carriers (Opera, N...
Opera Mobile and Opera Mini
✤ Hugely popular mobile browser (especially Mini).
✤ Available on a large number of platforms....
Opera Mobile and Opera Mini
A
C
C
Simulator is awesome!
Fennec
✤ Codename for Firefox on mobile
devices
✤ Released for Maemo, alpha release
out for Android (watch this!)
✤ Equiva...
Phonegap
✤ Not a browser, a way to
develop cross-platform
applications.
✤ Uses WebKit as the rendering
engine.
✤ Use HTML/...
Other Browsers
✤ Not worth the time for such small market share.
✤ Netfront (Sony)
✤ Ozone (Uses WebKit)
✤ Openwave (Dead)...
Summary
✤ What do we need to support? Roughly:
✤ Opera 9.5, 10
✤ Internet Explorer 6, 7
✤ Firefox 3.5+
✤ Safari 2, 3, 4
✤ ...
What Devices to Buy?
✤ For level:
✤ 1 iPhone 3GS: Latest running 3.x (* Watch for new 4.x iPhone)
✤ 1 iPad: Running 3.2
✤ ...
-Grade Costs
✤ $315 - iPhone 3GS
✤ $499 - iPad
✤ $370 - Nokia N97
✤ $399 - Palm Pre
✤ $349 - HTC Magic
✤ $637 - Droid Incr...
What Devices to Buy?
✤ For level (in addition to A level):
✤ 1 1st Gen iPhone: Running 2.x
✤ 1 Nokia N96: Running 3.0v2
✤ ...
-Grade Costs
✤ $315 - 1st Gen iPhone
✤ $360 - Nokia N96
✤ $310 - Curve 8900
✤ $350 - Storm2 9550
✤ $600 - HTC HD2
✤ Total:...
More Information
✤ jQuery Mobile:
✤ http://jquerymobile.com/
✤ See also:
✤ http://testswarm.com/ and
✤ http://swarm.jquery...
Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010
Upcoming SlideShare
Loading in...5
×

Testing Mobile JavaScript (Fall 2010

4,009

Published on

Talk that I gave at Adobe MAX 2010.

Testing Mobile JavaScript (Fall 2010

  1. 1. Fall 2010 jQuery Mobile John Resig
  2. 2. I’ve been researching and trying to make sense of the mobile space recently. Started preparations in 2009 (with the creation of TestSwarm).
  3. 3. Cross-browser mobile web development is crazy. (...but not nearly as crazy as it use to be.)
  4. 4. A Simple Goal ✤ Started with a simple goal: ✤ To make sure that jQuery works on the most popular mobile platforms and browsers. ✤ As it turns out, it’s really hard to define the scope of the problem.
  5. 5. Questions:Answered ✤ Three questions that need to be answered before doing mobile development: ✤ What platforms and browsers are popular? ✤ What browsers are capable of supporting modern scripting? ✤ What devices and simulators do I acquire to test with? ✤ To answer those questions we need good data.
  6. 6. Best Stats? ✤ Who has the best statistics on the mobile market? ✤ StatCounter and Gartner seem to be tops. ✤ StatCounter covers billions of hits per month. ✤ Gartner is well-respected and knows sale information well. ✤ AdMob is decent for specific platforms (iPhone, Android). ✤ That being said: Very little actually-useful information leaks out.
  7. 7. Lack of Information ✤ Right now finding this information is a challenge. ✤ As a result, developers develop for what’s in front of them:
  8. 8. Platforms
  9. 9. Platform Sales
  10. 10. Hard Question ✤ What versions of those platforms are popular? ✤ No one seems to know, or isn’t talking about it.
  11. 11. Browsers
  12. 12. Hard Question ✤ What versions of those browsers are popular? ✤ No one seems to know, or isn’t talking about it. ✤ Supposedly Yahoo is going to be releasing some information soon, we’ll see. ✤ Right now it’s considered to be a competitive advantage to keep it private.
  13. 13. Testing Strategy ✤ Draw a line in the sand ✤ Buy Devices, Download Simulators ✤ Automate testing (TestSwarm!)
  14. 14. Drawing a Line ✤ Yahoo!s Graded Browser Support technique is optimal. ✤ Qualify which browsers you will support (actively test against) and give them a grade. ✤ A = Full support, C = Fall back to old site, Other = Assume full support.
  15. 15. Mobile Graded Browser Support: Market share + Browser quality
  16. 16. Testing Browsers ✤ Two options: ✤ Buy devices and/or ✤ Download simulators ✤ Simulators are good for most automated testing. ✤ Any sort of interaction testing you’ll want to do on a physical device. ✤ Always good to do a sanity check on a physical device before going live.
  17. 17. Simulators ✤ Simulators are available for most platforms and browsers. ✤ Most simulators require Windows to run (some require Perl or Java) ✤ Some browsers even provide standalone executables (Opera, Fennec). ✤ Getting the simulators running can be a real bear.
  18. 18. AutomatedTesting ✤ Once you have simulators (or physical devices) up and running you’ll want to interact with them as little as possible. ✤ Automated test execution will be really important. ✤ TestSwarm was developed for this express purpose: Make it easy to push tests out to a large number of clients (even mobile).
  19. 19. Platforms ✤ Symbian (S60 / UIQ) ✤ iPhone OS ✤ Blackberry OS ✤ Android ✤ Windows Mobile ✤ WebOS ✤ Maemo / Meego
  20. 20. Symbian
  21. 21. Symbian S60 ✤ The most popular mobile OS - heavily used by Nokia. ✤ v5.0 is for touch screen devices (Equiv. to Safari 3.1) ✤ v3.0 is the latest for ‘regular’ devices (Equiv. to Safari 2.0) ✤ 2 ‘feature packs’ have been released ✤ The oldest, active, mobile browser that should be supported. ✤ Simulators available on Nokia.com. ✤ Nokia just Symbian^3 off in favor of Meego.
  22. 22. Symbian S60 A B B?
  23. 23. Symbian UIQ ✤ A now-dead implementation of the Symbian OS last released in 2008. ✤ Appears to still be in use, some what, but quickly becoming irrelevant. ✤ Uses Opera Mobile (8.6, 8.65) as its built-in browser. ✤ UIQ is dead and Nokia doesn’t distribute the simulator any more. I found a guy in Russia that has some extra copies (totally legit, heh).
  24. 24. Symbian UIQ C C
  25. 25. iPhone OS ✤ Apple’s super-popular mobile OS ✤ Apple is very good about pushing updates, almost all users are on the latest OS version. ✤ Current with Safari 4 ✤ A gotchya: Does not have fixed position support (making it difficult to implement toolbars). Recommend: TouchScroll library. ✤ Simulator is part of the iPhone SDK.
  26. 26. iPhone Simulator No 2.x simulator! B A A
  27. 27. Blackberry OS ✤ Blackberry continues to be enormously popular - and growing rapidly. ✤ Ships with a custom browser, 6.0 is WebKit-based. ✤ Anything older than Blackberry 4.6 is really frightening. ✤ Andrew Dupont calls 4.6 the “rubicon”. ✤ 4.6/4.7 have some strange quirks, 5.0 is pretty decent, 6.0 is great. ✤ Blackberry provides simulator downloads on their dev site.
  28. 28. Blackberry OS B B B
  29. 29. Android ✤ Rapidly growing OS from Google. ✤ Tons of manufacturers are modifying and shipping it. ✤ Expect Android to grow drastically over the next couple years. ✤ Lack of control has yielded extreme version fracturing. ✤ Simulators are an easy download.
  30. 30. Android A A A
  31. 31. Windows Mobile ✤ Windows Mobile 6.5 is the current release. ✤ Uses IE 6 as its rendering engine. ✤ Window Mobile 7.0 is out. ✤ Uses IE 7 as its rendering engine. :-( :-( :-( :,( ✤ Window Mobile 6.1 is still relatively popular but is based off of IE 4.0 - this is a non-starter. ✤ Windows Mobile 6.5 simulator is an easy download.
  32. 32. Windows Mobile B F
  33. 33. WebOS ✤ Palm’s Mobile OS ✤ Has a minimal amount of traction. ✤ Built off of WebKit, easy to support. ✤ 1.4 simulator ships with 1.3 browser (wtf!?) ✤ I’m testing using a physical Palm Pre. ✤ Palm Pre simulator is an easy download. A
  34. 34. Maemo / Meego ✤ Linux-based OS used for tablets (and potentially phones). Used by Nokia. ✤ Not very popular. ✤ Has a browser called ‘MicroB’ that uses Gecko - may be switching to WebKit. ✤ Becoming the new platform for most Nokia smartphones. ✤ Simulator requires Linux to run - haven’t figured it out yet. C
  35. 35. Platform-Independent Browsers ✤ A number of browsers target multiple platforms. Some work directly with carriers (Opera, Netfront) whereas others provide downloads (Opera, Fennec). ✤ Opera ✤ Fennec ✤ Netfront ✤ Phonegap (App Platform)
  36. 36. Opera Mobile and Opera Mini ✤ Hugely popular mobile browser (especially Mini). ✤ Available on a large number of platforms. ✤ Even ships as the default browser on some. ✤ Opera Mobile and Opera Mini couldn’t be more different. ✤ Mobile is a full-featured browser. ✤ Mini is a glorified bitmap viewer. ✤ Pulls from a proxy, no JS executing on client.
  37. 37. Opera Mobile and Opera Mini A C C Simulator is awesome!
  38. 38. Fennec ✤ Codename for Firefox on mobile devices ✤ Released for Maemo, alpha release out for Android (watch this!) ✤ Equivalent to the latest releases of Firefox A B Simulator is awesome!
  39. 39. Phonegap ✤ Not a browser, a way to develop cross-platform applications. ✤ Uses WebKit as the rendering engine. ✤ Use HTML/CSS/JS to develop deployable apps. ✤ Quite popular, easy to support. A
  40. 40. Other Browsers ✤ Not worth the time for such small market share. ✤ Netfront (Sony) ✤ Ozone (Uses WebKit) ✤ Openwave (Dead) ✤ Bolt (Uses WebKit) ✤ JIL (Uses WebKit, Widget Platform) C
  41. 41. Summary ✤ What do we need to support? Roughly: ✤ Opera 9.5, 10 ✤ Internet Explorer 6, 7 ✤ Firefox 3.5+ ✤ Safari 2, 3, 4 ✤ (and Blackberry... weeee...) ✤ Don’t assume it’ll work, download the simulators and test!
  42. 42. What Devices to Buy? ✤ For level: ✤ 1 iPhone 3GS: Latest running 3.x (* Watch for new 4.x iPhone) ✤ 1 iPad: Running 3.2 ✤ 1 Nokia N97 Running S60v5 ✤ 1 Palm Pre: Running 1.4 ✤ 2 Android Phones: HTC Magic (1.5/1.6), Droid (2.1) (* Watch for new 2.2 Android) ✤ And download the Opera and Fennec Simulators and Phonegap A
  43. 43. -Grade Costs ✤ $315 - iPhone 3GS ✤ $499 - iPad ✤ $370 - Nokia N97 ✤ $399 - Palm Pre ✤ $349 - HTC Magic ✤ $637 - Droid Incredible ✤ Total: $2569 A
  44. 44. What Devices to Buy? ✤ For level (in addition to A level): ✤ 1 1st Gen iPhone: Running 2.x ✤ 1 Nokia N96: Running 3.0v2 ✤ 2 Blackberry Devices: Curve 8900 (4.6), Storm2 9550 (5.0) ✤ 1 HTC HD2: Running Windows Mobile 6.5 B
  45. 45. -Grade Costs ✤ $315 - 1st Gen iPhone ✤ $360 - Nokia N96 ✤ $310 - Curve 8900 ✤ $350 - Storm2 9550 ✤ $600 - HTC HD2 ✤ Total: $1935 ✤ -Grade + -Grade: $4504 B BA
  46. 46. More Information ✤ jQuery Mobile: ✤ http://jquerymobile.com/ ✤ See also: ✤ http://testswarm.com/ and ✤ http://swarm.jquery.org/ ✤ And: ✤ http://quirksmode.org/m/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×