Доклад осветит вопросы устройства REST API для веб-приложений и мобильных клиентов, от которых требуется высокая производительность. Проектирование высокопроизводительных REST API. - Кто должен участвовать в проектировании. - Как узнать, что оптимизировать. - Как измерять производительность REST API. Паттерны и антипаттерны. - Почему pagination - это плохо, и на что лучше заменить. - Проблема N+1 и как с ней бороться. - Бесполезные данные - как обнаружить и уничтожить. - Как не ломать кэширование на клиенте. - Эффективная работа с интерфейсами "мастер-детали". Кэширование. - Три слоя кэширования. - Самый быстрый запрос - тот, которого не было. Как увеличить их количество. - Экономия трафика. - Исключение ненужных вычислений. - Подходы к инвалидации кэша. Приемы оптимизации работы с API на клиенте. - Параллельные запросы. - Эффективный разбор данных. - In-memory DB на клиенте. - Стратегии кэширования на клиенте.

1. Дизайн REST API для
высокопроизводительных
систем
Александр Лебедев
Новые Облачные Технологии

2. О чем этот рассказ
• Взгляд фронтенд-разработчика
• С каким REST API удобно писать быстрые приложения
• И какой API мешает это делать

3. Почему это важно
• Performance
• Скорость разработки

4. ***
Контекст

5. Система с высоты птичьего полета

6. Люди с высоты птичьего полета

7. Общий подход к производительности
• Смотрим на систему в целом
• Измерение важнее оптимизации
• Избегаем простых ошибок

8. ***
Измерение производительности

9. Как измерять производительность
• Нагружаем REST API для проверки бэкенда
• Нагружаем UI для проверки фронтенда

10. Условия измерения производительности
Картина, максимально приближенная к жизни
• Данные
• Количество пользователей
• Сценарии использования

11. Измеряем производительность бэкенда
дешево и сердито
• Перекладываем use cases в список REST-запросов
• Выполняем через JMeter
• Profilt!

12. Измеряем производительность веб-
фронтенда дешево и сердито
• console.time() / console.timeEnd()
• window.performance.now()
• Selenium для автоматизации

13. ***
Паттерны и антипаттерны

14. Прозрачность стоимости запроса

15. Прозрачность стоимости запроса

16. Прозрачность стоимости запроса

17. Прозрачность стоимости запроса

18. Прозрачность стоимости запроса

19. ***

20. Pagination
• Дешево и сердито
• Но есть проблемы

21. Pagination — подсчёт результатов
Пример стоимости получения
• Данные для 20 элементов: 0.12 с
• “результаты 1..20 из 1024”: 0.45 с

22. Pagination и Usability
• Когда вы последний раз ходили на вторую страницу Гугла?

23. Pagination и синхронизация
• А что, если список поменяется между запросами страниц?

24. Pagination — сухой остаток
• Иногда уместно
• Часто есть UI/UX-решения получше
• Думайте о производительности
• Думайте о кэшировании

25. ***

26. Проблема N+1
• REST API здорового человека: 1 запрос

27. Проблема N+1
• REST API здорового человека: 1 запрос
• REST API курильщика: 11 запросов (N+1)

28. Проблема N+1 — причины и решения
Причины
• Проектирование API без мыслей об UI
• Проектирование UI без мыслей об API
Решения
• Включать все данные в один запрос
• Убрать из списка то, что нельзя получить сразу

29. ***

30. Лишние данные
• Используется: 20Kb
• Загружено: 400Kb

31. Лишние данные — возможные решения
• Краткая и полная версии объектов в API
• Клиент указывает в запросе, какие данные нужны

32. ***

33. Кэширование
• Сервер (за рамками доклада)
• HTTP
• Клиент

34. HTTP-кэш — плюсы и минусы
• Общепринятый стандарт
• Уже готово на сервере и на клиенте
• Не кастомизируется программно
• Инвалидация — обязательный поход по сети

35. HTTP-кэш — что обязан знать разработчик
• Cache-control, Expires
• Conditional GET
• Cache busting
• Стабильные id

36. Клиентский кэш — плюсы и минусы
• Максимально гибко и быстро
• Но надо писать код
• И придумывать решения
• Дублирование логики на всех клиентах

37. Клиентский кэш — как делать
• _.memoize()
• Кэширующий REST client
• Самодельный программный кэш
• In-memory DB

38. Клиентский кэш — как делать
• _.memoize() — да
• Кэширующий REST client
• Самодельный программный кэш
• In-memory DB

39. Клиентский кэш — как делать
• _.memoize() — да
• Кэширующий REST client — нет
• Самодельный программный кэш
• In-memory DB

40. Клиентский кэш — как делать
• _.memoize() — да
• Кэширующий REST client — нет
• Самодельный программный кэш — да
• In-memory DB

41. Клиентский кэш — как делать
• _.memoize() — да
• Кэширующий REST client — нет
• Самодельный программный кэш — да
• In-memory DB — да

42. Клиентский кэш — как инвалидировать
• Таймауты
• События в интерфейсе
• Уведомления с сервера

43. Клиентский кэш — как инвалидировать
• Таймауты
• События в интерфейсе
• Уведомления с сервера
Источник истины только на сервере!

44. ***

45. Что еще мешает писать быстрый фронтенд
• Зависимость запросов друг от друга
• Не-JSON данные
• Нарушение семантики HTTP
• Разные ответы на один запрос
• Изменение данных через GET
• Изменение URL стабильных данных

46. ***
Подводим итоги

47. Резюме
• Проектируем REST API вместе и для всех
• Измерение скорости важнее оптимизации
• Не скрываем стоимость операций
• Отталкиваемся от структуры UI
• Кэшируем правильно
• Не совершаем простых ошибок

48. Спасибо! Вопросы?

49. Контакты
alexander.lebedev@ncloudtech.ru
https://www.linkedin.com/in/alexlebedev
https://github.com/alebedev