Wishlist

[addyosmani]

Items I or others would like covered:

• Full tutorials for the practical section of the book. Code for both are currently available, but the dialog needs to be written around them
• More about RESTful applications with Backbone. Lots of posts on this but not enough covering modern stacks (Node/Express/MongoDB etc)
• Backbone Layout manager. How does this fit in? Where can it be useful?

Feel free to add more to this list in the comments :)

[aaronmcadam]

Excellent first draft Addy!

Some things:

• I think looking at Chris Strom's (co-author of http://recipeswithbackbone.com/) blog chain on his experience with Backbone is very insightful: http://japhr.blogspot.com/2011/12/installing-my-funky-calendar-backbonejs.html
• Jasmine examples (also tips on testing decoupled code)
• Advice on non-Single page apps: I'm using it for a django powered site (as well as a django powered jqmobile app) and the benefits are huge for app structure, but is Backbone even meant to be used for that sort of thing?
• Some of the references to blog posts need linking, e.g. the Rebecca Murphey post on Object Literals

[addyosmani]

Hey @aaronmcadam!,

I wasn't aware of Chris Storm's book but reviewing the index, he certainly seems to have covered some interesting relevant topics. I'll see if some of them can be distilled down into tasks/topics I can work on.

I 100% agree with having a section discussing unit testing with Jasmine and Backbone. This three parter seems to have done a great job of it and could serve as some inspiration http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html.

In terms of Backbone with non-single page apps, I haven't had a huge amount of personal experience outside of using it for SPAs (albeit those with a large number of Views), but if you or someone else would like to document your experience with some tips, that would be really amazing. Although the current form of this book is a markdown file, it's going to have it's own site with a list of contributors once the content has been stabilized a little more.

Also correct on the last point - I've actually got all of the posts linked in another version of this work somewhere, but I'll update to reflect whats missing.

Btw, thank you for the PR!. I personally prefer single quotes too so it should be good for a merge. Github is currently not allowing me to view the PR page fully (maintenance?) but I'll include it either today or tomorrow.

Cheers for your interest! Addy

[johnnygreen]

View and Model inheritance https://gist.github.com/1271041

Cleaning up views properly http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Maybe a few hints about using the collection view to delegate events to subviews vs binding events to each model's view

[addyosmani]

@johnnygreen the model/view inheritance topic is pretty hot :) I would be interested to hear what others think of your proposed solution. I ran into some issues where this type of work would definitely have saved some time today.

As for the zombie transitions topic, I would definitely like to cover that at some point. I have yet to run into a multi-view BB application that hasn't experienced some variation of it so far.

[aaronmcadam]

Backbone Relational (for Model relationships): https://github.com/PaulUithol/Backbone-relational

Follow along with the blog chain here: http://japhr.blogspot.com/2011/11/backbone-relational.html

[led]

Excellent document! Would be interested in discussion of state-machine/state-chart usage too. I tend to have a model for my data, plus another model to maintain state (e.g. UI etc).

[addyosmani]

@aaronmcadam Do you think it would make sense to add Backbone Relational into a new 'Additional Resources' section/chapter? I'm trying to think about how or where some of the useful extensions to Backbone should be positioned.

[Proful]

@addyosmani just would like to thank you... for this awesome tutorial :)

[addyosmani]

@butu5 you're very welcome :)

[aaronmcadam]

@addyosmani Yeah, we should definitely separate out the ecosystem building around Backbone. I've got an example of inter-view communication using @phiggins42's jquery.pubsub.js and some notes on non-SPAs to add as well

[addyosmani]

@aaronmcadam Excellent. I'd like to formalize the structure to the ToC this weekend so it's a little more clear where we can slot new sections in (especially resources as we appear to have quite a few worth mentioning).

A PR was just made to make the entire markdown file bookmarkable so I think this weekend wouldn't be a bad time to get at least the index solid.

[burin]

@addyosmani , @aaronmcadam

Wanted to start off by thanking you for taking the time to put all this together! It's great :)

re: unit testing with Jasmine,

I find that removing as much friction as possible in the process of getting a project set up and a testing environment really encourages us to write tests (or maybe gives us less of an excuse to ignore them :) )

For that reason, my fork of Ben Nolan's capt creates Jasmine specs each time you use a generator, and adds that spec as a dependency in the spec runner's spec.js.

The original project is CoffeeScript centric, and doesn't have anything like require.js included, but it was a great base to work from. I've added JavaScript generator templates, my own project directory structure and naming conventions, as well as use require.js to tie everything together. The spec runner also uses require.js and I think it makes it super easy to write tests for your code.

I'd be interested in seeing more usage of jasmine + backbone + require.js, since they all work together so well. Not sure if there have been any write ups that we could link to yet.

https://github.com/burin/capt

[aaronmcadam]

@burin I keep mentioning this blog chain, but this post covers jasmine and require: http://japhr.blogspot.com/2011/12/jasmine-server-and-backbonejs-requirejs.html. Check out the demo app: http://japhr.blogspot.com/2011/12/installing-my-funky-calendar-backbonejs.html

@addyosmani Chris Strom's post on Phantom.js is cool (http://japhr.blogspot.com/2011/12/phantomjs-and-backbonejs-and-requirejs.html), headless testing would be cool to look at, do you know if it's possible to integrate tools like Phantom.js with Jenkins CI?

[burin]

@aaronmcadam oh nice! thanks for the tip

Here's an example of the application that's generated with my fork of capt using the following commands, which uses a similar set up for Jasmine:

capt new capt-generated-example

cd capt-generated-example

capt generate model animal

capt generate collection animal

https://github.com/burin/capt-generated-example

[addyosmani]

Moving from issue 13:

It would be great to see a section on wrapping 3rd party javascript libraries that are not AMD compatible.

[addyosmani]

Not sure whether to cover this or not. Should the book explain the main differences between Backbone and other frameworks? e.g

http://www.quora.com/What-are-the-key-differences-between-Ember-js-formerly-SproutCore-2-0-and-Backbone-js http://www.quora.com/How-can-I-decided-whether-to-choose-YUI-3s-MVC-or-Backbone-for-a-new-project

[Proful]

I feel this this can be another file, that would be better. Once new user come to backbone, assuming that they did some preliminary analysis of the subject and decided to go after backbone.

[RajivKurian]

Would love to see more examples on how to use backbone with long-polling, web-sockets etc. Most current examples assume a RESTful api.

[floody]

I would like to see a file uploading example, can we add this to the wishlist?

[rachid]

Hi, I think it would be great having the choice between coffee script or plain javascript in examples, I love javascript but I think using coffeescript would make it less fluffy.

[addyosmani]

@RajivKurian I think a section or practical that covers how to hook Backbone up to Node/web sockets/etc is definitely going to be in the pipeline. I initially started looking at this last night, but I'm trying to nail down exactly what stack to cover. Perhaps an all-in-one with Node/Express/socket.io/mongodb might be useful?

@floody when you say a file uploading example, can you expand on what you mean? If it's really just a case of pushing data back to a server of some sort, whether to be stored locally or in a database, I'd almost rather do something more generic as the above.

@rachid I appreciate that some developers do like using CS, but I'll need to think about how best (if we opt for this) it should be integrated with the rest of the book. I'm not too fond of the idea of making people scroll through two sets of the same example (JS/CS), but perhaps this is something that could be maintained in a branch so people could choose which flavour they wanted to use.

[mariusa]

Thanks a lot for this tutorial Addy!

My complete newbie wish is to make it usable for newbies. For example, I've run the code in the Models, changed it etc and it all works (cool!). However, I cannot do the same with the Views section, as it keeps explaining stuff without allowing me to try it out. Would you please add some fully working example code to it? (whatever is needed to see that magic.jpg Photo in my browser rendered, before going on to Fetching from server or routers). Thanks again!

[addyosmani]

@mariusa no worries!

I think what would make sense to address this is creating a (complete) application that consists of the models, views / samples etc mentioned in the basics section so readers could then play around with it. Given that the advanced sections have their own practical, it does make sense to have one for the basics section too. Adding to the todo list.

[addyosmani]

@mariusa @aaronmcadam Given that the rest of the book (the advanced section etc) use the Todo application as a base for extension, do you think it makes sense to switch the examples in the Basics section of the book over to what the basic Backbone Todo app does for its models/views etc at the moment?. Just thinking out loud :)

[mariusa]

Sure it does! As long as there are separate source folders for each part, e.g. have a part1 folder with just the Todo code required for Model and Views section, not all of it :) Another part would have the same, but using routers and so on. And the final part would be with everything, already present at https://github.com/addyosmani/todomvc

[addyosmani]

@mariusa I like it! We should go for it.

[mariusa]

PS: thanks for your time on helping us getting Backbone :) and getting to being able to develop our own small app with REST services.

[addyosmani]

my pleasure!

[mariusa]

If you build working part1 and so on folders, I'll be able to update the tutorial :D

[magicienap]

I think that could be cool if the tutorial had a section about integrating Backbone with Rails, Django, Node, etc.

[RajivKurian]

@addyosmani The socket.io/express/mongoDB example would be really great. In general any advice on how to handle non-RESTful apis or modifications on the standard examples would be very helpful. For example how do we build a caching layer (maybe using local storage) and try and hit that when a client requests a resource which is not in memory. If there is a miss, then we fetch results over the network, update the cache and the cache serves the resource to our backbone model/collection.

Again thank you for the great work. I am sure this is useful to a lot of people especially the ones who finish the todo example and face hurdles when trying something that requires even minor customization of backbone.

[addyosmani]

@RajivKurian No problem at all!. I'll definitely look through that example and I agree that providing extended work beyond the first todo app makes sense giving we're working in that direction at the moment.

@magicienap I honestly wouldn't mind covering something beyond Node.js + Express, but tbh, I don't know if I'll have the time personally to create versions backed by Rails and Django etc. Perhaps there would be some benefit to asking the community if anyone/people want to work on those variations which we can then at least link to as boilerplates we can write tutorials for in the future.

[floody]

@addyosmani Currently I working on a photo album app with backbone and nodejs. I want to upload images to the server but I didn't found any working examples for file uploading with Model.save method.

[esamattis]

@addyosmani

Patterns for handling nested views.

Sometimes I want to show a certain View inside of a Lightbox View and some times in a some other view. How to pass Subviews to Parent View? How parent View should the render Subviews?

[tbranyen]

@epeli thats exactly what layoutmanager solves. that's the third item in the list

[addyosmani]

@epeli As @tbranyen mentioned his Backbone.layoutmanager solves this problem quite elegantly and it's relatively high up on the priority list.

Item 2 is being covered this week so I'm hopeful either he or I will be able to do a writeup on the layoutmanager some time over the next few weeks :)

[fadzril]

A very nice wishlist. You guys really nail it. Hopefully, this fundamental will be user-centric resource for Backbonejs

@addyosmani thanks for make this thing happen!

[Ametista]

Excellent writing as always, Addy. :) I'd love to see a section covering the integration of Backbonejs with Neo4j. I'm desperately trying to build something in time for the new year (ha ha, I know) using the two and am finding the model to database link to be the hardest concept to grasp.

[vicrau]

How would you approach a master/detail view with backbone? Views are data-driven, but it would be overkill to create a collection for just one view, right? Just doubting about the best practice here.

and btw @addyosmani ... thanks! :-)

[addyosmani]

@vicrau (and everyone else that's mentioned), you're very welcome. We're going to take a look through the wishlist in a week or two and decide what should get covered next. I appreciate all of your input!

[addyosmani]

Adding to the wishlist: https://github.com/addyosmani/backbone-fundamentals/issues/23

[webrails]

First, thanks for your great work. It's awesome.

I'd like to know something about internationalisation of Backbone apps. There's a I18n plugin included in Require.js. But I'm not quite sure, if there is something like a "string-replacement engine" for parameterized keys. Is there a Backbone way to handle internationalisation? Thanks a lot!

[sewpafly]

What do you think about testing with AMD code? It seems that you spend a lot of time extolling the virtues of both, but they appear (at least first) mutually incompatible. Adding a section to bridge that gap might help.

A page that helped me was: http://blog.pixelingene.com/2011/12/simple-helper-method-for-async-testing-with-jasmine/

[addyosmani]

+1 @sewpafly. I would love to cover Jasmine testing using AMD+RequireJS. I think I'll try covering that sometime in the next week or two. Cheers for the reference to the pixelingene post!

[webrails]

@sewpafly @addyosmani: +1. I'm currently trying to setup a testing environment with Require.js, Jasmine and the JsTestDriver.

[tnyuan]

Would love to see more tutorials for jasmine + backbone + require.js, especially for continuous integration (e.g. integrate with hudson or bamboo)

[mariusa]

Would be great to add a section on events, including working with custom events with data from one part of the app to another. Is a 'global' event aggregator the best practice? How come inside functions called because they were binded to events "this" refers to the event, instead of the rest of the object (e.g. view variables) ? How can one still access the rest of the view from an event callback?

[RajivKurian]

@mariusa The _bindAll might help with that.

for eg: var someView = Backbone.View.extend({ initialize : function(options) { this.vent = options.vent; // event aggregator _bindaAll(this, 'onSomeCustomEvent'); options.vent.bind("someCustomEvent", this.onSomeCustomEvent); this.foo = "bar"; // a view variable } onSomeCustomEvent : function() { alert(this.foo); // bar
} });

[hotKarateLaysDownThaTreats]

Any thoughts on a section for collection reading? I'm personally looking for some guidance on chaining methods to retrieve data. Ex: collection.where({myval:'example}).pick('prop1','prop2'); Also, I'm wondering about the use of non-string values as property values in the where() method? I'd definitely buy a book that answered these sorts of questions...

[raDiesle]

The best explanation and clean idea of using backbone practical is e.g. this page:

http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/

It's less theoretical blabla, but more helpful allround must-have features. - We should extract some parts/ideas