Remote (dev)tools своими руками
Роман Дворнов
Avito
HolyJS
Москва, 2016

Руководитель
фронтенда в Avito
Основной интерес – SPA
Open source:
basis.js, CSSO,
component-inspector,
csstree, rempl и другие

Инструменты

Что значит инструмент?
«Инструменты» бывают разные!

В рамках доклада, «инструмент» –
программа, которая наблюдает за
приложением (страницей, окружением
etc), собирает данные и предоставляет
к ним графический интерфейс
5

React Developer Tools
github.com/facebook/react-devtools

React Developer Tools
github.com/facebook/react-devtools

Redux DevTools Extension
github.com/zalmoxisus/redux-devtools-extension

github.com/reactotron/reactotron/
Reactotron

github.com/reactotron/reactotron/
Reactotron

github.com/basisjs/basisjs
Basis.js DevTools

Забудьте не сможете
10

Анатомия инструментов

12
Runtime
ИнструментApp
Простой случай
Инструмент работает
в том же runtime, что и
приложение – в нем же
отображает интерфейс

Удаленный инструмент
13
RuntimeRuntime
App Инструмент

Удаленный инструмент
13
RuntimeRuntime
App Инструмент
???

Почему удаленные
инструменты?
14

Developer Tools

Developer Tools
runtime #1

Developer Tools
runtime #1
runtime #2

Developer Tools
runtime #1
Удаленное
взаимодействие
runtime #2

Мобильные устройства

Мобильные устройства
Удаленное
взаимодействие

Несколько экранов
App
Приложение или сайт
Editor and devtools
Редактор и инструменты

Несколько экранов
Удаленное
взаимодействие
App
Приложение или сайт
Editor and devtools
Редактор и инструменты

Удаленное взаимодействие
=
больше сценариев
использования
18

Идем к удаленным инструментам

20
Runtime
ИнструментSubject
Вернемся в начало
Очевидно, что одна
часть инструмента
собирает данные,
а другая визуализирует

21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI

21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI
Publisher
собирает и публикует данные

21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI
Publisher
собирает и публикует данные
Subscriber
визуализирует полученные данные

Общая схема работы
22
RuntimeRuntime
Publisher Subscriber (UI)Subject
Транспорт
С этой моделью subscriber (UI) может быть вынесен в произвольный runtime

Терминология
• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин),
создает sandbox
• Sandbox – окружение для UI
23

Создавая инструмент, нужно
создать publisher, subscriber,
transport, host и sandbox
24

Например: транспорт

WebSocket
26
Publisher Subscriber (UI)Server
Протокол #1 Протокол #2
Соединение publisher-subscriber = 2 соединения

Транспорт не всегда WebSocket

Транспорт не всегда WebSocket
DOM event based
communication
Сервер явно не нужен

Extending DevTools
28
developer.chrome.com/extensions/devtools

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page

Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Соединение publisher-subscriber = 4 event-based соединения

Транспорт – pain points
• Минимум 2 типа коммуникации
• 2-4 соединения между publisher-subscriber
• Соединения могут разрываться и восстанавливаться
• Нужен протокол взаимодействия
• Коммуникация асинхронная, нужен механизм callback'ов
• Обмен данными в JSON (на самом деле строками)
30

Проблемы разработки
инструментов

Ключевые проблемы
• Сложность реализации инфраструктуры
• Неудобство процесса разработки
• Версионирование
32
habrahabr.ru/company/jugru/blog/317060/

Пример: изменение в DevTools плагине
• Перезагрузить плагин (в Chrome это Extensions)
• Перезагрузить страницу
• Закрыть Developer Tools
• Открыть Developer Tools
• Открыть закладку плагина
33

Самое печальное –
разные разработчики
инструментов решают одни и те
же проблемы
35

Свет в конце тоннеля

Сначала нужно сделать:
хосты, транспорты и возможность
запускать UI удаленно
38

И только после этого
приступить к разработке
самого инструмента
39

40
Полезная функциональность
Инфраструктура
(оверхед)

Rempl спешит на помощь
41
RuntimeRuntime
Publisher Subscriber (UI)App

rempl (remote platform) –
платформа для получения
контролируемого удаленного
доступа к JavaScript runtime
используя UI
42

Rempl обеспечивает
• WS и DOM event транспорты, организует автоматическое
соединение
• Простое API обмена данными/командами для Publisher и
Subscriber
• Хосты: developer tools, electron app, web interface, editor
plugins etc
• Обеспечивает песочницу, самостоятельно получает UI и
инициализирует его
43

Одна из задач проекта –
снизить порог входа
в разработку собственных
инструментов
44

С rempl не нужно думать об
инфраструктуре
45

Фокус на самом инструменте –
нужно написать только
Publisher и Subscriber
46

Минутка кода

Publisher
48
<script src="node_modules/rempl/dist/rempl.js"></script>
<script>
function getUI(settings, callback) {
callback(null, 'script', '/* subscriber code */');
}
var myTool = rempl.createPublisher('myTool', getUI);
setInterval(function() {
myTool.publish(Date.now());
});
</script>

Subscriber
49
// subscriber создается песочницей автоматически
// не нужно ничего подключать/создавать – получаем готовое API
rempl.subscribe(function(data) {
document.body.innerHTML = new Date(data);
});

Удаленный инструмент – готов!
50

Publisher и Subscriber могут
обмениваться командами
51

Обмен командами
52
endpoint.define({
method: function(a, b) {
console.log('call smth', a, b);
},
…
});
На одной стороне На другой стороне
endpoint.invoke('method', 'hello', 42);
endpoint – publisher или subscriber
декларируем методы вызываем метод

API
53
publish(data)
define(methods)
invoke(method, ...args, cb)
ns(name)
publish/define/invoke
subscribe(fn)
define(methods)
invoke(method, ...args, cb)
ns(name)
subscribe/define/invoke
Publisher Subscriber

Новые горизонты

Не только браузер

Озарение #1:
Publisher работает только с
данными, значит его можно
запустить в node.js
56

Publisher
57
var fs = require('fs');
var rempl = require('rempl');
var myTool = rempl.createPublisher('myTool', getUI);
function getUI(settings, cb) {
cb(null, 'script', fs.readFileSync('./ui.js', 'utf8'));
}
...

И мы получаем ту же
инфраструктуру и для node.js
(за исключением браузерных Developer Tools,
возможно временно)
58

webpack-dashboard
59
github.com/FormidableLabs/webpack-dashboard

rempl-webpack-analyzer
60
github.com/smelukov/rempl-webpack-analyzer
аналог webpack-dashboard на rempl

Преимущества
• Можно открыть в любом rempl-хосте
• Построен на web-технологиях
• Проще делать UI
• Возможность сделать более богатый UX
• Можно прикрутить готовые решения для
анализа и пр.
61

Например, source-map-explorer
62
github.com/danvk/source-map-explorer

Озарение #2:
ServiceWorker, WebWorker, …
63

Идея для «стартапа»
• Разрабатываем frontend раньше backend
• Не хотим захламлять frontend моками –
мокаем серверное API в ServiceWorker
• Добавляем publisher в ServiceWorker
• Делаем UI для управления моками
в ServiceWorker
64

65
Мы это уже запатентовали.
Если у вас проблемы с
этим – увидимся в суде!

66
Мы это уже запатентовали.
Если у вас проблемы с
этим – увидимся в суде!
Это Open Source –
пробуйте, делайте

Озарение #3:
Теоретически, Publisher может жить
не только в JavaScript –
веб-интерфейс для любого процесса?
67

Source + Runtime

Есть прекрасные инструменты
для работы с кодом
69

Есть хорошие инструменты
заглядывающие под капот
приложений (runtime)
70

Но эти два мира инструментов
существуют раздельно
71

Представьте, что у вас есть
информация о коде, контексте
редактирования и состоянии
runtime в одном месте…
72

За сложной схемой…
73
Editor
Rempl host (editor plugin)
Rempl sandbox
Subscriber (UI)
Browser
Publisher App
Rempl transport

… простая идея
74
AppSource …

… простая идея
74
AppSource …
Связь двух миров

Несколько идей
• Подсвечивать на странице то, на что влияет
редактируемый файл
• Доступные в шаблоне биндинги или текущие значения
• Во что ресолвится ссылка на модуль и переход к
нужному файлу
• Во что транспилируется редактируемый файл
• … ограничивается лишь вашей фантазией
75

rempl хост в Atom
76
github.com/rempl/host-atom

Remote devtools → remote apps

Инфраструктура универсальна
и позволяет создавать
разноплановые решения
(приложения)
78

«Безумные» идеи
• Управление презентацией (например, Shower)
• Стриминг медиа с одного устройства на
другие
• Свой файлообменник
• …
79

rempl не для коммерческих
решений или сервисов
80

Но отличная основа
для экспериментов
и персональных решений,
где требуется удаленный доступ
81

Планы

rempl в фазе MVP –
многое на подходе
83

В первую очередь
• Стабилизировать API
• Документация, туториалы, примеры
• Обкатать ключевые компоненты (хосты,
транспорты и т.д.), реализовать недостающее
• Больше опций для поставки UI
84

В долгосрочной перспективе
• SDK для наиболее частых задач (данные, DOM etc)
• Перевести существующие инструменты на rempl
• Безопасность
• Connection specific content
• Возможность авторизации и разделения прав
• … новые идеи появляются постоянно ;)
85

Подводим итоги

rempl (remote platform) –
платформа для получения
контролируемого удаленного
доступа к JavaScript runtime
используя UI
87

rempl предоставляет
инфраструктуру и упрощает
создание удаленных
инструментов
88

89
Subject
Subject
in-pageSubscriber (UI)
Browser
Non-browser host
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Electron app
Subscriber (UI)
Subscriber (UI)
in-pagePublisher
in-pagePublisher

90
Subject
Subject
Subscriber (UI)
Browser
Non-browser host
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher

Это лишь начало –
впереди много интересного
91

может стать
трендом 2017 года
92

93
Просто подумайте в этом
направлении

github.com/rempl
94
Присоединяйтесь, поддерживайте,
помогайте, задавайте вопросы,
расскажите о ваших идеях

95
Интересно,
что получится у вас

Роман Дворнов
@rdvornov
rdvornov@gmail.com
Спасибо!
github.com/rempl