7 ms·

Sample App with Backbone.js and Twitter Bootstrap

227 points by jashkenas 15y ago

dangrossman 15y ago
If this is of interest, you might also check out Bookmarkly, a visual bookmark organizer I open sourced last week. It's node.js on the server and Backbone.js on the client, with a little Twitter Bootstrap in the UI as well. http://bookmarkly.com http://bookmarkly.com https://github.com/dangrossman/Bookmarkly https://github.com/dangrossman/Bookmarkly
- pacomerh 15y ago
  Nice, these are exactly the two things I wanted to get my hands on.
- nixarn 15y ago
  That's awesome! How do you handle the screenshots?
danielhunt 15y ago
Having been working on my own (mobile) Twitter Bootstrap & Backbone.js app for the past week or so, the biggest issue I've had has been working out how best to deal with a combination of local & remote collections (and the caching of them, on demand) The other blog posts from the author of this one have been very useful in getting over some of the initial speedbumps I encountered - and strongly recommend them to anyone looking to get into Bootstrap itself.
- fooandbarify 15y ago
  I've played a bit with caching models on the client: https://github.com/napoleond/localmodel https://github.com/napoleond/localmodel I'm planning to implement merges at some point, but the current implementation has still proven useful to me.
dts 15y ago
Hmmm. Any reason all the views and models are attached to the window object instead of namespaced under some kind of app controller?
- tbranyen 15y ago
  There are a number of issues with the project, but I'm assuming it was created this way to be easier to digest for newcomers.
  - smcguinness 15y ago
    Would you point out a few of them if you don't mind?
- danso 15y ago
  Yeah, as a newcomer to Backbone, this has always been something that's thrown me off, including in the otherwise excellent Todo example: http://documentcloud.github.com/backbone/docs/todos.html http://documentcloud.github.com/backbone/docs/todos.html The backbone boilerplate on Github (by tbranyen) has been a useful model to follow: https://github.com/tbranyen/backbone-boilerplate/blob/master/app/namespace.js https://github.com/tbranyen/backbone-boilerplate/blob/master...
  - VMG 15y ago
    DocumentCloud (by the creator of Backbone) is also using window-bound variables. Seems to work for them I suppose.
    - jashkenas 15y ago
      Yes, when you're in control of the page, it's nice to be able to have different parts of your app ready-to-hand. In our case, that means Documents, Notes, Projects, Accounts, Organizations, and so on... If your "app" is going to be embedded as a part of someone else's page, then you have to be much more careful. The results cards in the sidebar here are only exposed through a single variable: "eg2012.Card": http://www.nytimes.com/2012/02/08/us/politics/minnesota-colorado-missouri-caucuses.html http://www.nytimes.com/2012/02/08/us/politics/minnesota-colo...
Alind 15y ago
Thank you for sharing your work. it's interesting. good start, buddy.
bionicbrian 15y ago
Looks awesome.
hswolff 15y ago
That's a nice sample app. My only (small) complaint is that I feel using MySQL is a bit of overkill for a sample application. To throw my hat in the ring as well I've been working on a Backbone project that could help newcomers to Backbone. I'm in the midst of refactoring it a little bit to use lesscss as well as RequireJS and its module system. Please feel free to fork or contribute! I love Backbone and JavaScript :D. https://github.com/hswolff/forgetmenot/tree/dev https://github.com/hswolff/forgetmenot/tree/dev

227 points by jashkenas 15y ago

If this is of interest, you might also check out Bookmarkly, a visual bookmark organizer I open sourced last week. It's node.js on the server and Backbone.js on the client, with a little Twitter Bootstrap in the UI as well. http://bookmarkly.com http://bookmarkly.com https://github.com/dangrossman/Bookmarkly https://github.com/dangrossman/Bookmarkly

pacomerh 15y ago
Nice, these are exactly the two things I wanted to get my hands on.
nixarn 15y ago
That's awesome! How do you handle the screenshots?

danielhunt 15y ago

Having been working on my own (mobile) Twitter Bootstrap & Backbone.js app for the past week or so, the biggest issue I've had has been working out how best to deal with a combination of local & remote collections (and the caching of them, on demand) The other blog posts from the author of this one have been very useful in getting over some of the initial speedbumps I encountered - and strongly recommend them to anyone looking to get into Bootstrap itself.

fooandbarify 15y ago
I've played a bit with caching models on the client: https://github.com/napoleond/localmodel https://github.com/napoleond/localmodel I'm planning to implement merges at some point, but the current implementation has still proven useful to me.

dts 15y ago

Hmmm. Any reason all the views and models are attached to the window object instead of namespaced under some kind of app controller?

tbranyen 15y ago
There are a number of issues with the project, but I'm assuming it was created this way to be easier to digest for newcomers.
- smcguinness 15y ago
  Would you point out a few of them if you don't mind?
danso 15y ago
Yeah, as a newcomer to Backbone, this has always been something that's thrown me off, including in the otherwise excellent Todo example: http://documentcloud.github.com/backbone/docs/todos.html http://documentcloud.github.com/backbone/docs/todos.html The backbone boilerplate on Github (by tbranyen) has been a useful model to follow: https://github.com/tbranyen/backbone-boilerplate/blob/master/app/namespace.js https://github.com/tbranyen/backbone-boilerplate/blob/master...
- VMG 15y ago
  DocumentCloud (by the creator of Backbone) is also using window-bound variables. Seems to work for them I suppose.
  - jashkenas 15y ago
    Yes, when you're in control of the page, it's nice to be able to have different parts of your app ready-to-hand. In our case, that means Documents, Notes, Projects, Accounts, Organizations, and so on... If your "app" is going to be embedded as a part of someone else's page, then you have to be much more careful. The results cards in the sidebar here are only exposed through a single variable: "eg2012.Card": http://www.nytimes.com/2012/02/08/us/politics/minnesota-colorado-missouri-caucuses.html http://www.nytimes.com/2012/02/08/us/politics/minnesota-colo...

Alind 15y ago

Thank you for sharing your work. it's interesting. good start, buddy.

bionicbrian 15y ago

Looks awesome.

hswolff 15y ago

That's a nice sample app. My only (small) complaint is that I feel using MySQL is a bit of overkill for a sample application. To throw my hat in the ring as well I've been working on a Backbone project that could help newcomers to Backbone. I'm in the midst of refactoring it a little bit to use lesscss as well as RequireJS and its module system. Please feel free to fork or contribute! I love Backbone and JavaScript :D. https://github.com/hswolff/forgetmenot/tree/dev https://github.com/hswolff/forgetmenot/tree/dev