What is Backbone? - Backbone.js Tutorial

When people talk about backbone, they use a lot of different words and phrases to describe it. MVC, getting your truth out of the dom and spa, just to name a few. But there really is one word that describes it perfectly. Organization. Backbone is a lightweight JavaScript library that lets you organize your code in a neat, clean and efficient manner. It does this by basing itself on what's known as the Model View Controller design pattern. But, that's a lot to say, so it's commonly referred to as MVC. With MVC, code is broken down into three separate components. The M stands for model which is a part of the code that contains the applications data. The V stands for view, which displays model data on whatever graphical user interface is available, like a computer screen. And the C stands for controller, which is the bridge between the model and the view. Its job is to transport model data over to the view. As we can see, MVC breaks code out into three distinctive parts, with each part having a distinct responsibility, a process commonly referred to as decoupling. It's very easy to create one long file of sloppy code all mixed together in a huge mess. Which leads to not only inefficient, slow-performing code, but also code that's almost impossible for someone else to read and understand, if they need to make changes to it themselves. The decoupled MVC pattern helps us avoid all these problems and instead allows us to create a nice, tidy code base. Backbone is based on MVC, but it doesn't follow the strict definition we just discussed, and differs from traditional MVC in two important ways. First, Backbone doesn't have a separated out controller component, like MVC does. It did in earlier versions, but not in the version that I'm using for this recording. For this version, the older controller functionality has been moved to other Backbone components. Speaking of components, this brings up the second difference that Backbone has from traditional MVC. Where MVC has three distinct decoupled components, Backbone has six. Backbone does use models to store data. So in this course we'll be creating a web application that stores data about a group of flowers. Models will contain all the information about this group. Backbone also uses views to display the data. With Backbone views, JavaScript takes a data and displays it onto a web page. Things now start to differ between Backbone and traditional MVC. Backbone has a collections component, and collections are a group of models. Behind the scenes, collections are really just JavaScript arrays. There's also the Backbone events component. This component allows us to bind custom JavaScript events to our code. Events like clicks and mouse overs. Backbone routers allow us to create a navigational structure within our web app, allowing us to create anchor tags that navigate to certain parts of our application. Backbone's router component is as close as you can get to a traditional MVC controller. It's actually where most of the old Backbone controller code we previously discussed has been moved to. Now Backbone sync is the last component. It's mostly used to help Backbone communicate with server side technologies like databases. But, this is out of scope for this particular course, so sync won't be covered. Most of these components are built using JavaScript objects. Meaning that we build them using a list of key value pairs. The list is made up simple properties, as well as methods that come pre built with almost all of Backbone components. But, you can create your own properties and methods if you want to, methods in particular. Now, I can't stress enough, Backbone is structured in a way where you have no choice but to create clean JavaScript code. If you're using JavaScript to create a complicated web app, it's almost too easy to create what's known as spaghetti code. Code that's just a tangled-up mess. Doing things like mixing up JavaScript inside HTML, creating the same function twice when we can just reuse it. All of these things are common pitfalls in JavaScript Development. With Backbone, we can avoid all of this. We can use it to create organised JavaScript code that is easier to maintain, and even easier to reuse. Now because JavaScript can create a high degree of functionality within a web app, it's seen a significant growth in popularity recently. It's primarily used to create robust web applications. Facebook and Twitter for example, are heavily dependent on JavaScript. Because of this, Backbone isn't the only MVC library or framework out there. There are many, many like Angular and Ember, which also don't follow the strict definition of MVC. And like Backbone, these frameworks also don't contain a traditional MVC controller. So sometimes we refer to these libraries as JavaScript MV* libraries and frameworks. But most of the time we still refer to them as JavaScript MVC. Because while they're technically different from MVC, their core code is structured in a way that's inspired by the MVC pattern. So we still refer to them as JavaScript MVC to keep it simple. Now when you compare these libraries and frameworks to one another, looking at there differences, highlights each ones strength and weaknesses. I want to have a brief discussion about this while pointing out Backbone's strong points. That's in the next movie.