Shareable Code for Node and Browser

Publicado el Editado el

I had a simple problem along the way of exploring Node.js, which involves writing modules that work for both server and client sides. Just like many programmers nowadays, I google’d out a solution (which was written by the person who authored async, so I guess I need to thank him at least twice).

However this doesn’t solve all my problem since I am way too lazy to get rid of all those amazing open source libraries. And:

Of course, the browser doesn’t support many other node features like require(), so you’ll need to test that your code is suitable for use in the browser first.
– Caolan McMahon

Realizing dependencies can be passed into the exposed module as its arguments, I have finally landed a solution that is simple (for me) to grasp.

Say I needed to have a shared utility module for both Node.js and browser to use, one that rely on underscore.js and moment.js, which fortunately have fairly consistent interfaces for both platforms.

shared-utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// my module that relies on underscore.js and moment.js
var utils = function(_, moment) {
  // private stuff
  var getNow = function(utcOffset) {
    return moment.utc().utcOffset(utcOffset || 0);
  };
  // ... more private stuff ...

  // public stuff
  return {
    sum: function(values) {
      return _.reduce(values, function(memo, num) {
        return memo + num;
      }, 0);
    },
    dateTimeRange: function(past, unit, utcOffset) {
      var dates = [];
      var now = getNow(utcOffset || 0);

      for (var i = 0; i < past; i++) {
        dates.push(moment(now).subtract(i, unit || 'day'));
      }

      return dates;
    },
    // ... more public stuff ...
  };
};  // but NOT actually "self-excuting" this yet

// "sync" the behavior of node require() and browser <script> tag
if (typeof module !== 'undefined' && module.exports) {
  // we're on node.js, where we have the sweet module system to support exports and require
  module.exports = utils(
    require('underscore'),
    require('moment')
  );  // given that both packages are installed
} else {
  // we're on browser, so let's "call" the defered self-executing function
  utils = utils(
    _,
    moment
  );  // similarly, given that both libraries are included already
}

So now I could use this sweet little module in node:

app.js
1
2
3
4
5
6
7
8
9
10
11
// expose public directory to client side
// here I'm using express
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.use(express.static(__dirname + '/public'));

// test it out on server side
var utils = require('./public/js/shared-utils');

console.log(utils.sum([1, 2, 3, 4, 5, 6, 7]));

and in browser:

index.html
1
2
3
4
5
6
<script src="js/underscore.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/shared-utils.js"></script>
<script>
  console.log(utils.sum([1, 2, 3, 4, 5, 6, 7]));
</script>

For now, I am satisfied.