Marionette.js (Backbone) - How to properly organize a modular structure?

Question

JavaScript

There was some uncertainty with the implementation of one SPA module. The module includes several pages and a set of submodules. Each page has 3 modules (3 separate regions) and modules can "intersect", for example:
Page 1
- Module 1
- Module 2
- Module 3
Page 2
- Module 4
- Module 2
- Module 3
...
Page N
- Module 1
- Module 7
- Module 5
It is possible to implement loading and re-rendering of all modules with each route change, but this option seemed not optimal. As for me, it is most logical to render all modules on the first page load and re-render the desired module when the route changes. There is an option to create a date attribute on the first rendering of a module and check it before re-rendering. How else can such a problem be solved? Maybe there are some patterns for such situations? Thanks in advance.

Answer 1

As an option, you need to define your own layout for each page, in which to prescribe those modules that are needed. When changing the route, just render the desired layout.

Answer 2

Quite logical, it seems to me, is to create functions for loading the necessary data for each module such that repeated calls return already loaded data, and do not reload them.
something like this (model method)

loadModuleData: ->
  return @deferred if @deferred?

  @deferred = new $.Deferred()

  // --- загрузка данных ---
  collection = new SomeCollection()
  collection.fetch(reset: true)
    .done => 
      @deferred.resolve()
    .fail (resp) =>
      @deferred.reject(resp)
      delete @deferred
  // --- загрузка данных ---
  
  @deferred.promise()

So. Before calling the method, we show the user some kind of progressbar or spin. Next, we call the method and after loading we create the necessary views / models / collections / reder everything. Then we hide the progressbar/spin and the user sees a new page.