Последние четыре недели моя команда (Крис Амори, Джефф Ямамото и Хай Чжу) и я работали над FermionJS, инструмент для создания прототипов приложений React с открытым исходным кодом. Проект вращался вокруг создания гибкого и отзывчивого симулятора, в котором пользователи нашего приложения могут визуализировать и управлять несколькими компонентами React в режиме реального времени.

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

Перетаскивание, падение, изменение размера

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

HTML5 перетаскивание

Наша первая попытка реализовать функциональность перетаскивания была предпринята с использованием чистых API перетаскивания HTML5. Это был смелый шаг, и он оказался слишком громоздким, поскольку нам пришлось бы писать много кода, чтобы достичь даже основ. Кроме того, кто-то уже делал это раньше ...

React DnD

React DnD - потрясающая библиотека перетаскивания. Он предоставляет простые в использовании API-интерфейсы для получения информации об исходном компоненте события перетаскивания, цели события перетаскивания и множестве других полезных свойств, которые я не буду пытаться здесь объяснять. Нам удалось успешно активировать события, чтобы обновить хранилище Redux о том, как компонент сдвинулся в иерархии в нашей рабочей области. Более того, это позволило нам использовать каждый компонент как источник перетаскивания и цель перетаскивания одновременно, что именно то, что нам нужно для глубоко вложенных компонентов. Затем нам нужно было приступить к реализации функций для визуального перетаскивания компонентов в рабочей области и соответствующим образом обновить наш магазин. React DnD действительно предоставляет все инструменты, необходимые для выполнения этих задач, но реализация этой функциональности потребовала бы кучу времени, и примерно в это время мы случайно наткнулись на другую библиотеку, которая прекрасно справляется с этой задачей прямо из пакета (подробнее об этом потом).

CSS для изменения размера компонентов

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

React RnD: убийство двух птиц одним камнем

React RnD - это библиотека, специально созданная для перемещения компонентов с помощью перетаскивания, и в качестве бонуса имеет реализацию для нашего пропущенного события изменения размера. Это было очень интересно для нас как команды, и теперь у нас появилась возможность перемещать компоненты, изменять их размер на лету и соответствующим образом обновлять наш магазин.

Окончательное решение: DnD и RnD

Вам может быть интересно, если RnD позволил нам свободно перемещать компоненты и изменять их размер, почему мы в конечном итоге использовали обе эти библиотеки вместе? Какая польза от DnD? Что ж, ответ довольно прост, RnD не имеет никаких функций для вложения компонентов и запуска событий, если один компонент перетаскивается в другой. Хотя мы, безусловно, могли бы реализовать это сами, мы решили визуализировать все наши компоненты, обернутые оболочкой RnD, и оболочкой Drop Drop, которая дала нам все функции, которые мы искали, без каких-либо проблем с изобретением заново. что уже было сделано.

Итак, что такое Redux?

При создании любого большого приложения React почти само собой разумеется, что Redux будет играть роль. Но возникает вопрос - что такое Redux и что он дает такого, чего нет в React?

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

Более того, когда компоненты разделены между разработчиками, Vanilla React может создавать ситуации, требующие большого объема рефакторинга и отладки по мере роста приложения. Отсюда и появление Flux от Facebook и, в конечном итоге, Redux. При использовании Redux добавление, изменение и комбинирование редукторов для создания единого объекта-хранилища, обеспечивающего работу всех частей приложения, без серьезного рефакторинга - тривиальная задача. Разработчику просто нужно добавить действие для изменения своего состояния, добавить ссылку на это действие (через тип действия) в редуктор, подключить свои действия и хранилище к своему компоненту, и git объединит редуктор в одну функцию в виде ветвей. объединены. Никакого рефакторинга, минимальной отладки и минимального распространения props через приложение.

С Fermion это оказалось бесценным, поскольку приложение могло отображать от 20 до 100 компонентов в любое время, многие из которых могут быть созданы или уничтожены по прихоти и без какого-либо уведомления. Мы потратили примерно два дня на разработку, прежде чем поняли, что просто невозможно разумно контролировать масштаб такого большого проекта без управления состоянием вне самого приложения. Внедряя Redux, мы сразу заметили рост производительности, несмотря на то, что никто из нас никогда раньше не работал с Redux.

Интеграция различных библиотек в проекты

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

При реализации любого проекта следует учитывать несколько моментов:

- Возможности перекрываются и конфликтуют?

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

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

-Насколько прозрачны реализация и документация?

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

В заключение:

Мы надеемся, что вам понравилось читать о нашем путешествии по миру манипуляции визуальными компонентами в экосистеме React. Если вы хотите провести небольшое исследование самостоятельно, вот несколько ресурсов, которые мы рекомендуем вам изучить:

React DnD: http://react-dnd.github.io/react-dnd/

Redux: http://redux.js.org/

Перетаскивание HTML 5: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API