Почему если веб-проект собирается расти, но пока не понимает, куда и как, — виджетная система может стать спасением. Меня зовут Антон Фокин, я CEO студии QTIM и сегодня я расскажу о нашем опыте.

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

Ну и что, такая задача решается написанием ролей! Да, но тут есть нюанс.

Когда вы работаете с быстро растущим бизнесом, он, как правило, сам не знает, что ему нужно. Сегодня 4 роли, через месяц 10, а еще через месяц уже 20. Или внезапно оказывается, что вот этому контент-менеджеру нужно дать часть прав техсаппортов, но только на сегодня и только часть — не больше.

Компания растет, вместе с ней меняется и понимание требований к технической составляющей. Также масштабируемость предполагает скорость, правда? А теперь представьте, что клиент говорит: «Я передумал, вот этого блока не будет на главной, убирайте». Выпиливание функционала — отдельная веселая тема, в основном, потому что влечет за собой переработку и других модулей сайта, которых на первый взгляд задеть было не должно. Но задевает, всегда задевает.

Поэтому мы решили делать EdTech-проект на системе виджетов. И нам понравилось.

Виджетная система — как это работает

Виджеты — это маленькие смарт-компоненты. При общем бэке каждый модуль отвечает за конкретный элемент, то есть отдельный виджет работает независимо от платформы и своих собратьев.

Принцип работы следующий:

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

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

Виджеты — это про модульность. Как конструктор с взаимозаменямыми частями. Или модульные смартфоны.

С точки зрения разработки, виджеты дают гибкость. Можно отключить виджет и на сайте или в мобильном приложении ничего не сломается. Можно заменить на другой. Или взять виджет и переконфигурировать его на стороне сервера — отображение тоже поменяется: вот виджет показывал курсы евро и долларов, а вот тот же виджет стал показывать курсы криптовалют. А самое главное: виджетный подход позволяет релизить отдельные фичи и обновлять их без вмешательства в функциональность других.

Что дает использование виджетов:

Изолированность одних виджетов от других. Полезно, когда у вас на проекте несколько команд разработки и каждая отвечает за свой список фич — никто не сломает чужую работу, не будет ситуации, когда «я что-то замерджил, и всё погасло».
Переиспользуемость без лишнего кода. Можно выводить один и тот же виджет на разных экранах без копипасты.
Оптимизация времени загрузки. Когда пользователь загружает страницу, виджеты начинают грузиться параллельно: не обязательно ждать, пока загрузятся все, пользователь видит виджет — он уже может с ним взаимодействовать.
Скорость развертывания фич. Когда у студии уже есть наработки — добавление новой функции займет у нее меньше времени. Хотя кастомизация виджета, конечно, понадобится.

Что это дало нам на EdTech-проекте

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

Сейчас мы работаем над 4 онлайн-школами, они уже в релизе, и везде внедрили виджетные системы. Подход, помимо прочего, экономит клиенту время на разработке и развертывании фич: так мы сделали календарь для кураторов и координаторов примерно мгновенно — имея на руках преднастроенный виджет календаря.

Если бы мы выбрали классический подход, то нам пришлось бы писать отдельный код под разные роли, прописывать условия и потратить примерно 10 часов на каждый календарь. А теперь умножьте на количество ролей — получатся внушительные сроки и суммы.

Все работает при разных мощностях, нагрузках, серверных архитектурах.

Для себя мы делаем вывод, что виджетная система в подобных проектах — оптимальна. Без минусов, конечно, тоже никуда, они есть:

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

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

Виджетная система: как масштабировать образовательную платформу без боли и слёз?