![Page 1: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/1.jpg)
Rempl – крутая платформа для крутых инструментов
Роман Дворнов Руководитель фронтенд разработки, Avito
Новосибирск, 2017
![Page 2: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/2.jpg)
Чем дольше я занимаюсь rempl, тем больше вижу возможностей
2
![Page 3: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/3.jpg)
Руководитель фронтенда в Avito
Основной интерес – SPA
Open source:basis.js, CSSO, component-inspector, csstree, rempl и другие
![Page 4: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/4.jpg)
Инструменты
![Page 5: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/5.jpg)
Что значит инструмент? «Инструменты» бывают разные!
![Page 8: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/8.jpg)
Redux DevTools Extension
github.com/zalmoxisus/redux-devtools-extension
![Page 12: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/12.jpg)
Анатомия инструментов
![Page 13: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/13.jpg)
11
Runtime
ToolSubject
Простой случай
Инструмент работает в том же runtime, что и объект изучения – в нем же отображает интерфейс
![Page 14: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/14.jpg)
Удаленный инструмент
12
RuntimeRuntime
Subject Tool
![Page 15: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/15.jpg)
Удаленный инструмент
12
RuntimeRuntime
Subject Tool
???
![Page 16: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/16.jpg)
Почему удаленные инструменты?
13
![Page 17: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/17.jpg)
Мобильные устройства
Удаленное взаимодействие
Editor and devtoolsSubject
![Page 18: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/18.jpg)
Несколько экранов / контексты
Удаленное взаимодействие
Subject Editor and devtools
![Page 19: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/19.jpg)
Browser's Developer Tools
![Page 20: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/20.jpg)
Browser's Developer Tools
runtime #1
![Page 21: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/21.jpg)
Browser's Developer Tools
runtime #1
runtime #2
![Page 22: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/22.jpg)
Browser's Developer Tools
runtime #1
Удаленное взаимодействие
runtime #2
![Page 23: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/23.jpg)
Удаленное взаимодействие =
больше сценариев
17
![Page 24: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/24.jpg)
Идем к удаленным инструментам
![Page 25: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/25.jpg)
19
Runtime
ToolSubject
Вернемся в начало
Инструмент работает в том же runtime, что и объект изучения – в нем же отображает интерфейс
![Page 26: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/26.jpg)
20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть инструмента собирает данные, а другая их визуализирует
Tool
![Page 27: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/27.jpg)
20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть инструмента собирает данные, а другая их визуализирует
Tool
![Page 28: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/28.jpg)
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Tool
![Page 29: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/29.jpg)
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Publisher собирает и публикует данные
Tool
![Page 30: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/30.jpg)
21
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
Runtime
Data
Subject
UI
Publisher собирает и публикует данные
Subscriber визуализирует полученные данные
Tool
![Page 31: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/31.jpg)
Схема работы
22
RuntimeRuntime
PublisherSubject
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber
![Page 32: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/32.jpg)
Схема работы
22
RuntimeRuntime
PublisherSubjectTransport
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber
![Page 33: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/33.jpg)
Проблемы разработки инструментов
![Page 34: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/34.jpg)
Ключевые проблемы• Сложность реализации инфраструктуры
(интеграции, транспорт, протоколы, API и т.д.)
• Неудобство процесса разработки
• Версионирование
• …
24
habrahabr.ru/company/jugru/blog/317060/
![Page 35: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/35.jpg)
25
Полезная функциональность
Инфраструктура (оверхед)
![Page 36: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/36.jpg)
Разные разработчики решают одинаковые проблемы, наступая на одни и те же грабли
26
![Page 37: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/37.jpg)
![Page 38: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/38.jpg)
Решение: rempl
![Page 39: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/39.jpg)
Rempl спешит на помощь
29
RuntimeRuntime
Publisher Subscriber (UI)Subject
![Page 40: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/40.jpg)
Rempl (remote platform)
платформа для получения контролируемого удаленного доступа
к runtime используя UI30
![Page 41: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/41.jpg)
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
![Page 42: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/42.jpg)
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
Инструмент
![Page 43: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/43.jpg)
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной функциональностью (devtools, редактор…)
31
Инструмент
![Page 44: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/44.jpg)
Фокус на самом инструменте – об остальном позаботится rempl
32
![Page 45: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/45.jpg)
Дистрибуция subscriber'а (UI)
![Page 46: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/46.jpg)
34
RuntimeRuntime
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 47: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/47.jpg)
34
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 48: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/48.jpg)
34
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 49: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/49.jpg)
34
RuntimeRuntime
Rempl host
getRemoteUI
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 50: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/50.jpg)
34
RuntimeRuntime
Rempl host
getRemoteUI
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 51: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/51.jpg)
34
RuntimeRuntime
Rempl host
getRemoteUI
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 52: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/52.jpg)
34
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 53: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/53.jpg)
34
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script', content: '/* js */' }
{ type: 'url', content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а
![Page 54: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/54.jpg)
Типы 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
![Page 55: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/55.jpg)
rempl.source (quine)
36
Rempl может реплицировать себя Не нужно включать rempl.js в subscriber (для script)
;(function $rempl() { // … rempl bundle (rempl.js)
rempl.source = ';(' + $rempl + ').call(this);'; }).call(this);
Финальный шаг сборки
![Page 56: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/56.jpg)
37
![Page 57: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/57.jpg)
37
Not bad ;)
![Page 58: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/58.jpg)
38
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка решения на rempl
![Page 59: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/59.jpg)
38
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка решения на rempl
Rempl sandbox
![Page 60: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/60.jpg)
Transport
![Page 61: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/61.jpg)
WebSocket
40
Publisher Subscriber (UI)Server
Протокол #1 Протокол #2
Соединение publisher-subscriber = 2 WS соединения
![Page 62: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/62.jpg)
Транспорт не всегда WebSocket
![Page 63: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/63.jpg)
Транспорт не всегда WebSocket
Event based communication Сервер явно не нужен
![Page 64: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/64.jpg)
Extending DevTools
42
developer.chrome.com/extensions/devtools
![Page 65: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/65.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
![Page 66: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/66.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script
![Page 67: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/67.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
![Page 68: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/68.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
![Page 69: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/69.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
![Page 70: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/70.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
![Page 71: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/71.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
![Page 72: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/72.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
![Page 73: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/73.jpg)
Runtime (devtools)
Что это значит для нас?
43
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Panel
Runtime
Background page
Соединение publisher-subscriber = 4 event-based соединения
![Page 74: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/74.jpg)
Хорошая новость – за вас это всё сделает rempl
44
![Page 75: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/75.jpg)
«Минутка» кода
![Page 76: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/76.jpg)
Live coding
46
![Page 77: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/77.jpg)
npm install rempl
47
![Page 78: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/78.jpg)
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>
![Page 79: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/79.jpg)
Subscriber
49
// subscriber создается песочницей автоматически// не нужно ничего подключать/создавать – получаем готовое API
rempl.getSubscriber(function(subscriber) { subscriber.subscribe(function(data) { document.body.innerHTML = new Date(data); });});
![Page 80: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/80.jpg)
Обмен командами (RPC)
50
endpoint.provide({ method: function(…args, callback) { … }, …});
На одной стороне На другой стороне
endpoint.callRemote( 'method', /* … args */ /* callback */);
endpoint – publisher или subscriber
декларируем методы вызываем метод
![Page 81: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/81.jpg)
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
![Page 82: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/82.jpg)
Новые горизонты
![Page 83: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/83.jpg)
Не только браузер
![Page 84: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/84.jpg)
Insight #1:
Publisher работает только с данными – можно запустить в node.js
54
![Page 85: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/85.jpg)
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'));}
...
![Page 86: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/86.jpg)
И мы получаем ту же инфраструктуру и для node.js
56
![Page 87: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/87.jpg)
webpack-dashboard
github.com/FormidableLabs/webpack-dashboard
![Page 88: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/88.jpg)
webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer
![Page 89: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/89.jpg)
webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer
![Page 90: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/90.jpg)
Плюсы• Можно открыть в любом rempl-хосте
• Построен на web-технологиях
• Проще делать UI
• Возможность сделать более богатый UX
• Можно прикрутить готовые решения для анализа и пр.
59
![Page 91: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/91.jpg)
Insight #2:
ServiceWorker, WebWorker,
…
60
![Page 92: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/92.jpg)
Insight #3:
Publisher может «жить» не только в JavaScript
61
![Page 93: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/93.jpg)
Source + Runtime
![Page 94: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/94.jpg)
Два мира инструментов
63
Source Static analysis
Editors, IDEs, linters, etc
Runtime Dynamic analysis
Devtools, reloaders, etc
![Page 95: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/95.jpg)
Но эти два мира инструментов существуют раздельно
64
![Page 96: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/96.jpg)
Представьте, что у вас есть информация о коде, контексте редактирования и состоянии
runtime в одном месте…
65
![Page 97: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/97.jpg)
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
![Page 98: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/98.jpg)
Editor
Rempl plugin
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
![Page 99: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/99.jpg)
Editor
Rempl plugin
Расширяем возможности subscriber'а
66
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)
![Page 100: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/100.jpg)
Несколько идей• Во что ресолвится ссылка на модуль и переход к нужному файлу
• Во что транспилируется редактируемый файл
• Подсвечивать на странице то, на что влияет редактируемый файл или его часть
• Доступные в шаблоне биндинги или текущие значения
• … ограничивается лишь вашей фантазией67
![Page 102: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/102.jpg)
Demo env
69
![Page 103: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/103.jpg)
Remote devtools → remote apps
![Page 104: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/104.jpg)
Инфраструктура позволяет создавать разноплановые решения (приложения)
71
![Page 106: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/106.jpg)
rempl не для построения сервисов, но отличная возможность
для экспериментов
73
![Page 107: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/107.jpg)
Планы
![Page 108: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/108.jpg)
rempl в фазе MVP – многое на подходе
75
![Page 109: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/109.jpg)
В первую очередь• Стабилизировать API
• Документация, туториалы, примеры
• Обкатать ключевые компоненты (хосты, транспорты и т.д.), реализовать недостающее
• Больше опций для поставки UI
76
![Page 110: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/110.jpg)
Интеграции• Browser's devtools
• Chrome (Opera)
• Firefox (планируется)
• В других браузерах пока невозможно
• Редакторы и IDE
• Atom
• VS Code (github.com/Microsoft/vscode/issues/22068)
• JetBrains IDEs (планируется)
• …
77
![Page 111: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/111.jpg)
В долгосрочной перспективе• SDK для наиболее частых задач (данные, DOM etc)
• Перевести существующие инструменты на rempl
• Безопасность
• Возможность авторизации и разделения прав
• Connection specific content
• … новые идеи появляются постоянно ;)78
![Page 112: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/112.jpg)
Подводим итоги
![Page 113: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/113.jpg)
Rempl (remote platform)
платформа для получения контролируемого удаленного доступа
к runtime используя UI80
![Page 114: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/114.jpg)
В чем польза
81
Для разработчиков
• Не нужно тратить время на инфраструктуру
• Готовые решения для типовых задач
• Надежная и обкатанная платформа (в перспективе)
• Не нужно наступать на грабли ;)
• Не нужно ставить плагины под каждый инструмент
• Возможность выбрать наиболее подходящий сценарий использования
• Нужно разобраться только с одним решением (rempl)
Для пользователей
![Page 115: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/115.jpg)
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
![Page 116: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/116.jpg)
83
Subject
Subject
Subscriber (UI)
Browser
Node.js
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher
![Page 117: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/117.jpg)
84
Rempl – первопроходец
![Page 118: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/118.jpg)
github.com/rempl85
Присоединяйтесь, поддерживайте, задавайте вопросы, делитесь идеями
![Page 119: Rempl – крутая платформа для крутых инструментов](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58f1332b1a28abd7488b4621/html5/thumbnails/119.jpg)
86
Интересно,что получится у вас