Examples for Modularization

04-Toolchain/03-Modularization/Jakefile.js

@@ -0,0 +1,143 @@
+(function () {
+	"use strict";
+
+	var fs = require("fs");
+	var shell = require("shelljs");
+	var uglify = require("uglify-js");
+    var browserify = require("browserify");   // CommonJS
+    var requirejs = require("requirejs");     // AMD
+
+	var lint = require("./build/utils/lint_runner.js");
+
+	var DISTRIBUTION_DIR = "dist";
+	var DISTRIBUTION_VENDOR_DIR = DISTRIBUTION_DIR + "/vendor";
+    var DISTRIBUTION_CSS_DIR = DISTRIBUTION_DIR + "/css";
+
+    var DISTRIBUTION_COMMONJS_DIR = DISTRIBUTION_DIR + "/js-commonjs";
+    var DISTRIBUTION_AMD_DIR = DISTRIBUTION_DIR + "/js-amd";
+
+	desc("Default Build");
+	task("default", ["clean", "lint", "commonjs", "amd"], function() {
+		console.log("\n\nOK");
+	});
+
+	desc("Clean");
+	task("clean", function() {
+        console.log("* Build Step: Clean");
+		shell.rm("-rf", DISTRIBUTION_DIR);
+	})
+
+	desc("Lint everything");
+	task("lint", [], function () {
+        console.log("* Build Step: Linting");
+		var passed = lint.validateFileList(javascriptFiles(), browserLintOptions(), browserGlobals());
+		if (!passed) fail("Lint failed");
+	});
+
+    desc("Build CommonJS example");
+    task("commonjs", ["lint", "create_package_structure", "commonjs_dist"]);
+
+    task("commonjs_clean", [], function() {
+        shell.rm("-rf", DISTRIBUTION_COMMONJS_DIR + "/*");
+        shell.cp("-R", "src/js-commonjs/*.html", DISTRIBUTION_COMMONJS_DIR);
+        shell.cp("-R", "src/js-commonjs/main.js", DISTRIBUTION_COMMONJS_DIR);
+    });
+
+    task("commonjs_dist", ["commonjs_clean"], function() {
+        console.log("* Build Step: Building CommonJS distribution");
+        var b = browserify();
+        b.require("./src/js-commonjs/rating_widget.js",{expose: "./rating_widget.js"}  );
+        b.bundle({ debug: true }, function(err, bundle) {
+            if (err) fail(err);
+            fs.writeFileSync(DISTRIBUTION_COMMONJS_DIR + "/bundle.js", bundle);
+            complete();
+        });
+    }, {async: true});
+
+    desc("Build AMD example");
+    task("amd", ["lint", "create_package_structure", "amd_dist"]);
+
+    task("amd_clean", [], function() {
+        shell.rm("-rf", DISTRIBUTION_AMD_DIR + "/*");
+        shell.cp("-R", "src/js-amd/*.html", DISTRIBUTION_AMD_DIR);
+        shell.cp("-R", "src/js-amd/main.js", DISTRIBUTION_AMD_DIR);
+    });
+
+    task("amd_dist", ["amd_clean"], function() {
+        console.log("* Build Step: Building AMD distribution");
+        var config = {
+            baseUrl: "src/js-amd",
+            name: "rating_widget",
+            out: DISTRIBUTION_AMD_DIR + "/rating_widget.js"
+        };
+        requirejs.optimize(config, complete, function(err) {
+            console.log("AMD fail", err);
+            fail();
+        });
+    }, {async: true});
+
+    desc("create package structure");
+    task("create_package_structure", function(){
+        shell.mkdir("-p", DISTRIBUTION_DIR);
+        shell.mkdir("-p", DISTRIBUTION_VENDOR_DIR);
+        shell.mkdir("-p", DISTRIBUTION_CSS_DIR);
+        shell.mkdir("-p", DISTRIBUTION_COMMONJS_DIR);
+        shell.mkdir("-p", DISTRIBUTION_AMD_DIR);
+
+        shell.cp('-Rf', 'src/vendor/*', DISTRIBUTION_VENDOR_DIR);
+        shell.cp('-Rf', 'src/css/*', DISTRIBUTION_CSS_DIR);
+    })
+
+	function javascriptFiles() {
+        var files = new jake.FileList();
+        files.include("src/**/*.js");
+        files.exclude("src/vendor/*.js");
+        return files.toArray();
+	}
+
+	function globalLintOptions() {
+		return {
+			bitwise:true,
+			curly:false,
+			eqeqeq:true,
+			forin:true,
+			immed:true,
+			latedef:false,
+			newcap:true,
+			noarg:true,
+			noempty:true,
+			nonew:true,
+			regexp:true,
+			undef:true,
+			strict:true,
+			trailing:true
+			//globalstrict: true
+		};
+	}
+
+	function browserLintOptions() {
+		var options = globalLintOptions();
+		options.browser = true;
+		return options;
+	}
+
+	function browserGlobals() {
+		return {
+			// CommonJS
+			require: false,
+			module: false,
+			exports: false,
+
+            // AMD
+            define: false,
+
+            // Jasmine
+            describe: false,
+            beforeEach: false,
+            afterEach: false,
+            it: false,
+            expect: false
+		};
+	}
+
+}());

04-Toolchain/03-Modularization/jake.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+[ ! -f node_modules/.bin/jake ] && npm rebuild
+node_modules/.bin/jake $*

04-Toolchain/03-Modularization/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "CourseRater",
+  "description": "A demo project showing modularization",
+  "author": "Jonas Bandi",
+  "dependencies": {},
+  "engine": "node 0.4.1",
+  "devDependencies": {
+    "shelljs": ">= 0.2.1",
+    "uglify-js": "~2.4.0",
+    "browserify": "~2.29.0",
+    "jshint": "~2.1.10",
+    "jake": "~0.6.11",
+    "requirejs": "~2.1.8"
+  }
+}

04-Toolchain/03-Modularization/readme.md

@@ -0,0 +1,23 @@
+# Course Rater JavaScript Demo
+
+This demo show three approaches how to modularize JavaScript code:
+
+1. Using the module pattern implemented in plain JavaScript
+2. Using CommonJS modules with [Browserify](http://browserify.org/)
+3. Using AMD modules with [Require.js](http://requirejs.org/)
+
+## How to build
+The second approach (browserify) needs a build step before you can run the example. The third approach (require.js) has an optional build step.
+
+To execute the build you need node and npm, then do the following:
+
+* `npm install` -> this installs all the needed npm packages as specified in package.json
+* `.\jake.sh`-> this runs the complete build as specified in Jakefile.js the result is the `dist` directory (sorry there is no Windows script yet...)
+
+
+## How to run
+1. Plain modules: just open `/src/js-namespace/index.html` in your browser
+2. CommonJS with browserify: open `/dist/js-commonjs/index.html` in your browser
+3. AMD with Require.js:
+    * Unoptimized: Open `/src/js-amd/index.html` in your browser
+    * Optimized: Open `/dist/js-amd/index.html` in your browser