This repository contains the sample source code for the titular Lessons Learned episode of James Shore's Let's Code: Test-Driven JavaScript screencast. Let's Code: Test-Driven JavaScript is a screencast series focused on rigorous, professional JavaScript development.
The source code in this repository demonstrates several different approaches to handling modularity in front-end JavaScript. The application itself is a simple drawing tool borrowed from Lessons Learned #11.
The repository contains several examples:
- Baseline, non-modularized code (in
src/single_file
) - Namespace object (in
src/namespace
) - CommonJS modules (in
src/commonjs
) - AMD (in
src/amd
)
Each example (except single_file
) contains the following files:
index.html
: Load this file to run the example.drawing_area.js
: Sets up drawing area and translates events into actionshtml_element.js
: Abstracts HTML elements (using JQuery)svg_canvas.js
: Abstracts SVG (using Raphael)
In addition, all examples use JQuery and Raphael, which are located in src/vendor
.
Each example is identical except for the module approach used. For more information about the examples, watch the screencast.
Note: The tests and modules in these examples are simplified for the purpose of demonstrating differences in modularity approaches. They aren't meant to be examples of good testing or design.
Before building for the first time:
- Install Node.js.
- Download and unzip the source code into a convenient directory.
- All commands must run from the root of the source tree:
cd <directory>
. - To cause the build to fail unless certain browsers are tested, edit
REQUIRED_BROWSERS
at the top ofJakefile.js
. Otherwise, comment those lines out.
To build (and test):
- Run
./jake.sh karma
(Unix/Mac) orjake karma
(Windows) to start the Karma server. - Start the browsers you want to test and point each one at
http://localhost:8080
. - Run
./jake.sh
(Unix/Mac) orjake
(Windows) every time you want to build and test.
Some examples require building before they are run. Here's the procedure for running each example manually:
- Baseline (non-modularized): open
src/single_file/index.html
- Namespace object: open
src/namespace/index.html
. - CommonJS modules: run
jake build
, then opengenerated/commonjs/index.html
. - AMD (development version): open
src/amd/index.html
. - AMD (optimized production version): run
jake build
, then opengenerated/amd/index.html
.
Note: The jake build
target is part of the default jake
run.
MIT License. See LICENSE.TXT
.