THIS PROJECT IS ABANDONED/UNMAINTAINED AS OF 2014/11/16
The baseplate project provides excellent workflow & tooling to develop, build, and test non-trivial SPAs. Check out the stack below to see if it's for you.
The tooling stack is pretty opinionated:
| Element | Solution |
|---|---|
| Module format | AMD |
| Module loader | RequireJS |
| Module builder | RequireJS Optimizer |
| Package manager | npm & Bower |
| Build framework | Grunt |
| Test runner | Testem or Karma |
| Test framework | Jasmine or Mocha |
| CSS Preprocessor | SASS, Compass |
| Styleguide generator | kss-node |
The example/dummy application contains the following:
| Element | Solution |
|---|---|
| JS Stack | Lo-dash, Backbone, jQuery |
| Template engine | Handlebars |
| Async helper | when.js |
| RequireJS plugins | text, handlebars |
This application is an example setup for a full SPA. It allows for a layered build (i.e. optimizing one core and separate application modules).
Application modules are lazy loaded using a bit of progressive enhancement and dependency injection.
Got Node, npm, and Bower installed, right? Otherwise, please do so first.
Install baseplate and its local dependencies:
git clone git://github.com/webpro/baseplate
cd baseplate
bower install
npm install
Depending on your targets, you need to install some global dependencies:
npm install -g grunt-cli # For build tasks
npm install -g testem # For running tests
npm install -g karma # Alternative for running tests
npm install -g intern # Alternative alternative for running tests
npm install -g kss # For creating styleguide
gem install sass compass # For compiling SASS
Now, let's see what we've got...
The baseplate has a Gruntfile.js (for grunt-cli) which is pre-configured with:
To build using the r.js optimizer and with minified CSS:
grunt build
This build configuration is set up to build the demo application:
- one minified JS file for the 3rd-party libraries plus application core
- one minified JS file for each application module (including template precompilation).
The resources are built to /dist (demo app runs at /dist/index.html).
Changes in JS files will trigger jshint, and changes in SASS files will trigger Compass compilation for development (incl. sourcemap):
grunt watch
The baseplate contains the bare minimum for working with SASS & Compass. Compass compiles for development (incl. sourcemap), or production (compressed):
grunt compass:dev
Alternatively, use compass compile from the root (configured by config.rb).
The baseplate works with Jasmine out of the box. Just start writing tests (and add them to the test config), and run them in the browser at /test. As an alternative, Mocha (plus Chai) is also available.
Tests can be watched and executed automatically in connected browsers with testem:
testem
See testem docs for more options, e.g. to run tests in browserstack. Or open and close browsers automatically in CI mode (e.g. Chrome, Firefox, and PhantomJS):
testem ci
To run tests using Mocha (instead of Jasmine):
testem -t test/mocha/index.html#testem
testem ci -t test/mocha/index.html#testem
Karma (previously Testacular) works similar to testem, and the command to watch files for changes and run the tests automatically in configured browsers is straightforward:
karma start
There is a code coverage reporter configured already, which gets saved in the /coverage folder after running tests. Also see the using it section in the Karma docs, and the Karma configuration file.
To run tests using Mocha (instead of Jasmine):
karma start test/mocha/karma.conf.js
Some experimental browser testing using the Intern test stack is working, open the browser and check the console:
/node_modules/intern/client.html?config=test/intern/intern.config.js
Does not work in IE8 (IE9 is fine).
To test from the command-line
./node_modules/.bin/intern-client config=test/intern/intern.config
There is some highly experimental behavior testing setup in the /test/jasmine-behavior folder. Essentially, it's Jasmine + jQuery. Run the tests in the browser at /test/jasmine-behavior, or from CLI:
testem -t test/jasmine-behavior/index.html#testem
testem ci -t test/jasmine-behavior/index.html#testem
Additionally, the same concept is configured using Mocha and expect.js:
testem -t test/mocha-behavior/index.html#testem
testem ci -t test/mocha-behavior/index.html#testem
With documentation in-line in the SCSS, a styleguide can easily be generated with kss-node:
grunt compass:dist && kss-node src/scss styleguide --css dist/css/all.css
Too many to mention.. All the awesome people behind all the open source goodness that is used in this project: thank you!