-
Notifications
You must be signed in to change notification settings - Fork 10
Getting started overview
The Backbone Boilerplate has been designed and implemented for small to medium sized projects. It started as a boilerplate and has since evolved into a robust development environment. Be that as it may, this is not an enterprise framework. Essentially if your application starts to exceed 1MB in source (after optimizations), you will likely need to extend the defaults to accommodate.
This is the product of significant research and frustration. Developers who have tried to configure RequireJS will appreciate the elegance of the integration. While other boilerplates for Backbone.js exist, they may:
- Modify library source code.
- Not have a build system.
- Not have example applications written utilizing it.
- Impose far too much on your structure.
The Backbone Boilerplate project contains the entire boilerplate including all default configuration files necessary to power the build tool. It is entirely possible to run the Boilerplate without a server (as would be recommended for any Phonegap application). More on that is discussed in the Filesystem section.
BBB stands for [B]ackbone [B]oilerplate [B]uild and is the tool used for building the assets and serving the Backbone Boilerplate project locally. This tool is built upon Grunt for the build platform. This provides an excellent foundation and the possibility of extending with any future Grunt plugins. This tool requires Node.js and can be installed following the Installation instructions.
This project is built upon the hard work provided by the open source community. Design decisions change frequently as this is a rapidly evolving field, this means bundled libraries are subject to change.
Web application development:
- jQuery 1.7.2 - (DOM manip, AJAX, etc)
- Lo-Dash 0.3.1 - (Functional utilities)
- Backbone.js - (Application structure)
Module management:
View management:
- LayoutManager - (Composite view manager)
- H5BP - (Sane web application default styles)
The structure is fairly straightforward. Application code and templates
are placed inside the app/ directory.
All static assets are placed in the assets/ directory. Third-party
JavaScript and CSS, images, and vendor files go here.
The test/ directory contains two different testing harnesses, Jasmine and
QUnit. These are both fully wired up to work immediately with your
application. You can run either from the browser, by opening the respective
index.html file contained within.
.
├── app
│ ├── app.js
│ ├── config.js
│ ├── main.js
│ └── router.js
├── assets
│ ├── css
│ │ ├── h5bp.css
│ │ └── index.css
│ └── js
│ ├── libs
│ │ ├── almond.js
│ │ ├── backbone.js
│ │ ├── jquery.js
│ │ ├── lodash.js
│ │ └── require.js
│ └── plugins
│ └── backbone.layoutmanager.js
├── favicon.ico
├── grunt.js
├── index.html
└── test
├── jasmine
└── qunit
These are files within the Backbone Boilerplate that hold special significance to the project.
Directory: Application app/
app.js
Load all application-wide logic inside this file. This is loaded before any
other script in the application. This module will return a single object
called app. This object can be used as a global pub/sub for events, store
additional properties (such as an apiHost), and contains the useLayout
method. More information can be found in the Using Layouts section.
Use this file to add/configure plugins, add global app variables, and when you need to change your template configuration.
config.js
This is one of the two configuration files. This is a RequireJS configuration file and you can read up more on the options. You will mostly use this file for updating your dependencies or adding new folder paths. More information can be found in the Modules (RequireJS) section.
main.js
This file serves as the entry point into the application. It sets up the
application and initializes the Router. This file also hijacks every link
on the page allowing for #route/ to be routed through the Router.
router.js
This file is your main application router. Regardless if you use sub-routers or not, you should wire up your application state here.
Directory: Static assets assets/
css/index.css
Since CSS doesn't have a module loader plugin like RequireJS, its not
particularly easy to get files in without modifying index.html. This project
leverages @import statements to dynamically fetch stylesheets. Whenever you
add or remove a stylesheet, make sure its updated here.
Directory: Root /
index.html
Is your single point of entry to the application and since HTML5 pushState is
enabled all 404 requests will automatically forward to this page to enable
client side routing.
grunt.js
The Gruntfile is the heart of the build system. Any time you run bbb
commands you should ensure settings are correct in here. It has safe defaults,
but if you add new stylesheets you will need to update this file. More
information can be found in the Build (Grunt) section.