Make your Marionette.js apps scale and evolve infinitely
BrixJS - Lightweight, simple, but pretty powerful addition to Marionette.js framework, that helps you to build multi-page JS Apps.
The idea of BrixJS is similar to the one implemented at Google Web Toolkit (GWT). "Places" are defined as bookmarkable states, and when a user comes to some place the corresponding "activity" is run. With Marionette layouts and views you define different regions. With BrixJs you manage these regions.
You start with one main region and then step-by-step split it to several smaller. On each hierarchy-level you can switch underlying layout to something absolutely different depending on current place.
Benefits from using BrixJS:
- application could be divided to several absolutely independent modules, so their development could be easily paralled
- view regions are updated independently - some could be re-rendered, some could stay untouched, that leads to better UI-performance
- infinite hierarchy of view regions and their managers
Just checkout this demo to get better understanding how it works - BrixJS Demo
This framework extends and is based on
- Marionette 1.0.0-rc4
Boilerplate application is using:
- Underscore 1.4.3 (AMD-version)
- Backbone 0.9.10 (AMD-version)
- RequireJS 2.1.2 (could be easily removed)
- Handlebars 1.0-rc1
- RequireJS-Handlebars plugin 0.4.0
Brix classes description
- Place: Represent bookmarkable state
- PlaceController: Responsible for navigation between places and keeps browser history in sync
- Module: Basic interface for Modules
- Activity: Activity class
- SimpleActivity: Helper activity class, that just renders some view
- ActivityManager: Starts/Stops activity in response to place change events
- DelegateManager: Allows to switch between managers for single region
- CompositeManager: Creates Marionette.Layout and associate managers with regions
BrixJS Boilerplate application is available here - BrixJS Demo Online version is built with RequireJS optimizer.
To run and debug non-built application locally (it uses NodeJS):
npm run-script dev
and open http://localhost:3000/
Copyright (MIT License)
Copyright (c) 2013 Denis Davydkov