Buckets employs an opinionated approach to the frontend developer stack, and makes strong use of Grunt for building and running tasks. External dependencies are handled with Bower. The frontend is written in CoffeeScript in client/source and makes use of CommonJS-style requires (which are compiled by Browserify. Although this leads to highly abstracted JavaScript, source maps are generated at every step, so debugging in the browser directly shows CoffeeScript files and line numbers. Additionally, LiveReload (and reloading the Node server), is built directly into the grunt dev process (see below).
Once you’ve installed the project dependencies, use Grunt.js to build, serve, develop, or test Buckets.
grunt dev— This’ll be your main jam. Creates a local server (localhost:3000) and runs “watch” for all files. Any changes to server CoffeeScript will restart the Node server and then reload the browser. Any changes to client-side CoffeeScript, Stylus, or Handlebars will re-compile, then reload the browser.grunt build(default) — Prepares to deploy a development branch of Buckets.grunt serve— Does a standard build, minifies the assets, and serves the app.grunt devserve— Simply serves the app and watches. Useful for when a server error occurs and you don’t want to rebuild withgrunt devfrom scratch.
The app uses Chaplin to organize its architecture, which sits on top of Backbone. Chaplin simply provides a few enhancements to vanilla Backbone, most notably around providing a Routes/Controller mapping, and automatic view disposal and memory management.
The lifecycle of a general frontend request is fairly easy to follow. Simply find the corresponding Route in client/source/routes.coffee, which will point to the Controller/Action combination. Controllers are located in client/source/controllers, and a typical action will initialize a model or collection, and render a view. Disposing the previous controller’s View and data models is all handled automatically.
For CSS, the app is currently being written in Stylus, though most basic UI styles are provided by Bootstrap 3 (with custom variables) at client/style/bootstrap.less.
Currently we are including all styles and JavaScript plugins, though we will be trimming out unused modules before beta.
Templates are written in Handlebars and pre-compiled with Grunt. We also automatically include Swag, which provides a number of useful helpers out-of-the-box. Additional custom helpers can be found in client/source/helpers.coffee.
We’re currently using icons from Fontastic, including Streamline Icons, please contact David Kaneda with suggestions for changes.
All 3rd-party client-side libraries are loaded via Bower. We make heavy use of the exportsOverride parameter in bower.json to load specific files out of the Bower components, as needed. Certain Bower components are excluded from being exported altogether. Some of these are application-specific libraries (like Chaplin and Backbone), which are dynamically compiled into the app through the browserify task (see the alias option in the Gruntfile), while others—like the Ace Text Editor—are large in size, and only loaded when needed within the app (using Modernizr.load.