Eduardo Garcia bio photo


Eduardo Garcia

Knowmad by definition

Location: Australia

Twitter Facebook  QQ交谈 Google+ Github LinkedIn Feed

When people usually think in Javascript, they never think in terms of an application, the most common perception is just a useful plugin.

Fortunately last years have been happened a explotion of Javascript Frameworks.

Doesn't matter what framework you choose, in the first steps we suffer the syndrome of white page of writers, to figure out how I can start.

To help you to defeat that syndrome, here is my proposal for a Marionette Skeleton App.

This Skeleton is a starting point with structure and sample about how to create modules, views, routing and controller for a Marionette JS application.


$ git clone


Marionnete Skeleton View

Structure and Files

├── collections
├── css
├── js
│   ├── main-module.js
│   ├── main.js
├── index-module.html
├── index.html
├── layouts
├── models
├── modules
├── templates
├── vendor
│   ├── backbone.babysitter.js
│   ├── backbone.eventbinder.js
│   ├── backbone.js
│   ├── backbone.marionette.js
│   ├── backbone.wreqr.js
│   ├── jquery.js
│   ├── main-module.js
│   ├── main.js
│   ├── require.js
│   ├── text.js
│   └── underscore.js
└── views

The skeleton implement RequireJS to load libraries and modules to start a MarionetteJS App.

Collections and models and their integration with Views in outside the scope this Skeleton, becuase is different in each implemetantion. I recommend to use Drupal as Backend and you can use the Model plugin Backbone.Drupal.


If you run this Marionette JS Application without a Web Server ( Loading directly the index.html file), you will get the following error.

XMLHttpRequest cannot load file:///YOURPATH/marionette-skeleton-app/templates/header.tpl. Cross origin requests are only supported for HTTP.

Named modules

If you want create named module to use with require, you can check files:

  • index-module.html
  • libs/main-module.js


All modules are separated in folder modules in this way can be instantiated for any application.


file: modules/AppRouter.js

This example module implements the routes defined in your application.

Routes: home: This method must be defined inside the controller associated to Router when the App instantiate the AppRoute module. helloBuddy: Method defined inside the Router using the property routes


Load the index.html file, the home route must be executed and you will get a bootstrap alert message "Hello Marionette JS"

Load the index.html#hello/enzo, the helloBuddy from the controller is loaded and the fragment after 'hello/' will pass to the method as parameter to generate the message in this case 'Hello enzo'


file: modules/AppController.js

This object must define all methods defined in Router with property appRoutes , in this example define the method hellobuddy.


All views were encapsuled as RequireJS module and instanciate in Controller functions and Main Application.

Views can be reused in other controllers


All templates where created in templates folder using undescore.js logic and loaded using the pluging text for RequireJS

Template are imported in Views.


The Skeleton implement library Backbone.wreqr for messaging between controller functions and views.

The application has a Input Text to enter a text, when enter key is hitted or the buttong is clicked an event is trigger and catch for the application to activate the hello router.