Decouple AutobahnJS (WebSockets) with Backbone

Question

I have a backbone app that have simple search form, when the user writes something on this search I use autobahn to subscribe the given text on the search form (for example - I search for "foo", I subscribe for "foo").

How can I separate autobahn logic? currently in my view, when the user clicks submit I do the next things -

// On view:

  onUserSearch : function(evt) {
    evt.preventDefault();

    var searchText = this.$el.find("#searchBox").val();
    // searchResultsCollection is an instance of Backbone.Collection
    SearchFeed.subscribe(searchBox, searchResultsCollection)
  }

// SearchFeed subscribe method
  subscribe : function(topic, collection) {
    session.subscribe(topic, function(result) {
      collection.add(result);
    });
  }

And on my view I listen to "add" on my collection and create a view for each result and render it.

I think that my code isn't well structured -
1. Is the "SearchFeed.subscribe" is on the right place? is it ok that I am doing this code on my view? and maybe it should be on the model?
2. Is the collection change (passing to subscribe, SearchFeed changes it and then listening to "add") plumbing is the right way to do this?

Answer 1

Not sure what a sane, decoupled structuring for Backbone/Autobahn would look like, but thinking about such aspects upfront is very important.

FWIW, you can find a simple form example in 2 variants here:

• Knockout-based using MVVM
• ExtJS based

The ExtJS code is using AutobahnExtJS, which provides specialized ExtJS data proxies for AutobahnJS.

The Knockout based code does not need additional stuff - it's also longer than the ExtJS variant in part because it is more feature rich. So you should not directly compare code length.

Personally, I find the Knockout+Autobahn approach quite nice: you have a clean layering: Autobahn real-time code only interacts with the view model, and the view model is data-bound to the views.

Disclosure: I am original author of AutobahnJS, AutobahnPython, AutobahnAndroid and work for Tavendo.