Сергей Морковкин "Разработка realtime spa с...
TRANSCRIPT
Сергей МорковкинLohika
Разработка Realtime SPA с использованием VueJS и RethinkDB
ПОСТАНОВКА ЗАДАЧИКакую проблему будем решать?
Разработать одностраничное web-приложение с возможностью realtime взаимодействия, используя
современный и не избыточный стек технологий.
ПРОСТОЕЛЕГКОЕ БЫСТРОЕ
БЫСТРОДЕЙСТВИЕЧто критично для realtime-приложений?
4
3
2
1 Моментальный доступ к обновлениям в БД
Соединение с сервером в режиме real-time
Высокая скорость обновления DOM-модели
Всевозможные оптимизации траффика
СТЕК ТЕХНОЛОГИЙ
STORAGE TRANSPORT FRAMEWORK
Что нам потребуется для realtime SPA?
RETHINK.DB WEB SOCKETS(SOCK.JS or SOCKET.IO)
VUE.JS
Какие выгоды использования данной связки?СТЕК ТЕХНОЛОГИЙ
ПОДПИСКИ НА ИЗМЕНЕНИЕ ДАННЫХ
ВЫСОКАЯ ПРОИЗВОДИТЕЛЬНОСТЬ
ЛЕГКАЯ МАСШТАБИРУЕМОСТЬ
ПРОСТОТА, ЛЕГКОСТЬ И СКОРОСТЬ
ПОЛНАЯ РЕАКТИВНОСТЬ
РАЗВИТАЯ ИНФРАСТРУКТУРА
Client Server
GET /APP (много файлов)
REST API по HTTP(S)
WEB SOCKET FULL DUPLEX
RETHINK.DBVUE.JS
RETHINK.DBVUE.JS
PUB/SUB
Как это работает?REALTIME-ВЗАИМОДЕЙСТВИЕ
SUBSCRIBE
PUBLISH
ACTION
SERVER DB
дай мне все изменения
дай мне все изменения
отправить в сокет
отправить в сокет
НЕДОСТАТКИ POLLING-а
update
отправить в сокет
ПРЕИМУЩЕСТВА CHANGEFEEDs
SERVER DB
подписываюсь
update
Какой алгоритм эффективнее и быстрее?POLLING vs CHANGEFEED
POLLING CHANGEFEED
VS
блокирующие вызовы нет блокирующих вызовов
перегрузка БД запросами нет излишней нагрузки
простота реализациисложность реализации
большая задержка минимальная задержка
Может ли RethinkDB оповещать нас?CHANGEFEEDS в RETHINK.DB
Как взаимодействовать с RethinkDB?ПРИМЕРЫ ЗАПРОСОВ REQL
СРАВНЕНИЕ REQL С ДРУГИМИ ЯЗЫКАМИ
MySQL MongoQL ReQL
Функциональность или производительность?РЕЖИМЫ РАБОТЫ VUE.JS
STANDALONE RUNTIME-ONLY
VS
есть компилятор шаблонов легкий, без компилятора
полная поддержка шаблонов только в файлах компонентов
пре-компиляция при сборкекомпиляция на клиенте
24.74 Kb 17.24 Kb
шаблоны передаются как строки передаются как render-функции
Vue.JS React
Самый быстрый 23ms 63ms
Медиана 42ms 81ms
Среднее 51ms 94ms
Самый медленный 343ms 453ms
Кто быстрее в рендеринге?СРАВНЕНИЕ VUE.JS И REACT
https://github.com/chrisvfritz/vue-render-performance-comparisons
СИНТАКСИС ШАБЛОНОВ VUE.JS
Зачем она нужна?ВИРТУАЛЬНАЯ DOM
APP VIRTUAL DOM REAL DOM
JavaScript Environment
build/modify build/modify
eventsevents
Как она работает?ВИРТУАЛЬНАЯ DOM
CHANGE #1 CHANGE #2 REAL DOM
Как она работает?РЕАКТИВНОСТЬ VUE.JS
Зачем это нужно?СИСТЕМА КОМПОНЕНТОВ VUE.JS
В чем ее преимущества?СИСТЕМА КОМПОНЕНТОВ VUE.JS
Позволяет повторно использовать компоненты
Позволяет разбить приложение на составные части
Поддерживает 1-файловые компоненты (JS, CSS, HTML)
Уже сейчас соответствует Web Components Spec от W3C
Система распределения контента на основе слотов
Как разрабатывать компонент в одном файле?СИСТЕМА КОМПОНЕНТОВ VUE.JS
}
Какие существуют способы маршрутизации?МАРШРУТИЗАЦИЯ В VUE.JS
Vue Router
3rd Party Library
Custom Router
официально рекомендован +7.01 Kb
можно подключить page.js, director и др.
контроль нужно писать и отлаживать код
Что облегчит и ускорит работу?«ПЛЮШКИ» ДЛЯ РАЗРАБОТЧИКОВ
ИНСТРУМЕНТЫ РАЗРАБОТЧИКА VUE-DEVTOOLS ДЛЯ CHROME
СЕРВЕР РАЗРАБОТКИ С HMR (HOT MODULE REPLACEMENT)
ВОЗМОЖНОСТЬ СОЗДАВАТЬ 1-ФАЙЛОВЫЕ КОМПОНЕНТЫ
ШАБЛОНЫ И RENDER-ФУНКЦИИ С JSX (ОПЦИОНАЛЬНО)
ОФИЦИАЛЬНЫЙ CLI ДЛЯ БЫСТРОГО СКЭФФОЛДИНГА
Facebook: https://www.facebook.com/sergey.morkovkin.5
LinkedIn: https://ua.linkedin.com/in/sergeymorkovkin
Email: [email protected]
Portfolio: http://morkovkin.info
Skype: sergeymorkovkin
Viber: +38 (050) 445-01-45
Сергей Морковкин
БЛАГОДАРЮ ЗА ВНИМАНИЕ