The baseplate project is some baseline/boilerplate code (hence the name ;-) to quickly get up and running. Especially non-trivial SPA's with a specific architecture and libraries in mind.

I think on one hand it's quite opinionated, on the other hand it should be easy to swap any part (or ignore it, such as the whole SASS & styleguide part).

The baseplate is based on AMD.

The baseplate has component.json (Bower) which installs:

• RequireJS
• jQuery
• Lo-Dash
• Backbone
• when.js

The baseplate is configured to be optimized and built with r.js. The build is run from a node script, for more flexibility in the build process. To build:

node build

It is currently set up to build one file for the 3rd party libraries plus application core, and one file for each application module. The optimized application runs at /dist/index.html.

The baseplate contains the bare minimum for working with SASS & Compass. Compass compiles for development (incl. sourcemap), or production (compressed):

grunt compass:dev

Alternatively, compass compile from the root (configured by config.rb).

The baseplate has a Gruntfile.js (for grunt-cli) which is pre-configured with:

• jshint
• compass
• watch

Changes in JS will trigger jshint, and changes in SASS will trigger Compass compilation:

grunt watch

The baseplate works with Jasmine out of the box. Just start writing tests to the test config, and run them in the browser at /test.

Additionally, 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 PhantomJS:

testem ci -l phantomjs

With documentation in-line in the SCSS, a styleguide can easily be generated with kss-node:

compass compile && kss-node src/scss styleguide --css src/css/all.css

The baseplate has an example application setup. Everything described above (build, test, etc.) is run on the demo app. This really is a basic, example setup and not ready for complex SPA's. Having said that, it has some interesting ideas/features:

• A smart AMD configuration, supporting:
  • default usage (like <script data-main="main" src="require.js"></script>)
  • extension by other configurations (main-dev.js), e.g. to load non-minified libraries.
  • reuse by the node build script
• A proxybox module, a "sandbox" for modules to use the libraries and build upon.
  • It just proxies $, _, Backbone, and when to make them easily accessible with one dependency.
  • This idea can be modified/extended to e.g. create abstractions, adapters, facades, you name it.
• A core module which lazy-loads and installs AMD modules declared in the markup.
  • E.g. <div data-view-type="view/moduleA/index"></div>.
• A few example modules to extend/adapt core libraries, including:
  • configure Lo-Dash's template interpolation (i.e. use hello {name} instead of hello <%= name %>)
  • extend Backbone with backbone.stickit.
• Some example SCSS files, including:
  • demo comments to generate a styleguide
  • a hidden gem: an awesome grid system (alpha).

Got Node and npm installed, right? Bower is convenient (but not required):

npm install -g bower

Otherwise just manually put the libraries you want to use in the /src/lib folder.

The following is optional:

npm install -g grunt-cli
npm install -g testem
npm install -g kss
gem install sass
gem install compass

Then:

git clone git://github.com/webpro/baseplate.git
cd baseplate
bower install
npm install

The bottom line: the better your desired setup resembles, the more useful this baseplate is.

What?

Too many to mention.. All the awesome people behind all the open source goodness that is used in this project: thank you!

• Further optimize build by replacing require.js with a smaller loader (and concatenate with built main.js). Since almond doesn't support dynamic loading of AMD modules, we need something else (e.g. curl.js).