2017-02-10 1 views
7

Итак, мы недавно подхватили React в нашей компании в качестве интерфейсной технологии для создания нашего огромного веб-приложения для бизнеса. Говоря недавно, я имею в виду, что у нас нет предыдущего опыта работы с React (у нас есть огромный фон AngularJS), и, говоря огромное приложение, я имею в виду, что это действительно огромная и очень динамичная с множеством и множеством разных частей и функциональности.Реагирующая архитектура для огромного бизнес-приложения

Поскольку у нас будет много огромных компонентов, которые играют очень важную роль и имеют сложную логику внутри них, а потому, что мы хотим, чтобы они были легко подключаемыми и многоразовыми, мы хотим, чтобы они были как можно более изолированными от внешний мир и другие части нашего приложения, потому что в противном случае из-за их размера и сложной функциональности было бы практически невозможно разработать и поддерживать их. Именно по этой причине мы решили НЕ использовать Redux, по крайней мере, вначале, в то время как мы разрабатываем только отдельные компоненты, потому что это ставит под угрозу изоляцию компонентов и делает невозможным понимание всей логики потока данных приложения, когда существует так много сложных компоненты. Хотя я считаю, что наш выбор может быть неправильным, потому что, как я уже упоминал, у нас нет опыта с React.

Как я уже говорил, приложение очень динамично. Под этим я подразумеваю, что компоненты фактически отображаются данными. Мы используем различные классы поставщиков конфигурации, которые взаимодействуют с нашими конечными точками API, чтобы получить части конфигурации нашего приложения, такие как конфигурации навигации, страницы, различные формы, списки и т. Д., А затем попытаться отобразить компоненты, которые считываются из этой конфигурации.

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

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

Причина, по которой я пишу этот вопрос, заключается в том, что я надеюсь получить представление о людях, имеющих солидный опыт работы с огромными внешними приложениями. Я хотел бы знать, можно ли разработать такое приложение с React, независимо от того, подходит ли React для такой сложности и динамики, действительно ли нам нужен Redux или что-то еще, какой путь, методы, идеологии должны мы следовать. Если вы правильно поняли мой вопрос, это скорее сторона архитектуры, с которой мы боремся, чем технологическая. Может быть, мы просто идем по пути, который ведет к все большему количеству борьбы и сложности, но не к производству.

ответ

3

Приступая к написанию более сложных приложений в реактиве, действительно может быть борьба, я точно знаю, как она себя чувствует!

Как вы говорите, React - это UI lib, а не фреймворк событий. Вот почему вам обычно нужна библиотека для обработки событий, например Redux. Вы четко заявляете, что решили не использовать Redux (вы даже не использовали заглавные буквы :)). Я бы сделал шаг назад, если бы был вами и пересмотрел это решение. Вы говорите, что причина не в использовании Redux заключается в том, что вы не можете сохранять свои компоненты легко подключаемыми и многоразовыми при использовании Redux. Я бы сказал, что это неверно. Redux полностью отделен от ваших компонентов React. Redux обрабатывает только принимаемые события и управляет состоянием. С точки зрения компонентов React, он просто получает данные в реквизитах и ​​отправляет события, вызывая регулярные функции. Можно по-прежнему выполнять единичные тесты, повторное использование и т. Д.

Я предлагаю вам взглянуть на Redux с учетом этого. Рад помочь, если у вас есть еще вопросы!

+0

Рад знать, что кто-то здесь уже знают, что мы проходим. Говоря о «Редуксе», я пробовал написать динамический компонент формы с ним и очень запутался довольно скоро, когда мне нужно было передать конфигурацию и данные в состояние из разных источников, а затем правильно отобразить форму и синхронизировать ее различные части , И затем часть валидации также вышла, а затем variuos формируют типы полей, такие как автозаполнение, которое загружает его выбор из онлайн-API. Тем не менее, я по-прежнему считаю, что путаница могла быть вызвана нехваткой опыта и знаний библиотеки/структуры. – Salivan

6

Нет абсолютно никаких сомнений в том, что React/Redux может (и широко используется) для разработки приложений, которые вы описываете. Ничто в вашем описании не делает то, что вы строите настолько уникально, что исключает React как платформу для его создания. Мы активно работаем с крупным корпоративным клиентом, который строит свой весь интерфейс - с 100 + SPA (одностраничные приложения) в React. Это команда из более чем 100 разработчиков в течение 2-3-летнего проекта.

Путь мы структурировали это имеет решающее значение -

Во-первых, вы хотите, чтобы выбрать библиотеку компонентов пользовательского интерфейса. Несколько примеров ниже:

Мы в основном взяли один из них и построили компонентную библиотеку потому что наши компоненты очень индивидуальны.

Во-вторых, мы создали модульную архитектуру, где каждый модуль (SPA) представляет собой пакет npm с основным компонентом контейнера и хранилищем redux.

Наконец, у нас есть центральный серверный пакет, в котором зарегистрирован каждый из модулей. Серверный пакет отвечает за аутентификацию, авторизацию, протоколирование, маршрутизацию и т. Д.

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

+0

Ничего себе, это хорошая отправная точка. Приятно слышать, что кто-то понял это правильно. Спасибо, что поделились своим опытом. Не могли бы вы объяснить немного глубже, как вы реализовали эту отдельную концепцию SPA? Как вы объедините их в единое целое (приложение)? Являются ли они частью более крупного приложения или абсолютно отдельными приложениями? Можно ли им общаться друг с другом, если есть необходимость? – Salivan

+0

Как сайт может содержать 100 СПА? Вы имеете в виду, что у вас есть составной пользовательский интерфейс, который загружает несколько фреймов, содержащих SPA? В противном случае ваша терминология, вероятно, неверна для того, что вы описываете. – plalx

+0

Каждый СПА имеет свой собственный URL. «Веб-сайт», возможно, не подходит для описания того, что это такое. Его больше похоже на коллекцию SPA, которая составляет онлайн-присутствие организации. –

2

Я сейчас в подобной ситуации. У меня есть опыт работы в больших настольных приложениях (ERP, LOB - WinForms, WPF) - 1000+ модулей, очень динамичных (более 70% пользовательского интерфейса было создано с помощью входных данных/конфигурации), добавив новые функциональные возможности - это просто расширение некоторой конфигурации (не касаясь исходного кода).

Я глубоко изучаю современные веб-технологии, и я все больше убеждаюсь, что React не подходит для этого. Реакция действительно сияет в приложениях малого и среднего размера, где вы (и другие члены группы) разрабатываете каждую страницу/компонент «вручную» (не динамически генерируется), и вы хотите иметь одно глобальное состояние. Но это не поможет вам создавать крупномасштабное приложение из коробки - это только библиотека пользовательского интерфейса (так что поддержка модулей, маршрутизации, форм, привязки, HTTP-запросов, статической типизации (машинописных файлов) и т. Д.) Не поддерживается. Удивительно, что нет поддержки стилизации/инкапсуляции стиля (вам нужно интегрировать, например, CSS-модули, самостоятельно). И в конце вы должны постоянно беспокоиться о версиях библиотек (чтобы они всегда работали вместе, это действительно время и энергия).

У меня есть большой опыт работы с угловыми 2/4 +, и я думаю, на данный момент, это лучшие технологии для такого рода приложений (если вы знаете, WPF, это очень похоже). Это полная структура, которая готова к масштабированию из коробки.Вы можете разделить ваше приложение на независимые модули (указав, какие компоненты будут видны во внешнем мире), каждый компонент имеет общедоступный api (статически типизированный, входы/выходы) и инкапсулированные стили css (между другими нет никаких помех). Для глобального состояния (вход в систему пользователя, глобальная конфигурация и т. Д.) Вы все равно можете использовать библиотеку ngrx/store (которая реализует шаблон Redux и поставляется с дополнительными приятными вещами, такими как «эффекты» и очень хорошо интегрируется в угловую экосистему).

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

0

Полностью понять свои чувства, когда вы начинаете с React и Redux. Мы, где в той же ситуации, когда мы начинаем с React в нашей компании. Сначала React имеет другой подход, чем другие рамки. Да, конечно, это не рамочная его просто библиотека. Вы должны начать думать о Реактировании, а именно: Реагировать на компоненты, которые просто отображают состояние (например, вы визуализируете сцену на своей графической карте, сначала вам нужно подготовить сцену, чем вы можете сделать), все, что может сделать компонент, - это действия отправки, или лучше называть только создателей действия.

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

Мы также используем TypeScript с комбинацией React, Redux. вам нужно написать больше кода, чем чистый JS, но статический тип управления бесценен, когда вы работаете над большим проектом.

Разделительная логика компонентов - это нативный подход реагирования ... вам нужно отделить логическую запись «Dummy components» и повторить ее с помощью connect. Или передавайте значения в качестве реквизита.

Мы используем Thunk middle-ware в качестве создателей действий, потому что подключенный компонент будет вызывать только метод, а логика - в создателях действий. У вас есть доступ к всему состоянию приложения, чем вы можете получить что-то и основать на результате, вы можете отправлять разные действия.

Что мне нравится на реакцию/перевождите как реализовать асинхронные вызовы и т.д. Первый компонент дизайна для отображения всех состояний

1) как я не имею данных 2) загрузка данных 3) загрузки сделали 4) ошибка загрузки

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

Что также круто, что в приложении response/redux у вас есть один поток данных, это хорошо, когда новый разработчик переходит в проект.

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

Мы также используем Маршрутизатор для навигации в приложении.

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

Когда мы начинаем для нас был полезен этот шаблон, где все работает в одном проекте JavaScriptServices

, чем от курса больших Abramov учебники.

Для проектирования компонентов очень полезных Storybook

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

1

React, Redux будет легче, потому что когда дело доходит до сложных приложений, которые вы можете создать хорошо структурированный объект данных. то вы можете управлять полный интерфейс через Реагировать и его Материалы ... Есть несколько причин, почему это правильный выбор

  1. Государственное управление,
  2. Дерево обработки Структура данных,
  3. Уменьшить код,
  4. Вы будете знать, где сделанные изменения (Действия, Редукторы)
  5. Ваш Компонент wil л только заботясь о UI вещей

вещей, которые вы должны сделать, это Структурирование данных