Save Your Backbone(.JS)
…And don’t forget to REST
<somewhat_unrelated> This shouldn’t come as a surprise to anyone, but a proper posture when sitting in a chair for many hours is very important. Get a lumbar pillow (this one is pretty great), stretch often and just check your posture every now and then. It could save you from a miserable week like the one I just endured. One of temporary paralysis and lots of waddling. </somewhat_unrelated>
Anyway, the real target of my introspection here today is another Javascript library that I thought I would give a shot. This isn’t as bonkers of an idea as learning Go in 3 hours, but it might be getting up there. This will be a skim over the basics of Backbone.js and an exploration of parallels between it other MVC-centric libraries.
I won’t be going over much in the way of actual code. Just some of the core concepts and what you can achieve with it. There will be some links below if you’re interested in exploring it further. This is more or less a conversation with myself and not some kind of advertisement for Backbone.JS, no matter how much it may come off as such.
I’ll simulate some of those burning questions for your consideration and my own entertainment:
“Why are you doing this to yourself again, man?”
First of all, you don’t know me, ok? OK!?
Joking aside, I really love abstracting away from tech that is already somewhat familiar to me. This helps me get a grip for neat new features and also pull on the common threads that remain the same.
If you get anything out of reading this, I would hope it’s just a sense of tying one aspect of Backbone into any other chunk of programming knowledge in your repertoire. Maybe it’ll spark a little interest and you can teach me how to actually use it.
Next question.
“Uhh, what… is it?”
So glad you asked. Backbone is a library intended for Javascript single-page applications. Much like Rails does for Ruby, Backbone allows you to create a fully REST-ful API that works in the frontend without ever having to code outside of good ol’ JS. This allows for the flexibility of JS functions inside a compact package of models.
On the surface, Backbone reads like a better translator between front and backend applications. It organizes code extremely well on the frontend by using the Models portion of a modified MVC (Model, View, Collection) schematic. Here, the Views portion serves more of a purpose than it does in our RoR API applications to tighten up a lot of loose ends. More on that later.
Admittedly, Backbone is in no way new or breaking tech. The initial release was back in 2010. In fact, it’s considered “legacy” in terms of how it’s matured over the years, but that’s fine. There are still plenty of companies that keep it around for better organization when it comes to routing and compartmentalization of Model content.
Keep ’em coming.
“Retro! Can you explain how it works?”
Yah, sure. I’ll do my best. Let’s start with models. Models store the bulk of our application data user input and raw brain power. They can be compared in a similar way to models used in Rails. They orchestrate the data as it moves from one function to another. It is also responsible for detecting changes made to the data and plugging in the correct value into the DOM.
Then you have views. Views can also be compared to its Rails counterpart: views. It’s the chunk of data the user sees, manipulates, then throws over to the model to be organized, updated, then spat back at the user. And the cycle goes on…
For the “C” portion of MVC, rather than Rails’ “ Controllers”, our models more or less do all the controlling for us. Co C stands for Collections here. These are essentially groups of models associated with a view that have been brought together. Collections take care of encapsulating all this logic and data for us.
Collections of models and views are called on by a module inside the library which are simply called Events. Events use trigger methods to perform callback functions and tell our application to fire off a certain method within a collection, update our database, then sling a response straight back to a view. The events module contains built-in methods labeled things like: “on”, “off”, “trigger”, “once” and “listenTo”. These all take in callbacks which allow you to better determine which action happens when a user clicks on a specific responsive topic.
Ok, I got time for one more.
“Why would I ever need this? <REDACTED> pretty much does everything already.”
For tidying up, really. Backbone takes some of the more monotonous tasks in JS, and condenses them into an API-like REST-ful structure that you can make calls to from the frontend, which is cool. Models can help us cut back on the number of calls we need to make to the DOM in our JS application, making speed a higher priority. Backbone can act as a middleman between the raw JSON response from the backend and how it becomes read on the front. It’s almost like your personal organizer for these tasks.
Having Backbone in your project still allows you to make requests to other APIs, and actually has a simple interface for doing so. This works by creating a model that sends a simple request to the designate route set up in the backend, and allowing the event to be triggered and make everyone happy.
Well, I hope we covered enough here to get some juices and interest flowing around Backbone.
To close, I think this library is absolutely an optional additional step to include in any project. Much like Redux, it helps bundle many different controlled aspects into one space so there doesn’t have to be a ton of things contributing to a tangled web of code. It’s a file folder for some things, and I rather like the idea.
Now is a good time to get up, stretch, go for a walk, stretch some more- you know what, just go get a chiropractic alignment to be safe. Wear a posture corrector forever and never get old, please.
Go on, now.
Now that I know a few insignificant things about this, the natural next step is getting into some code and incorporating this new/old tech into a nice and simple single-page App. If you’re reading this and would like to learn some of this together, maybe hang out and casually make an app that changes the world sometime, by all means hit me up at: JZimmsCodes@outlook.com. Let’s make it happen.
