It has been already more than three weeks since I started working as a
front-end developer. So, I decided to share some of my initial experience. The topic of this article might be helpful to many of you who are starting to work with real-life applications which are often quite big. To quickly understand such applications and their code is a skill every developer must master. In particular, this post will focus on how to understand large projects written in the Backbone JavaScript library.
This was precisely what I had to do when I started my new job. One of my first tasks was to work with a complex JavaScript application. This meant that it already had a particular
code structure that must be respected by anyone who would want to modify it.
What made it even more challenging was the fact that this application was written in the JavaScript Backbone library with which I had no previous experience.
What made it even more challenging was the fact that this application was written in the JavaScript Backbone library with which I had no previous experience.
What to do in order to
understand the application’s architecture in a way that will enable me to properly modify it?
1. What is MVC?
When I googled what the Backbone is, I learned that it is a library for
structuring JavaScript code which is based on the so-called Model, Controller, View (MVC) pattern. MVC is an architecture model for implementing user
interfaces. It separates the application into three kinds of components – model
(M), view (V) and controller (C). The idea is to promote a
separation of concerns which should result in better structured and more
maintainable applications.
 |
| MVC Pattern |
There are many other JavaScript libraries and
frameworks that implement MVC pattern, for example: Ember, Angular, and React (to
some degree). None of these frameworks are better or worse than the others, each is just
designed for the different purpose.
2. What is Backbone?
When I learned that the application, I will be working on, is built with Backbone library, I thought that it can't be that difficult to understand it. Since I already knew how to build applications in
React, I was pretty sure that this knowledge will help me to grasp the Backbone logic as well.
‘They’re all based on
MVC pattern anyway, right?!’
‘...or not?!’
The truth is that React
isn’t a classic MVC since it is
considered only as V in MVC. Moreover, Backbone
is neither an example of classic MVC. Although it provides the concept of
models and views, its views are more like controllers (more on that later).
So, there is no clear
separation between models, views and controllers in Backbone.
I learned the difference between Backbone and React myself.
If you compare the code structure of applications built in these two libraries,
you will find out that it is pretty different. Nevertheless, they still have a
lot in common. They are both great for building single page applications (SPA) which aim is to provide a rich user experience similar to desktop
applications. In these applications, all the necessary code (HTML, CSS and JavaScript)
is retrieved with a single page load.
Backbone has five components: events, models, collections,
views and routers. However, to understand the Backbone logic, it is
important to get to know the relationship between models and views.
 |
Backbone modified MVC pattern (source: http://backbonejs.org/)
|
Models are containers for application data that can also
send AJAX requests to the server to synchronize the data on the client with the
server. On the other hand, views are responsible for rendering the models and
listening to any events raised by the DOM or events raised by the model.
Collection is just an ordered set of models.
When you open a typical Backbone application in your text editor or IDE, the folders will at least be named as models, views and collections. If your Backbone application contains dozens of files (as in my case), you might feel a little intimidated. Believe me, that is only the initial and wrong feeling.
The file names will often help you to understand the application's structure. You can tell from the names what a particular model or view actually do. You will also need to dive deep into the code to be able to understand it and work with it. Try to change a thing or two and refresh the browser to see how the changes affected the functionality. With this approach, you will eventually understand the basic logic of the application quite fast.
The file names will often help you to understand the application's structure. You can tell from the names what a particular model or view actually do. You will also need to dive deep into the code to be able to understand it and work with it. Try to change a thing or two and refresh the browser to see how the changes affected the functionality. With this approach, you will eventually understand the basic logic of the application quite fast.
When you understand the basic logic of the application, you will be ready to actually produce a code on your own which will fit into the application's structure.
