tbranyen / backbone-boilerplate Goto Github PK

After looking over @rmurphey's project and seeing that she uses fetchTemplate and chains a then off it (which was breaking under a build) this should be updated to always return a deferred so that it will work in built files too.

WIth Backbone 0.9 you need Underscore 1.3.1 or better. The AMD branch currently has 1.3.0 which will cause subtle errors when using some underscore methods.

brought up by @wookiehangover should we rename assets to public?

Vote +/- 1 or thumbs up/down.

Just downloaded latest example and launched it. There is an error: index.js: Example is not defined.

At the moment, the debug server hits assets/css. As long as you aren't using a CSS transpiler, this is fine. If you're using LESS, for example, though, you might want to hit a compiled style.css in dist/debug/css during development. The downside of this would be a need for automatic recompilation.

One possible fix would be conditionally including the client-side less compiler via AMD somehow. But, doing that would require that you link to style.less in your index.html, and that would bork the release build (which provides a compiled/minified style.css).

Thoughts?

Update the jquery selector to be this:

a[href]:not([data-bypass])

Just being a bit more explicit here, the main reason right now is twitter's bootstrap alert module, utilizes an empty <a> tag. So being more explicit and compliant with the twitter bootstrap is just all good.

I think it might be cool to have a review of popular plugins

Similar to the last one, it would be nice to have an example of the 'recommended' way to override Backbone classes and methods (i.e. extend them to make new 'base classes' that can be used to instantiate actual object instances).

At the moment, I'm not using the namespace.module() method to create modules for these classes. If there's a nice way to do that, I'd love to see it.

I'm sorry if I missed it in the docs some place, but is there a forum set up for the boilerplate (i.e., google groups or yahoo groups)? I think it would be nice to have a place to ask questions and post comments outside of the issues list. I would think the issues list should be devoted just to bugs/features, but maybe I'm just not familiar enough with the github Zeitgeist.

Setting the host parameter to 0.0.0.0 allows node to bind to all available IP's and the site can be accessed from the network.

Here's the pull request:
iguana@3672bdd

The boilerplate conveniently has a placeholder for a namespace.

In the AMD branch it is currently implemented as a module and being included as a dependency for the rest of the modules.

There is nothing wrong with this approach but there is also another alternative worth looking into - exposing the namespace as a global object. An example for this scenario is Addy Osmani's backbone-mobile-search:

https://github.com/addyosmani/backbone-mobile-search

Any opinions on what approach would be better?

some thoughts on the view and fetchTemplate function:

I wrote up a ticket suggesting that you take the callback out as it didn't add any value... and just before submitting it, i noticed the use of fetchTemplate, which is potentially asynchronous.

I think part of why this confused me is that it's a non-standard use of render. I rarely see people changing the signature of render, and there's usually some additional framework or plugin that wraps the use of it, when they do.

i tried a few ideas to make this work without needing to modify the signature of render and i couldn't come up with anything. the asynchronous problem pretty much requires it, unless you're willing to lose encapsulation by moving the render logic out of the view - which is a really bad idea. :P

So, the callback makes sense knowing that - but it took a while for me to realize that. Can you clarify the use of the callback, either through better code commenting and other documentation (which i realize you said you're still working on)?

Just got started with this project today. I'm very satisfied with it so far. The source is very well documented and I'm finding that structuring my own app based on the Example module is rather straight forward.

One big point of confusion that I've noticed, however, is that the documentation here and in the Example page doesn't actually match the implementation of the code.

Couple of examples:
/app/main.js instead of /app/index.js
Structure of /app/main.js doesn't directly map to the documentation
The arguments being passed into /app/main.js aren't discussed directly anywhere I could find
The existence of app/namespace.js (Seems required but its not mentioned anywhere?)
What templating system is being used? Is it underscore's template? What would be the recommended way to replace it with something like Mustache?

Seems like some of these things were changed or added recently, so getting updated docs would be awesome.

So, how about i18n dynamic loader support?

I am trying to make the backbone boilerplate working and I get an error with the stream.js file.

When I execute : build>node server

I go to the url http://localhost:8000 and I get the error below:

stream.js:99
throw er; // Unhandled stream error in pipe.
^
Error: ENOENT, The operation completed successfully.
'./index.html'

My version of node is v0.5.7

I'd like to configure the templateSettings used by the build process in build/tasks/jst/jst.js (I prefer Mustache-style templates).

It looks I should be able to use "jst.templateSettings" in my build config, but this isn't working as I'd expect:

• if I use "jst.templateSettings" as a config key, it doesn't have an effect.
• if I add "templateSettings" as a key to the "jst" object, then Grunt dies because it thinks "templateSettings" is a filename.

Is this a bug, or am I using it wrong?

(Very helpful project, thanks!)

✔ Build Tool

• ✔ Minify CSS
• ✔ Compile templates to JST

✔ Bugs

There are a few bugs that currently exist

• ✔ Grunt is not in NPM (not necessary now)
• ✔ Zlib needs to be updated and added to NPM

Documentation!

Still need considerable amounts.  The code comments are great but...

• ✔ Describe how the hash/pushState snippet works
• ✔ How to use the build tool, this is gonna be tricky
  • ✔ How to run it
  • ✔ How to customize options
  • ✔ How to install and configure new tasks
• ✔ Development server
  • ✔ Using debug/release flags
• Information on how to bootstrap data into this application
  • There are lots of cool ways of doing this, I really like the idea of being able to load in state
• ✔ How to work with external templates... I'd say we stick with underscore templates out of the box
  • ✔ Write about the namespace.fetchTemplate function

Build tasks

Would like the follow tasks (build plugins):

• Require.js /via r.js
• Hem/Stitch (or something similar)
• SASS/LESS
• Mustache (hogan.js)/Handlebars
• Anything else?

Hi,

I was just trying to give this project a swirl, because I'm trying to figure out a clean way to bootstrap new projects. As a way to learn I'm cloning it into subfolder of an existing project to see how well it integrates.

If I launch the node.js server in that subfolder, it works great,
However, for some reason I get a clean,white page (no modifications done, except for changing the absolute paths in the index.html page to relative ones (added a dot in there). I don't get any 404's nor javascript errors, so something must be off, but I can't seem to figure out what.

Any help appreciated.
Koen

• Patterns for:
  • Defining modules
  • Bootstrapping data
  • HTML5 History API
  • External templates
• Build process that:
  • Combines libraries to single file
  • Combines application source to single file
  • Minifies all javascript and css
  • Compiles all templates to JST

the build folder should start fresh every time.

@iros got it stuck in my head that we need to get windows support here. the two offending modules are zlib.sync and glob. I can live without having the gzip output, so we can easily override that task. The way glob is being used allows it to be easily rewritten in pure js.

perhaps it would be best to maintain a separate fork of grunt assuming this won't get merged upstream?

Hi!

I want to remove all references in global instances in my app, so I'm using this in my config:

use: {      

underscore: {
    attach: "_"
},

backbone: {
    deps: ["use!underscore", "jquery"],
    attach: function(_, $) {

                    // This should work because Backbone should be already loaded.
                    // Commenting them does not help with the issue anyway.
        window._.noConflict();
        window.jQuery.noConflict(true);

        // Return Backbone object and remove it from global scope as well
        return window.Backbone.noConflict();
    }
}

this works perfectly during development, but fails in 'debug' (and 'release') versions. When using the 'debug' version I can see a 'Backbone is undefined' error in "app: _.extend({}, Backbone.Events)".

I was wondering if there is an example available on how to approach files that are served by the node server as part of an npm module (e.g. socket.io)? If it is single javascript file, then copying it into the client-side app's js/libs folder is not a big deal, but for something larger like socket.io-client, it seems messy to duplicate the files.

Is there a better way?

Currently the index.js includes the following comment:
// Defining the application router, you can attach sub routers here.
However there is no example how this "subrouting" should be done. For clarifying purposes the tutorial related routing could be done in Example.Router, if this is feasible.

Also I would think that it would be more beneficial to arrange all module specific stuff in a single directory, and all its related code in the same JavaScript file. This way if some module needs to be disabled, all that is needed to do is to delete one directory and comment one script including from index.html as well as to comment the module declaration from index.js. Or is there some good explanation why this is not a good idea.

Within the Event section of the Backbone documentation it says:

For example, to make a handy event dispatcher that can coordinate events among different areas of your application: var dispatcher = _.clone(Backbone.Events)

Would it make sense then to add a pub/sub wrapper for this within this.namespace? If there's general interest for this I can submit a pull request. As far as I'm concerned pubsub would be especially helpful in the AMD branch to reduce the number of required modules.

I'm new to Node, so this might be a common mistake. I followed the startup directions in your readme, but I couldn't get the server to start up:

bburton$ node build/server
Server listening on http://localhost:8000

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
Error: listen EADDRINUSE
    at errnoException (net.js:640:11)
    at Array.0 (net.js:741:26)
    at EventEmitter._tickCallback (node.js:192:40)

My environment is Node v.0.6.7 on Mac OSX 10.6.7.

Hi,

I have a general Router with routes like :

routes:{
            "": "index",
            "signup": "signup",
            "createposition/:query": "create",
            ":hash": "index"
        },

When I try to go to the url createposition/:query the url looks like : http://localhost:50633/createposition/0

I have a view rendered in the page :

Position.Views.Create = Backbone.View.extend({
        template: "app/templates/position/index.html",
        initialize: function () {
            this.render();
        },
        render: function (done) {
            var view = this;
            // Fetch the template, render it to the View element and call done.
            Fiilii.fetchTemplate(this.template, function (tmpl) {
                view.el.innerHTML = tmpl();

                done(view.el);
            });
        }
    });

When the app fetch the template, it fetch it with the url http://localhost:50633/createposition/app/templates/position/index.html instead of http://localhost:50633/app/templates/position/index.html

Do I have to change the fetch template method to take the full path or am I doing something wrong ?

I try to change the template path to template: "/app/templates/position/index.html" and I get the same error.

Maybe this is just me personally... but I don't like to see object definitions in the jQuery DOMReady function.

In this case, you're saying that the router can't be defined until the DOM is ready, but I don't see any code in the router that needs the DOM before a route is fired.

I'd move the router definition outside of the jQuery function. Possibly put it in the this.namespace object directly or hide it in another module somewhere else.

Chrome's cache is considerably broken when using the node server. I'm going to add a ?timestamp=<unix_timestamp> to every assets request.

what's the difference between the top level namespace and the individual models created within it?

what would i organize where, when using this as a starting point?

maybe it's just the small, "example" nature of the code here, but i don't see a clear distinction of what should go where at the moment.

would be awesome to have a server reload ability

build/config.js

watch: {
  tasks: "... reload"
}

and then the server comnd might look something like this

node build/server debug --reload

this would inject a websocket script into the page and whenever the watch command re-triggers it would hit the reload socket which would then refresh the page

Hi,

While testing my application, I've run into some small problems using the fetch template function.
If I pass no 'done' callback because I'm using the deferred, it throws an error that no done callback is defined.

Following modifications might help:

    fetchTemplate: function(path, done) {
      var JST = window.JST = window.JST || {};
      var def = new $.Deferred();

      // Should be an instant synchronous way of getting the template, if it
      // exists in the JST object.
      if (JST[path]) {
        if(done) {
            done(JST[path]);
        }

        return def.resolve(JST[path]);
      }

      // Fetch it asynchronously if not available from JST 
      $.get(path, function(contents) {
        JST[path] = _.template(contents);

        // Set the global JST cache and return the template
        if(done) {
            done(JST[path]);
        }

        // Resolve the template deferred
        def.resolve(JST[path]);
      }, "text");

      // Ensure a normalized return value (Promise)
      return def.promise();
    },

I'm wondering, is it possible to somehow load another module dynamically which wasn't compiled?

For example, if you want to change app's language/locale on-the-fly, or if it needs to load a special version of music player depending on browser's vendor, or something else.

As requested, here's my feedback and suggestions for the project:

• I would consider switching out QUnit as the default testing framework of choice in lieu of Jasmine. Whilst QUnit is great and is generally considered de facto when it comes to testing jQuery plugins, I've personally found that more Backbone developers use Jasmine. There's also a considerable amount of more documentation, tutorials and articles about using Jasmine/BDD to test both standard Backbone and RequireJS + BB apps and authors currently writing BB books (other than myself) seem to be opting for it as well. Having spoken to Irene, I know that BB is officially using QUnit for it's own unit tests, but as many of us agree they suck, I don't think we could consider it a good example we could point people at to make-up for the lack of tuts. In this light, I feel it would make more sense and as both QUnit and Jasmine can be easily swapped, perhaps it's not that big of a change to make.
• Have you given any thoughts to internationalization? I'm not sure whether this is something that you would like developers to think about more but it might be useful to provide some boilerplate code that demonstrates how to support i18n. Script loaders like Require.js certainly support this out of the box but maybe it would be of benefit to show people how to support it without? Would definitely help convince those with English as a second language to seriously consider using this.
• In the architectural/filesystem pattern being used, each block of models/views/collections are wrapped within individual modules which we're explicitly calling 'modules' . It's something which may have been discussed in the comments section of the original post by Tim and Irene, but there are developers who are used to either wrapping each view/model/collection into it's own 'module' using RequireJS and AMD whilst others are used to MVC being kept separate and 'modules' only being utility blocks which views etc. access. I think that (especially given the first) it might be of use to clarify how this boilerplate might sit in a RequireJS backed application - maybe even just on the wiki or somewhere else. Fwiw, in my discussions with some of the Yahoo/YUILibrary folk, they actually describe a module/view/collection block wrapped in this manner as a 'widget'. Soo much terminology, so many different meanings :)
• I see that Ben's grunt solution is currently being used as a part of the build process. I haven't had a chance to review it in great depth just yet, but perhaps it would be of benefit to document/discuss why grunt (or other parts of the build process) were opted for over other solutions. Just playing devil's advocate, some BB developers might wonder why they would want to use this over say something with r.js or based on Rake/Jake etc.
• With respect to #10, are you looking for something that allows you to automatically reload when files get changed? I took a very preliminary look into this for H5BP and I know that @mklabs has definitely done more work on this for a few projects. Might be worth reaching out to see if he might be able to help with this.
• Would it be useful at all for there to be an adjacent 'sample' project (say a Todo app or a multi-view gallery) which is based on Backbone Boilerplate? Looking at it from the perspective of a new developer, I would be interested in seeing how one might structure an application using these module blocks of MVC vs. what the common Backbone apps that come with the framework might do out of the box. It could just be me that feels this would be useful, but just thinking of what would help lower confusion.
• Regarding #6, do you mean Backbone plugins or build-process plugins? :) If you're referring to the former, I think it might be a challenge to find a common set of Backbone add-ons that are used for every project. It would however be useful to maintain a useful list of these in the wiki.

Hope some of this is of help :)

see #18

In the build for our app, I made it so that it copies the entire project - images, documents, stylesheets and all - over into the production directory, unless files are specified in config to be ignored (like readme, static API snapshots, other dev things etc.)

This enables me to scp the entire project in one go without having to move anything around.

Sure you can run the nodeJS server via node build/server debug and it will automatically pull the minified files from the /dist directory, but I don't imagine many people will use the nodeJS server in production, so that means they'll have to do some wrangling each and every time they build the project (which could be every time something is changed, if they're using the watcher)

This would work well as a config setting. Result is that after building, you know the entire application is ready to rock and/or upload in one go!

Also allows you to run build extensions or plugins on any other type of file in the project as part of it. Some people run scripts on their images - we definitely run optimisations on our underscore/HTML templates, add license blocks to all files, clean up unnecessary (inlined) dependencies, etc.

this will allow people using node already to easily get the latest boilerplate into their project

this is in no way required to use the boilerplate

Running a very simple setup gives:

Uncaught TypeError: Object [object Object] has no method 'module'

where [object Object] was defined as my this.namespace

could someone help me out with this?

I've followed the tutorial and, when arrived at the build phase I simply execute:
node build

from the project root and then the build process stops working and warns me:
Running "lint:files" (lint) task
<WARN> Object #<Object> has no method 'relative' Use --force to continue. </WARN>

I've no idea on what's happening. I also checked grunt github page and didn't find anything useful.

Any advice?

Thanks,
S.

Unless somebody else beats me to it.

I was wondering if there is a recommended way to integrate Handlebars, Underscore, etc. templates?

Most importantly, big thanks to @tbranyen as this boilerplate has gotten me past the tedious structuring and enjoying javascript again.

tasks are fragmented and currently master is running on an old version of grunt.

It would be nice to use h5bp/node-build-script in the future. (for now it is probably not ready)

It has: reving + usemin tasks
Server for production and staging.

dev branch is better for testing.

I think most of the current example tutorial belongs in the Wiki. What I'd really like is an interactive way to customize the boilerplate, kind of like a step-by-step approach.

Thoughts?

right now i'm just checking for relative vs absolute:

maybe something better would be using data-attrs

At least one task and __template.js test fail.errorcount. There's a simpler way to do this now, see the canonical uber-simple "basic" task.

grunt will now load tasks and ignore node_modules

the structure would look something like this:

tasks
       /subtask/node_modules
       /subtask/subtask.js

Need to write a script that will autoload these sub folders.

Example needs to be provided with more than just one page(view) and the rest redirects to the original view.

I've created a 2nd view and a template yet am having a nightmare of an issue with routing.

models
example.js
other.js

templates
example.html
other.html

  var Router = Backbone.Router.extend({
    routes: {
      "": "index",
      ":hash": "index",
      "other": "other"
    },

    index: function(hash) {
      var route = this;
      var tutorial = new Example.Views.Tutorial();

      // Attach the tutorial to the DOM
      tutorial.render(function(el) {
        $("#main").html(el);

        // Fix for hashes in pushState and hash fragment
        if (hash && !route._alreadyTriggered) {
          // Reset to home, pushState support automatically converts hashes
          Backbone.history.navigate("", false);

          // Trigger the default browser behavior
          location.hash = hash;

          // Set an internal flag to stop recursive looping
          route._alreadyTriggered = true;
        }
      });
    },
    other: function() {
      var other = new Example.Views.Other();

      // Attach the tutorial to the DOM
      other.render(function(el) {
        $("#main").html(el);

      });
    }
  });

Yet, what happens is. onclick page redirects to " /#other " then removes # leaving only " /other ". refreshing the page causes 404

I assume the standard namespace.module() mechanism is perfectly fine for creating modules that aren't meant to contain Backbone objects. That's what I'm using at the moment.

Might be nice to either have an example, or mention that this is OK / recommended in the docs.

http://eng.yammer.com/blog/2012/1/4/managing-nodejs-dependencies-and-deployments-at-yammer.html