Денис Яремов "Offline-first приложение на Reflex"
•Als PPTX, PDF herunterladen•
1 gefällt mir•615 views
Наши приложения зажаты в рамки традиционной клиент-серверной архитектуры - в систему, где мы обязаны делать запрос и обрабатывать ответ на любую потребность клиента в данных. Такой подход к работе с данными не позволяет приложению работать в условиях отсутствия связи с сервером. Этот подход к организации приложений сродни принципу испорченного телефона и усложняет наши приложения. Reflex - это попытка взглянуть по-новому на организацию клиент-серверных приложений, попытка разрешить озвученные проблемы.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (19)
Ähnlich wie Денис Яремов "Offline-first приложение на Reflex"
Ähnlich wie Денис Яремов "Offline-first приложение на Reflex" (20)
Mehr von Fwdays
Mehr von Fwdays (20)
Денис Яремов "Offline-first приложение на Reflex"
- 1. Reflex - offline first for human beings 1 Offline-first приложение на Reflex Докладчик: Денис Яремов
- 2. OFFLINE-FIRST Reflex - offline first for human beings 2 Как я к этому пришел?
- 3. OFFLINE ОДНИМ СЛОВОМ Reflex - offline first for human beings 3 БОЛЬ
- 4. 4Reflex - offline first for human beings ShareJS Redux DiffSync
- 5. 5Reflex - offline first for human beings CAP
- 6. 6Reflex - offline first for human beings OFFLINE И ФИЗИКА Все клиенты видят одно (общее) состояние данных Каждый клиент может всегда читать и писать данные Система работает хорошо, не смотря на физическое деление сети
- 7. C – A – P 7Reflex - offline first for human beings C + A + P < 3
- 8. C – A – P И ВОСПРИЯТИЕ 8Reflex - offline first for human beings Eventual consistency = ½ consistency
- 9. C – A – P И ВОСПРИЯТИЕ 9Reflex - offline first for human beings Eventual availability?
- 10. 10Reflex - offline first for human beings OFFLINE И ФИЗИКА Все клиенты видят одно (общее) состояние данных Каждый клиент может всегда читать и писать данные Система работает хорошо, не смотря на физическое деление сети
- 11. C – A – P И ВОСПРИЯТИЕ 11Reflex - offline first for human beings Eventual availability = ½ availability
- 12. C – A – P И ВОСПРИЯТИЕ Reflex - offline first for human beings 12 ½ C + ½ A + P = ?
- 13. ReflexМетодология для создания интерактивных offline-first приложений
- 14. ЧТО ТАКОЕ REFLEX? Reflex - offline first for human beings 14 Методология
- 15. В ЧЕМ УНИКАЛЬНОСТЬ REFLEX? 15Reflex - offline first for human beings • Любой клиент • Любой backend • Любая* база данных • Любая поддерживающая технология
- 16. КАК УСТРОЕН REFLEX? 16Reflex - offline first for human beings
- 17. КАК ДАННЫЕ ХРАНЯТСЯ И ИСПОЛЬЗУЮТСЯ? 17Reflex - offline first for human beings ?
- 18. КАК ДАННЫЕ ХРАНЯТСЯ И ИСПОЛЬЗУЮТСЯ? 18Reflex - offline first for human beings
- 19. КАК ПРОИСХОДИТ ОБМЕН ДАННЫМИ? 19Reflex - offline first for human beings ? Client-side storage Partial database replica
- 20. КАК ПРОИСХОДИТ ОБМЕН ДАННЫМИ? 20Reflex - offline first for human beings
- 21. КАК ИДЕНТИФИЦИРОВАТЬ ДАННЫЕ ПОЛЬЗОВАТЕЛЯ? 21Reflex - offline first for human beings Обратный HTTP Простая выборка Client-side storage Partial database replica ?
- 22. КАК ИДЕНТИФИЦИРОВАТЬ ДАННЫЕ ПОЛЬЗОВАТЕЛЯ? 22Reflex - offline first for human beings
- 23. КАК РАБОТАТЬ С ДАННЫМИ? 23Reflex - offline first for human beings Обратный HTTP Простая выборка Client-side storage Partial database replica Permissions ?
- 24. Reflex - offline first for human beings 24 КАК РАБОТАТЬ С ДАННЫМИ?
- 25. КАК ПРОИСХОДИТ ОБРАБОТКА КОНФЛИКТОВ? 25Reflex - offline first for human beings Обратный HTTP Простая выборка Client-side storage Partial database replica ? Permissions Полносвязн ый graph данных на клиенте
- 26. КАК ПРОИСХОДИТ ОБРАБОТКА КОНФЛИКТОВ? 26Reflex - offline first for human beings
- 27. КАК ПРОИСХОДИТ ОБРАБОТКА КОНФЛИКТОВ? 27Reflex - offline first for human beings
- 28. КОНФЛИКТЫ – ИНОГДА ЭТО ХОРОШО 28Reflex - offline first for human beings
- 29. КОНФЛИКТЫ – ИНОГДА ЭТО ХОРОШО 29Reflex - offline first for human beings
- 30. GET LATEST 30Reflex - offline first for human beings
- 31. КАК ЭТО ВЫГЛЯДИТ ВЖИВУЮ 31Reflex - offline first for human beings Обратный HTTP Простая выборка Client-side storage Partial database replica Мультиверси онность Permissions Полносвязн ый graph данных на клиенте
- 32. КОНТАКТЫ Reflex - offline first for human beings 32 Денис Яремов denis.yaremov@gmail.com
Hinweis der Redaktion
- Кто ты? Рефлекс єто Offline first Интерактивные приложения Меньше кода, быстрее приложение
- 4 года назад проект Надежность Интерактивность Отказоустойчивость ~ offline-capable Пытался найти готовую технологию Meteor Hoodie / PouchDB / CouchDB Offline-first самостоятельно ------------- ТО ЧТО ПОЛУЧИЛОСЬ ЭТО ---------------------
- Офлайн – танго на обильно заминированном поле Большое количество нюансов Вопросы последовательности событий Очень тонкий момент (Породили неклассическую физику) Влияют на программирование offline
- С этой болью столкнулись многие Подымите руку кто писал offline-first? Я снимаю шляпу Особенности Завязка на базу данных Завязка на бекенд (NodeJS) Завязка на клиентё На тот момент список был короче Заставило заняться собственным решением
- Подымите пожалуйста руки Спасибо!
- Offline тесно связан с этой теоремой а как следствие с физикой происходящего Сейчас я это объясню
- Нельзя выбрать C A P одновременно
- Eventual consistency – расслабленная, неполноценная форма Consistency половинка от полноценной consistency Пример, лайки
- Чем может являться расслабленная форма Availability?
- Eventual availability это расслабленная форма Availability
- Получается что OF связан с CAP и образует новую ранее не исследованную систему уступок и выгод Это принцип позволяет по новому взглянуть на программирование? И сейчас мы это сделаем
-
- Не библиотека Не фонотека Не картотека Это методология
- Уникальность в Клиент Бекенд База данных Поддерживающая технология (WebSocket / Socket, Angular / Ember / React …)
- Рефлекс состоит из нескольких принципов, все они одинаково важны
- Мы начнем с первой из них Как данные хранятся и
- Клиент всегда работает с локальными данными Partial database replica on the client Client-side storage (IndexedDB, WebSQL, Sqlite, …)
- Обратная связь Это дает интерактивность Большой объем данных лишь при первой загрузке приложения Дальше данные загружаются из локальной базы
- Современные системы используют подписки на выборки Минус в том что необходимо писать выборки Каждая выборка требует большое количество поддерживающего кода Обычные клиент-серверные приложения по сути состоят из выборок Каждая выборка решает одну задачу получение / сохранение данных Каждая выборка генерирует копипаст Минус в том что нужно вести учет выборок а так-же того сколько данных они возвращают Рефлекс идет по иному пути Jira, Trello Рефлекс предлагает использовать подписки на пермишены Каждое данное создается с ссылкой на пермишен Если пользователю разрешено получать это данное то в его ролях должен быть этот пермишен На основании этого легко рассчитать данные которые относятся к пользователю То есть пермишены это не только безопасность
- Данные из базы содержат суррогаты ссылок В таком виде пользоваться такими данными не удобно Reflex создает полносвязный граф замещая строчные ссылки языковими У вас на клиенте есть полносвязная модель данных с которой удобно работать Не нужно создавать проекции Не нужно писать код конвертирующий данные из одного формата в другой
- И самое интересное
- Данные в современном мире редактируются деструктивно Нет возможности просмотреть каким было данное в прошлом
- Что такое конфликт Какую версию вы предпочли бы оставить? Reflex идет по третьему пути, кто уже догадался что это за путь?
- Мы сохраняем все версии (Вообще все!!!) Insert only (даже удаление) Это позволяет предотвратить уничтожение данных (Immutable data) Возможность ползунком перетянуть время назад Делегировать резолюшен конфликтов пользователю Удобство для пользователя Когда одна из версий затирает другую это кошмар И так или требуется внимания пользователя Нам не нужны логи Меньше мусора в базе Нет нужды в синхронизации – система работает быстрее Как отобразить такие данные: Пример с формочкой
- Как работать с такими данными как их получить? Как получать такие данные Пример с timestamp > user timestamp
- Что происходит на схеме Какие данные должен получить пользователь Как понять что данное не нужно отправлять на клиент