What is backbone js

Development with Backbone.js

In the future, we would also like to provide the coders among you with exciting information. This article is about the Javascript library Backbone.js.

A current project was about the implementation of a quiz application. 10 questions should be answered one after the other - but the page should not be left or reloaded. The first thought was of course: "Will somehow work with jQuery". But isn't it easier than constantly manipulating DIVs by hand?

Yes, that is easier and better. With Backbone.js.

What is Backbone.js?

In summary, Backbone.js is a JavaScript MVC framework. Here, data can be displayed on the client as a model. This data is displayed in predefined views and can also be saved via a RESTful interface. The whole thing was invented by Jeremy Ashkenas, who also helped develop CoffeeScript.

This article is intended to give you a first overview of how the development with Backbone.js works and which possibilities are offered by this framework.

The application in detail

Back to the application itself. As mentioned, it is a quiz with 10 questions. There is a picture for each question and three possible answers. During the entire quiz, the user sees the number of correctly answered questions. Here we go!

The model

First up are the classes question and game created. The class game serves as a kind of administration with the number of correctly answered questions etc. The class question contains the specific information on the individual questions.

So this is the model representation of a question. Any instances can then easily be created using Javascript. Attributes can of course be read, changed or validated. Everything via Backbone.js.

Now should that too game be represented as a model.

An event listener is registered directly in the constructor. This automatically updates the number of correct questions in the view as soon as the user answers a question correctly. The self-defined method "get_next_question ()" renders the view of the next question.

From my point of view, these views are one of the highlights of Backbone.js!

The View

First, the view class is created in the backbone.

The DIV “#question_show_template” is used in the render function. This is the actual HTML view (see below).
Click events, such as a click on the "Answer question" button, are defined directly in this class. over this.variables all attributes (of the question) can be accessed in every method of the View class.
Example: About this.variables.correct one learns the expected answer to this question (and can then compare this with the user input).

What is still missing is the mentioned HTML view. After all, Backbone.js needs to know exactly how the data should be presented.

<div class="row"> <div class="large-12 columns"> <img src="<%= image_url %>" /> </div> </div> <div class="row"> <div class="large-12 columns"> <p><%= question %></p> <div> <input type="radio" name="answer" value="1"> <%= answer_a %> <input type="radio" name="answer" value="2"> <%= answer_b %> <input type="radio" name="answer" value="3"> <%= answer_c %> </div> </div> <button id="next">Jetzt antworten</button> </div>

Each time the view is rendered, the attributes are automatically inserted into the HTML. So here you don't have to manually change all DIVs individually with jQuery, but only define this template once. Backbone.js does the rest. The whole thing is also W3C-compliant!

The development workflow summarized

The development with Backbone.js is really quick and from my point of view saves work in the long term. First, the models and their relationships are modeled in the backbone. These are then filled with life at runtime.
The whole thing is very modular, clear and maintainable. The questions are simply created in a text file, for example. You could also have lists or menus generated dynamically in this way.

The ability to define view templates also saves a lot of work. The template is created once - the rendering and filling of the DIVs is completely taken over by Backbone.js.

The "C" from MVC should also be emphasized here. Via simple calls such as Save() or get () Backbone.js sends a corresponding AJAX request via a RESTful JSON interface. In this way, data can be saved or loaded on the server without leaving the page. I see this as a very useful functionality, especially for single-page applications.

Personally, what I like best is the order that was created using Backbone.js. HTML user interface, Javascript and database / model are clearly separated from each other. In addition, a good interaction of these components is guaranteed by the framework. Everything is separated from one another in a very modular way. Personally, I found the learning curve to be very small. Developers with MVC experience should have no problem finding their way around.
In retrospect, I see the use of the framework in this project as very useful. Of course you have to put some time into modeling. In return, you save an enormous amount of time with subsequent maintenance and an enormous amount of headaches when handling jQuery selectors.

Do you already have experience with Backbone.js? Could you imagine an added value from developing with Backbone.js?We look forward to your opinions and experiences!