You can see the slides on slideshare.
Why should I write a library of my own?
Everyone has snippets of JS they use on every project (
getElementById). You build your little library of snippets, you share it with your colleagues and friends, etc. and eventually you’ve got a library project.
Roughly divided into:
- low level: taking care of nitty, gritty things like abstracting over DOM.
- high level:
API & Functionality
The API is more important than functionality. The Twitter functionality, for example, is primitive, while it’s API is awesome.
Spend 80% on API, 20% on functionality.
Your library is the answer. What is the question? If your library is to be the “correct” answer, you’ll need to know the question, back to front.
A good API looks as simple as the functionality it provides.
Array iteration with
for. (Just a matter of
i <= a.length, I think).
Implement memoization (an object hidden in a closure). You could even implement this as a higher-order function.
Lots of frameworks have animation functionality. Not only is it pretty, but it’s also useful (UI, affordances, etc.).
Animation has a drastic effect on performance: while an “onclick” handler might be called on a few times, an animation function will be called a few thousand times. A second.
setTimeout(). Your function won’t be called in 10 ms. It will be called sometime, hopefully in around 10 ms.
Treat it like a public toilet. You can’t avoid it, but while you’re there have the least contact possible: you have no idea who has been here, or what they’ve done, and no idea who and what will come after.
Use a closure to hide your own library-level “global” stuff.
Adding methods to the prototypes of native types (
Number, etc.) can be dangerous.
Never, ever touch
Object.prototype. It’s just that dangerous. Worse: you can’t rely on the fact that no-one else touched it.
Object.prototype.top = 3 can break everything that does a
foreach over objects. Use
Object.hasOwnProperty() to make sure it’s in the object, and not just in it’s prototype.
Checking if something is an
object && (object instanceof Array). Will return false if
object is from another context (an
iframe, for example). Do not forget about
Another problem is the fact that
undefined is just a variable (and someone else can change it). If you need it, define your own (without a value) or, just don’t use it:
this.set(a || 5) vs.
this.set(undefined == a ? 5 : a).
JS is one of the only environments in which code size counts. Reducing your code size is important for performance, etc. (network traffic, caching, etc.)
- Dojo ShrinkSafe
- YUI Compressor (w/ gzip is best)
Raphael, e.g. is 121K, 52K minified, 18K gzipped.
Using local names for built-in functions can allow these tools to generate short names, and then use the smaller name at call sites. Adding, e.g.,
var parseFloat = parseFloat; can replace all the
parseFloat() calls in the minimized version with calls to, e.g.,
a(). We add some code and the minimized version gets smaller!
- 394b original = 235b minified
- 427b original = 216b minified (with
var parseFloat = parseFloat;added)
Every function call, takes time (especially on IE6). Rather than wrapping functions (like
setAttribute) with local wrapper functions, you can use a variable for the name and use subscripting to access the function:
Don’t use an error handling function: all you’re doing is making sure that your error messages (when an exception is thrown) doesn’t tell you where the error was.
Share the magic
Once your library is done (and awesome!), share the magic! Open it up and let others see and use and contribute.
Questions and Answers
He’s not bothered with the new engines, etc. and won’t be while IE6 is on the list of supported browsers. Until that point, it’s something of a struggle to get anything to run fast enough on IE.