WYSIWYG-редактор опросов

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

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

Большое преимущество системы — эффективный WYSIWYG-редактор (англ. ‘what you see is what you get’ — режим точного отображения). На следующем скриншоте показан образец опроса, созданный по данному принципу:

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

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

Прежде всего, мы скопировали имеющееся решение на основе Knockout на другую страницу, сделав её невидимой для пользователей.

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

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

По завершении переноса все пользователи перешли на работу с новой версией WYSIWYG-редактора.

Мы переработали существенную часть функционала, обновив решение с помощью библиотеки React. Теперь WYSIWYG-редактор открывается практически мгновенно для небольших и средних опросов (от 1 до 5 страниц с 1–5 вопросами на каждой) и достаточно быстро в случае с масштабными опросами (десятки страниц и вопросов на них). Благодаря этому, нашему заказчику удалось выиграть несколько государственных тендеров, где требовалась быстрая и бесперебойная обработка опросов.

Наконец, ещё одним положительным результатом проекта стало то, что код теперь намного более структурирован и прост в поддержке. Мы продолжаем переносить имеющиеся функции из Knockout в React, тогда как новые функции создаются исключительно на основе React.