Search code examples
backbone.jsrequirejsmarionette

Backbone architecture with packages

I'm trying to choose a backbone architecture that will best serve my application.

I am building a large application that will be composed of several components or "packages" that can be enabled or disabled.

For simplicity, lets say my single-page-application is a gallery which has several components such as a photo gallery and a video gallery.

  • Any "installation" of my application can choose which components ("packages") to load - video, photo or both
  • The video and the photo gallery have some common code and abstract classes.
  • I want each installation to only load the components it needs, in a single (optimized) file - meaning that if an installation only uses the photo gallery, it should not load the video gallery - to save resources.

I've looked into various solutions - such as requireJs with its r optimizer, marionette and Lumbar but each has some drawbacks: * RequireJS with optimizer or Marionette - I can't see how I can group files into packages * Lumbar - seems it does solve most of my problem, but I could barely find any documentation or community support for it (barely mentioned here on StackOverflow) so I don't know if I can rely on it for a large software project.

Solution

  • I've decided that Lumbar is the way to go. Seems like it solves all my of my needs for loading only "enabled" packages, by using it's route-based module loading, as described here: http://addyosmani.github.io/backbone-fundamentals/#route-based-module-loading By declaring each module in the lumbar.json config file, it will create a separate, combined js file for each defined module - and will load the module only if its route was matched. You can see how to do it in thorax-seed: https://github.com/walmartlabs/thorax-seed/blob/master/README.md