What is Marionette.js?

Marionette is a popular extension of Backbone used for building various JavaScript applications with a client-server system. It was developed by Derick Bailey, who introduced a method for creating applications where we can simply define an object created from a class that can handle the entire application and acts as its root. He developed it since Bakcbone did not have this feature. Developers had to define an app object that, in reality, was the application’s router (usually called the main router), and the entire application revolved around it. By design, it is not the responsibility of a router to handle the application objects/modules attached to it. So, Marionette resolves the problem for routers by providing a class. We can create an object and attach other objects/modules to it.

An analogy to understand Marionette.js

A common analogy used to explain this extension of Backbone is within its name—Marionette. A marionette is a puppet that is controlled using the strings attached to it. The puppet master, referred to as a marionettist, controls the puppet. In this case, our JavaScript application is like a puppet, and the developer who controls the application is like the puppet master.

It is interesting to note that with all the features of Marionette, we can actually play with our application like a puppet master since building them with Marionette is that simple!

Why use Marionette.js?

Marionette has been becoming popular day by day because of its simplicity due to the following features:

• It supports a composite architecture where we can define various views and templates without making the application complex.

• It provides regions where we can connect our views within the HTML file. We can also extend those regions and add the functionalities we like.

• It enables the decoupling of the modules and objects within the application, making it simpler to handle by using event aggregators.

• Unlike most JavaScript applications, it enables us to define initializers for modules within their respective files without separately adding everything in the main file.

About this course

This course is for web developers who want to build highly interactive JavaScript applications. By covering the usage of backbone.marionette.js, this course will enable you to construct your own applications by understanding the process of building Marionette apps.

All you’ll need to follow along is a basic understanding of JavaScript and the Document Object Model (DOM), such as being able to manipulate elements on the page using a jQuery selector. In other words, if you’ve used a few jQuery libraries here and there, you should be able to follow along just fine.