click fraud detection
0 800 755 007
(Бесплатно по Украине)

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

801
5/ 5stars
5/5

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

У корпорации «Риел» множество интернет-ресурсов – это и сайт компании, и отдельные сайты каждого из жилых комплексов (ЖК), которые строит «Риел». На данный момент – это 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/5
Полезность
Проголосовали 1
Как вам статья?
Wezom
Wezom
Давайте начнем
беседу!
КОММЕНТАРИИ0
ОСТАВИТЬ КОММЕНТАРИЙ К СТАТЬЕ
Возможно
Мобильные финансовые приложения – это инструмент, позволяющий клиенту взаимодействовать с финансовыми организациями и управлять средствами.…
Wezom
Wezom
Сколько стоит разработать приложение, зачем оно вообще нужно - вопросы, терзающие большинство современных предпринимателей.
Синявский Антон
Синявский Антон
Сегодня, когда стираются границы между странами, когда можно вести бизнес, находясь в любой точке земного…
Wezom
Wezom
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
СЛЕДИТЕ ЗА НАМИ В СОЦИАЛЬНЫХ СЕТЯХ