First of all. Thanks a lot for the framework. This is gonna save me a hell of a lot of time.

I have tried to modify the heading.html file and added pathes and views for the router but nothing seems to change. I have tried to run it stand alone mode. Followed npm instructions. Tested on window(wamp) and osx(mamp) but can't seem to modify any template params. It seems to be calling the minified DesktopInit & MoblieInit files since this is the only place the output exists. Downloaded it twice to make sure it is not a glitch on my side. I then downloaded the lite version and it works as expected. Lite should suit my needs for now.

Thanks again.

You wrote under part 10 of doc

To view the Plato complexity report, go to http://localhost:8001/reports/

nodejs says

Cannot GET /reports/

so whats now ;D

Only downloaded und followed your guide step by step

Guys,

Is it possible to include this in the grunt ?

https://github.com/ehynds/grunt-remove-logging

Super easy to add and really convenient

Hi Greg,
You provide us with a bootstrap shim in the DesktopInit.js:
// Sets the configuration for your third party scripts that are not AMD compatible
shim: {

  // Twitter Bootstrap jQuery plugins
  "bootstrap": ["jquery"],

Does this mean I can write "var bootstrap = require('bootstrap')"? Then perhaps bootstrap.modal.show() ?

I know you are providing the framework and not the impl but I'm not sure how to use the shim that you provide.

Thanks for all your help,

Andrew

https://github.com/gfranko/Backbone-Require-Boilerplate/blob/4ca06eb274292ee182af7b4e85cb5dbffcd4aeb0/js/models/model.js#L3

Using self inside the methods isn't going to reference the appropriate instance—it will reference the last model to be instantiated. Which is probably undesirable for most people!

https://github.com/gfranko/Backbone-Require-Boilerplate/blob/dce4c37a0fc7fea9eb2ee37d68d84db1906e982e/js/views/view.js#L3

It looks like you were copying it from the view—which is a singleton—guaranteeing that there will only be a single instance.

Hi Greg,
In index.html you have:

     loadFiles(config, function() {  // line 53

          // After both the mobile css and Require.js are loaded, the css file used for both mobile and desktop is loaded
          loadFiles({

            // Loaded when not in production mode
            "dev-css": ["css/commonstyles.css"],    // Line 59

            // Loaded when in production mode
            "prod-css": ["css/commonstyles.min.css"]

          });

      });

I just want to make sure that I'm not missing something. The config object that was populated in the if statement
if((/iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile/).test(ua))
... else ...
and passed into the loadFiles function is NOT being used correct? If it is being used doesn't line 59 override it?

Thanks,

Andrew

There is no support for shortcut icons in the index.html

hi gfranko,

Thanks for this repo, I really like the way you structured everything, this is really helping me understand how to work with backbone / require etc...

I was trying to use the almond 'compiler' to minify my cocde, which seems to work but when I use the minified version instead of the dev version, I immediately get an error in my browser when I run the app.

Uncaught TypeError: Cannot call method 'push' of undefined mobile.min.js:1
I'm not sure where it originates from.

I do incorporate the Facebook js sdk and node's socket.io (client side lib) into my script.
Maybe those libs aren't suited for use with almond?

Would be great if maybe you have an idea or two on how to fix this, my project targets mobile, so size really does matter ;)

Thanks!
D

Hi Greg,
Thanks so much for explaining your project. It has shown me the "way". ;-) However, do you think that you could explain how bootstrap.js is created?

Looking at the file it is obvious that it is a concatenation of all the twitter-bootstrap plugins. That leaves me with questions like: "How do I update plugin X.90 with X.1.0" How can I use pam or some other module loader to make sure I am using the correct version?

Having all of the plugins concatednated in one file seems to fly in the face of AMD/require.js. I'm thinking that I may break them out into their own files so I can require them, unless of course if there is an easier way to do it.

Thanks again for all your help,

Andrew

Just wanted to give you a heads up that as Lo-Dash moves to its v1.0.0 (currently at v1.0.0-rc.3) you will want to use the prebuilt Underscore compat bulds (lodash.underscore.js and lodash.underscore.min.js) because Lo-Dash is implementing intuitive chaining via _(…) which is a breaking compat change with the current Underscore implementation.

Another difference in Lo-Dash v0.10.0+ is its _.extend and _.defaults follow the ES6 spec'ed Object.assign and iterate only own properties of given source objects.

Assuming I have amdclean 2.2.4, grunt-contrib-uglify .5.1 and uglify-js 2.4.15 , how can I get a source map to be generated via amdclean (or another step if necessary)?

I am a little confused how the gruntfile references uglify, i.e. where options could be placed to configure it:

      desktopJS: {
        options: {
          baseUrl: 'public/js/app',
...
          onModuleBundleComplete: amdcleanLogic,
          preserveLicenseComments: false,
          optimize: 'uglify',

I was not able to find documentation about configuring uglify settings that can lead to a source map generation in the amdclean repo. Still learning my way around grunt.

Hello!

I was wondering if there's any chance of providing a guide to make this wonderful template work in a CI environment like say Jenkins? Perhaps someone has already done something similar?

No biggie, but the jQM image paths are still pointing to /images in the minified version.

It would help when I try to include bootstrap-dependent packages via bower if "provides" included Bootstrap so that the package manager doesn't try to generate a vanilla bootstrap to satisfy dependencies.

I ran into the problem trying to install https://github.com/msurguy/ladda-bootstrap/blob/master/bower.json

Similar to this:

// lodash.js — component.json
{
  "name": "lodash",
  "version": "1.0.x",
  "main": "lodash.js",
  "provides": {
    "underscore": "1.4.x"
  }
}

Re: bower/bower#291
I'm pretty new to using Bower and Bootstrap but I think this would help. Thanks, the framework is great.

• Add the latest version of Backbone and remove the Backbone shim configurations
• Update to the latest version of AMDClean and update the AMDClean configuration inside of the Gruntfile
• Finally figure out how to integrate Jasmine tests that can be run with PhantomJS and reuse the same configuration file as the app. I should take another look at the work @betaselam did to integrate Karma and Istanbul #39
• Integrate automated test coverage reporting with Istanbul #39
• Integrate live reload support in the Gruntfile.
• Replace Require.js with Cajon so that both CommonJS and AMD modules can be loaded
• Integrate AMDClean v2.1 (AMDClean v2.1 needs to be released first) and the RequireJS optimizer cjsTranslate option to support both CommonJS and AMD modules
• Fix #41 - Make sure the Plato Reports are there
• Create a Yeoman Generator that can be used to set up Backbone-Require-Boilerplate. This will take the most work

Since I cannot do localhost.... is opening public/index.html the same as opening localhost:8001? The only item not loading for me is heading.html. Is it suppose to or would I need to add the code to view.js myself?

Thanks for re-uploading the video in HD so quickly.

Thanks.

Hi Greg,

It would be really awesome to optimize CSS also in this boilerplate into a single css file.

Regards
Vishal

Thanks for digging Lo-Dash, version 0.2.2 is out now:
https://github.com/bestiejs/lodash#v022

I'm not sure this is using r.js or not, but if it isn't please add it with howto in README

Hello, nice work ! I'm trying to set it up.

Just to let you know, I encountered this warning:
GET http://localhost/mc/public/css/images/ajax-loader.gif 404 (Not Found)

Valérian

Hi,

I am new to Backbone, Require, single page apps etc. but loving it!

If i replace the code in the template file with some simple code generated from the JQuery Mobile site (just a header & button) the code it doesn't seem to render correctly (none of the styles get applied)?

If I paste the same code directly into the index.html page it renders correctly though.

Now i have tried the same thing in another solution using underscore and it did render correctly from the template.

Seems like something isn't getting loaded in the correct order?
I just can't figure it out.

BTW I am forcing it to run as mobile in the index.html page and other mobile styles are being applied.

Cheers,
Ken

Not really sure what your thoughts are on this:

https://github.com/nickpack/Backbone-Require-Boilerplate-Lite

I noticed my colleagues spending some time removing bootstrap and jQuery UI but still using the boilerplate, so figured it makes sense to make a lightweight version without these. I am not convinced that removing jQuery mobile was that great an idea but figured as I am making it light I should remove it anyway.

Not sure how this is going to ride with you, but was thinking of maybe running this as a branch in the main repo and keeping releases in sync. I realise that this adds additional maintenance work to the project, but I am happy to strip newer releases back if I have the time.

Let me know your thoughts.

Hey I just tested out your Boilerplate and it is great. I just wanted to pass on a little info for those who want (or are forced like me) to test locally (without a web server) in IE or Chrome.
IE - just add this code (Tested in IE9):
if (navigator.appName == 'Microsoft Internet Explorer' && location.toString().indexOf('file')==0) {
alert('IE config');
window.XMLHttpRequest = function() {
try {
//this sets the HttpRequest to use different version which does allow local file access.
return new ActiveXObject('MSXML2.XMLHTTP.3.0');
}
catch (ex) {
return null;
}
}
}

and for Chrome make a shortcut to chrome with commanline args:
drive:\PathToChrome\Chrome.exe --allow-file-access-from-files

Hi,

I'm trying to use r.js for the first time but it gives me the followig error when I use it:

Error: Build file /path-to-app/public/js/app.build.js is malformed: SyntaxError: Unexpected token var
    at Function.createConfig (/work/www/justvite/public/js/r.js:14822:23)

I checked requirejs version and it's 2.1.1, same as r.js version. Is it possible that it is not compatible with these versions?

Thank you

Hi Greg,
Just got the latest and I like how you cleaned up the js/libs dir. Although I move the templates dir under views. But I digress, Are you going to add a package management system like grunt etc?

I'm using other libs you don't use, like marionette and I'm having problems keeping things in sync.

I was hoping a package manager would make things easier.

Thanks

Andrew

It try to find the jqm images under css folder.

Isn't one of the features of B-R-B loading modules dynamically?

If so, why is almond set up in the grunt file by default if we shouldn't use it for dynamic loading?

I thought dynamic loading was the default. How do I tell if modules are loaded dynamically? I thought if we used require.js/almond.js it was dynamic.

Thanks,

Andrew

I am new to npm. So, simply i have followed the steps you have mentioned in "Getting Started" topic in https://github.com/BoilerplateMVC/Backbone-Require-Boilerplate page.

At the step 6, on "npm install", i am getting the following error,

11578 silly gunzTarPerm extractEntry LICENSE.BSD
11579 silly gunzTarPerm modified mode [ 'LICENSE.BSD', 438, 420 ]
11580 silly gunzTarPerm extractEntry dist/lodash.compat.js
11581 silly gunzTarPerm modified mode [ 'dist/lodash.compat.js', 438, 420 ]
11582 silly gunzTarPerm extractEntry bin/r.js
11583 silly gunzTarPerm modified mode [ 'bin/r.js', 438, 420 ]
11584 silly gunzTarPerm extractEntry dist/lodash.compat.min.js
11585 silly gunzTarPerm modified mode [ 'dist/lodash.compat.min.js', 438, 420 ]
11586 error Error: ENOENT, lstat 'E:\Backbone-Require-Boilerplate-master\node_modules\karma-coverage\node_modules\istanbul\lib\report\text.js'
11587 error If you need help, you may report this entire log,
11587 error including the npm and node versions, at:
11587 error http://github.com/npm/npm/issues
11588 error System Windows_NT 6.1.7601
11589 error command "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "install"
11590 error cwd E:\Backbone-Require-Boilerplate-master
11591 error node -v v0.10.26
11592 error npm -v 1.4.3
11593 error path E:\Backbone-Require-Boilerplate-master\node_modules\karma-coverage\node_modules\istanbul\lib\report\text.js
11594 error fstream_path E:\Backbone-Require-Boilerplate-master\node_modules\karma-coverage\node_modules\istanbul\lib\report\text.js
11595 error fstream_type File
11596 error fstream_class FileWriter
11597 error code ENOENT
11598 error errno 34
11599 error fstream_stack C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\fstream\lib\writer.js:284:26
11599 error fstream_stack Object.oncomplete (fs.js:107:15)
11600 verbose exit [ 34, true ]

Can you please tell me, Why this issue comes and how to resolve this issue?

Just downloaded BRB today and it works great with one view as on the example.
I was wondering how to get it to work with multiple different modular views/templates like the example page (http://gregfranko.com/Backbone-Require-Boilerplate/). I saw the the wiki and the introduction video, but haven't been able to figure it out. I'm thinking that if multiple templates is supported, it might be nice to add it to the wiki. I appreciate any help. Thanks.

For example I can get the same view with the same template to work twice, such as:

Here is the code of client body (index.html):

  <div class="row-fluid">

    <div class="span3">

      <div class="example"></div>


    </div>
    <div class="span6">

      <div class="exampled2"></div>



    </div>
    <div class="span3">

      <div class="example"></div>



    </div>

  </div>

</div>


<footer class="footer navbar navbar-fixed-bottom" data-role="footer">
    <p>Written by <a href="https://github.com/gfranko" target="_blank">Greg Franko</a></p>
</footer><!-- /footer -->

function($, Backbone, Model, Model2, template, template2){

    var View = Backbone.View.extend({

        // The DOM Element associated with this view
        el: ".example",



        // View constructor
        initialize: function() {

            // Calls the view's render method
            this.render();

        },

        // View Event Handlers
        events: {

        },

        // Renders the view's template to the UI
        render: function() {

            // Setting the view's template property using the Underscore template method
            this.template = _.template(template, {});

            // Dynamically updates the UI with the view's template
            this.$el.html(this.template);

            // Maintains chainability
            return this;

        }

    });

    //Here is View 2

        // The DOM Element associated with this view
        el: ".example2",



        // View constructor
        initialize: function() {

            // Calls the view's render method
            this.render();

        },

        // View Event Handlers
        events: {

        },

        // Renders the view's template to the UI
        render: function() {

            // Setting the view's template property using the Underscore template method
            this.template2 = _.template(template2, {});

            // Dynamically updates the UI with the view's template
            this.$el.html(this.template2);

            // Maintains chainability
            return this;

        }

    });

    // Returns the View class
    return View;
    return View2;

}

Hi @gfranko ,
I cloned this repository and tried making a sample app (followed every step as mentioned). Few changes that I made was:

1. Moved the embedded script from index.html to main.js
2. Added 'MobileView' under views folder
3. The application worked fine, however when tried packaging the same using 'grunt' command I got this message at the end:
   // DesktopInit.js
   // --------------
   // Includes Desktop Specific JavaScript files here (or inside of your Desktop
   router)
   require(["jquery", "backbone", "routers/DesktopRouter", "jqueryui", "bootstrap", "backbone.validateAll"],
   function($, Backbone, DesktopRouter) {
   // Instantiates a new Desktop Router instance
   new DesktopRouter();
   }
   );
   define("desktop", function(){});
   }()); has no method 'substring'] }

Even after this, I tried to switch to the production version by setting 'production' var to true. But when opened the app in chrome, it threw an error(Uncaught ReferenceError: define is not defined).

I am on windows environment(Win 7 64-bit OS) and having below tools installed:

1. node (v 0.10.33)
2. grunt-cli v0.1.13, grunt v0.4.5

This revolves only around grunt packaging. Rest of the instruction and my sample app ran correctly.

Heya,

Just having a quick read through your JavaScript code and was a bit confused by why you're specifying dependencies unnecessarily (as far as I'm aware it's unnecessary).

For example, in both js/desktop.js and js/mobile.js you have something like...

require(['modernizr','jquery','backbone','routers/desktopRouter','bootstrap','backbone.validateAll'], function(Modernizr, $, Backbone, Desktop) {

    // Instantiates a new Router
    this.router = new Desktop();
});

...but you only utilise the routers/desktopRouter' dependency but you're specifying jQuery and Backbone. You're specifying both of those as dependencies within routers/desktopRouter' which is fine because that's exactly what they are, but it doesn't make sense to me to have them specified in the top level script file if they're not actually used in that require callback?

It's not an error as such, and doesn't make any real difference from a performance point of view as all dependencies are only ever loaded once by RequireJS, but just seemed like your code could be simplified if you left those dependencies out until actually needed.

Ps, on a side note (sorry if you would prefer this to be a separate issue but I assumed it would be easier to just quickly mention this here) - is there any reason for the mobile variation why you're not swapping out jQuery for ZeptoJs (which is better geared for mobile development). Again, what you've done isn't wrong as it depends on your requirements, but I know people have issue with loading something like jQuery on a mobile device when something smaller like ZeptoJs (which is supposed to be jQuery API compatible) could be used. But ZeptoJs only works on Android 2.2+ and iOS 4+ so that in itself might be a reason not to use it.

Hi Guys,

Love the boilerplate template but was wondering whether you could provide a build script without the use of almond ?

The problem is that almond.js doesnt support the usage of !async scripts which pretty much means Google maps is out.

Are you able to provide some way to manage this when using the GruntJS ?

I planned to use Backbone and requirejs for my new project.

You guys mentioned about nodejs server but what about other server languages like php?

Will this boilerplate works with php?

I am new to php, I will appreciate if you guys direct me to correct boilerplate.

It would be really great to add r.js to package.json.

I learnt about that here - http://www.youtube.com/watch?v=mC-geGmLQ6Q

Cheers
Vishal

This is an awesome project and I am totally using it. There are a few modifications I had to make so wanted to explore if there are better ways of doing these.

1. You can include require.js also in the final minfied version of the DesktopInit.min.js and MobileInit.min.js. That would reduce one more HTTP request.
2. I moved comonstyles.css to be added to my page after the bootstrap.css for desktop since I wanted to override some of the bootstrap css. Otherwise, commonstyles is overridden. I am not sure if there is a better way to do this but I guess quite a lot of others might have the same need
3. I am using Parse.com instead of Backbone (Parse JS SDK is based on Backbone) so I made some minor changes to support that too. If people here need that, I am happy to share changes.

Cheers
Vishal