backbone-modulebone is a frontend heavy single-page HTML5 boilerplate app with a Todo app, alerts, authentication, authorization, registration, profile edit, and password reset/change.
"We search for some kind of harmony between two intangibles: a form we have not yet designed and a context we cannot properly describe" -Christopher Alexander, the father of design patterns.
Everything each module needs to work should be confined into either the module or plugins that are shared among modules. In this regard, the fact that most modules depend on the Session module model and Alert module collection leaves much to be desired, so feedback is welcome.
Code is divided into modules that live under their own modules directory. A module has dependencies from the common libraries in the application and also has specific code for the packages execution alone; other packages should not require another packages dependencies. This project skeleton was generated using the yeoman
generator-bbb. You can see available generators with
npm search yeoman-generator and then install them with
npm install [name].
Continuing with the module pattern, each module can define its own module-specific routes. This is accomplished using the Backbone.subroute plugin. Authenticated views require a session before the route is triggered. The Backbone.routefilter plugin provides before and after filters.
The Backbone.layoutmanager plugin formalizes from start to finish the fetching of layouts and templates, the rendering in any engine, and assembling into the DOM.
The Todo module persists todos to local storage using the Backbone.localStorage adapter. The account module also persists the locale to local storage.
jQuery is used for DOM manipulation, animation, and AJAX. The Animate.less stylesheet is also included to provide a Cross-browser CSS3 animation library.
The goals here are to keep templates logic-less and in external files so that they're designer+developer team ready. Handlebars.js provides logic-less templating. The Backbone.layoutmanager plugin handles any fetching of templates.
Forms are validated using jQuery Validation and kept DRY using Handlebars helpers. Jed adds i18n support in gettext style. i18n bundles are defined using the RequireJS i18n plugin. Moment.js library provides functions for formatting dates.
Yeoman is a collection of tools and best practices for scaffolding, package management, and build, preview, and test automation.
Install bower packages. This adds them to the
$ bower install
Install grunt plugins. This adds them to the
$ npm install
Yeoman comes with a built-in preview server. While the server is running, the LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made. Scripts are automatically run against JSHint to ensure they're following language best-practices. The sources can be configured in
If you'd like to use additional Yeoman (bower) packages,
yeoman install <package name> them and then copy the necessary files from the
app/component directories to the
Run yeoman server, write code, and watch your changes auto reload!
$ grunt server
The build process constructs an optimized version of the app that's ready to deploy. The build process is an opinionated workflow. I substituted two tasks. Coffeescript is not used, so I aliased the coffee task with nothing. Less CSS is used instead of SASS so the compass task was aliased with the recess task.
Unit tests are run in a headless WebKit via PhantomJS.
Run yeoman server and mocha test runner.
$ grunt test
setenv.shscript containing the following:
export AWS_ACCESS_KEY_ID=<ACCESS_KEY_ID> export AWS_SECRET_ACCESS_KEY=<SECRET_ACCESS_KEY>
Build your app if you haven't done so yet.
Deploy your code.
$ grunt deploy
- Debug level should be predicated on environment variable.
- Delete auth-buttons.less
- Make forms resize like so: http://twitter.github.com/bootstrap/examples/signin.html
- Configure grunt-contrib-handlebars to precompile Handlebars templates to JST files
- Update all text to use Jed & i18n
- Dynamic documentation using dox / jsdoc-toolkit / docco