How are Single page applications written from modules?

Question

JavaScript

Good time of the day Community!
I'm making an app for educational purposes. In the next project I will use Backbone.js + Require.js (these are the requirements)
What is:
- A simple test Tudu application (Backbone.js) written in one JS file
What is needed:
- Split the current application into modules using Require.js
What is done:
require.config. With this, we clearly prescribe the paths, add backbone and underscore to shim. All according to the manual.
We separate objects (models, views ... etc) by JS files. Objects are wrapped in define and given to return.
What is unclear:
44th line
Why the collection is not transferred to the view, I do not understand.
How is the application initialized? How does the view see the data?
Perhaps you will find simple examples of such an application and answers to questions. Thank you!
ps github googled everything there is quite heaped up what I came across

Answer 1

Let's take a closer look at what's going on:
1. main.js

require([
    'backbone', 
    'views/app', 
    'routers/router'], 
function (Backbone, AppView, Workspace) {
  // ...
  new AppView();
});

We just create an AppView. Yes, we do not seem to be passing anything to it when creating it. So you need to go further and figure out what's going on in views/app.
2. views/app.js
And here we already see in the dependencies both the collection of todo models and the internal representation for the todo element:

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/todos',              // <= Коллекция Todos
    'views/todos',                    // <= Представление для элемента todo
    'text!templates/stats.html',
    'common'
], function ($, _, Backbone, Todos, TodoView, statsTemplate, Common) {
    var AppView = Backbone.View.extend({
        // ...
    });
    return AppView;
});

Here is the conclusion we can come to:
3. views/app.js
Looking inside the AppView, we will find an example of creating a new TodoView with a new model passed inside:
4. collections/todos.js
Similarly, you can look inside the collections/todos collection and see the models/todo dependency there and see how it is used there.

Answer 2

Why requirejs? Its use is now justified only in old projects, for support.
Switch to webpack for example. He is good at es6 modules. You write all the code using the latest es2015 features, and in webpack you just add the babel loader. The output is es5.
Here is an example.
Here's another