Wezom
Wezom
Команда IT-компании
24.02.2021

GraphQL как основа для мультиплатформенного сайта

Wezom
Wezom
Команда IT-компании
24.02.2021
24.02.2021
5.0
3839
0

Как решить диджитал-задачу корпорации недвижимости? Стек технологий, универсальные решения в дизайне и в коммуникации приложений. Обо всём по очереди на примере компании «Риел».

У корпорации «Риел» множество интернет-ресурсов – это и сайт компании, и отдельные сайты каждого из жилых комплексов (ЖК), которые строит «Риел». На данный момент – это 49 реализованных объектов во Львове и Киеве.

На всех ресурсах происходит продажа – квартир, паркомест, недвижимости под коммерческие цели. Каждый такой ресурс посещает от 30 до 50 тыс. пользователей в месяц. Поэтому главная задача будущего интернет-ресурса заключалась в том, чтобы отобразить актуальность данных по продажам и донести информацию о текущем статусе строительства на каждом из объектов.

Кроме этого «Риел» владеет собственной площадкой учета всех своих объектов: цены, бронирование, продажи и прочее. Нужен был единый центр управления всей информацией – единая панель администрирования, которая включит в себя агрегацию данных по продажам из внутренней площадки и контентную информацию о корпорации и её проектах: контакты, новости, акции, каталог объектов и т.д. Ещё одна задача состояла в переупаковке всех имеющихся ресурсов корпорации.

Классический вариант с монолитным сайтом команда отбросила сразу. Одна кодовая база, которую используют разные домены, не стабильна. Она создаст нагромождение условий поведения внутри кода и повысит затраты при масштабировании. В случае ошибки в одном участке кода, могут обрушиться все сайты.

Команда проекта пришла к решению создать отдельные приложения, каждое со своей отдельной задачей и изолированным окружением.

  • Back-end сервер: объединит всю информацию из интеграционных сервисов; будет управлять базами данных и хранилищем файлов; интегрирует Elasticsearch по всему контенту.
  • NodeJS сервер админ-панели: здесь будет выполняться управление контентом; будет происходить сбор статистики, фидов по объектам корпорации и прочее.
  • NodeJS сервер сайта корпорации «Риел» – это основной информационный портал с каталогом объектов строительства. На нём сосредоточен брендинг компании.
  • NodeJS сервер сайта ЖК: представляет типовой сайт жилого комплекса, на котором будет размещена вся актуальная информация по текущему проекту и его объектах продажи.

Cхема приложений и их связейriel1

Итак, мы утвердили основные составляющие и определились со списком технологий. Следующий шаг - разработка.

пользовательский интерфейс

Пользовательский интерфейс

Для динамической отрисовки страниц мы использовали библиотеку React. Она выполняет универсальные задачи, такие как рендер любой html-страницы, и не имеет четких ограничений в использовании. У нас остается свобода выбора и действий. Но есть и обратная сторона медали - решений существует множество, можно сделать неправильный выбор и зайти в тупик.

У Wezom уже есть опыт разработки на этом стеке технологий, поэтому наши решения были простыми и рабочими.

дизайн-система

Дизайн-система

В основе дизайна всех приложений наша команда использовала дизайн-систему Material Design. Её "философия" как раз соответствовала требованиям клиента к дизайну. 

Для адаптации дизайн-макетов под React использовали Material-UI. Это библиотека, написанная на основе технологии CSS-in-JS. Именно эта технология послужила основным фактором выбора. 

CSS-in-JS позволяет динамически рендерить стили нужных компонентов, которые используются в текущий момент. Таким образом пользователь получает только нужный объем стилей, без лишнего кода.

Кроме эффективной доставки, библиотека позволяет динамически влиять и вычислять текущие значения, а значит – без проблем можно реализовать темизацию дизайн-системы. Эту задачу поставил клиент – и мы её решили.

NextJS и SEO

NextJS и SEO

На этапе разработки команда учитывала SEO-продвижение всех ресурсов «Риел». Нам нужен был серверный рендер фронтовых приложений.  Для этой задачи решили использовать фреймворк NextJS. Он дал нам все необходимые инструменты, и при этом у него очень простая и гибкая архитектура, понятный и консистентный роутинг, что упростило работу команды.

Основными инструментами SEO-описания страниц сталии схемы микроразметки в формате JSON+LD в соответствии со стандартами https://schema.org/. Это качественно повлияло на ранжированную выдачу поисковых систем.

Бытует мнение, что серверный рендер нужен только ради SEO-задач. Но это не так.  Например, ещё на сервере, можно понять статус текущей страницы,  авторизован пользователь или нет. В зависимости от этого перенаправить его на нужный интерфейс приложения.

По этой причине мы использовали NextJS и для приложения админпанели, которое не нуждалось в SEO-продвижении. Мало того разные подходы в реализации приложений усложнили бы работу всей команды из-за «неоднородности» процессов и функциональности архитектуры приложений. 

Работать с единым инструментом намного проще: команде легче перестраиваться и маневрировать специалистами по необходимости и тем самым держать уровень эффективности всего процесса разработки.

typescript

TypeScript

На таких проектах человеческий фактор играет большую роль. Одна небольшая оплошность, например пропущенная запятая в коде, может вызвать ошибки и нерабочий интерфейс на N-ой странице. Очень важно обеспечить стабильность работы всех приложений. Чтобы снизить процент ошибок и избежать проблем, мы использовали язык TypeScript. 

TypeScript – это компилируемое надмножество JavaScript, приносящее опциональную статическую типизацию. Именно этот приём позволяет TypeScript сразу обнаружить несоответствия во всех участках кода, значительно экономит время на рефактор и устранение всех неисправностей до последней.

Мы специально выставляем «строгий режим» компиляции, который не пропускает ошибки.

graphql api

GraphQL API

Основная проблема заключалась в коммуникации приложений между собой. Как доставить только ту информацию, которая нужна определенному приложению и его определенной странице?

Для такого проекта использовать REST API было бы неправильным решением, так как объемы и разнообразность данных колоссально отличаются друг от друга, в зависимости от интерфейса с которым взаимодействует пользователь.  Для всего этого массива нужно было создать универсальное API, управляемое  не с точки его описания, а со стороны клиента, который запрашивает данные. По этой причине команда проекта выбрала GraphQL. 

Это новая технология для компании Wezom. Ранее в производстве её не использовали, и у нас не было практикующих специалистов. После долгих обсуждений, мы все-таки решили рискнуть и утвердили GraphQL как основу. На случай провала был план «Б», но он не потребовался, наш риск окупился сполна.

GraphQL – это агностик язык запросов для построения API. Его можно интегрировать со всеми популярными языками программирования.

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

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

Помимо удобной выборки, GraphQL обеспечивает четкую типизацию всех данных, что гарантирует правильность запроса. А в связке с TypeScript усиливает стабильность взаимодействия приложений с API. Это позволяет отсечь все ошибки, которые могут быть вызваны несоответствием данных.

Технология GraphQL – это работа на чистовик. В её наборе есть инструменты, которые обязывают сразу прописывать все детали и гарантируют стабильный результат. Используя их, разработчик предупреждает неприятные ситуации, когда приходится копаться в ошибках и переделывать за собой. 

Разработка проекта корпорации «Риел» продолжается. Мы уже выкатили в продакшн обновленный сайт компании и предоставили клиенту удобную админпанель. Сейчас вплотную идут работы по переупаковке сайтов ЖК. 

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

Как вам статья?
5.0
Проголосовало: 2
Давайте обсудим Ваш проект
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Комментарии
(0)
Будьте первыми, кто оставит комментарий
wezom logo
Остались вопросы?
Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.
Подписывайтесь на рассылку Айтыжблог
blog subscriber decor image
Хотите получать интересные статьи?
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Следите за нами в социальных сетях
Этот сайт использует cookie-файлы для более комфортной работы пользователя. Продолжая просматривать сайт, Вы соглашаетесь на использование cookie.