1 of 30

СИНХРОННА ТА АСИНХРОННА �КОМУНІКАЦІЯ МІЖ ФРОНТЕНДОМ �ТА БЕКЕНДОМ:

вибір оптимальної архітектури

2 of 30

CleanerGuru

Ігор Закутинський

Head of Engineering FORMA

Понад 10 років у розробці

PhD Computer Science

Великий досвід у побудові високонавантажених систем

Викладач у НАУ

AWS Certified Solutions Architect

3 of 30

130+�талановитих, драйвових людей

100+ талановитих, драйвових люднй

Створюємо продукти для понад

83 млн користувачів зі 180 країн світу

Universe Group сьогодні

Нам

6 років

100+ талановитих, драйвових люднй

3 самостійних�прибуткових бізнеси

100+ талановитих, драйвових люднй

4 of 30

Наші бізнеси

користувачів

83,5 млн

R&D

5 of 30

Agenda

Основні поняття

Синхронна комунікація

Асинхронна комунікація

Use cases

Масштабування та балансування

Архітектурні патерни

Вибір оптимальної архітектури

01

02

03

04

05

06

07

6 of 30

HTTP/HTTPS

Протоколи доступні в браузерах на основі Chromium

WebSockets

Server-Sent Events (SSE)

WebRTC

FTP

(File Transfer Protocol)

QUIC

7 of 30

У 2023 році обсяг глобального інтернет-трафіку склав понад 4 зетабайт �(1 зетабайт = 1 трильйон гігабайтів)

Понад 60% всього інтернет-трафіку генерується браузерами

У середньому, кожен користувач інтернету завантажує близько 1.7 гігабайт даних на день

HTTP/HTTPS: 70% всього трафіку

Об'єми трафіку

8 of 30

CleanerGuru

Синхронна комунікація

9 of 30

CleanerGuru

Синхронна комунікація

Відправляємо запит та чекаємо відповідь

Переваги

Простота реалізації, передбачуваність

Приклади

HTTP-запити, REST API

Недоліки

Затримки в часі очікування відповіді, блокування ресурсів

10 of 30

CleanerGuru

Синхронна комунікація

CRUD операції (створення, читання, оновлення, видалення даних)

Сервіси, де важлива передбачуваність та послідовність (банківські операції, онлайн-покупки)

11 of 30

HTTP/HTTPS

Перший реліз HTTP відбувся у 1989 році

HTTP/2 прийнятий у 2015 році. Реалізовано підтримку декількох одночасних запитів через одне TCP-з'єднання

HTTP/3 офіційно прийнятий у 2020 році, базується на протоколі QUIC

12 of 30

REST

(Representational State Transfer)

Stateless: кожен запит від клієнта до сервера повинен містити всю інформацію для обробки

Client-Server: чіткий поділ між клієнтом та сервером

Можливість використовувати проміжні сервери (наприклад, кеші, балансувальники навантаження)

13 of 30

CoAP

(Constrained Application Protocol)

Протокол для IoT пристроїв

Client-Семантика подібна до HTTP: використовує методи GET, POST, PUT, DELETE

Чіткий поділ між клієнтом та сервером

Можливість використовувати проміжні сервери (наприклад: кеші, балансувальники навантаження)

14 of 30

GraphQL

Дозволяє через один запит отримати дані з декількох джерел

Переваги: зниження кількості запитів, оптимізація передачі даних, уникнення надмірних даних

Недоліки: додатковий рівень абстракції

15 of 30

CleanerGuru

Асинхронна комунікація

16 of 30

CleanerGuru

Асинхронна комунікація

Запит відправляється, і клієнт може продовжувати роботу, не чекаючи відповіді

Переваги

Низька затримка, можливість обробки великих обсягів даних в реальному часі

Приклади

WebSockets, Server-Sent Events (SSE), AMQP, MQTT

Недоліки

Складність реалізації та дебагу

17 of 30

WebSockets

Двосторонній зв'язок між клієнтом і сервером

Низька затримка, підходить для систем реального часу (чати, ігри)

Потреба в постійному з'єднанні, складність масштабування

18 of 30

Server-Sent Events (SSE)

Односторонній зв'язок від сервера до клієнта

Простий у реалізації, підходить для стрімінгу даних (оновлення новин, фінансові дані)

Ідеальний use case: підписка на notifications

Нюанси: балансування навантаження, реконекти

19 of 30

Експеримент

Порівнюємо ефективність основних протоколів на прикладі отримання сповіщень з бекенду

Сценарій:

  • Фронтенд відправляє запит та тригерить виконання задачі на бекенді.
  • Час виконання задачі варіюється від 10 мс до 20 секунд.
  • Після виконання задачі, бекенд відправляє сповіщення на фронтенд - SSE, WS. Або фронтенд сам його забирає - HTTP.

Методи отримання сповіщень:

  • HTTP Long Polling
  • HTTP Short Polling (3s Interval)
  • Server-Sent Events (SSE)
  • Websockets

20 of 30

Експеримент

Параметри для оцінки:

Latency (Затримка) - Час від моменту завершення задачі до отримання сповіщення (в мілісекундах)

Bandwidth Usage (Використання пропускної здатності) - Обсяг даних, переданих між сервером та клієнтом. Відносна величина, яку рахуємо на основі Network utilization

Server Load (Навантаження на сервер) - Ресурси сервера, необхідні для підтримки з'єднання. Вираховуємо коефіцієнт [0-5] на основні CPU та Memory utilization

Complexity (Складність реалізації) - Просто суб'єктивна оцінка 😊

21 of 30

Експеримент - результати

22 of 30

Балансування навантаження

23 of 30

Балансування HTTP/HTTPS запитів

Методи

Round Robin

Least Connections

IP Hash

Weighted Round Robin

24 of 30

Балансування Server-Sent Events (SSE)

Методи: Round Robin, Least Connections, IP Hash

Потрібно тримати постійне з'єднання від сервера до клієнта

Високе навантаження на бекенд через постійний стрімінг даних

Масштабування для великої кількості одночасних клієнтів

25 of 30

Балансування Server-Sent Events (SSE)

Методи: Round Robin, Least Connections, IP Hash

Потрібно тримати постійне з'єднання від сервера до клієнта

Високе навантаження на бекенд через постійний стрімінг даних

Масштабування для великої кількості одночасних клієнтів

26 of 30

Балансування WebSocket

Методи: Round Robin, Least Connections, IP Hash

Потрібно тримати постійне з'єднання від сервера до клієнта

Високе навантаження на бекенд через постійний стрімінг даних

Масштабування для великої кількості одночасних клієнтів

27 of 30

CleanerGuru

API Gateway

Зручність в розробці, простота реалізації авторизації та моніторингу

Можливість об’єднання синхронних та асинхронних запитів

Потенційний bottleneck системи

28 of 30

CleanerGuru

Event-Driven Architecture

Асинхронна модель, заснована на подіях

Масштабованість, швидкість обробки

Складність реалізації

29 of 30

CleanerGuru

Вибір оптимальної архітектури

На що варто звертати увагу?

Тип проєкту (real-time, CRUD, аналітика)

Вимоги до продуктивності та масштабованості

Командні ресурси та експертиза

30 of 30

Contact me 👋

Telegram