Independent Marionette JS Modules using Require JS

I’ve been reading about Marionette for a few months now and started to dive deeper two weeks ago to structure my new project.  I needed to create a web application that displays independent modules through some sort of container.  The container and each module would all have their own git repositories, unit testing suite, and versioning.  The web applications (combinations of the container and a subset of modules) would each have their own end-to-end testing suite.  Having read about Marionette modules before, I thought Marionette would be a good fit for this scenario.

I wanted to add some side notes to what these webpages discussed to help others facing a similar problem.  I started with the stack defined by the MRB boilerplate but also added sass, jade, grunt-compress, and grunt watch.

Smashing Magazine’s – A Thorough Introduction To Backbone.Marionette

Splitting up files. I wanted everything related to the module to be declared inside the module, so I ended up declaring all of a module’s views, models, collections, router, and controller inside multiple App.module declarations in separate Require JS files.   Each of these files were defined under the modules folder (e.g. app/modules/{module-name}/views).

John David Mathis – Structuring scalable client side applications

This series was extremely helpful for me.  It helped me picture what I wanted and showed that it was possible.  It was just missing the testing piece (I wanted each component to have its own testing suite), and it relied on some custom libraries that the author built.

Project structure.  I ran into some issues with the requirejs handlebars plugin not interpreting the relative URLs properly (see https://github.com/SlexAxton/require-handlebars-plugin/issues/134), so I ended up changing my project structure to work around this issue.  The modules are now inside the container structure as opposed to being on the same level.  (e.g. app/container/modules/{module-name}/views).

Testing suite.  I also added Jasmine for unit testing inside each module folder.  Each module had its own Require JS config.  This file would only be used when developing at the module level.  I moved the library dependencies into the test folder and mocked out the objects that the modules need from the container (App object, User object, etc.).  I also added a path in Require JS that replaces module/{module-name} to be the current directory ‘.’ to resolve the path dependencies properly.

Grokbase – Backbone Marionette App Modules Question

I was initially trying to use an internal bower repository, but it lacked support for git repositories that required authentication.  I found out that using dependencies defined by URLs worked, but versioning was not supported with URL depenencies at this time.

I ran across this question, and it used a loader concept.  This was great because I initially wanted to use bower for a requirejs-bower plugin that automatically modified the require js config.  This loader concept would solve the same problem since I could define the set of modules as a json file on the app level.

Dependency management.  I created a json file at the app level to define what set of modules (including their versions) and which version of the container I want to include for the app.  I would run a grunt command to download the dependencies (using a custom HTTP server solution instead of bower) into the proper structure.

Everything seemed to work fine, except for the optimized require JS code (r.js).

Ben Nadel – Compiling optimizing A Subset of a RequireJS Application

Uglifying/Optimization. With the loader concept, I was dynamically requiring Require JS modules.  Require JS didn’t pick this up properly, and my dynamically loaded modules were not included in the optimized file.  Ben Nadel did a great job explaining the modules: tag in the r.js build configuration.  Instead of creating one concatenated file, it created multiple optimized files.  See the generated build.txt file to ensure dependencies are not included multiple times.

Conclusion

I hope this helped.  I didn’t post any code because we’re still working on the project, but I’ll see if I could post the basic structure in a month or so.

Other useful links I scooped regarding large-scale javascript projects: http://www.scoop.it/t/enterprise-javascript

About these ads

2 thoughts on “Independent Marionette JS Modules using Require JS

  1. I’m really interested in your struggle to use an internal bower package backed by a private repo. It seems that this is something bower should want to support out of the box. Did you take this to the maintainers?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s