O Backbone.js is very simple and brief for fans of MVC frameworks.
Much has been written about the use of the JavaScript framework Backbone.js, but simply and briefly - not much. I will try to correct this flaw and tell web application developers as simply, easily and briefly as to why this framework can be useful for them and how, in general terms, it works. Professionals and experts on 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 note, I hope the article will be useful to anyone who works with any of the MVC frameworks.
So, imagine an average project using the MVC approach. It will probably be an online store with several models (about 10-15 usually), connected with each other by various kinds of relationships. The project will have a corresponding number of controllers, 2-3 layouts for different output devices, several controllers in the namespace / api / v1 , a lot of view's and partials. All this works as standard, the browser sends requests, controllers make data samples, transfer them to the view's view, which, in turn, are sent to the user in the browser. There is a “Search” function that searches for certain instances of a certain model, there is a view for the results that contains a loop that creates on the page the display of these found instances, there is even a mobile Android application that communicates with your servers through the API (requests controllers, which wait in namespace'e / api / v1 , by the way, often duplicating similar 'normal' controllers, only giving information in a different form).
')
Now turn on the Vanga mode. I know that the project must have a certain amount of JavaScript code. Different web applications use JavaScript to solve various tasks — jQuery is used almost everywhere with or without plug-ins, jQuery UI, and other other modules and plug-ins. We will not consider using JavaScript here to create all sorts of effects, drop-down menus, drap & drop elements and so on, which relates to decorations, we will look at working with data .
So, the Vangi mode allows me to assume that you have a Product model (because we have an online store, remember?) And certainly there is an interface manager who can bring himself a list of products according to some criterion. The manager has a stylized indicator of the number of new orders, so that immediately, as soon as possible, we can see that a new order has appeared. I think this indicator works like this: in document.ready () you made a timer and once every 60 seconds ask for an address like / api / v1 / kolichestvo_zakazov . Well, or / api / v1 / orders / new / count , depending on your attitude to linguistics. In the function that the timer starts you have a request written in jQuery ajax, which receives some data from the previously specified URL. Why some? I do not know, Wang will not help. One programmer can send a correct json in the response like {orders: {new: 3}}, another can send just figure 3. The third one on the server side can render and send in response a whole piece of html-code that is immediately suitable for inserting into the right place . In general, Wang does 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 it will no longer do you any good.
From the point of view of the 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 inherently a methodology for organizing information), it is necessary to take the next step - 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 in Backbone.js is implemented through the familiar MVC. Briefly about how it will be:
1. You have models in the application. User, Product, Order ... Excellent, with Backbone.js, you can describe these models on the client side! And these models will be real, you will be able to create new copies, edit the fields already available, delete unnecessary ones. You can not write some functions, to get some information, which will then be thrown out, get from the server instances of the order class. Perhaps, the order will contain a lot of unnecessary information, someone thinks, only the quantity was needed! May be. But no one forbids to transfer in JSON only the required order fields on the client side. And your hypothetical manager may suddenly want to see, in addition to the number of orders, the sums of each one as well - and everything is already ready, the information is already there, just show it, the objects are already at the client and synchronized with the server. And if the manager wants to change this amount right on the spot? No problem. It is much more pleasant to write order.save ({: cost => this.input.val (}) in the code) than to write a new self-made function. The 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 the DELETE to / api / v1 / products / 75 (75 is the id of this model).
2. You have pages in the application where there are necessarily many blocks of the same type. Product search results are an example. Each product can be located inside any div class = 'product'. After creating this page on the server, the connection of this area with the product is lost in it. 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 connected with, for example, to give a data attribute to the product id and use it in forms and queries ... Backbone.js implements such binding itself. This will be called View and will do even more: the product area can react to product changes and redraw itself, for example. Inside the region, you will have access to an instance of the Product class, the very same one, and you can do with it whatever you want on the client side. Do not forget to save it to Backbone.js to save your changes on the server.
By the way. Want to filter by some field in the product table? Already guessed that it does not require any additional action? You do not need to send anything to the server, getting the same table, just filtered, again. You already have the objects, just filter the product collection with a single line of javascript code. And yes, they will 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 information about this product is located when changing the product.
3. And also in the topic of data ordering. Using the client-side MVC framework, in some cases, you can reduce traffic between clients and the server to exchange small chunks of json, which will save a huge amount of traffic. You will transfer only data to clients and receive from clients, you will not constantly send full pages to your clients. All javascript and css can be loaded once and cached, then only the ordered data will be exchanged.
Instead of a conclusion: of course, 5 percent of the capabilities of Backbone.js are not touched on in this article, but I wanted to tell you not about it, but about the very idea of ​​keeping the information in order both on the server and in the browser. Software developers are engaged in ordering the world around us, we divide the world into models, reveal their properties, their behavior, state and interaction. The rapidly changing Internet practically does not follow standards (and in relation to client content there are no standards at all, apart from 4 or 5 CSS specifications, which are far from the best example of order). So let's increase the entropy of this chaos at least 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 the developer-perfectionist.
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 a store that was described at the beginning of the article.
So, imagine an average project using the MVC approach. It will probably be an online store with several models (about 10-15 usually), connected with each other by various kinds of relationships. The project will have a corresponding number of controllers, 2-3 layouts for different output devices, several controllers in the namespace / api / v1 , a lot of view's and partials. All this works as standard, the browser sends requests, controllers make data samples, transfer them to the view's view, which, in turn, are sent to the user in the browser. There is a “Search” function that searches for certain instances of a certain model, there is a view for the results that contains a loop that creates on the page the display of these found instances, there is even a mobile Android application that communicates with your servers through the API (requests controllers, which wait in namespace'e / api / v1 , by the way, often duplicating similar 'normal' controllers, only giving information in a different form).
')
Now turn on the Vanga mode. I know that the project must have a certain amount of JavaScript code. Different web applications use JavaScript to solve various tasks — jQuery is used almost everywhere with or without plug-ins, jQuery UI, and other other modules and plug-ins. We will not consider using JavaScript here to create all sorts of effects, drop-down menus, drap & drop elements and so on, which relates to decorations, we will look at working with data .
So, the Vangi mode allows me to assume that you have a Product model (because we have an online store, remember?) And certainly there is an interface manager who can bring himself a list of products according to some criterion. The manager has a stylized indicator of the number of new orders, so that immediately, as soon as possible, we can see that a new order has appeared. I think this indicator works like this: in document.ready () you made a timer and once every 60 seconds ask for an address like / api / v1 / kolichestvo_zakazov . Well, or / api / v1 / orders / new / count , depending on your attitude to linguistics. In the function that the timer starts you have a request written in jQuery ajax, which receives some data from the previously specified URL. Why some? I do not know, Wang will not help. One programmer can send a correct json in the response like {orders: {new: 3}}, another can send just figure 3. The third one on the server side can render and send in response a whole piece of html-code that is immediately suitable for inserting into the right place . In general, Wang does 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 it will no longer do you any good.
From the point of view of the 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 inherently a methodology for organizing information), it is necessary to take the next step - 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 in Backbone.js is implemented through the familiar MVC. Briefly about how it will be:
1. You have models in the application. User, Product, Order ... Excellent, with Backbone.js, you can describe these models on the client side! And these models will be real, you will be able to create new copies, edit the fields already available, delete unnecessary ones. You can not write some functions, to get some information, which will then be thrown out, get from the server instances of the order class. Perhaps, the order will contain a lot of unnecessary information, someone thinks, only the quantity was needed! May be. But no one forbids to transfer in JSON only the required order fields on the client side. And your hypothetical manager may suddenly want to see, in addition to the number of orders, the sums of each one as well - and everything is already ready, the information is already there, just show it, the objects are already at the client and synchronized with the server. And if the manager wants to change this amount right on the spot? No problem. It is much more pleasant to write order.save ({: cost => this.input.val (}) in the code) than to write a new self-made function. The 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 the DELETE to / api / v1 / products / 75 (75 is the id of this model).
2. You have pages in the application where there are necessarily many blocks of the same type. Product search results are an example. Each product can be located inside any div class = 'product'. After creating this page on the server, the connection of this area with the product is lost in it. 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 connected with, for example, to give a data attribute to the product id and use it in forms and queries ... Backbone.js implements such binding itself. This will be called View and will do even more: the product area can react to product changes and redraw itself, for example. Inside the region, you will have access to an instance of the Product class, the very same one, and you can do with it whatever you want on the client side. Do not forget to save it to Backbone.js to save your changes on the server.
By the way. Want to filter by some field in the product table? Already guessed that it does not require any additional action? You do not need to send anything to the server, getting the same table, just filtered, again. You already have the objects, just filter the product collection with a single line of javascript code. And yes, they will 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 information about this product is located when changing the product.
3. And also in the topic of data ordering. Using the client-side MVC framework, in some cases, you can reduce traffic between clients and the server to exchange small chunks of json, which will save a huge amount of traffic. You will transfer only data to clients and receive from clients, you will not constantly send full pages to your clients. All javascript and css can be loaded once and cached, then only the ordered data will be exchanged.
Instead of a conclusion: of course, 5 percent of the capabilities of Backbone.js are not touched on in this article, but I wanted to tell you not about it, but about the very idea of ​​keeping the information in order both on the server and in the browser. Software developers are engaged in ordering the world around us, we divide the world into models, reveal their properties, their behavior, state and interaction. The rapidly changing Internet practically does not follow standards (and in relation to client content there are no standards at all, apart from 4 or 5 CSS specifications, which are far from the best example of order). So let's increase the entropy of this chaos at least 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 the developer-perfectionist.
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 a store that was described at the beginning of the article.
Source: https://habr.com/ru/post/184550/
All Articles