Skip to content
This repository

Wishlist #3

Closed
addyosmani opened this Issue December 21, 2011 · 63 comments
Addy Osmani
Owner

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 :)

Aaron Mc Adam

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

Addy Osmani
Owner

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

Johnny Green

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

Addy Osmani
Owner

@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.

Aaron Mc Adam

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).

Addy Osmani
Owner

@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.

Butu

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

Addy Osmani
Owner

@butu5 you're very welcome :)

Aaron Mc Adam

@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

Addy Osmani
Owner

@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 Asavesna

@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

Aaron Mc Adam

@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 Asavesna

@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

Addy Osmani
Owner

Moving from issue 13:

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

Butu

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.

Addy Osmani
Owner

@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.

Marius Andreiana

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!

Addy Osmani
Owner

@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.

Addy Osmani
Owner

@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 :)

Marius Andreiana

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

Addy Osmani
Owner

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

Marius Andreiana

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

Addy Osmani
Owner

my pleasure!

Marius Andreiana

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

Antoine Proulx

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.

Addy Osmani
Owner

@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.

Esa-Matti Suuronen

@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?

Tim Branyen

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

Addy Osmani
Owner

@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 Muhamad

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.

Vic Rau

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! :-)

Addy Osmani
Owner

@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!

Addy Osmani
Owner

Adding to the wishlist: #23

Marc Bungart

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!

Brent

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/

Addy Osmani
Owner

+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!

Marc Bungart

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

Tian

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

Marius Andreiana

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

}
});

Awesome hotsauce

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...

David Amend

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

Robert Djurasaj

First of all great job on Backbone book Addy!!! it's quite refreshing and easy to read.
I would like to see sectionn about Backbone and OAuth integration, if possible.

Or to be more general, authorization and authentication implementation from scratch or best practices.

Robert Djurasaj

Oh, I almost forgot to say: keep up the good work!

Robert Djurasaj

Another req... Maybe using Yeoman in action with Backbone :)

Aaron Mc Adam

@robertd what's Yeoman?

Robert Djurasaj
Aaron Mc Adam

@robertd looks ace!

Addy Osmani
Owner

@robertd We'll see what we can do about that ; )

Addy Osmani
Owner

Hey all,

I've finally finished all the work on my patterns book and have returned my attention to
working on this Backbone.js book. In the past week I've made additions in the form of

  • a new chapter on Backbone Boilerplate and Grunt BBB
  • a new chapter with common problems and solutions (nested views and models, inheritance, memory management)
  • updated to the pagination section

http://addyosmani.github.com/backbone-fundamentals/

I've also written up a chapter on building your first Todo app with Backbone, which
includes the latest work I've done on it in TodoMVC (I'll be adding that this week).

At this point, my own thoughts on what need to be done with the book are:

1) internals section needs to have examples re-written to lead up to the Todo app, also more
code examples where possible
2) modular development section needs to be cleaned up
3) need to figure out whether to drop the Restful apps section or clean it up too.

Prior to these additions, the feedback on the book from reviewers was that it didn't cover enough
about Backbone and seemed to focus more on the Restful side of things. I'm working hard to fix this.

I could really use your input on what you feel the book still needs.

  • Do you want a better internals section and if so, what would you like improved specifically?
  • Is the common problems and solutions section what you felt was missing before? I remember people asking about things like chaining collections and I could cover those types of topics in that section if you feel they are useful.
  • Do you want the RESTful section to stay? I originally noticed that there were a lack of tutorials about these things online, but the feedback on the early edition of the book via O'Reilly seems to indicate people want less of this.
  • Do you want the mobile section to stay or go?

I'm considering adding a section on Backbone.js plugins which will at a high-level cover Marionette, Aura and so on. Derick Bailey is writing a Backbone plugins book which will likely cover his plugins and maybe some others in greater detail so I don't really want to duplicate topics there where possible.

If there are specific Backbone topics or existing tutorials you feel represent topics that you'd like covered, please feel free to let me know.

I'd greatly appreciate it :)

David Amend
  1. ineritance and basic techniques to achieve cleaner code with backbone ( or how to implement patterns in backbone)
  2. see 1.
  3. + less 4. If the mobile section stays, I'm working on a todomvc bbb jquery mobile project to include in backbone fundamentals. See https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template I could also support with grunt + backbone boilerplate

Thanks Addy!

Andrea de Ruvo

Hello all,
wonderful job!

Could you talk about the best techniques, libraries, patterns to emulate sessions with a RESTFul/RESTsomething architecture?
It would be interesting to know your ideas to implement an Authentication and Authorization protocol and data encryption over http.

Congratulations again for the good work, keep it up!

ludohenin

something about how to handle sub-routes (in a clean way) ?

Addy Osmani
Owner

We've nailed down what we want the final index/book content to be for this edition. I'll be posting more content and updating the project over the next few weeks with this.

Addy Osmani addyosmani closed this October 28, 2012
Rich Costello

Thanks for this tutorial, this has helped me tremendously in learning both node and backbone.js Just wondering if there are any versions of this on git hub that have a working image uploader that would store the images on the mongo db. Looking to build a similar app and the image upload is throwing me for a loop right now. Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.