rempl – крутая платформа для крутых инструментов
TRANSCRIPT
Rempl – крутая платформа для крутых инструментов
Роман Дворнов Руководитель фронтенд разработки, Avito
Новосибирск, 2017
Чем дольше я занимаюсь rempl, тем больше вижу возможностей
2
Руководитель фронтенда в Avito
Основной интерес – SPA
Open source:basis.js, CSSO, component-inspector, csstree, rempl и другие
Инструменты
Что значит инструмент? «Инструменты» бывают разные!
Redux DevTools Extension
github.com/zalmoxisus/redux-devtools-extension
Анатомия инструментов
11
Runtime
ToolSubject
Простой случай
Инструмент работает в том же runtime, что и объект изучения – в нем же отображает интерфейс
Удаленный инструмент
12
RuntimeRuntime
Subject Tool
Удаленный инструмент
12
RuntimeRuntime
Subject Tool
???
Почему удаленные инструменты?
13
Мобильные устройства
Удаленное взаимодействие
Editor and devtoolsSubject
Несколько экранов / контексты
Удаленное взаимодействие
Subject Editor and devtools
Browser's Developer Tools
Browser's Developer Tools
runtime #1
Browser's Developer Tools
runtime #1
runtime #2
Browser's Developer Tools
runtime #1
Удаленное взаимодействие
runtime #2
Удаленное взаимодействие =
больше сценариев
17
Идем к удаленным инструментам
19
Runtime
ToolSubject
Вернемся в начало
Инструмент работает в том же runtime, что и объект изучения – в нем же отображает интерфейс
20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть инструмента собирает данные, а другая их визуализирует
Tool
20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть инструмента собирает данные, а другая их визуализирует
Tool
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Tool
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Publisher собирает и публикует данные
Tool
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Publisher собирает и публикует данные
Subscriber визуализирует полученные данные
Tool
Схема работы
22
RuntimeRuntime
PublisherSubject
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber
Схема работы
22
RuntimeRuntime
PublisherSubjectTransport
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber
Проблемы разработки инструментов
Ключевые проблемы• Сложность реализации инфраструктуры
(интеграции, транспорт, протоколы, API и т.д.)
• Неудобство процесса разработки
• Версионирование
• …
24
habrahabr.ru/company/jugru/blog/317060/
25
Полезная функциональность
Инфраструктура (оверхед)
Разные разработчики решают одинаковые проблемы, наступая на одни и те же грабли
26
Решение: rempl
Rempl спешит на помощь
29
RuntimeRuntime
Publisher Subscriber (UI)Subject
Rempl (remote platform)
платформа для получения контролируемого удаленного доступа
к runtime используя UI30
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
Инструмент
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
Инструмент
Фокус на самом инструменте – об остальном позаботится rempl
32
Дистрибуция subscriber'а (UI)
34
RuntimeRuntime
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
getRemoteUI
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
getRemoteUI
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
getRemoteUI
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
34
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
Типы subscriber'а
35
script – JavaScript bundle (string) sandbox.eval(rempl.source) sandbox.eval(content)
url – адрес страницы с subcriber'ом sandbox.src = content // нужно подключить rempl самим
Better for production
Better for development
rempl.source (quine)
36
Rempl может реплицировать себя Не нужно включать rempl.js в subscriber (для script)
;(function $rempl() { // … rempl bundle (rempl.js)
rempl.source = ';(' + $rempl + ').call(this);'; }).call(this);
Финальный шаг сборки
37
37
Not bad ;)
38
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка решения на rempl
38
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка решения на rempl
Rempl sandbox
Transport
WebSocket
40
Publisher Subscriber (UI)Server
Протокол #1 Протокол #2
Соединение publisher-subscriber = 2 WS соединения
Транспорт не всегда WebSocket
Транспорт не всегда WebSocket
Event based communication Сервер явно не нужен
Extending DevTools
42
developer.chrome.com/extensions/devtools
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Соединение publisher-subscriber = 4 event-based соединения
Хорошая новость – за вас это всё сделает rempl
44
«Минутка» кода
Live coding
46
npm install rempl
47
Publisher
48
<script src="node_modules/rempl/dist/rempl.js"></script><script>var myTool = rempl.createPublisher('myTool', getUI);setInterval(function() { myTool.publish(Date.now());});
function getUI(settings, sendUI) { sendUI(null, 'script', '/* JavaScript */');}</script>
Subscriber
49
// subscriber создается песочницей автоматически// не нужно ничего подключать/создавать – получаем готовое API
rempl.getSubscriber(function(subscriber) { subscriber.subscribe(function(data) { document.body.innerHTML = new Date(data); });});
Обмен командами (RPC)
50
endpoint.provide({ method: function(…args, callback) { … }, …});
На одной стороне На другой стороне
endpoint.callRemote( 'method', /* … args */ /* callback */);
endpoint – publisher или subscriber
декларируем методы вызываем метод
RPC API
51
publish(data)
provide(methods)revoke(method)callRemote(method, ...args, cb)
ns(name) publish/provide/callRemote
subscribe(fn)
provide(methods)revoke(method)callRemote(method, ...args, cb)onRemoteMethodsChanged(fn)
ns(name) subscribe/provide/callRemote
Publisher Subscriber
Новые горизонты
Не только браузер
Insight #1:
Publisher работает только с данными – можно запустить в node.js
54
Publisher – косметические изменения
55
var fs = require('fs');var rempl = require('rempl');var myTool = rempl.createPublisher('myTool', getUI);
function getUI(settings, sendUI) { sendUI(null, 'script', fs.readFileSync('./ui.js', 'utf8'));}
...
И мы получаем ту же инфраструктуру и для node.js
56
webpack-dashboard
github.com/FormidableLabs/webpack-dashboard
webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer
webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer
Плюсы• Можно открыть в любом rempl-хосте
• Построен на web-технологиях
• Проще делать UI
• Возможность сделать более богатый UX
• Можно прикрутить готовые решения для анализа и пр.
59
Insight #2:
ServiceWorker, WebWorker,
…
60
Insight #3:
Publisher может «жить» не только в JavaScript
61
Source + Runtime
Два мира инструментов
63
Source Static analysis
Editors, IDEs, linters, etc
Runtime Dynamic analysis
Devtools, reloaders, etc
Но эти два мира инструментов существуют раздельно
64
Представьте, что у вас есть информация о коде, контексте редактирования и состоянии
runtime в одном месте…
65
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
Editor
Rempl plugin
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
Editor
Rempl plugin
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
Несколько идей• Во что ресолвится ссылка на модуль и переход к нужному файлу
• Во что транспилируется редактируемый файл
• Подсвечивать на странице то, на что влияет редактируемый файл или его часть
• Доступные в шаблоне биндинги или текущие значения
• … ограничивается лишь вашей фантазией67
Demo env
69
Remote devtools → remote apps
Инфраструктура позволяет создавать разноплановые решения (приложения)
71
rempl не для построения сервисов, но отличная возможность
для экспериментов
73
Планы
rempl в фазе MVP – многое на подходе
75
В первую очередь• Стабилизировать API
• Документация, туториалы, примеры
• Обкатать ключевые компоненты (хосты, транспорты и т.д.), реализовать недостающее
• Больше опций для поставки UI
76
Интеграции• Browser's devtools
• Chrome (Opera)
• Firefox (планируется)
• В других браузерах пока невозможно
• Редакторы и IDE
• Atom
• VS Code (github.com/Microsoft/vscode/issues/22068)
• JetBrains IDEs (планируется)
• …
77
В долгосрочной перспективе• SDK для наиболее частых задач (данные, DOM etc)
• Перевести существующие инструменты на rempl
• Безопасность
• Возможность авторизации и разделения прав
• Connection specific content
• … новые идеи появляются постоянно ;)78
Подводим итоги
Rempl (remote platform)
платформа для получения контролируемого удаленного доступа
к runtime используя UI80
В чем польза
81
Для разработчиков
• Не нужно тратить время на инфраструктуру
• Готовые решения для типовых задач
• Надежная и обкатанная платформа (в перспективе)
• Не нужно наступать на грабли ;)
• Не нужно ставить плагины под каждый инструмент
• Возможность выбрать наиболее подходящий сценарий использования
• Нужно разобраться только с одним решением (rempl)
Для пользователей
82
Subject
Subject
in-pageSubscriber (UI)
Browser
Node.js
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Electron app
Subscriber (UI)Subscriber (UI)
in-pagePublisher
in-pagePublisher
83
Subject
Subject
Subscriber (UI)
Browser
Node.js
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher
84
Rempl – первопроходец
github.com/rempl85
Присоединяйтесь, поддерживайте, задавайте вопросы, делитесь идеями
86
Интересно,что получится у вас