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!

Sharing JavaScript - Client & Cloud

By Evan Shortiss

Sharing JavaScript - Client & Cloud

An overview of how it's possible to share JavaScript code written using the Node.js module style (CommonJS) using Browserify.

  • 968