The basic architecture of a web application on Backbone.js
Developers often ask to talk about my experience using Backbone.
Many have heard about this MVC framework, looked at examples and documentation, but do not dare to start working with it. Therefore, yesterday I made a mini-report at the MoscowJS meeting, called to tell about how we built the basic architecture and what were the advantages. And today in this article I publish slides, charts and a short description.
The project Ostrovok.ru has users who are looking for hotel rooms and users who enter information about these rooms. The extranet is an interface for hotels and we decided to create it based on the REST API. Actually, the backend developers were very pleased with the unification of the CRUD process.
')
Data is very important to us and users need to be sure that they did everything right. Therefore, we wrote a common component for all collections and models that allows you to:
Why this if every Backbone model has previousAttributes?
They contain only one step and a few changes will make previousAttributes different from the original state.
And if the user returned the original values in the field?
This component uses the isEqual function, which completely compares the initial state and the current state. Therefore, if they do not differ, the panel will be automatically hidden.
But collections do not have a save method! How do you save them?
We wrote a method that finds models in the collection that were created, modified, or deleted. And then we make three requests in which only these models participate. Thus, we can easily work with large amounts of data.
The code in the studio!
We will refine this component, bring it into a beautiful view and share it with everyone on behalf of the Isle of Front-End Fans.
As a result, users received a fast and convenient tool for working with data, and developers - a good basis for further development. Now four people are working on the project: two front-tenders and two backenders, one of whom writes new pages regularly and easily. And I am sure that the new developer will be able to easily join and continue developing the project.
Personally for myself, I saw that Backbone is a great first step for getting to know MVC on a client. It contains a minimum of components and methods, which allows you not to bury yourself in the documentation, but to try it in your work.
Taking this opportunity, I want to thank Ilya Batiya bait , Egor Vinogradov and Anton Egorov satyrius for their help, advice and suggestions in creating the project on Backbone. Thank you guys!
Many have heard about this MVC framework, looked at examples and documentation, but do not dare to start working with it. Therefore, yesterday I made a mini-report at the MoscowJS meeting, called to tell about how we built the basic architecture and what were the advantages. And today in this article I publish slides, charts and a short description.
REST API
The project Ostrovok.ru has users who are looking for hotel rooms and users who enter information about these rooms. The extranet is an interface for hotels and we decided to create it based on the REST API. Actually, the backend developers were very pleased with the unification of the CRUD process.
')
Pros and prospects
- HTML templates in one request
- JSON compactness
- Local storage
- mobile application
- desktop application
Basic architecture
What you need to add a new page
- describe the model and, if necessary, the collection that the page will work with
- write a view that inherits from the PageView class
- add a slice of html template
Opening page
Profit methods initialize and render
While the data is loaded from the server, we can render part of the page. This is, for example, a column with filters in which there are a bunch of complex components. And the average ajax request is 150 ms, which will be enough for this routine.Component change and save
Data is very important to us and users need to be sure that they did everything right. Therefore, we wrote a common component for all collections and models that allows you to:
- monitors model changes and offers to keep
- allows you to show and roll back to the original data
- stops closing the page if something is not saved
Why this if every Backbone model has previousAttributes?
They contain only one step and a few changes will make previousAttributes different from the original state.
And if the user returned the original values in the field?
This component uses the isEqual function, which completely compares the initial state and the current state. Therefore, if they do not differ, the panel will be automatically hidden.
But collections do not have a save method! How do you save them?
We wrote a method that finds models in the collection that were created, modified, or deleted. And then we make three requests in which only these models participate. Thus, we can easily work with large amounts of data.
The code in the studio!
We will refine this component, bring it into a beautiful view and share it with everyone on behalf of the Isle of Front-End Fans.
Total
As a result, users received a fast and convenient tool for working with data, and developers - a good basis for further development. Now four people are working on the project: two front-tenders and two backenders, one of whom writes new pages regularly and easily. And I am sure that the new developer will be able to easily join and continue developing the project.
Personally for myself, I saw that Backbone is a great first step for getting to know MVC on a client. It contains a minimum of components and methods, which allows you not to bury yourself in the documentation, but to try it in your work.
Taking this opportunity, I want to thank Ilya Batiya bait , Egor Vinogradov and Anton Egorov satyrius for their help, advice and suggestions in creating the project on Backbone. Thank you guys!
Source: https://habr.com/ru/post/129928/
All Articles