0
State of jQuery
Fall 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, he...
Modularity
• All jQuery modules can now be individually
loaded.
• Could use a script loader to load each file
separately.
•...
CSS
• Massive rewrite of the CSS module.
• Focus on extensibility.
• (A bit of performance too!)
• Plugins already using i...
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() G...
Traversal Performance
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 millisecond...
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 millisecon...
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()(Tim...
HTML 5 Data
• HTML 5 has this new concept of data-
attributes.
• <div data-role=”page”></div>
• You can give them any name...
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(“...
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...
Templating
• New official templating plugin.
• Provide a simple way of putting data into an
HTML string.
• Developed in con...
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...
The Missing Gap
• Almost all mobile web development
focuses on modern WebKit
• There are far too many other platforms
• Bl...
Phase 1: jQuery Core
• We’re working to make jQuery core work
on all the popular mobile browsers.
• Building out our test ...
Phase 2: jQuery Mobile
• A complete framework for building mobile
web sites and applications.
• Provide all the widgets an...
Question:
• How does jQuery Mobile compare to
jQTouch or Sencha Touch?
• jQuery Mobile is all about progressive
enhancemen...
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)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Upcoming SlideShare
Loading in...5
×

John Resig Beijing 2010 (English Version)

2,032

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,032
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "John Resig Beijing 2010 (English Version)"

  1. 1. State of jQuery Fall 2010 John Resig
  2. 2. State of the Project
  3. 3. New Releases • jQuery 1.4.3 / jQuery 1.4.4 • Official Plugins: • jQuery Templating • jQuery Data Linking • jQuery Mobile
  4. 4. jQuery 1.4.3 • JSLint • Modularity • CSS • Traversal Performance • HTML 5 Data
  5. 5. 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
  6. 6. 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.
  7. 7. CSS • Massive rewrite of the CSS module. • Focus on extensibility. • (A bit of performance too!) • Plugins already using it: jQuery Rotate
  8. 8. 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)
  9. 9. Traversal Performance
  10. 10. 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)
  11. 11. 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)
  12. 12. 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)
  13. 13. 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.
  14. 14. data- Attributes • For example: • <div data-role=”page”></div> • $(“div”).data(“role”) === “page”
  15. 15. data- Attributes • Also handles JSON encoding correctly. • For example: • <div data-hidden=”true”></div> • $(“div”).data(“hidden”) === true
  16. 16. jQuery 1.4.4 • Fixed a number of bugs. • Added a couple of features: • .fadeToggle() • Bulk .data() data attribute import
  17. 17. Bulk .data() Import • <div data-role=”page” data-max=”3”></ div> • $(“div”).data() --> • { role:“page”, max: 3 }
  18. 18. 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
  19. 19. 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
  20. 20. Fall 2010 jQuery Mobile John Resig
  21. 21. I’ve been researching and trying to make sense of the mobile space recently. Started preparations in 2009 (with the creation of TestSwarm).
  22. 22. Cross-browser mobile web development is crazy. (...but not nearly as crazy as it use to be.)
  23. 23. 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.
  24. 24. 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.
  25. 25. 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.
  26. 26. Lack of Information ✤ Right now finding this information is a challenge. ✤ As a result, developers develop for what’s in front of them:
  27. 27. Platforms
  28. 28. Platform Sales
  29. 29. Hard Question ✤ What versions of those platforms are popular? ✤ No one seems to know, or isn’t talking about it.
  30. 30. Browsers
  31. 31. 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.
  32. 32. Testing Strategy ✤ Draw a line in the sand ✤ Buy Devices, Download Simulators ✤ Automate testing (TestSwarm!)
  33. 33. 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.
  34. 34. Mobile Graded Browser Support: Market share + Browser quality
  35. 35. 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.
  36. 36. 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.
  37. 37. 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).
  38. 38. 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.
  39. 39. 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.
  40. 40. 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
  41. 41. 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)
  42. 42. More Information • More information: • http://blog.jquery.com/ (jQuery 1.4.3/1.4.4) • http://jquerymobile.com/
  43. 43. New! • HTML 5 • Video • Audio • CSS 3 • WebGL
  1. A particular slide catching your eye?

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

×