Як вирішити діджітал-завдання корпорації нерухомості? Стек технологій, універсальні рішення в дизайні та в комунікації додатків. Про все по черзі на прикладі компанії "Ріел".
Корпорація «Ріел» має безліч інтернет-ресурсів – це й сайт компанії, й окремі сайти кожного з житлових комплексів (ЖК), які будує «Ріел». На цей час – це 49 реалізованих об'єктів у Львові та Києві.
На всіх ресурсах відбувається продаж - квартир, паркомісць, нерухомості під комерційні цілі. Кожен такий ресурс відвідує від 30 до 50 тисяч користувачів на місяць. Тому головне завдання майбутнього інтернет-ресурсу полягало в тому, щоб показати актуальність даних із продажу та донести інформацію про поточний статус будівництва на кожному з об'єктів.
Окрім цього «Ріел» володіє власним майданчиком обліку всіх своїх об'єктів: ціни, бронювання, продаж та інше. Потрібен був єдиний центр управління всією інформацією – єдина панель адміністрування, яка включає агрегацію даних з продажу з внутрішнього майданчика і контентну інформацію про корпорацію та її проекти: контакти, новини, акції, каталог об'єктів та інше. Ще одне завдання полягало в перепакуванні всіх наявних ресурсів корпорації.
Класичний варіант із монолітним сайтом команда відкинула одразу. Одна кодова база, яку використовують різні домени, не є стабільною. Вона створить нагромадження умов поведінки всередині коду та підвищить витрати при масштабуванні. У разі помилки в одній ділянці коду можуть впасти всі сайти.
Команда проекту прийшла до рішення створити окремі програми, кожну зі своїм окремим завданням та ізольованим оточенням.
- Back-end сервер: поєднає всю інформацію з інтеграційних сервісів; керуватиме базами даних та сховищем файлів; інтегрує Elasticsearch за всім контентом.
- NodeJS сервер адмінпанелі: тут виконуватиметься керування контентом; відбуватиметься збирання статистики, фідів по об'єктах корпорації та інше.
- NodeJS сервер сайту корпорації «Ріел» – це основний інформаційний портал з каталогом об'єктів будівництва. На ньому зосереджено брендинг компанії.
- NodeJS сервер сайту ЖК: представляє типовий сайт житлового комплексу, на якому буде розміщено всю актуальну інформацію щодо поточного проекту та його об'єктів продажу.
Схема додатків та їх зв'язків 
Отже, ми затвердили основні складові та визначилися зі списком технологій. Наступний крок – розробка.
Користувальницький інтерфейс
Для динамічного відтворення сторінок ми використовували бібліотеку 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 – це робота на чистовик. У її наборі є інструменти, які зобов'язують одразу прописувати всі деталі та гарантують стабільний результат. Використовуючи їх, розробник запобігає неприємним ситуаціям, коли доводиться копатися у помилках та переробляти після себе.
Розробка проекту корпорації "Ріел" триває. Ми вже відправили в продакшн оновлений сайт компанії та надали клієнту зручну адмінпанель. Зараз впритул йдуть роботи з перепакування сайтів ЖК.
Обраний стек технологій сприяє процесу розробки та цілком відповідає новим бізнес-завданням, які ставить перед нами клієнт. Також він буде гарною базою для розширення та масштабування проекту загалом.
