john resig post icon jquery library designOne of my upcoming web projects uses the AJAX technology and jQuery. I had watched a dozen of video lectures on JavaScript before and thought that I have seen them all. Today I came across John Resig's website and found that he just had been at Google and gave a video lecture on Best Practices in JavaScript Library Design.

John Resig is a JavaScript Evangelist, working for the Mozilla Corporation, and the author of the book Pro JavaScript Techniques. He's also the creator and lead developer of the jQuery JavaScript library and the co-designer of the FUEL JavaScript library (included in Firefox 3).

This talk explores all the techniques used to build a robust, reusable, cross-platform JavaScript Library. We'll look at how to write a solid JavaScript API, show you how to use functional programming to create contained, concise, code, and delve deep into common cross browser issues that you'll have to solve in order to have a successful library.

Here is the video:

And here are the slides:

Things that caught my attention in video:

  • (01:49) jQuery was released on Jan. 2006 and it's main focus is on DOM traversal.
  • (05:39) Similar objects should have the same method and property names so there was minimal learning curve.
  • (07:16) Fear adding methods to the API. You should keep the API as small as possible.
  • (11:38) jQuery 1.1 removed reduced size by 47% by removing unnecessary methods, breaking compatibility with jQuery 1.0. A plugin for 1.1 was released as a separate package to provide the old 1.0 interface.
  • (14:10) Look for common patterns in the API and reduce it to its code.
  • (15:33) Be consistent within your API, stick to a naming scheme and argument positioning.
  • (17:11) Evolution of a JavaScript coder:
    • Everything is a reference!
    • You can do OO code!
    • Huh, so that's how Object Prototypes work!
    • Thank God for closures!
  • (21:20) In JavaScript 1.7 there is a let statement which declares variables local to a block.
  • (22:43) If you wrap your entire library in (function() { ... library code ... })() the code will never mess other library code.
  • (24:10) Some namespacing questions:
    • (24:17) Can my code coexist with other random code on the site?
    • (24:50) Can my code coexist with other copies of my own library?
    • (25:16) Can my code be embedded inside another namespace?
  • (25:42) Never extend native objects, ever!
  • (26:39) A JavaScript library should: first, work cross browser; second, have functionality.
  • (32:09) You can tweak your Object constructor to make Constructor() work the same as new Constructor().
  • (34:37) There are three ways to extend jQuery, you can add methods, selectors and animations.
  • (36:37) Message passing from one component to another is best done via custom events.
  • (37:45) Quirksmode is a fantastic resource which explains where specific bugs exist in the browsers.
  • (38:53) DOM Events and DOM Traversal problems are solved in depth, many others, such as getting an attribute and getting the computer style still require hard work.
  • (41:09) In Safari 2 the getComputedStyle is null if it's called on an element with display: none or on an element which is within an element with display: none. Safari 3 implemented the interface but they just return undefined.
  • (45:08) Use structured format for documentation. What's nice about it is that it can be converted to other formats and given to users.
  • (48:16) Let your users help you by putting out documentation in a Wiki.
  • (49:36) Don't trust any library that doesn't have a test suite.

Here is the QA:

  • (52:40) Is jQuery more or less targeted on FireFox and wouldn't actually be reasonable to use, say, on a cellphone?
  • (53:29) How do you filter noise in community?
  • (54:30) Is jQuery going to get multiple build sets?
  • (55:05) Will there ever be time when library development like this is not necessary anymore? Or do you think that the ecosystem of libraries is good for advancing state of the art?
  • (56:34) How do you compare jQuery to something like Google Web Toolkit
  • (57:12) What's the largest project jQuery is used in, in terms of size and development team, and code base.

Have fun learning better JavaScript!