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

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

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

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

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

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

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

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

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

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

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

  • Пользователь открывает страницу, на которой есть виджеты.

  • Виджет отправляет get-запрос к API.

  • API обращается к базе данных, откуда получает нужные данные для конфигурирования виджета в соответствие с правами пользователя.

  • Виджет принимает нужный вид, показывает полученную информацию пользователю.
Виджетная система: как масштабировать образовательную платформу без боли и слёз?

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

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

Кто помнит гугловский Project Ara?
Кто помнит гугловский Project Ara?

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

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

  • Изолированность одних виджетов от других. Полезно, когда у вас на проекте несколько команд разработки и каждая отвечает за свой список фич — никто не сломает чужую работу, не будет ситуации, когда «я что-то замерджил, и всё погасло».

  • Переиспользуемость без лишнего кода. Можно выводить один и тот же виджет на разных экранах без копипасты.

  • Оптимизация времени загрузки. Когда пользователь загружает страницу, виджеты начинают грузиться параллельно: не обязательно ждать, пока загрузятся все, пользователь видит виджет — он уже может с ним взаимодействовать.

  • Скорость развертывания фич. Когда у студии уже есть наработки — добавление новой функции займет у нее меньше времени. Хотя кастомизация виджета, конечно, понадобится.

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

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

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

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

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

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

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

  • При повышенной загрузке может быть проблемы с прослойкой, которая отвечает за запрос прав. На уровне онлайн-школ это не так заметно, потому что нагрузку в 20 000 учеников виджетная система спокойно выдерживает.Если бы количество пользователей перевалило за 1 млн, то такая проблема действительно могла бы вскрыться, но и это быстро решается за счет кэширования прав.

  • «Костыли» тут не сработают. Нужен отлаженный процесс разработки, который будет предусматривать всё — поэтому мы для своих разработчиков составили подробную внутреннюю документацию по работе с виджетами.

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

2121
9 комментариев

Интересный подход к масштабированию образовательной платформы

1
Ответить

. Роль пользователя определяет, что именно он видит и не видит в личном кабинете.Ну, не совсем, вернее совсем не так .
то что так. оределилось - это итог.... а не следствие , рендер последний слой/этап.
он, как правило, сам не знает, что ему нужноДля этого и есть менеджеры проекта, которые должны выявить потребности и задачи этого условного mpv.
В конце концов, каждый функциональый модуль стоит денег.,
Очень маловероятно, что создав, условного 3 модуля/функционала со своей логикой , версткой , клиет захочет сразу все удалить. И попросит новую фичу.....
Если за все платить будет- хороший клиент, конечно =))

Зы:Как flutter'oм повеяло....
Но там с seo пока очень плохо и wasm не в проде.

Ответить

У нас есть клиент, который перерабатывал не просто 3 модуля, он перерабатывал концепцию проекта 3 раза
По сути мы разрабатывали 3 раза один и тот же проект
Потому что там вообще все менялось )

Ответить

Пользователь открывает страницу, на которой есть виджеты. Виджет отправляет get-запрос к API.Если виджетов на странице 100, сколько get-запросов к API будет отправлено?

Если бы количество пользователей перевалило за 1 млн, то такая проблема действительно могла бы вскрыться, но и это быстро решается за счет кэширования прав.Ага, только теперь нужно будет решать проблему инвалидации кэша ;)

А что за проект-то? Посмотреть где-нибудь можно? Или приватный клиентский?

Ответить

кейс когда 100 виджетов на странице у нас не реальный
максимальное кол-во в пределах 10 шт
Сам проект вряд ли получится глянуть, он для школьников - Онлайн-школ №1, https://onlineschool-1.ru/
С инвалидацией кэша все впорядке
в чем проблем сбросить права в рамках одного юзера или одной роли, если были какие-то изменения, у нас на этапе разработки даже не возникло с этим проблем
Я понимаю если это ecom проект, где кол-во и цены меняются почти как на бирже, и то даже этот кейс мы отработали на другом проекте https://4fresh.ru/

Ответить