John Resig Beijing 2010 (English Version)

State of jQuery Fall 2010 John Resig

State of the Project

New Releases • jQuery 1.4.3 / jQuery 1.4.4 • Ofﬁcial 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 workﬂow: make lint

Modularity • All jQuery modules can now be individually loaded. • Could use a script loader to load each ﬁle 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

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

Traversal Performance

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

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

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

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 ofﬁcial 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

jQuery Mobile John Resig Fall 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.)

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 deﬁne 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 speciﬁc platforms (iPhone, Android). ✤ That being said: Very little actually-useful information leaks out.

Lack of Information ✤ Right now ﬁnding 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 sacriﬁcing 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 ﬁle 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

John Resig Beijing 2010 (English Version)

by Jia Mi on Nov 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

John Resig Beijing 2010 (English Version) — Presentation Transcript