[DUMP Екатеринбург 2017] Real-time приложения. Модные фреймворки. Что дальше?

Видео: https://youtube.com/watch?v=OXjNsLQPQUc

Полезные ссылки:

- https://goo.gl/ubvYpc – доклад Никиты Прокопова о синхронизации данных

- https://goo.gl/EnWfU0 – доклад Андрея Ситника о Logux

- https://github.com/centrifugal/centrifugo

- http://wamp-proto.org

- http://dev.apollodata.com

- http://anycable.io

- https://github.com/logux

Transcript

1. Real-time приложения Модные фреймворки Что дальше? Владимир Дементьев, Злые Марсиане
3. Злые Марсиане
4. Злые Марсиане
5. Teachbase * 2010 – 2016
6. Real-Time The real-time web is a web … that enable users to receive information as soon as it is published by its authors, rather than … check a source periodically for updates. * https://en.wikipedia.org/wiki/Real-time_web
7. А можно пример?
8. Мгновенные сообщения
9. Уведомления
10. Визуализация данных
11. Совместный доступ
12. Многопользовательские игры
13. История
14. До нашей эры
15. Средние века • FlashSocket • Short Polling • Бесконечный iframe • Long Polling
16. Comet
17. Эпоха Просочения
18. Эпоха Просочения • Поддержка WebSockets в Chrome (2009) • Опубликован стандарт WebSockets (2011) • WebSockets в IE (2012) • WebSockets в Safari и Android (2013)
19. 2005 2007 2011 2012 2014 2017 Real-time эволюция до н.э. Средние века Эпоха Просочения
20. Выбор есть?
21. Архитектура • Publish/Subscribe • DataSync
22. Архитектура • Publish/Subscribe • DataSync
23. DataSync • Оптимистичный UI • Offline first • Real-time first
24. DataSync Client Client DB DB App DB sync
25. DataSync: проблемы • Разрешение конфликтов (CRDT) • Синхронизация времени * см. @andrey_sitnik goo.gl/NOqXhi
26. DataSync: решения PouchDB Firebase Horizon GunJS * см. @nikitonsky goo.gl/ubvYpc
27. Проблемы решений • Как встроить в существующий проект? • Как мигрировать с/на? • Оно вообще работает?
28. Pub/Sub • Простые "живые" обновления (live updates) • Real-time last/first
29. Pub/Sub + RPC Client Client Client Channel Channel Channel Server
30. Типовые проблемы
31. Транспорт
32. Транспорт • Поддержка фоллбеков* • Сжатие/сериализация данных • Heartbeat • Фаейрволы/антивирусы и ws:// * поддержка WS в браузерах в 2017 – 94%* caniuse.com
33. Проблема отключения Client Server Network ws pong ws ping
34. Проблема отключения Client Server Network ws pong ws ping ws ping closed
35. Проблема отключения Client Server Network ws pong ws ping ws ping closed Schrödinger's Socket
37. socket.io • Поддержка транспортов • Pub/Sub (rooms) • Встроенный heartbeat • Никакого протокола → DYI
38. Протокол • "Язык" общения (схема) • Взаимозаменяемость (interoperability) • Абстракция над транспортом
39. Протокол • Bayeux • STOMP • MQTT • WAMP
40. Bayeux CometD (Java) Faye (Ruby, NodeJS)
41. Google Trends
42. STOMP / MQTT • Взаимодействие машина-машина • Гарантия доставки • Интеграция с MQ • Постоянные клиенты
43. STOMP / MQTT • Взаимодействие машина-машина • Гарантия доставки • Интеграция с MQ • Постоянные клиенты
44. Согласованность • Потеря сообщений при разрыве соединения • Опоздавшая подписка
45. Согласованность
46. Как решить? • История сообщений потока • Различные варианты хранения (список, last-win, свой вариант) • Подписка с last_message_id
47. Когда уже поздно
48. Производительность • Требования к ресурсам • Время ретрансляции сообщения • Масштабируемость
49. Websocket Shootout * https://hashrocket.com/blog/posts/websocket-shootout
50. Broadcast RTT 0s 1s 2s 3s 4s 5s 6s 7s 8s 9s 10s Number of connections 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 Go Erlang ActionCable Running on AWS EC2 c3.4xlarge (16 vCPU, 30 GiB RAM) Websocket Shootout
51. Чего мы хотим • Решение транспортных проблем • Адекватная производительность • Согласованность данных • Интеграция с существующей бизнес-логикой
52. Решения?
53. OSS Centrifugo WAMP
54. Centrifugo * https://github.com/centrifugal/centrifugo
55. • История сообщений • Авторизация по токену • Трекинг присутствия Centrifugo
56. Присутствие
57. Аутентификация • Cookies • Токены + HTTP • JWT
58. • История сообщений • Авторизация по токену • Трекинг присутствия • PUSH-only Centrifugo
59. WAMP • Pub/Sub + RPC (RMI) • Клиент – Брокер – Клиент • Подробная спецификация (базовый и продвинутый профиль)
60. WAMP Client Client Broker / Dealer Client (App) RMI broadcast RMI
61. WAMP • Логика на любом языке • Готовые реализации брокеров • История сообщений* • Бинарная сериализация (MsgPack) * только в продвинутом профиле
62. WAMP • crossbar.io • Autobahn (Python, JS, C++) • Erwa, akka-wamp, Turnpike
63. WAMP • Продвинутый профиль в α-стадии • Масштабируемость?
64. Будущее?
65. • Попытка исправить Meteor • GraphQL как единый протокол (query, mutation, subscription) • GraphQL подписки не стандартизированы * http://www.apollodata.com
66. AnyCable Logux Марсианский подход
67. AnyCable
68. AnyCable • Протокол ActionCable (Rails) с расширениями • gRPC для взаимодействия с приложением • "Умный" WebSocket прокси (Erlang, Golang) * https://anycable.io
69. Logux • Синхронизация логов • Logux протокол • Интеграция с Redux/Vuex/etc • Замена AJAX и REST * https://github.com/logux/logux-protocol
70. cult of martians.com
71. Владимир Дементьев evilmartians.com github.com/palkan @palkan_tula Спасибо? Вопросы?