THIS IS A WORK IN PROGRESS: early alpha, do not expect it to be usable or even working at the moment.
An essential but comprehensive, healthy recipe for your responsive apps.
Javascript + Backbone + Handlebars + Stylus skeleton, boosted with:
- Bootstrap 3 (stylus edition)
- MarionetteJS for practical views management, routers, event aggregator and more
- i18next eases internationalization
- Moment for easy date formatting
- FastClick improves tapping responsiveness on mobile devices
- FontAwesome provides scalable graphics for your UI
- Backbone.Pageable simplifies handling paginated collections
- Backbone.Subviews eases creating complex composite views
- Mockjax mocks up your APIs so you can work in parallel with backenders
- jQuery for your DOM needs
- Create a new project via executing
brunch new gh:nezoomie/realistic-brunch <project-name>
option for the command. - Build the project with
brunch b
orbrunch w
. - Open the
public/
dir to see the result. - Write your code.
-
A
Config
model is provided for storing app-wise data. It merges defaults with the initialization option on startup -
Models and Collections uses a
context
field for easily building URIs for nested resources.var myCollection = new Collection({ urlRoot: 'theCollectionPath' }); var myModel = new Model({ id: 1234, urlRoot: 'theModelPath' }); myCollection.context = myModel; myCollection.fetch(); // `theModelPath/4/theCollectionPath`
Supports nesting:
var rootModel = new Model({ id: 1234, urlRoot: 'rootPath' }); var nestedModel = new Model({ id: 5678, urlRoot: 'nestedPath' }); var myCollection = new Collection({ urlRoot: 'theCollectionPath' }); var myModel = new Model({ id: 9012, urlRoot: 'theModelPath' }); nestedModel.context = rootModel; myCollection.context = nestedModel; myCollection.add(myModel); myModel.fetch(); // `rootPath/1234/nestedPath/5678/theCollectionPath/9012`
-
Marionette.js
vent
dispatcher for app-wise event bindingsvar app = require('application'); app.vent.trigger('title:change','A different title');
-
Utility function for changing page title via events
-
Handlebars template helpers for integrated translations and date formatting
-
Setup additional HTTP Headers for AJAX requests in the Config directly
-
Custom
LOG()
function wrappingconsole.log()
, stripped out when building the app withENV=production
Tests are written in Mocha and run using Mocha-PhantomJS.
- Put your tests into
test/
- Install PhantomJS if missing,
npm install -g phantomjs
- Install Mocha-PhantomJS if missing,
npm install -g mocha-phantomjs
npm test
Distributed under MIT license.