State of jquery Fall John Resig

Transcription

1 State of jquery Fall 2010 John Resig

2 State of the Project

3

4

5 New Releases jquery / jquery Official Plugins: jquery Templating jquery Data Linking jquery Mobile

6 jquery JSLint Modularity CSS Traversal Performance HTML 5 Data

7 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

8 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.

9 CSS Massive rewrite of the CSS module. Focus on extensibility. (A bit of performance too!) Plugins already using it: jquery Rotate

10

11 jquery css() Get 400 (Time in milliseconds - lower is better) Firefox 3.6Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 6 IE 7 IE 8 IE 9b

12 Traversal Performance

13 jquery1.4.3.closest() 4000 (Time in milliseconds - lower is better) Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b

14 jquery1.4.3.filter() Single 400 (Time in milliseconds - lower is better) Firefox 3.6 Firefox 4b7 Chrome Safari 5 IE 9b

15 jquery1.4.3 Elem.find() 3000 (Time in milliseconds - lower is better) Firefox 3.6 Firefox 4b7 Chrome Safari 5 Opera 10.6 IE 8 IE 9b

16 HTML 5 Data HTML 5 has this new concept of dataattributes. <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

17 data- Attributes For example: <div data-role= page ></div> $( div ).data( role ) === page

18 data- Attributes Also handles JSON encoding correctly. For example: <div data-hidden= true ></div> $( div ).data( hidden ) === true

19 jquery Fixed a number of bugs. Added a couple of features:.fadetoggle() Bulk.data() data attribute import

20 Bulk.data() Import <div data-role= page data-max= 3 ></ div> $( div ).data() --> { role: page, max: 3 }

21 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.

22

23

24 Templating New official templating plugin. Provide a simple way of putting data into an HTML string. Developed in conjunction with devs at Microsoft.

25

26

27 jquery Mobile John Resig Fall 2010

28 I ve been researching and trying to make sense of the mobile space recently. Started preparations in 2009 (with the creation of TestSwarm).

29 Cross-browser mobile web development is crazy. (...but not nearly as crazy as it use to be.)

30 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.

31 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.

32 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.

33 Lack of Information Right now finding this information is a challenge. As a result, developers develop for what s in front of them:

34 Platforms

35 Platform Sales

36 Hard Question What versions of those platforms are popular? No one seems to know, or isn t talking about it.

37 Browsers

38 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.

39 Testing Strategy Draw a line in the sand Buy Devices, Download Simulators Automate testing (TestSwarm!)

40 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.

41

42 Mobile Graded Browser Support: Market share + Browser quality

43 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.

44 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.

45 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).

46 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.

47 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.

48 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

49 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)

50 More Information More information: (jquery 1.4.3/1.4.4)