Skip to content

Instantly share code, notes, and snippets.

@benmccormick
Last active November 17, 2018 10:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benmccormick/60e089402da1b72773dd to your computer and use it in GitHub Desktop.
Save benmccormick/60e089402da1b72773dd to your computer and use it in GitHub Desktop.

There are a few core concepts that are useful to understand when building Marionette applications.

Marionette is designed to help you build build scalable web applications by providing common design patterns as a series of components.Those components are implementations of the concepts described here.

Marionette's concepts build on the concepts introduced by Backbone. If you are new to Backbone, don't worry. This page will provide a brief overview of the concepts that Backbone provides you with as well.

Models

A Model is a Javascript object that represents data. Often times this data represents application data and comes from a remote server through a JSON API, but it can also be created locally and used to represent application state.

Models are provided by Backbone; Marionette does not provide any additional functionality to the Model class.

Collections

A Collection is a representation of data, like a Model. Collections differ from Models in that they represent lists of data, whereas Models represent an atomic unit of data. Accordingly, Collections are made up of many Models.

Collections are a feature of Backbone.

Templates

A Template is a reusable snippet of code that renders into HTML. They are often backed by data provided by Models or Collections.

Marionette defaults to the Underscore templating language, though it is easy to use any templating language you wish.

Views

A View is a reusable user interface component. Most Views are paired with a Model or Collection and a Template.

Backbone comes with a View class, but it is offers little functionality. Marionette expands on this by giving you four View classes. Each of these classes is for a specific use case of a View.

Regions

A Region is a container for nested Views. By using the LayoutView, you can create Regions and display child Views. Regions make it easy to manage child Views and swap Views with a layout.

Applications

An Application is the starting point of any Marionette application. It acts as a container for the rest of your application.

Marionette's Applications are intentionally lightweight objects. Although we recommend using at least one Application, there is nothing preventing you from making numerous Applications. This could be used if you are, for instance, interested in building a modular app.

Router

A Router associates an action with a URL. In Backbone, this action is only intended to be executed when the application first loads. It is more common in Marionette applications for the Router to be central to the flow of your application.

Backbone provides a Router class. Marionette adds a minor addition to it with the AppRouter class. In Backbone, the actions (or callbacks) are placed directly on the Router. In Marionette, a separate object, a Controller, is where you place the callbacks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment