GaryRogers · August 25, 2015 15:48 · Aug 25, 2015
diff --git a/JavaScriptModules.md b/JavaScriptModules.md
@@ -0,0 +1,54 @@
+# Quick intro to Javascript Modules
+
+If you're looking for something in depth, I suggest http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
+
+``` JavaScript
+var SomeMarionetteApp = (function(my, $, _, backbone, Marionette, bootstrap, common) {
+    my.App = Marionette.Application.extend({
+        initialize: function(options){
+            var self = this;
+
+            this.views = {};
+            this.collections = {};
+            this.models = {};
+
+            this.views.topnav = new Chartest.View.TopNav();
+
+            this.views.topnav.render();
+        }
+    });
+
+    my.View = {};
+    my.Model = {};
+    my.Collection = {};
+    my.Template = {
+        nav_header: "#tmpl_nav_header"
+    };
+
+    my.View.TopNav = Marionette.ItemView.extend({
+        el: "#top_nav",
+        template: my.Template.nav_header
+    });
+
+    return my;
+}(SomeMarionetteApp || {}, $, _, Backbone, Marionette, common));
+```
+
+`var SomeMarionetteApp` describes a global name that you're defining.
+
+`}(SomeMarionetteApp || {}, $, _, Backbone, Marionette, common));` describes what's available to the function you're defining. The first argument `SomeMarionetteApp || {}` defines what you're exporting. If it doesn't exist in the global space it's defined as '{}', an empty object.
+
+`(function(my, $, _, backbone, Marionette, bootstrap, common) {` describes the arguments passed into the function from the bottom line. Notice that the first argument is `my`, this is similar to `this` in most other JavaScript functions. It refers to what you're expoirting (on the `return my;`) line.
+
+From there you define sub-objects and functions in the body of the function. You could split these out into seperate files if things grow too large, for example if I wanted to put my views in a different file it'd look like this:
+
+``` javascript
+var SomeMarionetteApp.View = (function(my, $, _, backbone, Marionette, bootstrap, common) {
+  my.HeaderView = Marionette.ItemView.extend{
+    el: "#header",
+    template: "#tmpl_header_view"
+  });
+
+  return my;
+}(SomeMarionetteApp || {}, $, _, Backbone, Marionette, common));
+```