SlideShare a Scribd company logo
Testing Mobile JavaScript
John Resig

June 2010
I’ve been researching and trying to make
         sense of the mobile space recently.
Started preparations in 2009 (with the creation of TestSwarm).
Cross-browser mobile web development is crazy.
         (...but not nearly as crazy as it use to be.)




                     I’ve seen things...
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.
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.
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.
Lack of Information

✤   Right now finding this information is a challenge.

✤   As a result, developers develop for what’s in front of them:
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.
✤   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.
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 test against) and
    give them a grade.

✤   A = Full support, C = Fall back to old site, Other = Assume full
    support.
Testing Mobile JavaScript
My God... it’s full of browsers...




Mobile Graded Browser Support: Market share + Browser quality
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.
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.
Automated Testing

✤   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).
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)

✤   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.
Symbian S60




                  B
              A       B?
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).
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 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.
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, will be switching to a WebKit-based one
    in 6.0.

✤   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.

✤   Blackberry provides simulator downloads on their dev site.
Blackberry OS




      B


                B

                    B
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.
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 coming soon.

    ✤   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.
Windows Mobile




                     7.0? :-(

     F
                 B
WebOS

✤   Palm’s (HP’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
Maemo / Meego

✤   Linux-based OS used for tablets (and
    potentially phones). Used by Nokia.

    ✤   Not very popular.

✤   Has a browser called ‘MicroB’ that     C
    uses Gecko.

    ✤   Mostly interesting as Fennec is
        capable of running on it.

✤   Simulator requires Linux to run -
    haven’t figured it out yet.
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)
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.
Opera Mobile and Opera Mini



          C




                                       A
                C
                     Simulator is awesome!
Fennec


✤   Codename for Firefox on mobile
    devices

✤   Released for Maemo, alpha release
    out for Android (watch this!)
                                                               A   B
✤   Equivalent to the latest releases of
    Firefox                                Simulator is awesome!
Netfront


✤   Used on Playstation and N-Gage

    ✤   Download available for Windows Mobile.

✤   Highly crippled, custom, browser.

    ✤   Not worth supporting.
                                                 C
✤   Compatibility can be a real pain.
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.
                                   A
✤   Quite popular, easy to
    support.
Other Browsers


✤   Not worth the time for such small market share.

    ✤   Ozone (Uses WebKit)

    ✤   Openwave (Dead)

    ✤   Bolt (Uses WebKit)
                                                      C
    ✤   JIL (Uses WebKit, Widget Platform)
Testing Mobile JavaScript
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!
What Devices to Buy?

✤   For A 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 Incredible (2.1)
        (* Watch for new 2.2 Android)

    ✤   And download the Opera and Fennec Simulators and Phonegap
A   -Grade Costs

✤   $315 - iPhone 3GS

✤   $499 - iPad

✤   $370 - Nokia N97

✤   $399 - Palm Pre

✤   $349 - HTC Magic

✤   $637 - Droid Incredible

✤   Total: $2569
What Devices to Buy?


✤   For B level (in addition to A level):

    ✤   1 1st Gen iPhone: Running 2.x

    ✤   1 Nokia N96: Running 3.0v2

    ✤   3 Blackberry Devices: Curve 8900 (4.6), 2x Tour 9630 (4.7 and 5.0)

    ✤   1 HTC HD2: Running Windows Mobile 6.5
B   -Grade Costs

✤   $315 - 1st Gen iPhone

✤   $360 - Nokia N96

✤   $310 - Curve 8900

✤   $350 x 2 - Tour 9630

✤   $600 - HTC HD2

✤   Total: $2285

✤
    A -Grade + B -Grade: $4854
More Information

✤   Coming Soon at:

    ✤   http://jquerymobile.com/

✤   See also:

    ✤   http://testswarm.com/ and

    ✤   http://swarm.jquery.org/

✤   And:

    ✤   http://quirksmode.org/m/
Ad

Recommended

Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
Alex Speller
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Angular Summit 2015
Matt Raible
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Matt Raible
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
Matt Raible
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
 
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Matt Raible
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Matt Raible
 
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
Matt Raible
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Matt Raible
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Matt Raible
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Matt Raible
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
Matt Raible
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Play Framework vs Grails Smackdown - JavaOne 2013
Play Framework vs Grails Smackdown - JavaOne 2013
Matt Raible
 
Responsive interfaces
Responsive interfaces
Nicholas Zakas
 
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
The Art of Angular in 2016 - vJUG24
The Art of Angular in 2016 - vJUG24
Matt Raible
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
jQuery Essentials
jQuery Essentials
Marc Grabanski
 

More Related Content

What's hot (20)

Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
Matt Raible
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Matt Raible
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Matt Raible
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Matt Raible
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
Matt Raible
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Play Framework vs Grails Smackdown - JavaOne 2013
Play Framework vs Grails Smackdown - JavaOne 2013
Matt Raible
 
Responsive interfaces
Responsive interfaces
Nicholas Zakas
 
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
The Art of Angular in 2016 - vJUG24
The Art of Angular in 2016 - vJUG24
Matt Raible
 
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
Matt Raible
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Matt Raible
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Microservices for the Masses with Spring Boot, JHipster, and JWT - Rich Web 2016
Matt Raible
 
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Matt Raible
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
Matt Raible
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Play Framework vs Grails Smackdown - JavaOne 2013
Play Framework vs Grails Smackdown - JavaOne 2013
Matt Raible
 
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
The Art of Angular in 2016 - vJUG24
The Art of Angular in 2016 - vJUG24
Matt Raible
 

Viewers also liked (20)

Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
jQuery Essentials
jQuery Essentials
Marc Grabanski
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
Erik Ralston
 
3w-abc课程介绍(四天版)(2012-2-7版)
3w-abc课程介绍(四天版)(2012-2-7版)
ango001
 
Technical Testing Introduction
Technical Testing Introduction
Iosif Itkin
 
Mobile application testing
Mobile application testing
Softheme
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
Automated Testing vs Manual Testing
Automated Testing vs Manual Testing
Directi Group
 
12th March 2017 - What is the proper way to Pray
12th March 2017 - What is the proper way to Pray
Thorn Group Pvt Ltd
 
2.vacas sagradas
2.vacas sagradas
Alejandroauringis
 
Hamas 1
Hamas 1
Ahmad Ali khan
 
The Consummation: Postmillennialism
The Consummation: Postmillennialism
Chuck Noren
 
Wireless Application Protocol ppt
Wireless Application Protocol ppt
go2project
 
Foursquare For Businesses
Foursquare For Businesses
6S Marketing
 
Itt presentationn
Itt presentationn
Deepak Sharma
 
Philips Vs Matsushita Scm
Philips Vs Matsushita Scm
smehro
 
XKeyscore NSA Program Presentation
XKeyscore NSA Program Presentation
xkeyscore
 
Ngs workshop passarelli-mapping-1
Ngs workshop passarelli-mapping-1
Shaojun Xie
 
Electron Microscopy Between OPIC, Oxford and eBIC
Electron Microscopy Between OPIC, Oxford and eBIC
Jisc
 
Social Media Marketing for Small Business
Social Media Marketing for Small Business
David Wayne Ika (We Are HIRING)
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
Erik Ralston
 
3w-abc课程介绍(四天版)(2012-2-7版)
3w-abc课程介绍(四天版)(2012-2-7版)
ango001
 
Technical Testing Introduction
Technical Testing Introduction
Iosif Itkin
 
Mobile application testing
Mobile application testing
Softheme
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
Automated Testing vs Manual Testing
Automated Testing vs Manual Testing
Directi Group
 
12th March 2017 - What is the proper way to Pray
12th March 2017 - What is the proper way to Pray
Thorn Group Pvt Ltd
 
The Consummation: Postmillennialism
The Consummation: Postmillennialism
Chuck Noren
 
Wireless Application Protocol ppt
Wireless Application Protocol ppt
go2project
 
Foursquare For Businesses
Foursquare For Businesses
6S Marketing
 
Philips Vs Matsushita Scm
Philips Vs Matsushita Scm
smehro
 
XKeyscore NSA Program Presentation
XKeyscore NSA Program Presentation
xkeyscore
 
Ngs workshop passarelli-mapping-1
Ngs workshop passarelli-mapping-1
Shaojun Xie
 
Electron Microscopy Between OPIC, Oxford and eBIC
Electron Microscopy Between OPIC, Oxford and eBIC
Jisc
 
Ad

Similar to Testing Mobile JavaScript (20)

Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010
jeresig
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiences
Ben Mantooth
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Enough Software
 
The mobile browser world
The mobile browser world
Peter-Paul Koch
 
Web Browser Demystified
Web Browser Demystified
Rohit Joshi
 
2011 08-24 mobile web app
2011 08-24 mobile web app
Sholto Maud
 
Mobile Web Best Practices
Mobile Web Best Practices
James D Bloom
 
PhoneGap mobile development
PhoneGap mobile development
Maximiliano Firtman
 
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
.toster
 
Tuenti Mobile Development
Tuenti Mobile Development
Tuenti
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Tom Deryckere
 
Mobile Internet
Mobile Internet
Michaël Uyttersprot
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Html5 overview
Html5 overview
appbackr
 
Mobile browser testing v1.0
Mobile browser testing v1.0
Ravindran Antonysamy
 
developementofmobileapplication-160412025313 (1).pptx
developementofmobileapplication-160412025313 (1).pptx
Poooi2
 
chapter2
chapter2
Pon Tovave
 
Cross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OS
SMART DevNet
 
Jonathan snook - fake-it
Jonathan snook - fake-it
StarTech Conference
 
HTML5 and the Mobile Web
HTML5 and the Mobile Web
MrJ1971
 
Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010
jeresig
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiences
Ben Mantooth
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Enough Software
 
The mobile browser world
The mobile browser world
Peter-Paul Koch
 
Web Browser Demystified
Web Browser Demystified
Rohit Joshi
 
2011 08-24 mobile web app
2011 08-24 mobile web app
Sholto Maud
 
Mobile Web Best Practices
Mobile Web Best Practices
James D Bloom
 
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
Maximiliano Firtman - Разработка приложений с помощью PhoneGap
.toster
 
Tuenti Mobile Development
Tuenti Mobile Development
Tuenti
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Tom Deryckere
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Html5 overview
Html5 overview
appbackr
 
developementofmobileapplication-160412025313 (1).pptx
developementofmobileapplication-160412025313 (1).pptx
Poooi2
 
Cross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OS
SMART DevNet
 
HTML5 and the Mobile Web
HTML5 and the Mobile Web
MrJ1971
 
Ad

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?
jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
jeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
jeresig
 
Hacking Art History
Hacking Art History
jeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 
jQuery Mobile
jQuery Mobile
jeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
jeresig
 
Holistic JavaScript Performance
Holistic JavaScript Performance
jeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
jeresig
 
Does Coding Every Day Matter?
Does Coding Every Day Matter?
jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
jeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
jeresig
 
Hacking Art History
Hacking Art History
jeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 
jQuery Mobile
jQuery Mobile
jeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
jeresig
 
Holistic JavaScript Performance
Holistic JavaScript Performance
jeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
jeresig
 

Recently uploaded (20)

Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Daily Lesson Log MATATAG ICT TEchnology 8
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
"Scaling in space and time with Temporal", Andriy Lupa.pdf
"Scaling in space and time with Temporal", Andriy Lupa.pdf
Fwdays
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
Daily Lesson Log MATATAG ICT TEchnology 8
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine Learning
Safe Software
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 

Testing Mobile JavaScript

  • 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. Cross-browser mobile web development is crazy. (...but not nearly as crazy as it use to be.) I’ve seen things...
  • 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. 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. 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. Lack of Information ✤ Right now finding this information is a challenge. ✤ As a result, developers develop for what’s in front of them:
  • 10. Hard Question ✤ What versions of those platforms are popular? ✤ No one seems to know, or isn’t talking about it.
  • 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. Testing Strategy ✤ Draw a line in the sand ✤ Buy Devices, Download Simulators ✤ Automate testing (TestSwarm!)
  • 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.
  • 16. My God... it’s full of browsers... Mobile Graded Browser Support: Market share + Browser quality
  • 17. 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.
  • 18. 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.
  • 19. Automated Testing ✤ 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).
  • 20. Platforms ✤ Symbian (S60 / UIQ) ✤ iPhone OS ✤ Blackberry OS ✤ Android ✤ Windows Mobile ✤ WebOS ✤ Maemo / Meego
  • 22. 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.
  • 23. Symbian S60 B A B?
  • 24. 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).
  • 25. Symbian UIQ C C
  • 26. 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.
  • 27. iPhone Simulator No 2.x simulator! B A A
  • 28. Blackberry OS ✤ Blackberry continues to be enormously popular - and growing rapidly. ✤ Ships with a custom browser, will be switching to a WebKit-based one in 6.0. ✤ 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. ✤ Blackberry provides simulator downloads on their dev site.
  • 29. Blackberry OS B B B
  • 30. 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.
  • 31. Android A A A
  • 32. Windows Mobile ✤ Windows Mobile 6.5 is the current release. ✤ Uses IE 6 as its rendering engine. ✤ Window Mobile 7.0 is coming soon. ✤ 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.
  • 33. Windows Mobile 7.0? :-( F B
  • 34. WebOS ✤ Palm’s (HP’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
  • 35. Maemo / Meego ✤ Linux-based OS used for tablets (and potentially phones). Used by Nokia. ✤ Not very popular. ✤ Has a browser called ‘MicroB’ that C uses Gecko. ✤ Mostly interesting as Fennec is capable of running on it. ✤ Simulator requires Linux to run - haven’t figured it out yet.
  • 36. 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)
  • 37. 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.
  • 38. Opera Mobile and Opera Mini C A C Simulator is awesome!
  • 39. Fennec ✤ Codename for Firefox on mobile devices ✤ Released for Maemo, alpha release out for Android (watch this!) A B ✤ Equivalent to the latest releases of Firefox Simulator is awesome!
  • 40. Netfront ✤ Used on Playstation and N-Gage ✤ Download available for Windows Mobile. ✤ Highly crippled, custom, browser. ✤ Not worth supporting. C ✤ Compatibility can be a real pain.
  • 41. 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. A ✤ Quite popular, easy to support.
  • 42. Other Browsers ✤ Not worth the time for such small market share. ✤ Ozone (Uses WebKit) ✤ Openwave (Dead) ✤ Bolt (Uses WebKit) C ✤ JIL (Uses WebKit, Widget Platform)
  • 44. 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!
  • 45. What Devices to Buy? ✤ For A 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 Incredible (2.1) (* Watch for new 2.2 Android) ✤ And download the Opera and Fennec Simulators and Phonegap
  • 46. A -Grade Costs ✤ $315 - iPhone 3GS ✤ $499 - iPad ✤ $370 - Nokia N97 ✤ $399 - Palm Pre ✤ $349 - HTC Magic ✤ $637 - Droid Incredible ✤ Total: $2569
  • 47. What Devices to Buy? ✤ For B level (in addition to A level): ✤ 1 1st Gen iPhone: Running 2.x ✤ 1 Nokia N96: Running 3.0v2 ✤ 3 Blackberry Devices: Curve 8900 (4.6), 2x Tour 9630 (4.7 and 5.0) ✤ 1 HTC HD2: Running Windows Mobile 6.5
  • 48. B -Grade Costs ✤ $315 - 1st Gen iPhone ✤ $360 - Nokia N96 ✤ $310 - Curve 8900 ✤ $350 x 2 - Tour 9630 ✤ $600 - HTC HD2 ✤ Total: $2285 ✤ A -Grade + B -Grade: $4854
  • 49. More Information ✤ Coming Soon at: ✤ http://jquerymobile.com/ ✤ See also: ✤ http://testswarm.com/ and ✤ http://swarm.jquery.org/ ✤ And: ✤ http://quirksmode.org/m/