Foundarionette—the name itself a portmanteau of "Foundation" & "Marionette"—uses Marionette.js & Require.js per usual, but has Zurb's Foundation 5 responsive framework in place for the front-end instead of the usual Twitter Bootstrap front-end responsive framework.
Some people prefer to use Foundation 5, one of the biggest reasons for this being the use of Sass instead of LESS. Whatever the case, I hope this helps someone out.
The back-end is boilerplate Node with Express. Read below for directions on how to get the Node server started locally.
- Install Node.js & clone repo.
- Install Nodemon library globally.
[sudo] npm install nodemon -g - If Grunt has been used globally, remove it.
[sudo] npm uninstall -g grunt - Install latest Grunt
[sudo] npm install -g grunt-cli - Inside project folder
npm install - Next run Nodemon. This starts Node.js web server. It restarts upon file change!
nodemon - App at
http://localhost:8008 - Jasmine test suite at
http://localhost:8008/specs.html - Type
gruntto run build & create minified .js & .css
Local JavaScript variable in index, production, is used to communicate production or development.
loadCSS(url, callback)- Asynchronously includes a CSS file to a pageloadJS(file, callback)- Asynchronously includes a JavaScript file to the pageloadFiles(production, obj, callback)- Calls theloadCSS()andloadJS()methods internally to asynchronously include CSS & JavaScript files
- Production uses a single compressed JS file (via almond, not require) for all of the core JavaScript functionality & a single CSS file as well.
- Development uses Require only and not Almond.
Global Marionette.Application object starts here. Defines Backbone & Marionette as dependencies, but Require.js won't load dependencies more than once.
Remember: Best practice = list all dependencies for every file.
Configure routes in an appRoutes map. Variation of Backbone.Router. When a route is fired, controller handles it.
Backbone.js Collection class to store all of your Backbone Models. Lists jquery, backbone, and UserModel.js as dependencies.
- Grunt.js,
- Require Optimizer
- almond.js
NOTE: Need to run Jasmine & Grunt.
- Marionette
- Handlebars
- Require
- Backbone
- Lodash
- Almond
- jQuery
- Bootstrap
- Require-handlebars-plugin (
hbs) - grunt-contrib-requirejs plugin to run the Require.js optimizer
- grunt-contrib-jshint plugin automates JSHint code quality checking