remote (dev)tools своими руками
TRANSCRIPT
Remote (dev)tools своими руками
Роман Дворнов Avito
HolyJS
Москва, 2016
Руководитель фронтенда в Avito
Основной интерес – SPA
Open source:basis.js, CSSO, component-inspector, csstree, rempl и другие
Инструменты
Что значит инструмент? «Инструменты» бывают разные!
В рамках доклада, «инструмент» – программа, которая наблюдает за приложением (страницей, окружением etc), собирает данные и предоставляет к ним графический интерфейс
5
Redux DevTools Extension
github.com/zalmoxisus/redux-devtools-extension
Забудьте не сможете
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 – окружение для UI23
Создавая инструмент, нужно создать 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 AppRempl transport
… простая идея
74
AppSource …
… простая идея
74
AppSource …
Связь двух миров
Несколько идей• Подсвечивать на странице то, на что влияет редактируемый файл
• Доступные в шаблоне биндинги или текущие значения
• Во что ресолвится ссылка на модуль и переход к нужному файлу
• Во что транспилируется редактируемый файл
• … ограничивается лишь вашей фантазией75
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/rempl94
Присоединяйтесь, поддерживайте, помогайте, задавайте вопросы,
расскажите о ваших идеях
95
Интересно,что получится у вас
Роман Дворнов @rdvornov
Спасибо!
github.com/rempl