• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

John Resig Beijing 2010 (English Version)

  • 1,974 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,974
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
36
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. 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
  • 9. Traversal Performance
  • 10. 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
  • 11. jQuery1.4.3 .filter() 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
  • 12. jQuery1.4.3 Elem .find() (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
  • 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. jQuery Mobile John Resig Fall 2010
  • 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. 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).
  • 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