Your SlideShare is downloading. ×
0
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)
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)
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)
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)
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)
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)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

John Resig Beijing 2010 (English Version)

2,027

Published on

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

No Downloads
Views
Total Views
2,027
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

×