Building Non-shit APIs with JavaScript

Your JS Library Dan Webb AKA @danwrongTuesday, May 3, 2011

Tuesday, May 3, 2011

In the beginning...Tuesday, May 3, 2011

$("p.surprise").addClass("ohmy").show("slow");Tuesday, May 3, 2011

We all know what happened next... jQuery The RestTuesday, May 3, 2011

Why?Tuesday, May 3, 2011

Internals were not important...Tuesday, May 3, 2011

...what had John created was a great interfaceTuesday, May 3, 2011

"All programmers are API designers" Joshua Bloch (http://lcsd05.cs.tamu.edu/slides/keynote.pdf)Tuesday, May 3, 2011

The API is priority #1Tuesday, May 3, 2011

❖ Predictability ❖ Simplicity ❖ FlexibilityTuesday, May 3, 2011

PredictabilityTuesday, May 3, 2011

Tuesday, May 3, 2011 RTFM

Short attention spanTuesday, May 3, 2011

Think about your audience...Tuesday, May 3, 2011

...use conventions people already knowTuesday, May 3, 2011

Language conventions and standard libraryTuesday, May 3, 2011

THIS IS JAVASCRIPTTuesday, May 3, 2011

useCamelCase, yesReally.Tuesday, May 3, 2011

Be careful with polyfillsTuesday, May 3, 2011

Popular JS librariesTuesday, May 3, 2011

var paper = Raphael(10, 50, 320, 200); var c = paper.circle(50, 40, 10); c.attr("fill", "#f00"); c.show();Tuesday, May 3, 2011

The problem domainTuesday, May 3, 2011

a.internal { color: #44e534; text-decoration: none; } $(a.external).css({ color: #44e534, textDecoration: none });Tuesday, May 3, 2011

Example: creating a DOM BuilderTuesday, May 3, 2011

node.innerHTML = <form method="post" action="/action"> + <p> + <label> + Username: <input type="text" name="username"> + </label> + <label> + Password: <input type="password" name="password"> + </label> + </p> + </form>; var form = document.createElement(form); var p = document.createElement(p); form.setAttribute(action, /login); form.setAttribute(method, post); var usernameLabel = document.createElement(label); var usernameText = document.createTextElement(Username: ); var usernameInput = document.createElement(input); usernameInput.setAttribute(type, text); usernameInput.setAttribute(name, username); form.appendChild(p); p.appendChild(usernameLabel); // ... at this point I decided to give // all this up and become a farmerTuesday, May 3, 2011

var form = html.element( form, { action: /login, method: post } [ html.element(p, {}, [ html.element(label, {}, [ document.createTextElement(Username: ), html.element(input, { type: text, name: username }, []), // ... you get the idea ]) ]) ] );Tuesday, May 3, 2011

var form = html.form({ action: /login, method: post }, [ html.p({}, [ html.label({}, [ document.createTextElement(Username: ), html.input({ type: text, name: username }, []), // ... you still get the idea, right? ]) ]) ] );Tuesday, May 3, 2011

SimplicityTuesday, May 3, 2011

Don’t make me RTFM again...Tuesday, May 3, 2011

Sensible defaultsTuesday, May 3, 2011

var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);Tuesday, May 3, 2011

element.addEventListener(input, function() { // do some front-end magic }, false);Tuesday, May 3, 2011

var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);Tuesday, May 3, 2011

Use options hashes for optional argumentsTuesday, May 3, 2011

evt.initMouseEvent("click", { bubble: false, relatedTarget: thing });Tuesday, May 3, 2011

http://blog.rebeccamurphey.com/objects-as- arguments-in-javascript-where-do-yTuesday, May 3, 2011

Function calls should read wellTuesday, May 3, 2011

// replace oldNode with newNode - DOM API oldNode.parentNode.replaceChild(newNode, oldNode); // Dojo dojo.place(newNode, oldNode, "replace"); // jQuery $(oldNode).replaceWith(newNode);Tuesday, May 3, 2011

Mask complexity if possibleTuesday, May 3, 2011

var con = xd.connect({ src: http://danwebb.net/receiver }); con.bind(ready, function() { rpc(con).call(getData, function(result) { alert(result); }); });Tuesday, May 3, 2011

xd.connect({ src: http://danwebb.net/receiver }, function(con) { rpc(con).call(getData, function(result) { alert(result); }); });Tuesday, May 3, 2011

var con = xd.connect({ src: http://danwebb.net/receiver }); rpc(con).call(getData, function(result) { alert(result); });Tuesday, May 3, 2011

Back to the DOM BuilderTuesday, May 3, 2011

var form = html.form({ action: /login, method: post }, [ html.p({}, [ html.label({}, [ document.createTextElement(Username: ), html.input({ type: text, name: username }, []), // ... you still get the idea, right? ]) ]) ] );Tuesday, May 3, 2011

var form = html.form({ method: post, action: /login }, html.p( html.label( Username: , html.input({ type: text, name: username }) ), html.label( Password: , html.input({ type: password, name: pass }) ), html.input({ type: submit, value: Login}) ) );Tuesday, May 3, 2011

FlexibilityTuesday, May 3, 2011

Remember: you cant please everyoneTuesday, May 3, 2011

Don’t try to second guess every use caseTuesday, May 3, 2011

Options hashes != flexibilityTuesday, May 3, 2011

28 options!Tuesday, May 3, 2011

Add hackabilityTuesday, May 3, 2011

public, internal, protectedTuesday, May 3, 2011

var lib = (function() { var private = function() { // you cant mess with me }; return { _internal: function() { // you probably shouldnt mess with me }, public: function() { // Im part of the API - call me sometime } } }());Tuesday, May 3, 2011

...using functionsTuesday, May 3, 2011

// https://github.com/ender-js/Ender $._select = function(selector, root) { return Sizzle(selector, root); } $._select = function (selector, root) { return (root || document).querySelectorAll(selector); });Tuesday, May 3, 2011

..inheritanceTuesday, May 3, 2011

// github.com/danwrong/loadrunner function Mustache(path) { this.path = path; } Mustache.prototype = new loadrunner.Dependency; Mustache.prototype.start = function() { var me = this; $.get(this.path, function(result) { var template = Mustache.parse(result); me.complete(template); }); } using(new Mustache(thing.mustache), function(template) { template.evaluate({ a: yep, b: nope }); });Tuesday, May 3, 2011

..duck typingTuesday, May 3, 2011

Meanwhile, back in DOM Builder land...Tuesday, May 3, 2011

Create a framework for solving your problem...Tuesday, May 3, 2011

...then build your library on top of thatTuesday, May 3, 2011

You got yourself a plugin systemTuesday, May 3, 2011

Build tools to solve the problemTuesday, May 3, 2011

❖ Design up front ❖ Make use of conventions ❖ Don’t make me think ❖ Build in hackabilityTuesday, May 3, 2011

Questions? @danwrongTuesday, May 3, 2011

@jointheflock twitter.com/jobs dan@twitter.comTuesday, May 3, 2011

Eye of the BeholderTuesday, May 3, 2011

ChainingTuesday, May 3, 2011

http://lanyrd.com	55
http://www.techgig.com	18
http://paper.li	16
http://twitter.com	7
https://twitter.com	6
http://us-w1.rockmelt.com	2
http://a0.twimg.com	1

Building Non-shit APIs with JavaScript

by danwrong

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 105

Statistics