I was involved in a project that was planned to be demoed at a conference. My role was to lead frontend and support backend-to-frontend development in order to meet the deadline. As the project progressed, it turned out that backend devs had finished their part and were excited to code some JS and backbone… To my surprise, it turned out that about a half an hour introduction meeting was enough to get them going! How was that possible?
- Oh, so this is just like feeding a Java Bean to a freemarker template!
- All of this behaves similar to Hibernate except…
The key was to use Java references when explaining the core concepts. So if you have Java background and you are just starting with backbone, here are some helpful analogies.
Before we start, just let me make a couple of remarks. Firstly, the team was solid and had prior experience with JS, jQuery, firebug tools and such. Secondly, backbone app already had a defined structure and complementary libraries were chosen. Lastly, please take presented analogies with a grain of salt, obviously.
require.js → @Inject
One of dozens ways to achieve modularization in JS world. For now you can treat that as an import keyword. This lib is very often used in backbone stack.
Events → global Observer pattern
Oh yes, it’s a noble Observer pattern in JS style. It’s more flexible and usually it is used in singleton-ish way.
Model → JPA Beans + observer pattern
Model is like JPA Beans. It defines data structures and loads/saves the data from server or localStorage (look below). Model acts as an observable object, it notifies Views about data changes using Events module.
Collection → ArrayList<Model>
It aggregates Models in a list. Event emitted in Model will be propagated to Collection automatically. Good place to manage Models, provide ordering etc.
backbone.LocalStorage → Hibernate in browser
It’s a nice backbone plugin that saves your data in browser’s local storage (HTML5). Together with Collection, Model, and Events modules, it acts as a very simple JPA framework.
View → ?
No good analogy here, similar to Presenter from MVP but not quite. Views feed templates with data and trigger rendering action. Views listen to Model/Collection events and then act on these events. Typical action is to render a template with updated data but it’s completely up to a programmer (it’s possible to implement smart re-draw similar to react.js).
templates → Velocity, freemarker, JSP
The purpose of Templates is the same no matter what technology. Template stores HTML code with some placeholders. With backbone popular choices are handlebars.js, moustache.js, underscore.js.
underscore.js → utils on Collection
It’s a nice library that extends JS with some utility methods. Very similar to our java.util.Collection package. Provides other functionalities as well (like templates). Very often used in backbone stack.
Router → Struts2, faces-config.xml, redirectTo()
Router lets you define Routes which are url addresses with wildcards to handle url parameters. Defined urls are binded to actions which usually involve rendering Views. Router reacts on url address changes and can manipulate browser’s url as well.
That’s it!
Now it’s probably a good moment to take a look at some backbone code or follow more detailed articles.
In modern apps, a lot of logic is migrated from backend to frontend and typical problems are migrated as well. Therefore it’s no surprise we can find analogies between server side Java technology and JS. After all, solutions to some problems are universal, even when comparing so fundamentally different languages.
Disclaimer: I wrote this post in the July of 2015.
It’s almost 2017 now and backbone seems a bit outdated these days. I still value it highly for its flexibility, lack of constraints and good educational value (source code can be understood in a couple hours). It’s great for prototyping and it’s not intrusive, letting devs decide how to layout code. At the same time, these exact features are causing a lot of problems in bigger projects. Besides some quirks and smaller flaws, backbone requires a lot of attention and good decision making when comes to architecture, structure, keeping things organized etc.
It’ almost 2017 now and I would probably look at React.js, Cycle.js and others.
If you plan to continue with backbone anyways, you may want to check out these: Thomas Davis tutorials, backbone sources, marionettejs, chaplinjs, backbone and websockets.
