Как решить диджитал-задачу корпорации недвижимости? Стек технологий, универсальные решения в дизайне и в коммуникации приложений. Обо всём по очереди на примере компании «Риел».
У корпорации «Риел» множество интернет-ресурсов – это и сайт компании, и отдельные сайты каждого из жилых комплексов (ЖК), которые строит «Риел». На данный момент – это 49 реализованных объектов во Львове и Киеве.
На всех ресурсах происходит продажа – квартир, паркомест, недвижимости под коммерческие цели. Каждый такой ресурс посещает от 30 до 50 тыс. пользователей в месяц. Поэтому главная задача будущего интернет-ресурса заключалась в том, чтобы отобразить актуальность данных по продажам и донести информацию о текущем статусе строительства на каждом из объектов.
Кроме этого «Риел» владеет собственной площадкой учета всех своих объектов: цены, бронирование, продажи и прочее. Нужен был единый центр управления всей информацией – единая панель администрирования, которая включит в себя агрегацию данных по продажам из внутренней площадки и контентную информацию о корпорации и её проектах: контакты, новости, акции, каталог объектов и т.д. Ещё одна задача состояла в переупаковке всех имеющихся ресурсов корпорации.
Классический вариант с монолитным сайтом команда отбросила сразу. Одна кодовая база, которую используют разные домены, не стабильна. Она создаст нагромождение условий поведения внутри кода и повысит затраты при масштабировании. В случае ошибки в одном участке кода, могут обрушиться все сайты.
Команда проекта пришла к решению создать отдельные приложения, каждое со своей отдельной задачей и изолированным окружением.
- Back-end сервер: объединит всю информацию из интеграционных сервисов; будет управлять базами данных и хранилищем файлов; интегрирует Elasticsearch по всему контенту.
- NodeJS сервер админ-панели: здесь будет выполняться управление контентом; будет происходить сбор статистики, фидов по объектам корпорации и прочее.
- NodeJS сервер сайта корпорации «Риел» – это основной информационный портал с каталогом объектов строительства. На нём сосредоточен брендинг компании.
- NodeJS сервер сайта ЖК: представляет типовой сайт жилого комплекса, на котором будет размещена вся актуальная информация по текущему проекту и его объектах продажи.
Cхема приложений и их связей
Итак, мы утвердили основные составляющие и определились со списком технологий. Следующий шаг - разработка.
Пользовательский интерфейс
Для динамической отрисовки страниц мы использовали библиотеку React. Она выполняет универсальные задачи, такие как рендер любой html-страницы, и не имеет четких ограничений в использовании. У нас остается свобода выбора и действий. Но есть и обратная сторона медали - решений существует множество, можно сделать неправильный выбор и зайти в тупик.
У Wezom уже есть опыт разработки на этом стеке технологий, поэтому наши решения были простыми и рабочими.
Дизайн-система
В основе дизайна всех приложений наша команда использовала дизайн-систему Material Design. Её "философия" как раз соответствовала требованиям клиента к дизайну.
Для адаптации дизайн-макетов под React использовали Material-UI. Это библиотека, написанная на основе технологии CSS-in-JS. Именно эта технология послужила основным фактором выбора.
CSS-in-JS позволяет динамически рендерить стили нужных компонентов, которые используются в текущий момент. Таким образом пользователь получает только нужный объем стилей, без лишнего кода.
Кроме эффективной доставки, библиотека позволяет динамически влиять и вычислять текущие значения, а значит – без проблем можно реализовать темизацию дизайн-системы. Эту задачу поставил клиент – и мы её решили.
NextJS и SEO
На этапе разработки команда учитывала SEO-продвижение всех ресурсов «Риел». Нам нужен был серверный рендер фронтовых приложений. Для этой задачи решили использовать фреймворк NextJS. Он дал нам все необходимые инструменты, и при этом у него очень простая и гибкая архитектура, понятный и консистентный роутинг, что упростило работу команды.
Основными инструментами SEO-описания страниц сталии схемы микроразметки в формате JSON+LD в соответствии со стандартами https://schema.org/. Это качественно повлияло на ранжированную выдачу поисковых систем.
Бытует мнение, что серверный рендер нужен только ради SEO-задач. Но это не так. Например, ещё на сервере, можно понять статус текущей страницы, авторизован пользователь или нет. В зависимости от этого перенаправить его на нужный интерфейс приложения.
По этой причине мы использовали NextJS и для приложения админпанели, которое не нуждалось в SEO-продвижении. Мало того разные подходы в реализации приложений усложнили бы работу всей команды из-за «неоднородности» процессов и функциональности архитектуры приложений.
Работать с единым инструментом намного проще: команде легче перестраиваться и маневрировать специалистами по необходимости и тем самым держать уровень эффективности всего процесса разработки.
TypeScript
На таких проектах человеческий фактор играет большую роль. Одна небольшая оплошность, например пропущенная запятая в коде, может вызвать ошибки и нерабочий интерфейс на N-ой странице. Очень важно обеспечить стабильность работы всех приложений. Чтобы снизить процент ошибок и избежать проблем, мы использовали язык TypeScript.
TypeScript – это компилируемое надмножество JavaScript, приносящее опциональную статическую типизацию. Именно этот приём позволяет TypeScript сразу обнаружить несоответствия во всех участках кода, значительно экономит время на рефактор и устранение всех неисправностей до последней.
Мы специально выставляем «строгий режим» компиляции, который не пропускает ошибки.
GraphQL API
Основная проблема заключалась в коммуникации приложений между собой. Как доставить только ту информацию, которая нужна определенному приложению и его определенной странице?
Для такого проекта использовать REST API было бы неправильным решением, так как объемы и разнообразность данных колоссально отличаются друг от друга, в зависимости от интерфейса с которым взаимодействует пользователь. Для всего этого массива нужно было создать универсальное API, управляемое не с точки его описания, а со стороны клиента, который запрашивает данные. По этой причине команда проекта выбрала GraphQL.
Это новая технология для компании Wezom. Ранее в производстве её не использовали, и у нас не было практикующих специалистов. После долгих обсуждений, мы все-таки решили рискнуть и утвердили GraphQL как основу. На случай провала был план «Б», но он не потребовался, наш риск окупился сполна.
GraphQL – это агностик язык запросов для построения API. Его можно интегрировать со всеми популярными языками программирования.
Эта технология позволила нашим приложениям полностью управлять наборами данных, которые нужны только им в текущий момент. Мы описываем фрагменты запросов под каждый интерфейс, после чего объединяем их в единый запрос страницы. Таким образом, описание всех нужных данных упрощается.
Этот процесс значительно облегчил работу команды, так как позволил каждому разработчику сосредоточиться на своей задаче и решить её максимально эффективно.
Помимо удобной выборки, GraphQL обеспечивает четкую типизацию всех данных, что гарантирует правильность запроса. А в связке с TypeScript усиливает стабильность взаимодействия приложений с API. Это позволяет отсечь все ошибки, которые могут быть вызваны несоответствием данных.
Технология GraphQL – это работа на чистовик. В её наборе есть инструменты, которые обязывают сразу прописывать все детали и гарантируют стабильный результат. Используя их, разработчик предупреждает неприятные ситуации, когда приходится копаться в ошибках и переделывать за собой.
Разработка проекта корпорации «Риел» продолжается. Мы уже выкатили в продакшн обновленный сайт компании и предоставили клиенту удобную админпанель. Сейчас вплотную идут работы по переупаковке сайтов ЖК.
Выбранный стек технологий способствует процессу разработки и вполне поддается новым бизнес-задачам, которые ставит перед нами клиент. Также он будет хорошей базой для расширения и масштабирования проекта в целом.
