How to organize code in Backbone.js and/or best practices?

Question

JavaScript

Good afternoon,
I'm studying backbone.js, the essence and principles of the framework are clear, whether it's bad or good, but I'm ready to write on it. However, it is not at all clear how to organize the code and project files. The freedom of creativity, which the Bolsheviks talked about so much, turns into a real nightmare for a beginner in backbone.js. By the end of the first day of experimenting with this framework, I ended up with an unreadable sheet of mixed models / collections / routes and views.
So:
1. What are the best practices for organizing code on the backbone, where to read?
2. How and with what to split entities into files and should it be done?
3. What advice can you give from your experience of mastering this framework.
PS try not to suggest mastering ember, angular, etc.
upd: PPS: the question also arose: if my view is used only with the same template and only the model changes in the instance, is it justified to use a singleton and what implementation can you advise?

Answer 1

1. I put all views separately, models separately, collections separately, etc. Some add up by business entities ("by screens", "by pages").
2. Any modular system (currently SystemJS and ES6 modules), based on one class - one file.
3. Start using data binding right away: rivets.js, ractive, vue.js, save a lot of time. Check out the list of extensions - it will come in handy.
PS Pay attention to all sorts of good practices in OOP, such as SOLID By the way, master ember / angular, etc. optional, but worth a look - it will be clearer what are the disadvantages of Backbone and how to get around them.

Answer 2

I asked a similar question, having written a couple of dozen models on the backbone, I realized that there was not enough of a certain general approach to make it all beautifully organized, I stumbled upon marionettejs.com , I stumbled upon a simply gorgeous book: https://leanpub.com/marionette-gentle- introduction (this was my first book in English, it was quite easy to read even with my pre-beginner level). And the approach described there was just a revelation for me.
What the puppet actually gives:

• models stay out of the backbone
  
• significantly expands the architecture
  
• replaces views with more thoughtful ones
  

Answer 3

1. Try to analyze how often you have a situation "one model - several views". If often, then scatter them into separate files. If not, consider whether this division is necessary (into model and view). In my practice, the second option significantly prevails, so I partially abandoned BB in favor of MatreshkaJS (this is not a call to action, just think about it).
2. If the model / view takes up more than 1 screen and you have to scroll to move through the code - break it into modules. So you're trying to put in too much.