Modules — A Thorough Introduction To Backbone.Marionette (Part 2) Advertisement In the first part of this series, we discussed Backbone.Marionette’s Application.
This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them. What Are Modules? Before we get into the details of how to use Marionette’s module system, we should make sure we all have a decent definition of a module. For this article, that’s about as much as we need to define modules, but if you want to learn more about writing modular code, plenty of resources are on the Internet, of which the “Maintainability Depends on Modularity” chapter of Single Page Apps in Depth is one of the better ones out there. The JavaScript language doesn’t currently have any built-in methods for defining modules (the next version should change that), but many libraries have arisen to provide support for defining and loading modules.
Module Definition Submodules. Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications. I gave this talk July 31 at BackboneConf 2013 in Boston, MA.
Video of presentation can be found here: Backbone has been used to build some of the greatest web apps in the world. Chances are, you have one running in your tabs. But the gap from first starting Backbone to building a large application is enormous. In this talk, Brian Mann will focus on closing that gap, and pave the way for creating powerful and highly scalable Backbone Apps. One of the biggest pain points of Backbone is dealing with its boilerplate code. Instead of building your application’s infrastructure from scratch, Brian will show you how to become a much happier Backbone developer by demonstrating how to build modular Backbone apps using Marionette JS.
For videos and screencasts visit: Components with Backbone.js and Marionette.js – Jeremy Fairbank Blog. A lot of my JavaScript work involves using Backbone.js and Marionette.js for the front-end.
I really like other frameworks such as Angular.js too. Despite the framework I find myself in, I immediately gravitate toward whatever modular patterns that framework facilitates. More specifically, I am interested in how I can build reusable components within the framework. Components are the objects that encapsulate some specific functionality and typically operate independently of the application as a whole. For example, imagine the cliché stock widget that displays stock symbols along with their current prices. Building and Maintaining Applications with Components Components are critical to scaleable applications because they encourage separation of concerns. Components also encourage the DRY principle. Framework Components Now, for the purpose of this article, we should have a shared idea of what a component is. Well, this leaves us with rolling our own solution, which isn’t a terrible idea. Things I Learned from Building a Large Scale Backbone + Marionette Application.
Intro to Marionette To quote the website, "[Marionette] is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.
" Why We Chose Marionette. Organizing Your Backbonejs Application With Modules. If you have spent any time looking at Backbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is.
Backbone.js is incredibly powerful, but not prescriptive in how it should be used. With great power comes great responsibility, and if you’ve tried to use Backbone.js for a large project you might be asking yourself: how do I organize my code? When thinking about “code organization” the questions you might be asking are: How do I declare and invoke Backbone types? How do I manage a separation of concerns? All good questions! There’s been a lot of debate about this issue in the Backbone.js community for several reasons. Having said all this, let’s dive into some of the details. Here’s how you might layout your application structure: Static Assets Your static assets such as CSS, images and JavaScript libraries required by your code should go under a parent directory, such as the assets directory in our example above.
Consider Brian Mann style AppModules and folder layout in the generator · Issue #37 · mrichard/generator-marionette. Backbone Marionette module starting from [this fork]( ) and [this repo]( ) and [for this comment](
Davidsulc/structuring-backbone-with-requirejs-and-marionette.