Andrew Cooke: C[omp]ute

JavaScript / ActionScript Politics

From: "andrew cooke" <andrew@...>

Date: Thu, 14 Aug 2008 20:54:24 -0400 (CLT)

A good summary of what appears to have happened with JavaScript
standardisation -
http://whydoeseverythingsuck.com/2008/08/ru-roh-adobe-screwed-by-ecmascript.html

Andrew

Better Test Example

From: andrew cooke <andrew@...>

Date: Fri, 17 Feb 2012 20:31:25 -0300

This actually imports the module that was defined and tests some
functionality:

  if (typeof define !== 'function') {
      var define = require('amdefine')(module);
  }

  define(['underscore', '../src/utils'], function (underscore, utils) {

      "use strict";

      return {
	  test1:function (test) {
	      test.equals(1, 1);
	      test.done();
	  },
	  test2:function (test) {
	      var a = {a:1};
	      var b = Object.beget(a);
	      b.b = 2;
	      test.equals(a.beget, undefined);
	      test.equals(typeof(Object.beget), 'function');
	      test.equals(a.a, 1);
	      test.equals(b.a, 1);
	      test.equals(a.b, undefined);
	      test.equals(b.b, 2);
	      test.done();
	  }
      }

  });

Andrew

Building for the Web

From: andrew cooke <andrew@...>

Date: Sun, 19 Feb 2012 10:52:28 -0300

All the above describes a project sitting on the server or development
machine.  When deploying to a web page you need to somehow remove the node
related stuff and have a single, compact file.  This is done by using r.js
(the requirejs optimizer).

In the utilities directory I have the file build.js:

  > cat build.js 
  ({
      baseUrl:"../src",
      out:"../built.js",
      paths: {'underscore': '../node_modules/underscore/underscore'},
      name: "utils"
  })

and running this command in that directory:

  rm ../built.js; r.js -o ./build.js

builds the file "built.js" which appears to contain both underscore and utils
munged into a single largely unreadable (by humans) file.  I've looked for
some way to make it readable, but can't find anything.

I don't think you can simply load the utils.js file "as is" because the
includion of amdefine will break things in the browser (one of the things that
j.rs does is strip that out).

Andrew

Final Javascript Example (including browser)

From: andrew cooke <andrew@...>

Date: Sun, 19 Feb 2012 14:55:00 -0300

This is the script to install various packages (not all used below)

  > cat setup.sh 
  #!/bin/bash

  npm install underscore
  npm install requirejs
  npm install benchmark
  #npm install mocha
  npm install nodeunit
  npm install amdefine
  npm install assert

Here are the source files

  > ls src
  trench.js  utils.js

  > cat src/trench.js 
  if (typeof define !== 'function') {
      var define = require('amdefine')(module);
  }

  define(['utils', 'underscore'], function (utils, _) {

      "use strict";

      var a = {a: 1};
      var b = Object.beget(a);
      b.b = 2;
      alert(JSON.stringify(b));

  });

  > cat src/utils.js 
  if (typeof define !== 'function') {
      var define = require('amdefine')(module);
  }

  define(['underscore'], function (_) {

      "use strict";

      if ('function' !== typeof Object.beget) {
	  Object.beget = function (o) {
	      var f = function () {
	      };
	      f.prototype = o;
	      return new f();
	  };
      }

  });

And the test file:

  > ls test
  utils.js

  > cat test/utils.js 
  if (typeof define !== 'function') {
      var define = require('amdefine')(module);
  }

  define(['underscore', '../src/utils'], function (underscore, utils) {

      "use strict";

      return {
	  test1:function (test) {
	      test.equals(1, 1);
	      test.done();
	  },
	  test2:function (test) {
	      var a = {a:1};
	      var b = Object.beget(a);
	      b.b = 2;
	      test.equals(a.beget, undefined);
	      test.equals(typeof(Object.beget), 'function');
	      test.equals(a.a, 1);
	      test.equals(b.a, 1);
	      test.equals(a.b, undefined);
	      test.equals(b.b, 2);
	      test.equals(JSON.stringify(b), '{"b":2}');
	      test.done();
	  }
      }

  });

Which runs:

  > nodeunit test

  utils
  / test1
  / test2

  OK: 8 assertions (15ms)

And here is the build step:

  > ls utilities/
  build.js  build.sh

  > cd utilities/
  > ./build.sh 

  Tracing dependencies for: trench
  Uglifying file: /home/andrew/projects/personal/webgl/trench/built.js

  /home/andrew/projects/personal/webgl/trench/built.js
  ----------------
  /home/andrew/projects/personal/webgl/trench/node_modules/underscore/underscore.js
  /home/andrew/projects/personal/webgl/trench/src/utils.js
  /home/andrew/projects/personal/webgl/trench/src/trench.js

And here is the web application:

  > cd ..
  > cat index.html 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title></title>
      <script data-main="built.js"
	      src="node_modules/requirejs/require.js"></script>
  </head>
  <body>

  </body>
  </html>

And, finally, loading that into a browser displays the alert '{"b":2}'.

Andrew

Comment on this post

C[omp]ute

Personal Projects

Last 100 entries

JavaScript / ActionScript Politics

Better Test Example

Building for the Web

Final Javascript Example (including browser)