jQuery released new versions 1.4.3 and 1.4.4 with improvements to modularity, CSS, performance, and support for HTML5 data attributes. A JSLint tool was integrated to improve code quality. jQuery Mobile was introduced as a new official plugin to build websites and applications for multiple mobile platforms using progressive enhancement. Testing strategies were discussed including using simulators, TestSwarm for automation, and drawing a line to determine which browsers to support.

1. State of jQuery
Fall 2010
John Resig

2. State of the Project

5. New Releases
• jQuery 1.4.3 / jQuery 1.4.4
• Official Plugins:
• jQuery Templating
• jQuery Data Linking
• jQuery Mobile

6. jQuery 1.4.3
• JSLint
• Modularity
• CSS
• Traversal Performance
• HTML 5 Data

7. JSLint
• Tool written by Douglas Crockford
• Do some basic validity checks on JavaScript
• With more commits coming in, helps to
enforce basic style guidelines
• Completely integrated into our
development workflow: make lint

8. Modularity
• All jQuery modules can now be individually
loaded.
• Could use a script loader to load each file
separately.
• Allows us to avoid building jQuery to run
the test suite.

9. CSS
• Massive rewrite of the CSS module.
• Focus on extensibility.
• (A bit of performance too!)
• Plugins already using it: jQuery Rotate

11. 0
100
200
300
400
Firefox 3.6Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 6 IE 7 IE 8 IE 9b
1.4.3 1.4.2
jQuery 1.4.3 .css() Get(Time in milliseconds - lower is better)

12. Traversal Performance

13. 0
1000
2000
3000
4000
Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b
1.4.3 1.4.2
jQuery1.4.3 .closest()(Time in milliseconds - lower is better)

14. 0
100
200
300
400
Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b
1.4.3 1.4.2
jQuery1.4.3 .filter() Single(Time in milliseconds - lower is better)

15. 0
750
1500
2250
3000
Firefox 3.6 Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 8 IE 9b
1.4.3 1.4.2
jQuery1.4.3 Elem .find()(Time in milliseconds - lower is better)

16. HTML 5 Data
• HTML 5 has this new concept of data-
attributes.
• <div data-role=”page”></div>
• You can give them any name, it doesn’t
matter, your page will validate.
• We added support for this in 1.4.3.

17. data- Attributes
• For example:
• <div data-role=”page”></div>
• $(“div”).data(“role”) === “page”

18. data- Attributes
• Also handles JSON encoding correctly.
• For example:
• <div data-hidden=”true”></div>
• $(“div”).data(“hidden”) === true

19. jQuery 1.4.4
• Fixed a number of bugs.
• Added a couple of features:
• .fadeToggle()
• Bulk .data() data attribute import

20. Bulk .data() Import
• <div data-role=”page” data-max=”3”></
div>
• $(“div”).data() -->
• { role:“page”, max: 3 }

21. Data Linking
• Sync forms live with JavaScript objects.
• Dramatically simplify the process of
extracting data from a form and updating it.
• Another plugin developed in conjunction
with devs at Microsoft.
• http://github.com/jquery/jquery-datalink

24. Templating
• New official templating plugin.
• Provide a simple way of putting data into an
HTML string.
• Developed in conjunction with devs at
Microsoft.
• http://github.com/jquery/jquery-tmpl

27. Fall 2010
jQuery Mobile
John Resig

28. I’ve been researching and trying to make
sense of the mobile space recently.
Started preparations in 2009 (with the creation of TestSwarm).

29. Cross-browser mobile web development is crazy.
(...but not nearly as crazy as it use to be.)

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

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

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

33. Lack of Information
✤ Right now finding this information is a challenge.
✤ As a result, developers develop for what’s in front of them:

34. Platforms

35. Platform Sales

36. Hard Question
✤ What versions of those platforms are popular?
✤ No one seems to know, or isn’t talking about it.

37. Browsers

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

39. Testing Strategy
✤ Draw a line in the sand
✤ Buy Devices, Download Simulators
✤ Automate testing (TestSwarm!)

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

42. Mobile Graded Browser Support: Market share + Browser quality

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

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

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

46. The Missing Gap
• Almost all mobile web development
focuses on modern WebKit
• There are far too many other platforms
• Blackberry, Opera,Windows Mobile,
Mobile Firefox, Symbian, etc.
• jQuery Mobile works everywhere - and
without sacrificing experience.

47. Phase 1: jQuery Core
• We’re working to make jQuery core work
on all the popular mobile browsers.
• Building out our test suite and continuous
integration testing.
• Using TestSwarm to automate our testing
across all platforms.
• Fixing mobile bugs in core.

48. Phase 2: jQuery Mobile
• A complete framework for building mobile
web sites and applications.
• Provide all the widgets and layout
components necessary to build mobile
sites.
• Built on the principles of progressive
enhancement

49. Question:
• How does jQuery Mobile compare to
jQTouch or Sencha Touch?
• jQuery Mobile is all about progressive
enhancement.
• Works on many more devices.
• Has a smaller file size (13KB)

50. More Information
• More information:
• http://blog.jquery.com/
(jQuery 1.4.3/1.4.4)
• http://jquerymobile.com/

51. New!
• HTML 5
• Video
• Audio
• CSS 3
• WebGL