Modules and Dependency Management

deck.md

Sean Massa

@endangeredmassa

Chicago Node.js Meetup

Global Scope

function processOrder(itemId, quantity, price) {
  // process the order
}

Object Scope

App = {}
App.Orders = {}
App.Orders.process = function(itemId, quantity, price) {
  // process the order
}

Function Scope and the Module Pattern

Orders = (function(){
  // new scope!

  function process(itemId, quantity, price) {
    // process the order
  }

  return {
    process: process
  }
})()

Dependencies

App.Orders = (function(){
  function process(itemId, quantity, price) {
    App.Api.createOrder(itemId, quantity * price)
  }

  return {
    process: process
  }
})()

Alias Method

// dependencies
var Api = App.Api

App.Orders = (function(){
  function process(itemId, quantity, price) {
    Api.createOrder(itemId, quantity * price)
  }

  return {
    process: process
  }
})()

jQuery Method

App.Orders = (function(){
  function createOrderForm() {
    // create order form in $order
    return $order
  }

  function newOrder() {
    $order = createOrderForm()
    $order.Tooltip(options)
  }

  return {
    create: newOrder
  }
})()

jQuery Method (fixed?)

Tooltip = ???

App.Orders = (function(){
  function createOrderForm() {
    // create order form in $order
    return $order
  }

  function newOrder() {
    $order = createOrderForm()
    Tooltip.create($order, options)
  }

  return {
    create: newOrder
  }
})()

ender

http://ender.no.de

// command line
$ ender add domReady

// <script src="ender.min.js"></script> 

ender ($ api)

$.domReady(function () {
  // do some work
})

bower

http://twitter.github.com/bower

// command line
$ bower install jquery

// <script src="components/jquery/index.js"></script>

emport

https://github.com/quackingduck/emport

#@export Orders

#@import $
#@import $.fn.chosen
#@import underscore

Orders = (function(){
  // implementation
})

requirejs and AMD

http://requirejs.org

// orders.js
define(['underscore'], function(_){
  // ...
  return {
    process: process
  }
})

require(['jquery', 'orders'], function ($, Orders) {
  // use $ and Orders here
})

ender (require api)

// script
var backbone = require('backbone')
  , _ = require('underscore')

backbone.Models(...)
_.each(...)

browserify and CommonJS

https://github.com/substack/node-browserify

// order.js
var $ = require('jquery')
// ...
module.exports = {
  process: process
}

// npm install domready

var Orders = require('./orders')
var domready = require('domready')

domready(function () {
    var newOrder = Orders.create()
})

Thanks!

@endangeredmassa