Formtastic

Обзор проекта

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

Экран авторизации

Главный экран

Редактор форм

Список шаблонов

Редактор шаблонов

Миграция с Django на Nuxt

Изначально фронтенд Formtastic был реализован с использованием шаблонов Django. Это позволило быстро стартовать, но со временем такой подход стал ограничивать развитие продукта. Интерфейс становился всё сложнее, изменения требовали участия бэкенд-разработчиков, а сервер выполнял слишком много работы по рендерингу HTML, что негативно влияло на масштабируемость.

В результате мы архитектурно разделили систему. Django остался основным бэкендом и API, в то время как весь пользовательский интерфейс был перенесён на отдельный фронтенд на Nuxt. Это обеспечило чёткое разделение ответственности и позволило интерфейсу развиваться независимо от серверной логики.

После миграции скорость разработки UI заметно выросла. Команда начала быстрее выпускать новые экраны и улучшать пользовательский опыт, а нагрузка на сервер снизилась, так как он перестал заниматься рендерингом страниц. Nuxt с SSR и SSG также обеспечил значительный выигрыш в SEO и скорости загрузки, что положительно повлияло на маркетинг и публичные страницы. Такая форма миграции — фронтенд на серверных шаблонах или single-page приложение, переезжающие на Nuxt, — ровно то, о чём наша страница разработки на Nuxt.

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

Миграция с нативных приложений на Flutter

Мобильные клиенты Formtastic изначально разрабатывались как два независимых нативных приложения — для iOS и Android. По мере роста продукта этот подход становился всё менее эффективным: разработка замедлялась, функции выпускались несинхронно, а поддержка двух кодовых баз увеличивала общую стоимость владения.

Переход на Flutter позволил нам объединить мобильную разработку в единую кодовую базу. Это значительно упростило поддержку и сделало выпуск новых функций предсказуемым. Обновления начали выходить одновременно на обеих платформах, а интерфейс и поведение приложения стали полностью согласованными для всех пользователей.

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

Если конкретно, объединение изменило три показателя:

• Две кодовые базы стали одной. Каждая функция, каждое исправление и каждый пограничный случай теперь пишутся один раз, а не дважды — работа из разряда «забыли добавить это в Android» исчезла полностью.
• Расхождение релизов сошло на нет. Раньше релиз для iOS мог опережать релиз для Android на неделю и больше; теперь одна сборка уходит в оба магазина одновременно.
• Годовые затраты на платформенные обновления сократились примерно вдвое. Один цикл обновления Flutter заменил два отдельных захода на обновления ОС, повышение требований SDK и приведение приложений в соответствие с политиками магазинов.

iOS-приложение

Список документов

Редактор форм

Список форм

Синхронизация документов

Заставка

iPad-приложение

Экран авторизации

Главный экран

Редактор форм

Поиск форм

Диалог создания документа

Голосовой ввод для полей форм

Длинные текстовые поля — заметки по осмотру, отчёты об инцидентах, открытые ответы в опросах — самая медленная часть заполнения формы с телефона. Мы добавили голосовой ввод на базе Whisper и реализовали его по-разному для каждого клиента, а не подгоняли оба под одну архитектуру.

В веб-приложении аудио записывается в браузере и отправляется на новый эндпоинт транскрипции на существующем бэкенде Django — это меньшее изменение, поскольку аутентификация и хранение для этого запроса и так уже на стороне Django. В приложениях на Flutter Whisper встроен прямо в бинарник в виде сборки на GGML, работающей через FFI, так что транскрипция идёт на устройстве: ничего не отправляется на сервер, нет обращений по сети, и всё продолжает работать вообще без сигнала — что полезно на объекте, где как раз и заполняется значительная часть форм Formtastic.

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

Итоги

Formtastic — это пример продуманной технологической эволюции продукта. Перенос фронтенда с Django на Nuxt упростил разработку веб-версии и обеспечил выигрыш в скорости и SEO. Целенаправленное использование Go на сервере решило проблемы производительности без радикальных изменений платформы. Переход с нативных мобильных приложений на Flutter снизил затраты на владение и ускорил развитие продукта. В результате система стала более стабильной, гибкой и лучше подготовленной к масштабированию.

FAQ

Объединение двух нативных приложений Formtastic в единую кодовую базу — именно та миграция, которую мы выполняем в рамках разработки на Flutter, а работа веб-приложения на Nuxt рядом с этими приложениями, на том же бэкенде на Django и Go, — именно та работа, которую описывает наша страница парных веб-приложений.