Your SlideShare is downloading. ×
John Resig Beijing 2010 (English Version)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

John Resig Beijing 2010 (English Version)

1,994
views

Published on

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. State of jQuery Fall 2010 John Resig
  • 2. State of the Project
  • 3. New Releases • jQuery 1.4.3 / jQuery 1.4.4 • Official Plugins: • jQuery Templating • jQuery Data Linking • jQuery Mobile
  • 4. jQuery 1.4.3 • JSLint • Modularity • CSS • Traversal Performance • HTML 5 Data
  • 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. 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. CSS • Massive rewrite of the CSS module. • Focus on extensibility. • (A bit of performance too!) • Plugins already using it: jQuery Rotate
  • 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. Traversal Performance
  • 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. 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. 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. 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. data- Attributes • For example: • <div data-role=”page”></div> • $(“div”).data(“role”) === “page”
  • 15. data- Attributes • Also handles JSON encoding correctly. • For example: • <div data-hidden=”true”></div> • $(“div”).data(“hidden”) === true
  • 16. jQuery 1.4.4 • Fixed a number of bugs. • Added a couple of features: • .fadeToggle() • Bulk .data() data attribute import
  • 17. Bulk .data() Import • <div data-role=”page” data-max=”3”></ div> • $(“div”).data() --> • { role:“page”, max: 3 }
  • 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. 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. Fall 2010 jQuery Mobile John Resig
  • 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. Cross-browser mobile web development is crazy. (...but not nearly as crazy as it use to be.)
  • 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. 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. 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. Lack of Information ✤ Right now finding this information is a challenge. ✤ As a result, developers develop for what’s in front of them:
  • 27. Platforms
  • 28. Platform Sales
  • 29. Hard Question ✤ What versions of those platforms are popular? ✤ No one seems to know, or isn’t talking about it.
  • 30. Browsers
  • 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. Testing Strategy ✤ Draw a line in the sand ✤ Buy Devices, Download Simulators ✤ Automate testing (TestSwarm!)
  • 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. Mobile Graded Browser Support: Market share + Browser quality
  • 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. 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. 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. 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. 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. 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. 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. More Information • More information: • http://blog.jquery.com/ (jQuery 1.4.3/1.4.4) • http://jquerymobile.com/
  • 43. New! • HTML 5 • Video • Audio • CSS 3 • WebGL