Аудиоверсия страницы
Разговор о том, что на этой странице
Когда нужен React
Личные кабинеты и панели
Там, где пользователь проводит часы и постоянно что-то меняет: заявки, сделки, документы. Каждое действие должно отзываться сразу, а не перезагружать страницу целиком.
Каталоги с живыми фильтрами
Десятки параметров, карта, сортировка — и всё это без ожидания между кликами. На обычной серверной отрисовке такой каталог ощущается медленным.
Интерфейс поверх существующей системы
Данные уже живут в Drupal, учётной системе или вашей CRM. React забирает их через API и даёт современный экран, не переписывая то, что и так работает.
Одна кодовая база на веб и мобильные
React Native переиспользует логику веб-приложения: приложение для iOS и Android обходится дешевле, чем две отдельные разработки.
Как идёт работа
Разбираем сценарии
Кто пользуется экраном, как часто, что делает чаще всего. Отсюда следует структура интерфейса — до того, как написана первая строка кода.
Договариваемся об API
Фиксируем, какие данные приходят и в каком виде. Это позволяет вести фронтенд и бэкенд параллельно, а не ждать друг друга.
Собираем и проверяем на людях
Показываю рабочие экраны по мере готовности. Правки на этом этапе стоят дёшево, после запуска — заметно дороже.
React 19
текущая версия библиотеки
JSON:API
связь с Drupal без прослоек
iOS + Android
из общей кодовой базы
React не делает сайт лучше сам по себе. Он оправдан там, где человек работает с экраном каждый день и любая задержка отнимает его время.
Что входит в разработку интерфейса
| Что входит | Базовый | Расширенный |
|---|---|---|
| Разбор сценариев и состояний интерфейса | да | да |
| Вёрстка компонентов | да | да |
| Связь с готовым бэкендом через API | да | да |
| Разработка API на стороне сервера | — | да |
| Авторизация и роли пользователей | — | да |
| Работа на медленном соединении | базовая | с кэшем и офлайном |
| Тесты ключевых сценариев | — | да |
Как проходит работа и оплата
Разбираем задачу и делим её на этапы
Смотрим, что нужно сделать, и предлагаем разбивку. Сайт обычно делится на два этапа, по вашему желанию — на три. Если объём работ большой, этапов будет больше: так проще и планировать, и принимать.
Подписываем договор
В договоре зафиксировано, что входит в каждый этап, в каком виде сдаётся результат и в какой срок. Без этого не начинаем: устные договорённости через месяц помнят по-разному.
Вы оплачиваете этап, мы его делаем
Каждый этап оплачивается авансом, до начала работ по нему. Платить сразу за весь проект не нужно — только за ближайший кусок.
Показываю результат, вы принимаете
Этап сдаётся целиком и в рабочем виде, а не «почти готово». Правки в рамках этапа делаем до того, как вы его примете.
Переходим к следующему этапу
После приёмки вы оплачиваете следующий этап, и цикл повторяется. Так расходы растягиваются по месяцам — это удобно, когда бюджет планируется заранее.
Вопросы и ответы
React или обычный сайт — что выбрать?
Если страницу открывают, читают и уходят — обычный сайт быстрее и дешевле, и его лучше видит поиск. Если с экраном работают: фильтруют, вводят, сохраняют — выигрывает React. Часто верный ответ смешанный: витрина на Drupal, личный кабинет на React.
Не пострадает ли поисковая оптимизация?
Пострадает, если сделать одностраничное приложение без серверной отрисовки и отдать поисковику пустую страницу. Поэтому продвигаемые разделы я оставляю на серверной отрисовке, а React ставлю там, где индексация не нужна: кабинеты, панели, внутренние инструменты.
Можно ли добавить React к существующему сайту?
Да, это обычный сценарий. Сайт остаётся на своей платформе, а React подключается отдельным разделом и берёт данные через API. Переписывать всё ради одного экрана не нужно.
Сколько занимает разработка личного кабинета?
Зависит от числа сценариев. Кабинет с просмотром заявок и профилем — недели. Кабинет со сделками, документами, ролями и отчётами — месяцы. Точный срок называю после разбора сценариев.