Modular configuration of Backbone.js

I'm new to the backbone, and I'm here to ask for a little help understanding how I will build my current webapp project. I am developing a modular administration panel for servers. Each panel “page” must be a packaged “module”, including controllers, models, and views.

The panel will consist of a basic layout, loaded initially, with basic navigation. When the user clicks on the link in the navigation, the page is loaded via AJAX into the layout. (And if that sounds silly / there is a reason not to do this, tell me :))

Since others will also develop these pages, and since they are modular, I will not know which models, views and controllers will be presented to me inside the download page through AJAX.

What is the best way for me to do this with my spine?

I am particularly interested in how I will dynamically renew Backbone models, etc., how I could (for example) exit a page and / or revise it later.

Does Backbone provide something I can work with, I need to hack something, is there a better way to do what I am missing?

+6
source share
4 answers

Your thinking around problems sounds very correct. Make your user interface components as possible. Watch 10 minutes of video to learn more about the best examples of user interface components.

If you are interested in other important JavaScript application development issues, see the BoilerplateJS reference architecture that I posted to share my experience. This contains a similar sample application that you described (menu with component activation).

my recommendations for activating your user interface are: deactivation:

  • Do not remove / create DOM components. Reuse with hide / show, as your items will appear in memory even after being removed from the DOM
  • Minimize the storage of status information on the client side. When a user reviews a component, update it with a server call and then make it visible (use the server as the only truth about the status information).

See the BoilerplateJS component component examples for more information. I don't know much who uses it with BackboneJS (currently it comes with knockoutJS). We will post an example using BackboneJS in v0.2, which is due to take place in a week.

+2
source

The common modular boot script environment used in conjunction with Backbone will require .js. Perhaps this is what you are looking for. Require.js are all AMD modules, asynchronous modules. Typically, each model, collection, view is its own module, which determines the dependencies that a particular module requires, and then loads these modules as necessary. It is especially well-suited for large projects where you have many individual items that need to be distributed together at different points in your application.

Of course, you could combine several basic elements in one module (as a rule, I reserve this for views and separate subzones, which will be used only with the parent view), but it really depends on you.

With Backbone, as a rule, the goal is to create single-page applications, which means that all scaffolding pages are usually wrapped as a single file and are fully uploaded to the client side on the go. Then the data for each page is called through ajax and populated when the user navigates and loads various aspects of the application. Is that what you intended in your description?

If you want to load different pages that are individually captured on the server, then I'm not sure if the answer is the answer. There are other server-side MVC server environments that help with this.

This is usually about how the reference line is used for this kind of thing.

As for extending Backbone models and such, Backbone uses Underscore as a dependency, and underlining provides a nice _.extend() function that can easily expand all your objects in almost any way you want. Overriding the default functionality by throwing into mixins is all pretty painless as Backbone goes. As a basis, Backbone is very enjoyable when it comes to changing, changing, and tuning every little bit and fragment.

Regarding the processing of users visiting and reviewing pages, Backbone.router allows you to create URLs that not only point to specific “pages” in your application, but also to execute arbitrary code that must be executed in order to get there. Something like a logged in user who visited "mysite / # account" will start the router to load certain scripts that display this particular view, and also possibly fetch() necessary data to get this view for the user.

I'm not sure if there are resources that give you some basic structure to start with. Most of the experiences that I know tend to go through basic tutorials such as the Todo List and make their way out of there. I'm not sure what your level of experience is with javascript or programming in general, but I started with Backbone and require it when I really didn't know anything. Only a vague idea of ​​what JSON is and a low level of understanding of HTTP as in "this is what the web page receives." However, I think Backbone was very easy to get for me to get started, and it deepened my knowledge of the entire structure of a client-side RESTful application.

There is a really good list of Todo List apps in many different variations, such as Backbone and Knockout, as well as some others. When deciding on the structure, I basically went through this code, comparing all the different available frameworks and the selected Backbone, because it just seemed to me the most suitable for me. I do not regret it. This is a lot of fun, and I think the best way to get into it is to just try the demo tutorials.

+2
source

Take a look at Marionette or Chaplin . Both are built on top of Backbone and provide a structured way to create a larger application with Backbone.

+1
source

Here is a tutorial on organizing your application as modules using backbonejs

http://backbonetutorials.com/organizing-backbone-using-modules/

0
source

Source: https://habr.com/ru/post/925523/


All Articles