BackbonePlayground icon indicating copy to clipboard operation
BackbonePlayground copied to clipboard

:electric_plug: MarionetteJS, Backbone.Radio, Gulp & more

Backbone Playground

This is a testing environment for WebApps based on MarionetteJS.

To run the Playground use the appropriate run-scripts.

Component Parts

Gulp build system

CoffeeScript compilation

Two-Way data binding with Backbone.Stickit

Two mock APIs based on hapi-dummy-api

Backbone.Radio to build decoupled applications.

Runs on a HAPI-Server

Templating with Jade

Design based on a free template from redefineIT

Icons & Fonts from Font Awesome

...more to come soon ;)

Backbone Playground

Building with Gulp

Start server: gulp server

Debug build: gulp

Production build: gulp production

Debug build with LiveReload: gulp live

Or use the run-scripts for Windows / *nix run.bat respective run.sh

CoffeeScript compilation

Compilation is supported via configs/coffee_config.js which is a simple CommonJS module. There's already a Cakefile located in the project root. By default the compilation starts with cake build but it can be adjusted by modifying the Cakefile and/or configs/coffee_config.js. The compiled JS files are located together with their CoffeeScript counterparts. To change this behavior set a general --output [DIR] in Cakefile. For example coffee --compile --output OUT_DIR .

More information regarding CoffeeScript compilation can be found here.

Install CoffeeScript with npm i -g coffee-script

MarionetteJS console debugging

The Marionette.Application is located under window.app

MarionetteJS Console

Backbone.Radio

In the upcoming release 3 of MarionetteJS Backbone.Radio will replace Backbone.Wreqr. There's also a shim for version 2.1 which is included in Backbone Playground. Here's an example on how to use Backbone.Radio

Backbone.Radio Console

Another example is located on the front page. Just type something into the box.

Check the code in views/blank.js

Backbone.Radio Web Example

How to run it

  1. download/install node.js
  2. install dependencies: npm i
  3. run it: run.bat on Windows or ./run.sh on *nix
  4. open http://localhost:3000 in a browser

Links

BackboneJS

MarionetteJS

AmpersandJS

License

MIT