Сайты устарели. Не совсем, но бизнес уже не хочет просто страницы в интернете. Компании ищут системы, которые открываются в браузере, но работают как настоящие программы – с личными кабинетами, сложной логикой, тысячами пользователей одновременно.
Зачем вам это? Автоматизация, удобный интерфейс для клиентов, рост без потолка. Мы в KOTELOV за 13 лет запустили десятки таких проектов. От маркетплейса для аграриев с 13 000 пользователей до корпоративных систем для S7 Airlines. Тут разберём типы веб-приложений, технологии и что почём.
13+
лет опыта в разработке веб-приложений
13 000
пользователей маркетплейса для аграриев
88 млн
рублей – бюджет краудлендинговой платформы
Что такое веб-приложение и чем оно отличается от сайта
Разница принципиальная. Сайт показывает информацию: открыл, почитал, закрыл – и все. А веб-приложение даёт работать с данными: создавать документы, проводить платежи, управлять заказами, общаться в реальном времени.
Google Docs, Figma, Notion – вот классика жанра. Онлайн-банкинг тоже сюда относится. По сути, это программа, которую не надо скачивать.
| Параметр | Сайт | Веб-приложение |
|---|---|---|
| Интерактивность | Минимальная – клики, формы | Высокая – редактирование, real-time |
| Состояние | Статичный контент | Динамическое, меняется на лету |
| Авторизация | Может и не быть | Почти всегда обязательна |
| Данные | Контент компании | Пользовательские данные |
| Логика | Простая – отобразить страницу | Сложная бизнес-логика |
Что это даёт бизнесу? Работает на любом устройстве без установки. Обновления мгновенные – пользователю не надо качать новую версию и ждать. Данные хранятся централизованно. Хочешь – работай из офиса, хочешь – с дачи.
Типичные примеры: CRM и ERP системы, маркетплейсы, документооборот, корпоративные порталы.
Типы веб-приложений: по архитектуре и назначению
Разработка интернет-приложений начинается с выбора архитектуры. Три основных подхода – и каждый под свою задачу.
Single Page Application
Вся логика в одном HTML-файле, контент подгружается динамически, страница не перезагружается вообще. Отклик моментальный. Так устроены Gmail, Trello, куча SaaS-сервисов. Минус? SEO хуже, но это решается.
Progressive Web App
Мост между сайтом и мобильным приложением. Офлайн работает. На устройство устанавливается. Push-уведомления шлёт. При этом никакого App Store или Google Play. Для некоторых проектов это идеальный выбор.
Multi Page Application
Классика с серверной отрисовкой. Каждая страница – отдельный запрос к серверу. Зато поисковики индексируют на ура. Часто используют Next.js или Nuxt.js.
По назначению всё разнообразнее. SaaS-платформы работают по подписке – пользователь платит ежемесячно и получает доступ к сервису, а ключевое тут мультитенантная архитектура, когда много клиентов на одной платформе, но данные изолированы друг от друга. Порталы и маркетплейсы – это многопользовательские системы с разными ролями. Мы делали маркетплейс для аграриев – платформу с аукционами, финансовыми услугами, 5+ интеграциями, электронным подписанием контрактов. Enterprise веб-приложения – внутренние инструменты: HR-системы, документооборот, специализированные CRM. B2B платформы: личные кабинеты дилеров, системы заказов, порталы партнёров.
SaaS: что учитывать при разработке облачных сервисов
SaaS разработка – отдельная история. Тут мало сделать продукт. Надо построить бизнес-модель.
Мультитенантность
Звучит просто – один код, много клиентов. Но данные должны быть изолированы так, чтобы компания А никогда не увидела данные компании Б. Никогда, даже случайно. На практике это влияет на всю архитектуру базы данных, на каждый запрос.
Биллинг и подписки
Та ещё головная боль. Разные тарифы, пробный период, автоматические списания, возвраты, гибкая тарификация – когда можно платить за пользователей, за функции, за объём данных или за всё сразу.
Масштабирование
Критично. Сегодня 100 пользователей, завтра 10 000. Система должна расти без переписывания. Для этого облачные веб-приложения строят на микросервисах с автоскейлингом.
Onboarding
Определяет конверсию. Пользователь должен сам разобраться с продуктом – без звонка в поддержку, без мануалов на 50 страниц. Self-service это не опция.
API для интеграций
Обязателен. SaaS-продукт редко живёт изолированно – клиенты захотят связать его с CRM, бухгалтерией, другими системами.
Доступность 99.9%+
Три девятки – максимум 8.7 часов простоя в год. Достичь такого непросто: резервирование, мониторинг, автоматическое восстановление после сбоев.
Enterprise: когда требования совсем другие
Enterprise веб-приложения – совсем другой уровень. Знаем по опыту с S7 Airlines и банками.
Интеграции с корпоративными системами
SAP, 1C, Active Directory – всё должно работать вместе. ATS-система для S7 интегрировалась с внутренними HR-процессами авиакомпании.
Сложные права доступа
Не просто «админ/пользователь». Матрица из десятков ролей. Руководитель видит одно, HR-специалист другое, кандидат третье. И всё настраивается без кода.
Аудит и логирование
Каждое действие записывается, кто когда что изменил. Для банков это требование закона.
On-premise или private cloud
Не все готовы хранить данные на внешних серверах. Иногда приложение ставится на серверы заказчика, это усложняет разработку, но бывает безальтернативно.
Пример из практики: для банка из топ-10 мы делали краудлендинговую платформу с интеграцией блокчейна. Бюджет – 88 млн рублей. Требования по безопасности – соответствие ФЗ-152, лицензии ФСТЭК и ФСБ.
Технологии: на чём строим веб-приложения
Без маркетинга. Только практика.
Frontend
React – компонентный подход, огромная экосистема, легко найти разработчиков. Vue.js – для проектов попроще, прогрессивный и стартовать можно быстро. Angular – когда нужен enterprise со строгой архитектурой из коробки.
Backend
Node.js – высокая производительность и единый язык на фронте и бэке. Python с Django или FastAPI – быстрая разработка и ML-интеграции. Go — высоконагруженные микросервисы. Java – классика для финансового сектора.
Базы данных
PostgreSQL – надёжность и сложные запросы. MongoDB – когда структура данных гибкая. Redis – кэширование и real-time.
Архитектура
Микросервисная, когда система должна масштабироваться по частям. REST API – стандарт для интеграций. GraphQL – когда клиенту нужна гибкость в запросах.
Инфраструктура
Docker и Kubernetes для контейнеризации. CI/CD пайплайны – обновления без простоев. AWS, Yandex Cloud – облака с автоскейлингом.
Пример выбора
На краудлендинговой платформе использовали React.js на фронте и Java на бэке. Почему Java? Надёжность для финансовых операций, интеграция с блокчейном Sawtooth, соответствие ФЗ-152.
Этапы разработки: как это выглядит на практике
01
Discovery
Исследуем бизнес, собираем требования, проектируем архитектуру. На выходе техническое задание с пониманием что и как строить. Для SaaS прорабатываем onboarding и биллинг. Для enterprise – интеграции и безопасность. Для маркетплейсов – логику работы двух типов пользователей.
02
MVP
Минимально жизнеспособный продукт. Базовый функционал, который уже можно показать пользователям. Не всё и сразу, а ядро системы. Собираем обратную связь.
03
Тестирование
QA-команда проверяет функциональность. Нагрузочное – выдержит ли система 1000 одновременных пользователей? А 10 000? Тестирование безопасности – особенно для финтеха.
04
Запуск
Деплой на продакшен, настройка мониторинга.
05
Развитие
Итерации по обратной связи, новые фичи, оптимизация, расширение интеграций.
Для маркетплейса аграриев мы разбили монолит на микросервисы и внедрили Temporal. Зачем? Стоимость ошибки в такой системе колоссальная – если сделка по кредитованию не пройдёт из-за сбоя, потери исчисляются миллиардами. Temporal автоматически восстанавливает выполнение задач после сбоев. Это было ключевое решение.
Сколько стоит разработка веб-приложения
Цены зависят от сложности. Вот ориентиры.
от 2 млн
MVP веб-приложения
Базовый функционал, один тип пользователей, минимум интеграций
5-15 млн
SaaS-платформа
Мультитенантность, биллинг, API, личные кабинеты
от 10 млн
Enterprise-система
Сложные права доступа, интеграции с корпоративными системами, повышенные требования к безопасности
10-30 млн
Маркетплейс
Два типа пользователей, платежи, рейтинги, модерация, логистика
Что влияет на цену? Количество ролей и функций – больше экранов, больше работы. Интеграции – каждая внешняя система добавляет сложности. Требования к нагрузке – высоконагруженная архитектура дороже. Безопасность – для финтеха и медицины нужны сертификации.
Краудлендинговая платформа с интеграцией блокчейна обошлась в 88 млн рублей. Сложный проект с биржей ЦФА, скорингом заёмщиков, работой с долговыми обязательствами.
Кейсы
ATS-система для S7 Airlines
Реестр кандидатов, тесты, документы, интеграция с HR-процессами
Почему выбирают KOTELOV
Мы делаем сложные системы. Не сайты-визитки. Продукты с тысячами пользователей, интеграциями, высокими требованиями к надёжности.
Опыт в разных отраслях
Авиация (S7 Airlines), финтех (краудлендинговая платформа для банка из топ-10), агросектор (маркетплейс с 13 000 пользователей). Понимаем специфику каждой индустрии.
Современный стек
React, Node.js, Go, микросервисы. Подбираем технологии под задачу, а не продаём то, что умеем.
Полный цикл
От исследования до поддержки после запуска. Discovery, дизайн, разработка, тестирование, деплой.
Релевантные кейсы
Маркетплейсы, SaaS-платформы, enterprise-системы. Не теоретические знания – реальный опыт запуска продуктов.
Итого
Веб-приложение – это полноценный программный продукт в браузере. Это не сайт, а система с бизнес-логикой, пользователями, интеграциями.
Правильная архитектура на старте определяет всё – сможете ли масштабироваться, сколько будет стоить поддержка, как быстро сможете добавлять новые функции. Мы видели проекты, которые пришлось переписывать с нуля из-за ошибок на этапе проектирования. Это больно. И дорого.
Расскажите о вашей идее
Подготовим концепцию и архитектуру бесплатно. Поможем понять, какой тип приложения подходит под вашу задачу и сколько это реально будет стоить.
