Сергей Морковкин "Разработка realtime SPA с...

Сергей Морковкин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: sergeymorkovkin@gmail.com

Portfolio: http://morkovkin.info

Skype: sergeymorkovkin

Viber: +38 (050) 445-01-45

Сергей Морковкин

БЛАГОДАРЮ ЗА ВНИМАНИЕ