Веб-приложение – это не сайт. Сайт показывает информацию, а веб-приложение работает как полноценная программа прямо в браузере. Обрабатывает заказы, считает логистику, управляет складом – всё без установки на компьютер. Зачем вообще ставить софт на сто машин, если достаточно открыть вкладку?
Мы в Kotelov занимаемся разработкой веб-приложений 13 лет. 300+ проектов за это время: маркетплейсы, SaaS-платформы, корпоративные порталы, личные кабинеты для клиентов ПИК, Сбер, VK, МТС, Газпромбанк, S7 Airlines. Тут разберём, какие бывают веб-приложения, что у них под капотом и во сколько обходится full-stack веб-разработка.
13
лет на рынке веб-разработки
300+
проектов реализовано
100+
специалистов в команде
195K+
пользователей в проекте буше
Что такое веб-приложение
Google Docs пробовали? Вот это оно и есть. Работает в браузере, но это не сайт. Создаёте документы, форматируете, делитесь с коллегами – как в Word, только ничего не надо устанавливать.
Сайт информирует. Веб-приложение решает задачи. На сайте вы читаете статью, и на этом всё. В веб-приложении вы эту же статью пишете, редактируете, публикуете, отслеживаете статистику просмотров и потом ещё делитесь ссылкой прямо из интерфейса. Чувствуете разницу?
| Параметр | Сайт | Веб-приложение |
|---|---|---|
| Цель | Показать информацию | Выполнить задачу |
| Интерактивность | Клики и прокрутка | Полноценная работа |
| Авторизация | Не обязательна | Почти всегда нужна |
| Данные | Статичный контент | Пользовательские данные |
А мобильные приложения? Все просто: веб-приложение не надо качать из AppStore. Открывается на чём угодно с браузером. Обновляется само – пользователю вообще ничего делать не нужно.
Типы веб-приложений
Зависит от того, как построено и для чего.
Single Page Application
Загружается один раз. Один. Дальше данные подгружаются динамически, страница не перезагружается вообще. Быстро? Ещё как. Мы для таких проектов берём React – он идеально ложится на эту архитектуру.
Multi Page Application
Каждая страница – это отдельный запрос к серверу. Кажется устаревшим? Зато для SEO это до сих пор работает отлично. Next.js справляется с такими задачами.
Progressive Web Apps
Гибрид, который работает офлайн, ставится на рабочий стол телефона, присылает уведомления. При этом никаких сторов, никаких обновлений через магазины приложений.
По назначению бывают:
SaaS веб-приложения
Software as a Service. Программа в облаке, пользователь платит подписку. Slack, Notion, amoCRM – знакомо?
Что нужно для такого продукта? Мультитенантная архитектура: один код обслуживает кучу клиентов, но каждый видит только свои данные. Звучит просто. На практике изоляция данных – это где косяков бывает больше всего.
Биллинг и подписки. Пробные периоды, разные тарифы, апгрейды, интеграция с платёжками. API для интеграций: потому что SaaS редко живёт сам по себе, клиенты хотят связать его с CRM, бухгалтерией, мессенджерами.
Мы в KOTELOV пилим SaaS-решения с нуля: от архитектуры до биллинга. Подробнее о том, как это устроено, на странице разработки.
Progressive Web Apps разработка
PWA – когда веб-приложение притворяется мобильным. Работает без интернета (спасибо Service Workers), ставится на домашний экран, шлёт push-уведомления.
Когда это имеет смысл?
Для e-commerce точно – покупатель листает каталог в метро без связи. Для контентных проектов – статьи кэшируются, читаются офлайн. Для инструментов с частым использованием – быстрый доступ прямо с рабочего стола, не надо искать в браузере.
Один код на все платформы, без публикации в сторах, обновления применяются мгновенно.
Создание веб-приложений: технологии
Из чего это всё состоит? Frontend, backend, база данных, инфраструктура. Четыре слоя, и каждый важен.
На фронтенде работаем с React. Компонентный подход, огромная экосистема, разработчиков найти легко. Для проектов с серверным рендерингом берём Next.js: это про SEO и скорость первой загрузки. Angular тоже используем, особенно для enterprise-решений, где жёсткие требования к типизации.
React веб-приложения хорошо масштабируются. Мы видели это на проекте для сети пекарен буше – 195 000+ пользователей, интерфейс летает.
Бэкенд? Зависит от задачи. Node.js веб-приложения отлично подходят для real-time штук: чаты, уведомления, обновления в реальном времени. Python с Django или FastAPI – когда есть машинное обучение или сложная аналитика. Java – для максимальной надёжности и когда legacy-системы уже есть. Go – для высоконагруженных микросервисов, там он хорош.
На проекте краудлендинговой платформы связали React.js с Java. Фронт для быстрых обновлений интерфейса, бэкенд для надёжной обработки финансовых транзакций. Бюджет – 88 миллионов рублей, серьёзный проект.
Базы данных: PostgreSQL для надёжности, MongoDB для гибких структур, Redis для кэша. ClickHouse когда нужна аналитика по большим данным.
Инфраструктура: Docker и Kubernetes для оркестрации, Yandex Cloud или AWS для хостинга, CI/CD чтобы деплой был автоматическим.
Микросервисы веб-приложения
Представьте монолит как многоквартирный дом. Прорвало трубу на первом – затопило всех. Микросервисы – это отдельные дома. Проблема в одном – остальные работают.
Каждый сервис делает своё: авторизация, биллинг, уведомления, каталог. Общаются через API. Деплоятся независимо. Можно писать на разных языках, кстати.
Когда это нужно? Для сложных систем с высокими нагрузками. Для больших команд, где каждая работает над своим куском.
Был случай с аграрным маркетплейсом «Поле». Платформой пользуются 13 000+ аграриев. Монолит не справлялся. Разделили на микросервисы, внедрили Temporal для надёжности транзакций. Стоимость ошибки там – миллиарды. Зато теперь работает стабильно даже при пиках.
Этапы разработки веб-приложения
Как это устроено у нас? Шесть этапов. Попробуйте пропустить хоть один – потом больно.
Discovery
Изучаем бизнес, анализируем требования, проектируем архитектуру. На выходе – техническое задание с оценкой бюджета. Уже понятно, какие интеграции нужны и какой стек подойдёт.
Прототипы и макеты. Не просто красивые картинки – проработанные пользовательские сценарии. Для буше мы изучили больше десяти конкурентных приложений, прежде чем начали рисовать. Это не каприз, это необходимость.
Разработка
Идёт спринтами по две недели. В конце каждого – работающий функционал, который можно потрогать руками. Не просто код где-то на сервере, а демо для тестирования.
Тестирование
QA проверяет функционал, нагрузочное тестирование показывает, выдержит ли система 100 000 пользователей разом. Баги фиксим до продакшена, а не после.
Запуск
Деплой на production, мониторинг, миграция данных если надо. 1 сентября для буше – пиковый день. Приложение отработало без сбоев.
Поддержка
Баги фиксим, фичи добавляем, производительность оптимизируем. Год гарантии даём.
Сколько стоит создание веб-приложения
Универсальной цены нет. Зависит от сложности, количества интеграций, требований к нагрузке, уровня дизайна.
Ориентиры:
MVP веб-приложения
от 1,5 млн
SaaS-платформа
3-10 млн
Маркетплейс
5-15 млн
Enterprise-система
от 10 млн
Что влияет на стоимость?
Количество функций – тут понятно, но есть неочевидные вещи. Интеграции с внешними системами могут удвоить бюджет, причём легко. Требования к безопасности для финтеха – плюс 20-30%. Мультитенантность для SaaS тоже не бесплатна.
Краудлендинговая платформа с блокчейном обошлась в 88 миллионов. Аграрный маркетплейс с 5+ интеграциями и аукционом — заметно меньше. Каждый проект уникален, и это не маркетинговая фраза.
Компания по разработке веб-приложений
На что смотреть при выборе подрядчика? Как не попасть?
Портфолио схожих проектов
Нужен маркетплейс — ищите тех, кто делал маркетплейсы. Мы работали с разными типами: от корпоративных порталов для Республики Татарстан до финтех-платформ для банков из топ-10.
Технологический стек
Какой? Современный? React, Node.js, Docker, Kubernetes — это база сейчас.
Процессы
Scrum? Спринты по две недели? Демо в конце каждого спринта? Прозрачная отчётность? Если нет чёткого ответа — это звоночек.
Команда
Кто именно будет работать? Какой уровень? У нас минимальная квалификация — middle+, джунов на проекты клиентов не ставим.
Отзывы. Позвоните предыдущим клиентам. Спросите, как решались проблемы. Это лучше любых кейсов на сайте.
Почему выбирают KOTELOV для веб-приложений
13 лет на рынке. 300+ проектов.
Маркетплейс для аграриев «Поле»
13 000+ пользователей, микросервисы, 5+ интеграций, аукционы и оформление кредитов. Система выдерживает сделки на сотни миллионов.
13 000+ пользователей
Архитектура и дизайн-система главного аграрного портала Татарстана. 8 интеграций, 2500 организаций, государственный статус. Начали в июле — сдали в сентябре, уложились.
8 интеграций, 2500 организаций
Для банка из топ-10. Блокчейн Sawtooth, биржа цифровых финансовых активов, соответствие ФЗ-152.
Бюджет — 88 млн рублей
Мобильное приложение буше
195 000+ пользователей, 42 000+ заказов через приложение. 1 сентября работает без сбоев.
195 000+ пользователей
Две модели работы: почасовая оплата для долгосрочных проектов или фикс по ТЗ для конкретных задач.
Стек: React, Vue, Angular, Node.js, Java, Kotlin, PostgreSQL, Docker, Kubernetes. Команда 100+ человек.
Клиенты: Сбер, VK, МТС, ПИК, Газпромбанк, S7 Airlines, Microsoft, Т-Банк, Альфа-Банк.
Хотите обсудить проект?
Первая консультация бесплатно — разберём задачу, дадим оценку.