BackboneRails BackboneRails / tutorial / both

http://www.backbonerails.com

Learn to Build Web Apps Using Backbone + Rails.
7 favorites
submitted over 3 years ago, by lush
BackboneRails popular tutorial

15 Comments

SkinnyGeek1010

+1 this looks really great!.... now I just need to figure out how to slow down time so I can fit all of these screencasts in =)

SkinnyGeek1010, over 3 years ago

wsg

Let me know when you work that one out!

wsg, over 3 years ago

lush

Same here!

lush, over 3 years ago

pineapple

How did you end up liking this? I need to start learning backbone + marionette

pineapple, over 3 years ago

SkinnyGeek1010

It's pretty epic! I think it's worth 5x what it costs. I find it to be the rails equivalent to Hartl's 'Rails Tutorial'. It's the only tutorial/course that i've found that teaches industrial strength Backbone single page apps from start to finish (not just a silly todo or wine cellar).

I haven't actually watched all of the first yet but after watching the first 3 I bought all they had (6 plus 1 from the next course). Just by watching the first 4 i've already re-written my vanilla backbone mobile app to be more durable.

Working on a mobile app in the past week, before I realized it I was slowly starting to writr my own code to do much of what Marionette is already doing, writing modular, separation of concerns, message passing to parents, having a 'core' to make decisions, swapping nested views from a preset container (regions in marionette). Unfortunately i'm too deep to switch lol.

I'm really excited to start working on Marionette sometime next week... I'm currently plowing through Hart's screencasts to learn about Rails and it's DB, at least enough for Backbone Rails.

SkinnyGeek1010, over 3 years ago

SkinnyGeek1010

Oh yea, if you haven't already, I would recommend doing the Net Tuts Backbone intro, as they expect you to be able to use Backbone on a basic level (marionette has their own framework conventions and methods on top of the reg ones.).
http://pineapple.io/resources/entry-level-backbone-screencast-nettuts

If you're comfortable enough with Jasmine, the Backbone Koans are really good too: http://pineapple.io/resources/backbone-koans

Oh and this is good one too:
http://pineapple.io/resources/taking-javascript-seriously-with-backbone-js

edit
This is a good talk on what Marionette somewhat uses for it's architecture (minus the sandbox layer since BB has hard deps)
https://www.youtube.com/watch?v=mKouqShWI4o

SkinnyGeek1010, over 3 years ago

pineapple

Thanks!! That's really awesome :)

as a sidenote it's a weird feeling that when i want to learn something new, I come to pineapple and find all the answers when I completely missed them before.

I know I asked this already once but, can backbone easily do (without breaking all the rules) an app which is not a 'single page' app?

We have a very large app I'm going to refactor all the JS for, but it's a rails app with many different regular routes, rails views, etc. It is not a single page app though, and it's already too far in to become a single page app. What I really want is a way to clean up jquery spaghetti and utilize the benefit of something like backbone to keep stuff organized, dom manipulation, etc

Keep in mind I have no problem using ajax to fetch new records to populate the views, with backbone models etc,.. it's just that I'd like to preserve our current vanilla routing setup.. so when you click on 'reports' for instance, it actually goes to /reports via the rails controller, instead of something like /#reports as a backbone URL

Do you also have a brief description of what marionette is good for? I watched some vids but without knowing backbone it's kind of lost on me

pineapple, over 3 years ago

SkinnyGeek1010

Haha, i'm doing the same thing with Rails... i'm re-discovering so much good stuff here!

I know I asked this already once but, can backbone easily do (without breaking all the rules) an app which is not a 'single page' app?

Yep it's actually way easier to use it that way. The great part with Backbone is that it doesn't have any rules! (also can be a bad part). You can essentially use just attach a backbone view to an existing class/id for 90% of the app. You can use them to just listen for dom events, send pub/sub events to other modules, attach methods to a view… etc. You're also still using either jquery or vanilla dom to do all the real work. This separation cleans up jQuery spaghetti and really makes organization nice. Rendering and inserting nodes is totally optional.

For the remaining bits, you may have some parts that are dynamically created and inserted. In this case, the models/collections will help a lot. They even sync up with the Rails REST methodology very well.

The basic life cycle of a dynamic widget would (roughly) be:

  • render erb page on server, insert partial of erb for a given 'widget'
  • save any data models for widgets as JSON into a variables
  • insert said widget scripts via asset pipeline
  • send html page to client
  • initialize widgets at bottom of page (depends on widget, but renders itself)
  • widgets could prefetch all initial data from embedded json, saving https reqs., then likely would listen for a click to fetch new data from server
  • link is clicked somewhere, entire page gets garbage collected/fresh slate (killing any potential zombies)

In a regular rails app I think it makes sense to group things on a modular component or widget basis. Perhaps a components folder that has a single weatherWidget.js file that's loaded in with the asset pipeline on any page that includes the weather widget. All functionality of that one widget is in one file, in one object app.WeatherWidet.View or .model, etc..

Keep in mind I have no problem using ajax to fetch new records to populate the views, with backbone models etc,.. it's just that I'd like to preserve our current vanilla routing setup.. so when you click on 'reports' for instance, it actually goes to /reports via the rails controller, instead of something like /#reports as a backbone URL

I wouldn't even use a router at all, unless you need to listen and trigger a callback upon hitting a certain url route. I would also suggest caching initial ajax data in the html such as: http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

example of an erb file model embedded and a basic bb view that just listens and fires callbacks:
https://gist.github.com/AdamBrodzinski/d30ae591a1a9ae970aaa

I might whip up a little sample app in rails like this sometime this week… i've been meaning to try this out anyhow.

SkinnyGeek1010, over 3 years ago

pineapple

Dude awesome! Thanks so much, that is epic :)

I would love if you did a sample app.

By the way, what about marionette.js, is this something that's needed for my needs do you think?

pineapple, over 3 years ago

SkinnyGeek1010

Do you also have a brief description of what marionette is good for? I watched some vids but without knowing backbone it's kind of lost on me

Without getting too complicated... Marionette solves the problem of Backbone not having any structure or convention. It's essentially a JS app framework that uses Backbone.

If you build a build a single page app with just backbone, you have a ton of work to do with architecture, your basically starting from 'almost scratch' .

Things it solves:
* closing down a view and it's children (little/no help with vanilla bb)
* built in separation of concerns (BB lets you write spagetti still)
* very very modular
* closing down and inserting (swapping) a view from a region (main middle container, header, etc..)
* requiring dependencies (other modules/widgets)
* automatic caching (i think)
* heavy duty events system

It's likely overkill unless you really want a lot of control with killing large swaths of views and nested children at once. If you're going to do something that only has a JSON backend and everything else in the app is JS... then it's really really nice as it saves a lot of code writing.

SkinnyGeek1010, over 3 years ago

pineapple

man you rock!! Thanks man ,this is all so helpful.

I'll let you know how it goes.

pineapple, over 3 years ago

SkinnyGeek1010

Thanks, glad it helped!

If you end up not going with Marionette, here's a base view I use all the time to help close down views and child views. Keeping with the theme above, you can call weatherWidget.close() and it will close without leaking. The beforeClose can be used to close any of it's child views right before it closes itself.

// Custom base view for all views
  namespace.View = Backbone.View.extend({

    // compile and store underscrore templates
    compileTemplate: function(tmplString) {
      this.template = _.template(tmplString);
    },

     // run custom cleanup before firing #close
    beforeClose: function() {
    },

    // remove only the view but leave the model
    close: function() {
      this.beforeClose.apply(this, arguments);
      // calls jq remove() to unlisten and remove, bb stopListening()
      this.remove();
    },

    // destroy model, close view, remove all listeners on this model
    destroy : function() {
      if (this.model) {
        this.model.destroy();
      }
      this.close();
    }
  });

SkinnyGeek1010, over 3 years ago

pineapple

You're a killa for rilla! thanks again :)

pineapple, over 3 years ago

SkinnyGeek1010

I started making a sample app/page. I started off in Rails and quickly figured out how much I have not retained... I was struggling with the scaffolding syntax so I just threw everything into static pages.

It's pretty trivial but it should help for a rails context. No router, all markup is already rendered (except the dynamic table).If you start at page one it starts with one component with the most basic use case and builds up, adding nested views and dynamic rendering, and soon restful calls to refresh data w/o a page reload.

I still have to finish the dynamic table using cached json from erb for initial load and subsequent calls to a rest api. Perhaps this weekend sometime.....

https://github.com/AdamBrodzinski/bbone-example

Also this might help for the rails context rails too:
https://www.youtube.com/watch?v=lPiM4T1lR58

SkinnyGeek1010, over 3 years ago

pineapple

Ok sweet, bookmarked

pineapple, over 3 years ago


Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.