How to organize a large single page application?

Question

JavaScript

I need to write a client for a call center, an application with a lot of widgets, tables, and so on. I want to use react, redux, webpack for it. But I do not know how to organize modularity and dynamic loading of modules. I was thinking about making a common layout and loading various widgets and so on through the iframe, which are separate redux applications, and using localstorage to synchronize the state, maybe this can be done differently?

Answer 1

iframes are definitely a bad option - most likely you will get a lot of unexpected problems + technologically this is an obvious crutch.
Ajax has long been easy to use in any browser: load the necessary modules, paste them in the right places. Modularity within code is provided by CommonJS (requirejs) modules.

Answer 2

There are several options for dynamically loading modules.
For example, you can place each component in a separate file, but at the end, instead of exports, insert the component into the browser's global scope.

var SomeComp = React.createClass({
   ...
})

window.SomeComp = SomeComp

And then in another file, you can easily refer to this component:

...
  render(){
      ...
     <SomeComp ... />
     ...
  }

True, with this approach, you will have to manually implement dynamic loading of scripts. However, it is not very difficult, and there are ready-made solutions.
But it's best to use webpack loaders . Moreover, they are just created for your task.

Answer 3

Why don't you use Angular?

Answer 4

Pay attention to Ember.JS, the entry threshold is high, but it's worth it.