Sharing Modules

Client. Cloud. ♥

Why?

Share Business Logic

DRY Code Principles

Time Saving

Less Errors

Version Managment

Easy Testing

TOO EASY NOT TO!

How?

Node.js

...well, CommonJS via...

What is Browserify?

  • Write Node-style modules for the Browser
  • 99%* compatible with Node.js require
  • Provides code structure for the client
  • Compiles into a single bundle
  • Use your favourite modules in the Browser
  • Use NPM for client-side dev

* I made that number up, but basically you can't try/catch a require if you're using Browserify.

var _ = require('underscore'),
    util = require('util');

_.each([20, 3, 1, 5, 8], function (val) {
    // Console.log does this too, but just for sake of an example...
    var str = util.format('Logging num %d via Browserify and Underscore magic!', val);
    console.log(str);
});

This will run in a browser!

Awesome, huh?

Code Sharing Magic

Easier than you imagined...

Override Modules

Node.js HTTP with request

var request = require('request'),
    xtend = require('xtend');

function doRequest(opts, callback) {
    request(xtend({
        method: 'GET'
    }, opts), callback);
}

exports.get = function(url, callback) {
    doRequest({
        url: url
    }, callback);
};

exports.post = function(url, callback) {
    doRequest({
        url: url,
        method: 'POST'
    }, callback);
};
{
  "name": "AmazingHTTP",
  "version": "9000.0.1",
  "description": "Awesome HTTP module for client and cloud!",
  "main": "./src/index.js",
  "scripts": {
    "test": "make test"
  },
  "author": "FeedHenry",
  "license": "WTFPL",
  "browser": { 
    "request": "xhr"
  },
  "dependencies": {
    "xhr": "^1.12.0",
    "xtend": "^3.0.0",
    "safejson": "~1.0.0",
    "request": "~2.42.0"
  }
}

Override request

Lucky for us xhr and request share the same interface.

 

Normally you'll need to write a simple interface.

Case Study

Hype.js - Hype Machine "API"

Hype Machine

  • API is limited.
  • Not possible to load tracks. 
  • Contains less info than main webapp.
  • Want to use it in Node.js and Browser

DEMO TIME!

Great Success!

Case Study

fhlog - JavaScript Logger

fhlog (FH Log)

  • One logger to rule them all
  • Compatible with Node.js and Browsers
  • Generic API for client and cloud
  • No specific usage for client vs. cloud
  • Transparent transport selection

Browser vs. Node.js

  • Use Console object in the Browser
  • Use Process object in Node.js
  • Process and Console differ
  • Blocking vs. Stream output respectively

Node.js

module.exports = function (level, str) {
  if (level === LEVELS.ERROR) {
    process.stderr.write(str + '\n');
  } else {
    process.stdout.write(str + '\n');
  }
};

Browser

module.exports = function (level, str) {
  var logFn = null;

  switch (level) {
    case LEVELS.DEBUG:
      logFn = console.debug || console.log;
      break;
    case LEVELS.INFO:
      logFn = console.info || console.log;
      break;
    case LEVELS.WARN:
      logFn = console.warn;
      break;
    case LEVELS.ERROR:
      logFn = console.error;
      break;
    default:
      logFn = console.log;
      break;
  }

  logFn.call(console, str);
};

The Shim

{
  "name": "fhlog",
  "version": "0.0.4",
  "description": "Simple and flexible logger for the browser and Node.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "main": "./lib/LoggerFactory.js",
  "author": "Evan Shortiss",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git://github.com/evanshortiss/logger.git"
  },
  "browser": {
    "./lib/transport/console.js": "./lib/transport/console-browser.js"
  },
  "dependencies": {
    "safejson": "~1.0.0"
  }
}

DEMO TIME!

Made with Slides.com