├── .gitignore ├── Cakefile ├── README.markdown ├── docs └── docco.css ├── lib └── backbone_module.js └── src └── backbone_module.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /Cakefile: -------------------------------------------------------------------------------- 1 | fs = require("fs") 2 | path = require("path") 3 | {spawn, exec} = require("child_process") 4 | stdout = process.stdout 5 | 6 | # Use executables installed with npm bundle. 7 | process.env["PATH"] = "node_modules/.bin:#{process.env["PATH"]}" 8 | 9 | # ANSI Terminal Colors. 10 | bold = "\033[0;1m" 11 | red = "\033[0;31m" 12 | green = "\033[0;32m" 13 | reset = "\033[0m" 14 | 15 | # Log a message with a color. 16 | log = (message, color, explanation) -> 17 | console.log color + message + reset + ' ' + (explanation or '') 18 | 19 | # Handle error and kill the process. 20 | onerror = (err)-> 21 | if err 22 | process.stdout.write "#{red}#{err.stack}#{reset}\n" 23 | process.exit -1 24 | 25 | 26 | ## Building ## 27 | 28 | build = (callback)-> 29 | log "Compiling CoffeeScript to JavaScript ...", green 30 | exec "rm -rf lib && coffee -c -l -b -o lib src", (err, stdout)-> 31 | onerror err 32 | exec "coffee -c -l -b -o spec/lib spec", (err, stdout)-> 33 | onerror err 34 | task "build", "Compile CoffeeScript to JavaScript", -> build onerror 35 | 36 | task "watch", "Continously compile CoffeeScript to JavaScript", -> 37 | cmd = spawn("coffee", ["-cw", "-o", "lib", "src"]) 38 | cmd.stdout.on "data", (data)-> process.stdout.write green + data + reset 39 | cmd.on "error", onerror 40 | 41 | cmdTest = spawn("coffee", ["-cw", "-o", "spec/lib", "spec"]) 42 | cmdTest.stdout.on "data", (data)-> process.stdout.write green + data + reset 43 | cmdTest.on "error", onerror 44 | 45 | 46 | ## Documentation ## 47 | 48 | generateDocs = (callback)-> 49 | log "Generating documentation ...", green 50 | exec "rm -rf docs && docco src/*.coffee && mv docs/backbone-module.html docs/index.html", (err, stdout)-> 51 | onerror err 52 | 53 | task "doc", "Generate all documentation", -> generateDocs onerror 54 | 55 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Module - what is it good for? 2 | 3 | Backbone Module is a simple and elegant solution to load your in browser javascript dependencies. It leverages Backbone eventing and Underscore to bring even more goodness. 4 | 5 | First of all, it is not a script loader like require.js or a bunch of other libraries. I believe you are better off loading a single monolitic file in the browser and have it cached instead of loading them all by yourself (and doing the browser's job of optimizing the load). 6 | 7 | You might say: "Excuse me mister, but, if I may object, a dependency loader is useless in a monolitic file" and to that I will answer "You are right, if you want to bang your head against the wall everytime you want to refactor something". 8 | 9 | The truth is that you do not develop a web app in a single javascript file. You create multiple files (each with it's own scope), you assemble them and upload them to a CDN somewhere in the sky next to the moon. I use Jammit to do so in development. 10 | 11 | When you do that and do not think about anything, you will end up with loading exceptions in the browser. Oh! that file should load before this one, let's change the config. Oh! now it is this one. Back and forth and back and forth. No rapid development. 12 | 13 | The solution I use is simple. You wrap each file in a Backbone.module call and reference them using that same Backbone.module call. 14 | 15 | ((mod)-> 16 | #... my app code here 17 | mod.start = -> 18 | console.log "starting" 19 | (Backbone.module("app"))) 20 | 21 | Backbone.module("app").start() 22 | 23 | This is fine when you do not have any dependencies between your modules. When you have dependencies, you should use the define call: 24 | 25 | Backbone.module("core/models").define 26 | property: "Quote" 27 | depends: {"core/models" : "EventedModel"} 28 | , (mod)-> 29 | mod.Quote = mod.EventedModel.extend 30 | initialize: -> 31 | #... 32 | 33 | So that reads: for the "core/models" modules define a property called "Quote" that will depend on the property "EventedModel" of the "core/model" module. You can also define multiple depedencies from multiple modules. That is pretty all there is to it. 34 | 35 | My Backbone applications are usually built like that: 36 | 37 | * core 38 | * index.coffee (the main "core" module which references all sub module like "models") 39 | * helpers 40 | * models 41 | * routers 42 | * views 43 | * templates 44 | * project 45 | * index.coffee 46 | * routers 47 | * models 48 | * ... 49 | * quote 50 | * index.coffee 51 | * routers 52 | * models 53 | * ... 54 | * invoice 55 | * index.coffee 56 | * routers 57 | * models 58 | * ... 59 | 60 | My index.coffee looks like this 61 | 62 | ((core)-> 63 | 64 | _.extend core, 65 | views : core.module("core/views") 66 | models : core.module("core/models") 67 | helpers: core.module("core/helpers") 68 | routers: core.module("core/routers") 69 | 70 | )(Backbone.module("core")) 71 | 72 | Enjoy! 73 | 74 | 75 | 76 | # License (MIT) 77 | 78 | Copyright (c) 2011 Julien Guimont 79 | 80 | Permission is hereby granted, free of charge, to any person obtaining 81 | a copy of this software and associated documentation files (the 82 | "Software"), to deal in the Software without restriction, including 83 | without limitation the rights to use, copy, modify, merge, publish, 84 | distribute, sublicense, and/or sell copies of the Software, and to 85 | permit persons to whom the Software is furnished to do so, subject to 86 | the following conditions: 87 | 88 | The above copyright notice and this permission notice shall be 89 | included in all copies or substantial portions of the Software. 90 | 91 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 92 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 93 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 94 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 95 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 96 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 97 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /docs/docco.css: -------------------------------------------------------------------------------- 1 | /*--------------------- Layout and Typography ----------------------------*/ 2 | body { 3 | font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 4 | font-size: 15px; 5 | line-height: 22px; 6 | color: #252519; 7 | margin: 0; padding: 0; 8 | } 9 | a { 10 | color: #261a3b; 11 | } 12 | a:visited { 13 | color: #261a3b; 14 | } 15 | p { 16 | margin: 0 0 15px 0; 17 | } 18 | h1, h2, h3, h4, h5, h6 { 19 | margin: 0px 0 15px 0; 20 | } 21 | h1 { 22 | margin-top: 40px; 23 | } 24 | #container { 25 | position: relative; 26 | } 27 | #background { 28 | position: fixed; 29 | top: 0; left: 525px; right: 0; bottom: 0; 30 | background: #f5f5ff; 31 | border-left: 1px solid #e5e5ee; 32 | z-index: -1; 33 | } 34 | #jump_to, #jump_page { 35 | background: white; 36 | -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; 37 | -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; 38 | font: 10px Arial; 39 | text-transform: uppercase; 40 | cursor: pointer; 41 | text-align: right; 42 | } 43 | #jump_to, #jump_wrapper { 44 | position: fixed; 45 | right: 0; top: 0; 46 | padding: 5px 10px; 47 | } 48 | #jump_wrapper { 49 | padding: 0; 50 | display: none; 51 | } 52 | #jump_to:hover #jump_wrapper { 53 | display: block; 54 | } 55 | #jump_page { 56 | padding: 5px 0 3px; 57 | margin: 0 0 25px 25px; 58 | } 59 | #jump_page .source { 60 | display: block; 61 | padding: 5px 10px; 62 | text-decoration: none; 63 | border-top: 1px solid #eee; 64 | } 65 | #jump_page .source:hover { 66 | background: #f5f5ff; 67 | } 68 | #jump_page .source:first-child { 69 | } 70 | table td { 71 | border: 0; 72 | outline: 0; 73 | } 74 | td.docs, th.docs { 75 | max-width: 450px; 76 | min-width: 450px; 77 | min-height: 5px; 78 | padding: 10px 25px 1px 50px; 79 | overflow-x: hidden; 80 | vertical-align: top; 81 | text-align: left; 82 | } 83 | .docs pre { 84 | margin: 15px 0 15px; 85 | padding-left: 15px; 86 | } 87 | .docs p tt, .docs p code { 88 | background: #f8f8ff; 89 | border: 1px solid #dedede; 90 | font-size: 12px; 91 | padding: 0 0.2em; 92 | } 93 | .pilwrap { 94 | position: relative; 95 | } 96 | .pilcrow { 97 | font: 12px Arial; 98 | text-decoration: none; 99 | color: #454545; 100 | position: absolute; 101 | top: 3px; left: -20px; 102 | padding: 1px 2px; 103 | opacity: 0; 104 | -webkit-transition: opacity 0.2s linear; 105 | } 106 | td.docs:hover .pilcrow { 107 | opacity: 1; 108 | } 109 | td.code, th.code { 110 | padding: 14px 15px 16px 25px; 111 | width: 100%; 112 | vertical-align: top; 113 | background: #f5f5ff; 114 | border-left: 1px solid #e5e5ee; 115 | } 116 | pre, tt, code { 117 | font-size: 12px; line-height: 18px; 118 | font-family: Monaco, Consolas, "Lucida Console", monospace; 119 | margin: 0; padding: 0; 120 | } 121 | 122 | 123 | /*---------------------- Syntax Highlighting -----------------------------*/ 124 | td.linenos { background-color: #f0f0f0; padding-right: 10px; } 125 | span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; } 126 | body .hll { background-color: #ffffcc } 127 | body .c { color: #408080; font-style: italic } /* Comment */ 128 | body .err { border: 1px solid #FF0000 } /* Error */ 129 | body .k { color: #954121 } /* Keyword */ 130 | body .o { color: #666666 } /* Operator */ 131 | body .cm { color: #408080; font-style: italic } /* Comment.Multiline */ 132 | body .cp { color: #BC7A00 } /* Comment.Preproc */ 133 | body .c1 { color: #408080; font-style: italic } /* Comment.Single */ 134 | body .cs { color: #408080; font-style: italic } /* Comment.Special */ 135 | body .gd { color: #A00000 } /* Generic.Deleted */ 136 | body .ge { font-style: italic } /* Generic.Emph */ 137 | body .gr { color: #FF0000 } /* Generic.Error */ 138 | body .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 139 | body .gi { color: #00A000 } /* Generic.Inserted */ 140 | body .go { color: #808080 } /* Generic.Output */ 141 | body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ 142 | body .gs { font-weight: bold } /* Generic.Strong */ 143 | body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 144 | body .gt { color: #0040D0 } /* Generic.Traceback */ 145 | body .kc { color: #954121 } /* Keyword.Constant */ 146 | body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */ 147 | body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */ 148 | body .kp { color: #954121 } /* Keyword.Pseudo */ 149 | body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */ 150 | body .kt { color: #B00040 } /* Keyword.Type */ 151 | body .m { color: #666666 } /* Literal.Number */ 152 | body .s { color: #219161 } /* Literal.String */ 153 | body .na { color: #7D9029 } /* Name.Attribute */ 154 | body .nb { color: #954121 } /* Name.Builtin */ 155 | body .nc { color: #0000FF; font-weight: bold } /* Name.Class */ 156 | body .no { color: #880000 } /* Name.Constant */ 157 | body .nd { color: #AA22FF } /* Name.Decorator */ 158 | body .ni { color: #999999; font-weight: bold } /* Name.Entity */ 159 | body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ 160 | body .nf { color: #0000FF } /* Name.Function */ 161 | body .nl { color: #A0A000 } /* Name.Label */ 162 | body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ 163 | body .nt { color: #954121; font-weight: bold } /* Name.Tag */ 164 | body .nv { color: #19469D } /* Name.Variable */ 165 | body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ 166 | body .w { color: #bbbbbb } /* Text.Whitespace */ 167 | body .mf { color: #666666 } /* Literal.Number.Float */ 168 | body .mh { color: #666666 } /* Literal.Number.Hex */ 169 | body .mi { color: #666666 } /* Literal.Number.Integer */ 170 | body .mo { color: #666666 } /* Literal.Number.Oct */ 171 | body .sb { color: #219161 } /* Literal.String.Backtick */ 172 | body .sc { color: #219161 } /* Literal.String.Char */ 173 | body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */ 174 | body .s2 { color: #219161 } /* Literal.String.Double */ 175 | body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ 176 | body .sh { color: #219161 } /* Literal.String.Heredoc */ 177 | body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ 178 | body .sx { color: #954121 } /* Literal.String.Other */ 179 | body .sr { color: #BB6688 } /* Literal.String.Regex */ 180 | body .s1 { color: #219161 } /* Literal.String.Single */ 181 | body .ss { color: #19469D } /* Literal.String.Symbol */ 182 | body .bp { color: #954121 } /* Name.Builtin.Pseudo */ 183 | body .vc { color: #19469D } /* Name.Variable.Class */ 184 | body .vg { color: #19469D } /* Name.Variable.Global */ 185 | body .vi { color: #19469D } /* Name.Variable.Instance */ 186 | body .il { color: #666666 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /lib/backbone_module.js: -------------------------------------------------------------------------------- 1 | Backbone.module = (function() { 2 | var modules; 3 | modules = {}; 4 | return function(name) { 5 | var define; 6 | if (modules[name]) { 7 | return modules[name]; 8 | } else { 9 | define = function(options, callback) { 10 | var fire; 11 | fire = function() { 12 | if (options.bare) { 13 | callback(Backbone.module(name)); 14 | } else { 15 | Backbone.module(name)[options.property] = callback(Backbone.module(name)); 16 | } 17 | return Backbone.module(name).trigger("dep:" + options.property, options.property); 18 | }; 19 | if (options.depends) { 20 | return (function(dependencies) { 21 | var mod, prop, props, satisfy, _results; 22 | _results = []; 23 | for (mod in dependencies) { 24 | props = dependencies[mod]; 25 | if (!_.isArray(props)) { 26 | dependencies[mod] = props = [props]; 27 | } 28 | satisfy = function(property) { 29 | dependencies[mod] = _.without(dependencies[mod], property); 30 | if (dependencies[mod].length === 0) { 31 | delete dependencies[mod]; 32 | } 33 | if (_.keys(dependencies).length === 0) { 34 | return fire(); 35 | } 36 | }; 37 | _results.push((function() { 38 | var _i, _len, _results2; 39 | _results2 = []; 40 | for (_i = 0, _len = props.length; _i < _len; _i++) { 41 | prop = props[_i]; 42 | _results2.push(!_.isUndefined(Backbone.module(mod)[prop]) ? satisfy(prop) : Backbone.module(mod).bind("dep:" + prop, satisfy)); 43 | } 44 | return _results2; 45 | })()); 46 | } 47 | return _results; 48 | })(options.depends); 49 | } else { 50 | return fire(); 51 | } 52 | }; 53 | modules[name] = { 54 | module: Backbone.module, 55 | define: define 56 | }; 57 | _.extend(modules[name], Backbone.Events); 58 | return modules[name]; 59 | } 60 | }; 61 | })(); -------------------------------------------------------------------------------- /src/backbone_module.coffee: -------------------------------------------------------------------------------- 1 | 2 | # 3 | # Backbone.module memoize the module to be loaded so the order you 4 | # load those module is not important(as long as you do not execute). 5 | # To define a dependency (on another module property), you can use the 6 | # module's define function. 7 | # 8 | Backbone.module = (() -> 9 | # Internal module cache. 10 | modules = {}; 11 | 12 | # Create a new module reference scaffold or load an existing module. 13 | (name)-> 14 | if modules[name] 15 | modules[name] 16 | else 17 | #define is used to define properties within a module 18 | # properties can have dependencies. Define resolves them. 19 | define = (options, callback)-> 20 | 21 | fire = ()-> 22 | # fire the callback 23 | if options.bare 24 | callback(Backbone.module(name)) 25 | else 26 | Backbone.module(name)[options.property] = callback(Backbone.module(name)) 27 | # fire the event 28 | Backbone.module(name).trigger "dep:#{options.property}", options.property 29 | 30 | if options.depends 31 | # closure to deal with dependencies 32 | ((dependencies)-> 33 | for mod, props of dependencies 34 | # properties must always be an array 35 | # convert it if otherwise 36 | dependencies[mod] = props = [props] unless _.isArray(props) 37 | 38 | # called when a dependency is satisfied 39 | satisfy = (property)-> 40 | dependencies[mod] = _.without dependencies[mod], property 41 | 42 | # when there are no other dependencies, fire away 43 | if dependencies[mod].length is 0 44 | delete dependencies[mod] 45 | 46 | fire() if _.keys(dependencies).length is 0 47 | 48 | for prop in props 49 | unless _.isUndefined Backbone.module(mod)[prop] 50 | # it is defined! 51 | satisfy(prop) 52 | else 53 | # listen for any loading of the different dependencies 54 | Backbone.module(mod).bind "dep:#{prop}", satisfy 55 | )(options.depends) 56 | else 57 | fire() 58 | 59 | modules[name] = {module: Backbone.module, define: define} 60 | _.extend(modules[name], Backbone.Events) 61 | modules[name] 62 | )() --------------------------------------------------------------------------------