benmccormick

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

benmccormick

/* jshint ignore:start */
/** This file is a bit of a hack to make the requireJS build paths available
 * both in the browser and for gulp.  There's some ugliness requires to make
 * it loadable/usable in both environments.
 **/

var requirePaths = {
    paths: {
        jquery: 'vendor/jquery/jquery',
        jqueryui: 'vendor/jquery/jquery.ui',

benmccormick

/* This is an experiment to shim support for handling Backbone.Radio
   Events, Commands, and Requests onto Mn.Object.
   Right now it only supports Object and not other Mn classes due to annoyances
   of overriding the constructors of the different classes
   It's also written in ES6 and uses my own import names for modules, so 
   it probably will not work for most people without some alteration as a result
*/

import * as Mn from 'marionette';
import * as Radio from 'radio';

benmccormick

Marionette 3 is currently in development, but one of its main thrusts is going to be simplifying the concepts needed for Marionette Developers. This involves deprecating and renaming some features. This gist is meant to provide a mapping of V2 to V3 concepts to help developers plan for and understand v3.

Disclaimers:

• this is not an official document
• I'm not on the Mn core team, this is just the understanding of an observer of the library
• Mn V3 is still in development. I'll try to keep this document up to date, but if something looks wrong please leave a comment and double check.

Concepts table

benmccormick

"Ben McCormick's vimrc

" Plugins
" =============

"Setup Vundle For Package Management

"Vundle begins here, turn off filetype temporarily
filetype off
"Add vundle and any other packages not installed through vundle to our lookup

benmccormick

try {
    fetch('/some/data').then(function() {
        throw 'error';
    })
} catch(e) {
    //this code won't be executed
    console.log('Exception Caught') 
}

benmccormick

//Backbone.Model's save function is a function that takes callbacks
//for successful or failed saves.  

//Normal usage

let model = new Backbone.Model();

model.save(null, {
    success: function() {
        alert('saved');

benmccormick

//fetch makes an HTTP request and returns a promise that resolves 
//when the file is loaded
let p1 = fetch('/data/file1.json');
let p2 = fetch('/data/file2.json');
let p3 = fetch('/data/file3.json');

Promise.all([p1,p2,p3]).then(function(values) {
    //values contains the responses from each of the promises
    let [response1, response2, response3] = values;

benmccormick

//Promises take a function that receives callbacks that can be run when an operation completes
let delay5Seconds = new Promise(function(resolve, reject) {
    setTimeout(resolve, 5000);
});


//You can respond to the results of a successfully resolved Promise using the `then` function
delay5Seconds.then(function() {
    console.log('This gets logged 5 seconds later')
});

benmccormick

async function showMessageFromServer() {
    let data = await fetch('/get/data.json');

    let message = data.json().message;

    alert(message);
}