Backbone.js – From the Mouths of Experts

Mornings are just starting to get pretty cold and nasty down here in NZ with the onset of winter, and this morning was no exception. Getting out of bed was a pleasure however, as I spent the first hour of my day hosting the lovely Andy Appleton as the latest expert in our Talk with the Experts live chat sessions. If you haven’t heard of Andy, you can check him out here in his new Learnable course, which just happens to be on Backbone…

This morning’s session was one of the quieter ones that I’ve run, but the calibre of chat was in no way a reflection of that. If you missed the session because you had something else on, fear not – you’ll find the transcript below.

Before you get into it though, here are a couple of links of note.
Keep an eye out for Andy’s upcoming course – Backbone.js App Development
You can sign up for email notifications of future Experts sessions here or view a list of upcoming sessions here.

That’s it for the admin stuff – here is the transcript:

[19:58] <HAWK> So anyway, welcome Andy – thanks for your time
[19:58] <Andy> hey, no problem!
[19:58] <HAWK> So we’ll officially kick off in a couple of minutes, but in the mean time, feel free to introduce yourselves
[19:58] <HAWK> Is anyone doing Andy’s course?
[20:00] <HAWK> https://learnable.com/courses/backbone-js-a-practical-beginner-s-guide-2742
[20:00] <Andrew> I have tinkered with Backbone a little in the past, including making an HTML5-only audio/video player with no backend. ;)
[20:00] <Jerry> Thanks Hawk
[20:01] <HAWK> No probs – if you’re a Learnable member, keep an eye out for a followup course soon – https://learnable.com/courses/backbone-js-app-development-2741
[20:01] <Andrew> (Joke that has to be made:) You’re OK Jerry. You’re OK. ;)
[20:01] <Jerry> LOL
[20:02] <Andrew> Nice Hawk, may look into that.
[20:02] <HAWK> So we may as well kick off – I’ll be moderating the session this morning (although it’s unlikely to need moderation) but the format is a bit of a free for all
[20:02] <Andrew> Not quite a beginner, not nearly a pro. ;)
[20:02] <HAWK> You throw questions at Andy and he answers them!
[20:02] <HAWK> Does anyone here already use Backbone a bit (aside from Andrew)
[20:03] <Jerry> Not even a beginner yet, so I have no questions at this point
[20:03] <HAWK> That’s cool. Lurking is a great place to start.
[20:04] <HAWK> What about the rest of you?
[20:04] <Doug> Nope.
[20:04] <BrianMann> Yes, I use Backbone and also have a tutorial series covering it’s use, www.backbonerails.com
[20:05] <BrianMann> yah, just jumped in to see what this talk with the experts was about
[20:05] <Andrew> Haha, nice. Running the gambit from beginners to pros!
[20:06] <Jerry> Cool! Thanks Brian. This looks like it may be helpful
[20:06] <Andrew> Andy what do you use for your backend?
[20:06] <Andy> depends really but I’ve used Rails and Node mainly
[20:06] <Andrew> I’ve tried a little with Rails, been wanting to try with Node.
[20:06] <HAWK> How did you hear about the session BrianMann?
[20:07] <Andy> yeah, I guess it depends what you’re more used to
[20:07] <BrianMann> I watch #Backbone topics in Twitter, so somebody tweeted about it.
[20:08] <HAWK> We run these sessions weekly on different topics
[20:09] <Andrew> Andy – One question I had was about views.
[20:09] <Andy> Andrew I saw a really nice looking JSON API framework for node recently – http://balderdashy.github.io/sails/
[20:10] <Andrew> Ooh, neat. I’ll look into that. ;)
[20:10] <Andrew> So for my SPA video/audio player I made, I had one view (named Index) that basically just called the templates for a bunch of other things.
[20:11] <Andrew> Is there a better way to structure it than 6-7 template calls to different pieces of the page?
[20:11] <Andy> yeah, I’d tend to prefer a new view for each template as a general rule
[20:12] <Andy> that way it’s easier to deal with events and re-rendering individual templates
[20:12] <Andy> so have a top level view which instantiates child views as needed
[20:13] <Andrew> Looking at my old code again. Looks like each template was for a separate ‘page’, to lay the scaffolding as it were for the other Views.
[20:13] <HAWK> Welcome Ramsay – this is a free for all so please jump in with questions if you have them
[20:13] <Andrew> I may have been trying to do too much in one module. ;)
[20:14] <Andy> sounds like it – a router is probably the place for that state management
[20:14] <Andrew> Yeah, makes sense.
[20:15] <Andy> then you can have a top level view for each page
[20:16] <Andrew> Switching gears slightly, most of the devs I work with are backend people. What should I do to convince them to do more front-end stuff, or at least the value of MVC Javascript?
[20:16] <Andy> It’s tricky because it really depends on what you’re building
[20:17] <BrianMann> In substantial applications, I’ve found using a mediator object (commonly known as a controller) helps with workflow. This object is primarily used to instantiate the views – telling them where to go, and ensures they have access to models/collections.
[20:17] <Andy> I think it’s a really good fit for application type sites but not for content heavy sites (e.g. a blog)
[20:18] <Andrew> A lot of our apps are very data heavy, but I don’t think enough weight’s being given to front-end UI/UX.
[20:19] <HAWK> FYI I’ll be posting a transcript of this session up on sitepoint.com later today
[20:19] <HAWK> If anyone has any useful resources, then please throw them in
[20:20] <thomfoolery> is there a presentation to along with this? or is this just an open chat forum?
[20:20] <Andy> yeah there’s a course at https://learnable.com/courses/backbone-js-a-practical-beginner-s-guide-2742
[20:21] <HAWK> No presentation, it’s just an open chat – an opportunity to ask any questions, raise any issues etc
[20:21] <Andy> and a sample app too – https://github.com/mrappleton/localgram
[20:23] <thomfoolery> So I understand MVC, and I understand Backbone.js is an MV library/framework does this mean that one creates their own controllers, how ever way they wish?
[20:24] <Andy> it’s something people take different approaches to
[20:24] <thomfoolery> or that control should be delegated to events handled within each View?
[20:24] <Andy> the router object is kind of like a controller
[20:24] <thomfoolery> actually events seem to also be able to be handled by models as well
[20:24] <Andy> well you can use events to send messages between anything – models, views, collections or routers
[20:24] <thomfoolery> I see that, but lets say in the case of business logic. Should this be applied to the event handlers
[20:25] <Andy> yeah I see
[20:25] <thomfoolery> or should you create your own control structures to handle things like this
[20:25] <Andy> personally I’d make that a method on the View object
[20:25] <Andy> which then interacts with a model when necessary
[20:26] <thomfoolery> yeah, I’ve done that, but I feel like the view then become these “hybrid” things
[20:26] <thomfoolery> view+controllers
[20:26] <Andy> yeah I know what you mean
[20:26] <Andy> you end up with really fat views[20:26] <thomfoolery> yeah
[20:26] <BrianMann> going with a bona fide controller keeps the logic decoupled from your views, and your views then only manage view state, they react to DOM level events and bubble those up to controllers, who then decide on application workflow
[20:27] <thomfoolery> I really like the seperation that a true MVC pardigm makes
[20:27] <thomfoolery> yeah, so I have often opted for creating my own control structures
[20:27] <BrianMann> Having an object mediate the multiple events views emit allows you to orchestrate the state of your application at a higher level
[20:28] <Andy> I haven’t used it but I think http://marionettejs.com/ has that concept
[20:28] <Andy>
[20:28] <thomfoolery> yeah, allow the view to capture UI events, let the model capture data events, and then just pass these along to your own controllers when need be
[20:28] <Andrew> Brian’s used it.
[20:29] <BrianMann> Oh yes I am a huge Marionette fan. I wouldn’t code Backbone without it :P
[20:29] <thomfoolery> I haven’t moved up to marionette yet, seems like it has to many dependacies to begin with
[20:29] <BrianMann> It offers all the infrastructure pieces Backbone doesn’t have.
[20:29] <BrianMann> Marionette doesn’t have any dependencies, it’s actually comprised of many smaller independently functioning parts
[20:30] <thomfoolery> I see 
[20:30] <BrianMann> you can choose to use one or more pieces, or the whole thing
[20:30] <thomfoolery> oh, the site said “
[20:30] <thomfoolery> Prerequisites
[20:30] <thomfoolery> Marionette relies on Underscore, Backbone, jQuery, and various other libraries as it’s foundation.”
[20:30] <Andy> maybe the thing to do is pull in the controller object as it seems to sole your specific pain and then go from there
[20:30] <BrianMann> right, its the same thing Backbone depends on, not any more
[20:31] <Andrew> I’ve wondered if it would make sense to become more familiar with vanilla Backbone before moving to Marionette?
[20:31] <thomfoolery> oh, I didnt understand the “various other libraries” part
[20:31] <thomfoolery> yeah, I’ve played with backbone and I like it
[20:31] <thomfoolery> I just havent moved up to marionette yet
[20:31] <BrianMann> Andrew it always helps understanding what parts of Backbone that Marionette is helping you out with
[20:31] <Warrdnez> how well does backbone.js with CMS’s?
[20:31] <Andrew> Or is it worth it to become accustomed to using “Backbone+” from the get go?
[20:32] <Warrdnez> drupal or wordpress
[20:32] <thomfoolery> backbone, is a front-end frameowrk that works well with REST webservices
[20:32] <Andy> Warrdnez I suppose it depends how/if the CMS can present a JSON API
[20:33] <BrianMann> thomfoolery Andrew I authored some free screencasts that walk you through typical Backbone workflows, and then applying Marionette into the mix, how it reduces boilerplate, and enhances development
[20:33] <thomfoolery> yeah, backbone allows one to sync front-end data models, with it’s backend counterparts
[20:33] <Andy> if you can make the CMS present its data in a restful way then it should work
[20:33] <BrianMann> Marionette is really a series of best practices and patterns working with Backbone over a long period of time, wrapped up in a well documented package, at the end of the day it stays out of your way and paves the way for building really awesome backbone apps
[20:33] <Marcin> What is the best pattern to authorize user-session by backbone? I mean by RESTful backend
[20:33] <thomfoolery> it wouldnt really make sense with wordpress or a blog unless you were creating some dynamic blogging applicaiton
[20:34] <thomfoolery> Oauth?
[20:35] <Andy> I quite like having a separate page for login which drops a session cookie which the actual JS app can use
[20:35] <Andrew> Andy – I noticed in your Localgram example app, you have an app.js file that basically doesn’t do much beyond require the router.js file. What’s the reason for separating out?
[20:35] <Andy> I’ve found managing all of the auth and session logic in one page means dealing with an awful lot of stuff for not much benefit
[20:36] <Andy> rather than just defining the router in app.js you mean?
[20:36] <Andrew> right.
[20:36] <Andy> a larger app might have more config and bootstrapping to do which could start to get messy 
[20:37] <Andy> then you’re mixing the router module with all of that stuff
[20:37] <Andrew> Ah, so you have configuration in the app.js and separate the routing unto itself.
[20:37] <Andy> yeah
[20:40] <Andrew> I looked at the Sails page you linked earlier (http://balderdashy.github.io/sails/)
[20:40] <Marcin> that is the case – authorization by session cookie can not be enough secure, sa Oauth is worth checking
[20:40] <Andrew> I like the free JSON API’s they give you.
[20:40] <Andy> yeah it looks nice
[20:41] <Andy> I’ve also used Rails API at work which is pretty good https://github.com/rails-api/rails-api
[20:41] <Andy> (though I’d pick something Node based given the choice ;)
[20:41] <Andrew> Preferred DB when using Node?
[20:42] <Andrew> I’ve looked at MongoDB and ElasticSearch. Mongo seems to intermittently have data loss issues.
[20:42] <Andy> Mongo or Postgres depending on what it’s for
[20:43] <Andrew> Thanks for your time Andy. I’m out for today folks. :)
[20:43] <Andy> DBs aren’t my specialty but at GoCardless we use Postgres for our app data, mongo for data that we’ll be analysing a lot and ElasticSearch for searching big sets quickly
[20:43] <thomfoolery> Anyone used Elastic Search with Node, I’ve heard it’s frighteningly fast
[20:43] <Andrew> We use it with Rails via Tire currently.
[20:43] <Andy> bye Andrew
[20:43] <Andrew> It’s nice. :)
[20:43] <Andrew> Bye!
[20:44] <Andy> same here – it’s mega quick but it’s not really meant as a general purpose DB as far as I can tell
[20:47] <BrianMann> is this chat using websockets?
[20:47] <BrianMann> haha it’s using Backbone i see
[20:47] <thomfoolery> niiiice
[20:47] * Andy opens web inspector
[20:47] <BrianMann> 0.9.2 though, hah
[20:48] <HAWK> To be fair, this is only it’s second run. Slated for more work next week.
[20:48] <HAWK> I’m pretty happy with it though.
[20:48] <Andy> seems to work nicely
[20:48] <BrianMann> yah can’t complain, i’ve done some real time with Pusher
[20:49] <BrianMann> it’s been really easy to work into an existing app
[20:54] <HAWK> Has anyone got any further Backbone questions?
[20:54] <Andy> wow, the time has flown!
[20:55] <HAWK> It always does 
[20:56] <HAWK> And if no one else wants to jump in with anything then I’ll cut you loose Andy, so you can get on with your evening
[20:56] <BrianMann> oh the good ol’ days of IRC
[20:56] <HAWK> indeed
[20:59] <BrianMann> Alright bye all
[20:59] <HAWK> See ya BrianMann – thanks for dropping in
[20:59] <HAWK> Hey Andy – thanks so much for your time
[20:59] <Jerry> Thanks Andy, Brian, and Hawk
[21:00] <HAWK> Sorry the session was a bit on the quiet side, but it looks like it was beneficial for a few people
[21:00] <Andy> no problem, catch you all later!
[21:00] <thomfoolery> thanks!