O Backbone.js is very simple and concise for fans of MVC frameworks
- Tutorial
A lot has been written about the use of the JavaScript framework Backbone.js, but not much is simple and concise. I will try to fix this shortcoming and tell web application developers as simple, accessible, and brief as possible why this framework is useful to them and how, in general terms, it works. Professionals and specialists at Backbone.js: you can not waste time, this story is for beginners. To be honest, it’s not necessary to be a Rails developer to read this article, I hope this article is useful to everyone who works with any of the MVC frameworks.
So, imagine an average project using the MVC approach. This is likely to be an online store with several models (about 10-15 usually) related to each other by various types of relationships. The project will have an appropriate number of controllers, 2-3 layouts for different output devices, several controllers in namespace / api / v1, a lot of view's and partial's. All this works as standard, the browser sends requests, the controllers make data samples, send them to view'shki, they, in turn, are sent to the user in the browser. There is a “Search” function that searches for specific instances of a certain model, there is a view for the results that contains a loop that creates a display of these found instances on the page, there is even a mobile application for Android that communicates with your servers via the API (it requests controllers, which are waiting in namespace'e / api / v1 , by the way, often duplicating similar 'ordinary' controllers, only giving information in a different form).
Now turn on the Wangi mode. I know that the project necessarily has some JavaScript code. Various web applications use JavaScript to solve various problems - almost everywhere jQuery is used with or without plugins, jQuery UI and other other modules and plugins. We will not consider here the use of JavaScript to create all kinds of effects, drop-down menus, drap & drop'em elements, and so on, which relates to embellishments, we will consider working with data .
So, the Wangi mode allows me to assume that you have a Product model (we have an online store, remember?) And certainly there is a manager interface that can display a list of products according to some criteria. The manager has a stylized indicator of the number of new orders in order to immediately, as soon as possible, see that a new order has appeared. I think this indicator works like this: in document.ready () you made a timer and every 60 seconds you request an address like / api / v1 / kolichestvo_zakazov . Well, or / api / v1 / orders / new / count, looking at your attitude to linguistics. In the function that the timer starts, you have a request written in jQuery ajax that receives some data at the previously specified URL. Why some? I don’t know, Wang won’t help. One programmer can send the correct json in response, like {orders: {new: 3}}, another can send just the number 3. The third one can render on the server side and send a whole piece of html code in the response, suitable immediately for insertion into the right place in the document . In general, Vanga will not help here, there is no order, law, and the maximum level of surprise. But most importantly - the data, after receiving, simply speaking, is lost. The client side received something, did something with this data and they will no longer bring you any benefit.
From the point of view of a perfectionist philosopher, this is terrible. Agree, if hundreds of ways to organize data on the server side have already been invented (MVC approach, any DBMS is essentially a methodology for organizing information), so the next step is to take order - to organize data on the client side .
What can Backbone.js offer us? The first, in my opinion, the most important thing is the ordering of data, which is implemented in Backbone.js through the familiar MVC. Briefly about how it will be:
1. You have models in the application. User, Product, Order ... Great, with Backbone.js you can describe these models on the client side! And these models will be real, you can create new instances, edit fields of existing ones, delete unnecessary ones. You can not write any functions, to get some information that will later be thrown, get instances of the order class from the server. Perhaps order will contain a lot of unnecessary information, someone will think, only quantity was needed! May be. But no one forbids to transmit in JSON only the order fields necessary on the client side. And your hypothetical manager may suddenly want to see, in addition to the number of orders, the sums of each - and we’ve already done everything, the information is already there, just show it, the objects are already on the client and synchronized with the server. And if the manager wants to change this amount right on the spot? Not a problem. It’s much nicer to write order.save ({: cost => this.input.val (}) in the code than writing a new home-made function. Models will know the URL where to send GET, POST, PUT and DELETE requests and will do it themselves, when needed, for example, product.delete () will send DELETE to / api / v1 / products / 75 (75 is the id of this model).
2. You have pages in the application where you must have many similar blocks. Product search results are an example. Each product can be located inside a div class = 'product'. After creating this page on the server, the connection of this area with the product described in it is lost. If you want to do something on this page, you will have to invent a way to let this area know what product it is related to again, for example, to give a data attribute with the product id and use it in forms and requests ... Backbone.js implements such a binding itself. This will be called View and will do even more: the product area can respond to product changes and redraw itself, for example. Inside the area, you will have an instance of the Product class available, the very one, and you can do anything with it on the client side.
By the way. Want to filter by some field of the product table? Have you already guessed that this does not require any additional actions? No need to send anything to the server, getting the same table, only filtered, again. You already have objects, just filter the collection of products with one line of javascript code. And yes, they also redraw themselves, you need to take care of this only once, telling Backbone that you want to update a piece of the page where there is information about this product when the product changes.
3. And also in the topic of organizing data. Using the client side MVC framework, in some cases, you can reduce the traffic between clients and the server to exchange small pieces of json, which will save a huge amount of traffic. You will transmit to customers and receive only data from customers, you will not constantly send full pages to customers. All javascript and css can be loaded once and cached, then there will only be an exchange of data ordered as you like.
Instead of a conclusion: of course, this note does not touch on 5 percent of the possibilities of Backbone.js, but I didn’t want to talk about it, but about the idea of maintaining the information in order both on the server and in the browser. Software developers organize the world around us, we divide the world into models, identify their properties, their behavior, state and interaction. The rapidly changing Internet practically does not follow the standards (and there are no standards in general with respect to client content, except for 4 or 5 CSS specifications, which are far from the best example of order). So let’s increase the entropy of this chaos even in such a convenient way - we will keep the data in a structural order and in a synchronized state!
Thank you for your attention, with respect, a perfectionist developer.
PS If the article turns out to be interesting to the community, I will write a sequel, with examples of what will change for the better when using Backbone.js using the example of the store that was described at the beginning of the article.
So, imagine an average project using the MVC approach. This is likely to be an online store with several models (about 10-15 usually) related to each other by various types of relationships. The project will have an appropriate number of controllers, 2-3 layouts for different output devices, several controllers in namespace / api / v1, a lot of view's and partial's. All this works as standard, the browser sends requests, the controllers make data samples, send them to view'shki, they, in turn, are sent to the user in the browser. There is a “Search” function that searches for specific instances of a certain model, there is a view for the results that contains a loop that creates a display of these found instances on the page, there is even a mobile application for Android that communicates with your servers via the API (it requests controllers, which are waiting in namespace'e / api / v1 , by the way, often duplicating similar 'ordinary' controllers, only giving information in a different form).
Now turn on the Wangi mode. I know that the project necessarily has some JavaScript code. Various web applications use JavaScript to solve various problems - almost everywhere jQuery is used with or without plugins, jQuery UI and other other modules and plugins. We will not consider here the use of JavaScript to create all kinds of effects, drop-down menus, drap & drop'em elements, and so on, which relates to embellishments, we will consider working with data .
So, the Wangi mode allows me to assume that you have a Product model (we have an online store, remember?) And certainly there is a manager interface that can display a list of products according to some criteria. The manager has a stylized indicator of the number of new orders in order to immediately, as soon as possible, see that a new order has appeared. I think this indicator works like this: in document.ready () you made a timer and every 60 seconds you request an address like / api / v1 / kolichestvo_zakazov . Well, or / api / v1 / orders / new / count, looking at your attitude to linguistics. In the function that the timer starts, you have a request written in jQuery ajax that receives some data at the previously specified URL. Why some? I don’t know, Wang won’t help. One programmer can send the correct json in response, like {orders: {new: 3}}, another can send just the number 3. The third one can render on the server side and send a whole piece of html code in the response, suitable immediately for insertion into the right place in the document . In general, Vanga will not help here, there is no order, law, and the maximum level of surprise. But most importantly - the data, after receiving, simply speaking, is lost. The client side received something, did something with this data and they will no longer bring you any benefit.
From the point of view of a perfectionist philosopher, this is terrible. Agree, if hundreds of ways to organize data on the server side have already been invented (MVC approach, any DBMS is essentially a methodology for organizing information), so the next step is to take order - to organize data on the client side .
What can Backbone.js offer us? The first, in my opinion, the most important thing is the ordering of data, which is implemented in Backbone.js through the familiar MVC. Briefly about how it will be:
1. You have models in the application. User, Product, Order ... Great, with Backbone.js you can describe these models on the client side! And these models will be real, you can create new instances, edit fields of existing ones, delete unnecessary ones. You can not write any functions, to get some information that will later be thrown, get instances of the order class from the server. Perhaps order will contain a lot of unnecessary information, someone will think, only quantity was needed! May be. But no one forbids to transmit in JSON only the order fields necessary on the client side. And your hypothetical manager may suddenly want to see, in addition to the number of orders, the sums of each - and we’ve already done everything, the information is already there, just show it, the objects are already on the client and synchronized with the server. And if the manager wants to change this amount right on the spot? Not a problem. It’s much nicer to write order.save ({: cost => this.input.val (}) in the code than writing a new home-made function. Models will know the URL where to send GET, POST, PUT and DELETE requests and will do it themselves, when needed, for example, product.delete () will send DELETE to / api / v1 / products / 75 (75 is the id of this model).
2. You have pages in the application where you must have many similar blocks. Product search results are an example. Each product can be located inside a div class = 'product'. After creating this page on the server, the connection of this area with the product described in it is lost. If you want to do something on this page, you will have to invent a way to let this area know what product it is related to again, for example, to give a data attribute with the product id and use it in forms and requests ... Backbone.js implements such a binding itself. This will be called View and will do even more: the product area can respond to product changes and redraw itself, for example. Inside the area, you will have an instance of the Product class available, the very one, and you can do anything with it on the client side.
By the way. Want to filter by some field of the product table? Have you already guessed that this does not require any additional actions? No need to send anything to the server, getting the same table, only filtered, again. You already have objects, just filter the collection of products with one line of javascript code. And yes, they also redraw themselves, you need to take care of this only once, telling Backbone that you want to update a piece of the page where there is information about this product when the product changes.
3. And also in the topic of organizing data. Using the client side MVC framework, in some cases, you can reduce the traffic between clients and the server to exchange small pieces of json, which will save a huge amount of traffic. You will transmit to customers and receive only data from customers, you will not constantly send full pages to customers. All javascript and css can be loaded once and cached, then there will only be an exchange of data ordered as you like.
Instead of a conclusion: of course, this note does not touch on 5 percent of the possibilities of Backbone.js, but I didn’t want to talk about it, but about the idea of maintaining the information in order both on the server and in the browser. Software developers organize the world around us, we divide the world into models, identify their properties, their behavior, state and interaction. The rapidly changing Internet practically does not follow the standards (and there are no standards in general with respect to client content, except for 4 or 5 CSS specifications, which are far from the best example of order). So let’s increase the entropy of this chaos even in such a convenient way - we will keep the data in a structural order and in a synchronized state!
Thank you for your attention, with respect, a perfectionist developer.
PS If the article turns out to be interesting to the community, I will write a sequel, with examples of what will change for the better when using Backbone.js using the example of the store that was described at the beginning of the article.