В начале 2017 года я с гордостью анонсирую новый фреймворк Redux - Collux (https://bhou.gitbooks.io/collux/content/)

Посмотрите это 3-х минутное видео, чтобы понять архитектуру Redux с Collux:

Почему другой фреймворк?

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

Но я обнаружил, что большинство из них не достигают этой цели. Вот причина:

Шаблон архитектуры / дизайна не обязательно дает вам высококачественное программное обеспечение

Flux лучше MVC? Redux лучше Flux? (Я так не думаю). Если вы оба ответили утвердительно, подумайте над следующим вопросом: какая архитектура будет следующей на замену Redux?

На самом деле важно не то, какую архитектуру использует ваша команда, а важно: имеет ли ваша команда четкое представление об архитектуре и соответствует ли она вашим потребностям сейчас? Если нет, то в чем проблема? Facebook не изобрел архитектуру Flux для развлечения, они изобрели архитектуру Flux, потому что обнаружили, что MVC не соответствует их потребностям. Но имейте в виду, что MVC использовался как стандарт де-факто на протяжении десятилетий, почему мы не создали Flux или альтернативы ранее?

Я думаю, что одна из наиболее важных причин заключается в том, что большая часть команды знает, что есть проблема, но трудно сказать, в чем проблема. Глубокая причина этой ситуации в том, что существует разрыв между архитектурой (и абстракцией высокого уровня) и кодом. Ваша команда жалуется на то, что сложно поддерживать код, сложно добавлять новые функции и сложно выявлять / исправлять ошибки. Но как это связано с вашей архитектурой?

Фреймворк Collux - это не просто фреймворк для кодирования, он восполняет этот пробел за вас с помощью инструмента разработчика воротника. Например, следующие две строки кода создают приложение архитектуры сокращения единого маршрута.

const app = Collux.createApp('redux-single-route-app');
app.run();

Запустив приложение, вы мгновенно получите статическое представление о том, как выглядит ваша архитектура в инструменте collar dev:

С помощью инструмента collar dev вы также можете получить более подробную архитектуру / поток данных внутри этих модулей. Например, на следующей диаграмме показан поток данных по умолчанию для компонента магазина (путем развертывания компонента магазина в инструменте разработки воротника в контекстном меню (щелкните правой кнопкой мыши компонент магазина)):

В программной инженерии все зависит от воздействия

Вы хотите знать, как ваш код влияет на архитектуру, поток данных и другие функциональные возможности модулей. С Collux это все возможно, и вы получите их без дополнительных усилий. Например, давайте добавим reducer в наше приложение redux:

app.reduce('INCREMENT', (prevState, action) => {
  return prevState + 1;
});

Если вы снова проверите инструмент collar dev, поток данных магазина автоматически обновится до следующей формы:

Сравните эту диаграмму с предыдущей, вы легко поймете, что делает ваш недавно добавленный редуктор и каково влияние, верно?

Collux предоставляет вам не только статическую архитектуру и поток данных, но и динамическую. С помощью функции воспроизведения сервера collar dev вы можете динамически видеть, как ваши данные передаются между модулями и как они распространяются в вашем коде. См. Следующий gif, чтобы понять однонаправленный поток данных Redux:

Модульный тест ОБЯЗАТЕЛЬНО, но его недостаточно

Большим преимуществом Redux является то, что его очень легко тестировать, потому что reducer - это чистая функция. Вам определенно нужно протестировать свой код с помощью модульного теста, но модульного теста недостаточно. Протестированный редуктор не означает, что ваше приложение будет работать правильно. Тест пользовательского интерфейса на основе браузера, например Selenium? Да, вам это тоже нужно, но вам нужно сначала изучить это, поверьте мне, это требует времени. Между модульным тестом и тестом пользовательского интерфейса на основе браузера вам понадобится что-то, что можно протестировать без участия пользовательского интерфейса, но которое охватывает несколько компонентов / модулей.

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

Думайте о своем тесте Collux как об электрическом тестере. Вместо того, чтобы использовать его для проверки тока / напряжения, вы используете его для проверки потока данных через два тестовых зонда (два узла в вашей цепи потока данных, которые вы выбрали для теста).

Возьмем один простой пример (приложение-счетчик):

Когда компонент хранения получает действие INCREMENT, что произойдет в компоненте представления?

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

В Collux вы можете просто выполнить следующий код, он проверяет поток данных от ввода хранилища компонента хранилища и узла обновления состояния внутри компонента представления:

const collarTestAddon = new CollarTestAddon();
Collux.use(collarTestAddon);
// create a test suite between to nodes
const testSuite = collarTestAddon.getTestSuite(
  'store.input',   // the full name of store input node
  'view.stateUpdater  // the full name of state updater in view component
);
// test it
testSuite.test(
  {actionType: 'INCREMENT'}, // the input 
  (error, result) => {  // test the output here
    console.log(result);
    test.equal(result.state === 1);
    test.done();
  }
);

Больше нет черного ящика, измените фреймворк, чтобы он соответствовал вашим потребностям.

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

Collux основан на collar.js, простой реактивной библиотеке. API фреймворка Collux - это просто функция-оболочка, которая поможет вам построить поток данных и архитектуру. Вы всегда можете настроить Collux, предоставив свой собственный API для построения архитектуры и потока данных, см. Документ collux для более подробной информации.

Например, следующий фрагмент кода представляет собой простой поток данных обработки действий без использования редуктора:

Когда вы вызываете API handleAction, созданный в этом примере, инструмент collar dev визуализирует следующий поток данных:

Путешествие во времени?

Путешествие во времени - очень крутая функция Redux. Collux также поддерживает это с помощью инструмента разработчика воротника. Вы можете не только вернуться в свое прошлое состояние, но и отправиться в будущее!

Посмотрите это видео, чтобы понять архитектуру Redux и интересные особенности Collux:

Полезная ссылка

Github of Collux: https://github.com/bhou/collux/

Документ Collux: https://bhou.gitbooks.io/collux/content/

Collar.js: http://collarjs.com/