John Resig Beijing 2010 (English Version)

State of jQueryFall 2010

John Resig

State of the Project

New Releases

• jQuery 1.4.3 / jQuery 1.4.4

• Official Plugins:

• jQuery Templating

• jQuery Data Linking

• jQuery Mobile

jQuery 1.4.3

• JSLint

• Modularity

• CSS

• Traversal Performance

• HTML 5 Data

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

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.

CSS

• Massive rewrite of the CSS module.

• Focus on extensibility.

• (A bit of performance too!)

• Plugins already using it: jQuery Rotate

0

100

200

300

400

Firefox 3.6Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 6 IE 7 IE 8 IE 9b1.4.3 1.4.2

jQuery 1.4.3 .css() Get(Time in milliseconds - lower is better)

Traversal Performance

0

1000

2000

3000

4000

Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b1.4.3 1.4.2

jQuery1.4.3 .closest()(Time in milliseconds - lower is better)

0

100

200

300

400

Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b1.4.3 1.4.2

jQuery1.4.3 .filter() Single(Time in milliseconds - lower is better)

0

750

1500

2250

3000

Firefox 3.6 Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 8 IE 9b1.4.3 1.4.2

jQuery1.4.3 Elem .find()(Time in milliseconds - lower is better)

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.

data- Attributes

• For example:

• <div data-role=”page”></div>

• $(“div”).data(“role”) === “page”

data- Attributes

• Also handles JSON encoding correctly.

• For example:

• <div data-hidden=”true”></div>

• $(“div”).data(“hidden”) === true

jQuery 1.4.4

• Fixed a number of bugs.

• Added a couple of features:

• .fadeToggle()

• Bulk .data() data attribute import

Bulk .data() Import

• <div data-role=”page” data-max=”3”></div>

• $(“div”).data() -->

• { role: “page”, max: 3 }

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

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

Fall 2010

jQuery MobileJohn Resig

I’ve been researching and trying to makesense 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.)

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.

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

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.

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.

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

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)

More Information

• More information:

• http://blog.jquery.com/(jQuery 1.4.3/1.4.4)

• http://jquerymobile.com/

New!

• HTML 5

• Video

• Audio

• CSS 3

• WebGL