Best Practices in JavaScript Library Design

April 18, 2017 - javascript


Writing Solid API

Orthagonal code

Fear Adding Methods

Embrace removing code

Provide an Upgrade Path

Reduce to a common root

.method (function() {
  // this == DOMElement


Evolution of a JS COder

Functional Programming

(function() {
var event = ['click','focus','blur' ...];
jQuery.each(event, function(i, name) {
jQuery.prototype[name] = function(fn) {
return.this.bind(name, fn);

Quick tip: Local Vars

(function() {
// code
var test = false;
this method(function() {
return test;


(function() {

BONUS! Your code compresses really well with Dojo Compressor


Don’t wxtend native objects

Perform Type checking

Quick Tip for OO

function jquery(str, con) {
    if (window == this )
                return new jQuery(str, con);
new jQuery('#foo') becomes jquery('#foo);

Quick Tip for Errors

Complex Applications


// Methods
jQuery.fn.method = fn; 

// Selectors
jQuery.expr[':'].foo = '... '

// Animations
jQuery.easing.easeout = fn;
.animate({height:100}, 'slow', 'easeout');;

Custom events

.bind('drag', fn)

Browser Bugs

The Quirksmode Problem

Solving a problem

When to run the fix

USers Want to Help

Focus on Leverage

Test-drive Development


Tackling new Bugs