Modules > Frameworks

John Hann @unscriptable

UI Architect, lifeIMAGE, Inc.

Brian Cavalier @briancavalier

Web Architect, Hovercraft Studios

Libraries FRameworks WTF?

What is a Module?

Strict definition from Wikipedia

• single-purpose
• self-contained
• interchangeable
• promote reuse, maintainability, etc.
• typically use interfaces

What is a (Web) Framework?

• multi-purpose
• commoditized services
• API abstraction
• best practices built-in
• globally available (js limitation)
• "everything you need to get shit done"

What is a (Web) Library?

• smaller than a framework
• bigger than a module
• still globally available

Micro-library? Micro-framework?

• smaller than libraries/frameworks
• do less than libraries/frameworks

What's wrong with frameworks/libraries?

Not interchangeable

• high switching costs
• code infiltration
• fanatical, fragmented community

Coding Dysentery

• not easy to choose, change
• my code tangled with third-party code
  • "get your shit out of my codez!!"
• ugh. globals
• too many old browsers
• browsers changing too fast

Coding Dysentery

function onclick (e) {  
    var node, pirateButtons;
    dojo.stopEvent(e);
    node = e.target;
    pirateButtons = dojo.query('.pirate-button', rootNode);
    dojo.forEach(pirateButtons, function (button) {
        button.disabled = true;
    });
}

dojo.connect(rootNode, 'click', onclick);

Coding Utopia

• stand-alone, single-purposed modules
• small, fast, no wasted code
• my code is my code
• no commitment, choose best-of-class
• no globals at all
• ignore old browsers

Coding Utopia

function onclick (e) {  
    var node, pirateButtons;
    e.preventDefault();
    node = e.target;
    pirateButtons = doc.querySelectorAll('.pirate-button', rootNode);
    pirateButtons.forEach(function (button) {
        button.disabled = true;
    });
}

rootNode.addEventListener('click', onclick, false);

Coding Utopia

Close enough? (abstracted "standard")

function onclick (e) {  
    var node, pirateButtons;
    e.preventDefault();
    node = e.target;
    pirateButtons = querySelectorAll('.pirate-button', rootNode);
    array.forEach(pirateButtons, function (button) {
        button.disabled = true;
    });
}

event.addEventListener(rootNode, 'click', onclick, false);

Can Haz Utopia?

How would this work?

Standard APIs

• augment prototypes, or
• abstractions follow standards

No Globals

• APIs are imported into my code

Utopia > Dysentery

Standard Modules are my Utopia

• easily swapped, upgraded
• easily reused, maintained, blah blah blah
• take control of the namespacing

Dysentery Alert!!!

What's still wrong with this code?

function onclick (e) {  
    var node, pirateButtons;
    e.preventDefault();
    node = e.target;
    pirateButtons = querySelectorAll('.pirate-button', rootNode);
    array.forEach(pirateButtons, function (button) {
        button.disabled = true;
    });
}

event.addEventListener(rootNode, 'click', onclick, false);

Dysentery Alert!!!

What's still wrong with this code?

"The W3C DOM methods SUCK!"

Dysentery Alert!!!

Can haz Modules? No.

• people are still creating and using global, invasive libs/fwrx
• swapping requires standard APIs

Javascript has no standard APIs

:'(

Javascript has standards!

YES IT DOES!

Javascript / JSON Standards

• ECMA (Array, Object, etc.)
• JSON Schema
• JSON Referencing
• JSON Path

Web Standards

• HTML5/CSS3
  • QSA
  • Events
  • DOM
• REST (?)

CommonJS Proposed Standards

• Modules
• Packages
• Promises
• console (duh)

Asynchronous Module Definition (AMD)

Modules for Browsers

OMGPUPPIES!

http://bit.ly/UsingAMD

Asynchronous Module Definition (AMD)

• CommonJS proposed standard
• Wraps CommonJS modules
• Works today -- no need to wait for IE9 to die
• Migration path for ES.Next modules

ES.Next Modules Tue @ 10:00 by Dave Herman

Using Standards

• prototype augmentation
• abstractions, wrappers

Standards Don't Cover Everything

• templating
• data binding
• application control
• etc.

End Run Around Missing Standards

• IOC, DI, AOP
  • inject dependencies
  • modify components
• Observer Patterns
• Adapter Patterns ("plugins")

IOC / DI demo by Brian Cavalier Today @ 2:20

Modules Today

Can haz modules? Yes!

Modules Today

AMD module format

define(
[
    'when',
    'querySelectorAll',
    'array',
    'event',
    'text!./CodezView.html',
    'cssx/css!./CodezView.css'
],
function(when, querySelectorAll, array, event, template) {
    // codez here pleaze!
});

Modules Today

AMD Loaders

• RequireJS
• curl.js
• PINF
• bdLoad.js
• JSLocalnet
• others in the works
  • loadrunner.js
  • mLAB

Modules Today

AMD Momentum

• Firebug 1.8
• dojo 1.6 / 1.7
• Dozens of production apps, including BBC iPlayer
• Open Cooperative Web Framework

Modules Today

AMD Momentum

Dozens of plugins already built

- "common" plugins: text!, i18n!, css!, js!/order!
- DOM-ready [curl/domReady](http://unscriptable.com/curl/curl/domReady.js)
- CSS Shims [cssx!](https://github.com/unscriptable/cssx)
- CoffeeScript [coffee!](https://gist.github.com/865150)
- [Google Maps, other libs](https://gist.github.com/882682)

Modules Today

Example AMD Modules on Github

• kriszyp/Sizzle (QSA)
• phiggins42/uber (Deferred / Promise, Array)
• briancavalier/when.js (Deferred / Promise)
• unscriptable/arrr (Array)

Modules Today

Module Helpers on Github

• briancavalier/wire (IOC for js!)
• phiggins42/has (conditional compilation)
• unscriptable/cola (data binding, in progress)

Almost Utopia

YUI

Dojo 1.6 / 1.7

• Modules!
  • QSA
  • Deferred
  • JsonRest / data controllers

(still requires commitment)

Module Recipe

I want to write a module!

• Focus on one purpose
• Minimize dependencies
• Write kickass code
• Follow standards (even if just proposed standards)
• Innovate without breaking standards
• Document deviations, extensions to standards
• Provide a version that adheres to standards
• Share!!!

Questions?

Demo