Как организовать большой single page application?

Question

[danikkk]

Мне нужно написать клиент для колл центра, аппликация с большим количеством виджетов, таблиц, и тд. Я хочу использовать для нее react, redux, webpack. Но я незнаю как организовать модульность и динамическую загрузку модулей. Я думал о том, чтобы сделать общий layout и через iframe загружать различные виджеты и тд, которые являются отдельными redux аппликациями, а для синхронизации state использовать localstorage, возможно это можно сделать по другому?

Comments

[123 123]

Почему вы хотите сделать это именно через iframe?

[danikkk]

Роман Лютиков: можно и не через iframe, вот еще вариант нашел https://github.com/insin/react-examples/tree/maste...

[123 123]

А в чем конкретная проблема: у вас не работает динамическая подгрузка или вы не знаете в каком месте подгружать модули? Или как синхронизировать между ними состояние?

[danikkk]

Роман Лютиков: я просто не знал в каком месте их загружать, теперь понятно, я это сделаю по роуту, теперь только один вопрос можно ли как-то удалять модули вызваны из require.ensure?

[123 123]

danikkk: Для чего их удалять? Они подгружаются первый раз и кешируются браузером.

[xmoonlight]

Я занимаюсь разработкой АРМ-ов для СС.
Под какую телефонию пишите свой?

Answer 1

[norlin]

iframe'ы однозначно плохой вариант – скорее всего, огребёте много неожиданных проблем + технологически это явный костыль.
Ajax уже давно можно спокойно использовать в любых браузерах: подгружайте нужные модули, вставляйте в нужные места. Модульность внутри кода обеспечивается CommonJS (requirejs) модулями.

Comments

[danikkk]

а если принять во внимание конкретную архитектуру? как это правильно сделать в redux?

Answer 2

[Владимир Шестаков]

Посмотрите динамические роутеры: https://github.com/rackt/react-router/blob/latest/...
И динамическую загрузку в webpack https://webpack.github.io/docs/code-splitting.html

Answer 3

[Roman_Kh]

Есть несколько вариантов динамической загрузки модулей.

Например, можно разместить каждый компонент в отдельном файле, но в конце вместо exports вставлять компонент в глобальный скоуп браузера.

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

window.SomeComp = SomeComp

И затем в другом файле вы легко можете сослаться на этот компонент:

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

Правда, при таком подходе придется вручную реализовать динамическую загрузку скриптов. Впрочем, это не очень сложно, да и есть готовые решения.

Но лучше всего воспользоваться webpack loaders. Тем более, что они как раз и созданы для вашей задачи.

Comments

[Владимир Шестаков]

webpack loaders для трансформации при сборки, а не для динамической загрузки.

[Дмитрий Полушкин]

Владимир Шестаков: Позволяет в том числе и динамическую загрузку. Посмотрите ondemand.

Answer 4

[Andrew Lewman]

Почему Вам не использовать Angular?

Comments

[Владимир Шестаков]

Почему нужно использовать Angular?

[Константин Бердников]

Ну может потому что в нем есть все для выполнения поставленной задачи, и с его применением вопрос автора теряет смысл.

[Andrew Lewman]

Владимир Шестаков: А почему нужно?

[Владимир Шестаков]

Andrew Lewman: не нужно)

Answer 5

[Андрей]

Обратите внимание на Ember.JS, порог вхождения высокий, но оно того стоит.