Remote (dev)tools своими руками
-
Upload
roman-dvornov -
Category
Technology
-
view
820 -
download
5
Transcript of Remote (dev)tools своими руками
![Page 1: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/1.jpg)
Remote (dev)tools своими руками
Роман Дворнов Avito
HolyJS
Москва, 2016
![Page 2: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/2.jpg)
Руководитель фронтенда в Avito
Основной интерес – SPA
Open source:basis.js, CSSO, component-inspector, csstree, rempl и другие
![Page 3: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/3.jpg)
Инструменты
![Page 4: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/4.jpg)
Что значит инструмент? «Инструменты» бывают разные!
![Page 5: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/5.jpg)
В рамках доклада, «инструмент» – программа, которая наблюдает за приложением (страницей, окружением etc), собирает данные и предоставляет к ним графический интерфейс
5
![Page 8: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/8.jpg)
Redux DevTools Extension
github.com/zalmoxisus/redux-devtools-extension
![Page 12: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/12.jpg)
Забудьте не сможете
10
![Page 13: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/13.jpg)
Анатомия инструментов
![Page 14: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/14.jpg)
12
Runtime
ИнструментApp
Простой случай
Инструмент работает в том же runtime, что и приложение – в нем же отображает интерфейс
![Page 15: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/15.jpg)
Удаленный инструмент
13
RuntimeRuntime
App Инструмент
![Page 16: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/16.jpg)
Удаленный инструмент
13
RuntimeRuntime
App Инструмент???
![Page 17: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/17.jpg)
Почему удаленные инструменты?
14
![Page 18: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/18.jpg)
Developer Tools
![Page 19: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/19.jpg)
Developer Tools
runtime #1
![Page 20: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/20.jpg)
Developer Tools
runtime #1
runtime #2
![Page 21: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/21.jpg)
Developer Tools
runtime #1
Удаленное взаимодействие
runtime #2
![Page 22: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/22.jpg)
Мобильные устройства
![Page 23: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/23.jpg)
Мобильные устройства
Удаленное взаимодействие
![Page 24: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/24.jpg)
Несколько экранов
App
Приложение или сайт
Editor and devtools
Редактор и инструменты
![Page 25: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/25.jpg)
Несколько экрановУдаленное
взаимодействие
App
Приложение или сайт
Editor and devtools
Редактор и инструменты
![Page 26: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/26.jpg)
Удаленное взаимодействие =
больше сценариев использования
18
![Page 27: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/27.jpg)
Идем к удаленным инструментам
![Page 28: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/28.jpg)
20
Runtime
ИнструментSubject
Вернемся в начало
Очевидно, что одна часть инструмента собирает данные, а другая визуализирует
![Page 29: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/29.jpg)
21
Runtime
Data
Subject
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
UI
![Page 30: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/30.jpg)
21
Runtime
Data
Subject
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
UI
Publisher собирает и публикует данные
![Page 31: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/31.jpg)
21
Runtime
Data
Subject
Разделение ответственностиХорошо ложится на паттерн publisher-subscriber
UI
Publisher собирает и публикует данные
Subscriber визуализирует полученные данные
![Page 32: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/32.jpg)
Общая схема работы
22
RuntimeRuntime
Publisher Subscriber (UI)SubjectТранспорт
С этой моделью subscriber (UI) может быть вынесен в произвольный runtime
![Page 33: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/33.jpg)
Терминология• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин), создает sandbox
• Sandbox – окружение для UI23
![Page 34: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/34.jpg)
Создавая инструмент, нужно создать publisher, subscriber,
transport, host и sandbox
24
![Page 35: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/35.jpg)
Например: транспорт
![Page 36: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/36.jpg)
WebSocket
26
Publisher Subscriber (UI)Server
Протокол #1 Протокол #2
Соединение publisher-subscriber = 2 соединения
![Page 37: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/37.jpg)
Транспорт не всегда WebSocket
![Page 38: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/38.jpg)
Транспорт не всегда WebSocket
DOM event based communication Сервер явно не нужен
![Page 39: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/39.jpg)
Extending DevTools
28
developer.chrome.com/extensions/devtools
![Page 40: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/40.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
![Page 41: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/41.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script
![Page 42: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/42.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
![Page 43: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/43.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
![Page 44: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/44.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
![Page 45: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/45.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
![Page 46: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/46.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
![Page 47: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/47.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
![Page 48: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/48.jpg)
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Соединение publisher-subscriber = 4 event-based соединения
![Page 49: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/49.jpg)
Транспорт – pain points• Минимум 2 типа коммуникации
• 2-4 соединения между publisher-subscriber
• Соединения могут разрываться и восстанавливаться
• Нужен протокол взаимодействия
• Коммуникация асинхронная, нужен механизм callback'ов
• Обмен данными в JSON (на самом деле строками)
30
![Page 50: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/50.jpg)
Проблемы разработки инструментов
![Page 51: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/51.jpg)
Ключевые проблемы
• Сложность реализации инфраструктуры
• Неудобство процесса разработки
• Версионирование
32
habrahabr.ru/company/jugru/blog/317060/
![Page 52: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/52.jpg)
Пример: изменение в DevTools плагине
• Перезагрузить плагин (в Chrome это Extensions)
• Перезагрузить страницу
• Закрыть Developer Tools
• Открыть Developer Tools
• Открыть закладку плагина
33
![Page 53: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/53.jpg)
![Page 54: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/54.jpg)
Самое печальное – разные разработчики
инструментов решают одни и те же проблемы
35
![Page 55: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/55.jpg)
![Page 56: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/56.jpg)
Свет в конце тоннеля
![Page 57: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/57.jpg)
Сначала нужно сделать: хосты, транспорты и возможность
запускать UI удаленно
38
![Page 58: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/58.jpg)
И только после этого приступить к разработке
самого инструмента
39
![Page 59: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/59.jpg)
40
Полезная функциональность
Инфраструктура (оверхед)
![Page 60: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/60.jpg)
Rempl спешит на помощь
41
RuntimeRuntime
Publisher Subscriber (UI)App
![Page 61: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/61.jpg)
rempl (remote platform) – платформа для получения контролируемого удаленного доступа к JavaScript runtime используя UI
42
![Page 62: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/62.jpg)
Rempl обеспечивает• WS и DOM event транспорты, организует автоматическое соединение
• Простое API обмена данными/командами для Publisher и Subscriber
• Хосты: developer tools, electron app, web interface, editor plugins etc
• Обеспечивает песочницу, самостоятельно получает UI и инициализирует его
43
![Page 63: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/63.jpg)
Одна из задач проекта – снизить порог входа
в разработку собственных инструментов
44
![Page 64: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/64.jpg)
С rempl не нужно думать об инфраструктуре
45
![Page 65: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/65.jpg)
Фокус на самом инструменте – нужно написать только Publisher и Subscriber
46
![Page 66: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/66.jpg)
Минутка кода
![Page 67: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/67.jpg)
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>
![Page 68: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/68.jpg)
Subscriber
49
// subscriber создается песочницей автоматически// не нужно ничего подключать/создавать – получаем готовое API
rempl.subscribe(function(data) { document.body.innerHTML = new Date(data);});
![Page 69: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/69.jpg)
Удаленный инструмент – готов!
50
![Page 70: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/70.jpg)
Publisher и Subscriber могут обмениваться командами
51
![Page 71: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/71.jpg)
Обмен командами
52
endpoint.define({ method: function(a, b) { console.log('call smth', a, b); }, …});
На одной стороне На другой стороне
endpoint.invoke('method', 'hello', 42);
endpoint – publisher или subscriber
декларируем методы вызываем метод
![Page 72: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/72.jpg)
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
![Page 73: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/73.jpg)
Новые горизонты
![Page 74: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/74.jpg)
Не только браузер
![Page 75: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/75.jpg)
Озарение #1:
Publisher работает только с данными, значит его можно
запустить в node.js
56
![Page 76: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/76.jpg)
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'));}
...
![Page 77: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/77.jpg)
И мы получаем ту же инфраструктуру и для node.js (за исключением браузерных Developer Tools,
возможно временно)
58
![Page 78: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/78.jpg)
webpack-dashboard
59
github.com/FormidableLabs/webpack-dashboard
![Page 79: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/79.jpg)
rempl-webpack-analyzer
60
github.com/smelukov/rempl-webpack-analyzer
аналог webpack-dashboard на rempl
![Page 80: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/80.jpg)
Преимущества• Можно открыть в любом rempl-хосте
• Построен на web-технологиях
• Проще делать UI
• Возможность сделать более богатый UX
• Можно прикрутить готовые решения для анализа и пр.
61
![Page 81: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/81.jpg)
Например, source-map-explorer
62
github.com/danvk/source-map-explorer
![Page 82: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/82.jpg)
Озарение #2:
ServiceWorker, WebWorker, …
63
![Page 83: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/83.jpg)
Идея для «стартапа»• Разрабатываем frontend раньше backend
• Не хотим захламлять frontend моками – мокаем серверное API в ServiceWorker
• Добавляем publisher в ServiceWorker
• Делаем UI для управления моками в ServiceWorker
64
![Page 84: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/84.jpg)
65
Мы это уже запатентовали. Если у вас проблемы с этим – увидимся в суде!
![Page 85: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/85.jpg)
66
Мы это уже запатентовали. Если у вас проблемы с этим – увидимся в суде!
Это Open Source – пробуйте, делайте
![Page 86: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/86.jpg)
Озарение #3:
Теоретически, Publisher может жить не только в JavaScript –
веб-интерфейс для любого процесса?
67
![Page 87: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/87.jpg)
Source + Runtime
![Page 88: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/88.jpg)
Есть прекрасные инструменты для работы с кодом
69
![Page 89: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/89.jpg)
Есть хорошие инструменты заглядывающие под капот
приложений (runtime)
70
![Page 90: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/90.jpg)
Но эти два мира инструментов существуют раздельно
71
![Page 91: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/91.jpg)
Представьте, что у вас есть информация о коде, контексте редактирования и состоянии
runtime в одном месте…
72
![Page 92: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/92.jpg)
За сложной схемой…
73
Editor
Rempl host (editor plugin)
Rempl sandbox
Subscriber (UI)
Browser
Publisher AppRempl transport
![Page 93: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/93.jpg)
… простая идея
74
AppSource …
![Page 94: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/94.jpg)
… простая идея
74
AppSource …
Связь двух миров
![Page 95: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/95.jpg)
Несколько идей• Подсвечивать на странице то, на что влияет редактируемый файл
• Доступные в шаблоне биндинги или текущие значения
• Во что ресолвится ссылка на модуль и переход к нужному файлу
• Во что транспилируется редактируемый файл
• … ограничивается лишь вашей фантазией75
![Page 97: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/97.jpg)
Remote devtools → remote apps
![Page 98: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/98.jpg)
Инфраструктура универсальна и позволяет создавать разноплановые решения
(приложения)
78
![Page 99: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/99.jpg)
«Безумные» идеи• Управление презентацией (например, Shower)
• Стриминг медиа с одного устройства на другие
• Свой файлообменник
• …
79
![Page 100: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/100.jpg)
rempl не для коммерческих решений или сервисов
80
![Page 101: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/101.jpg)
Но отличная основа для экспериментов
и персональных решений, где требуется удаленный доступ
81
![Page 102: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/102.jpg)
Планы
![Page 103: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/103.jpg)
rempl в фазе MVP – многое на подходе
83
![Page 104: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/104.jpg)
В первую очередь• Стабилизировать API
• Документация, туториалы, примеры
• Обкатать ключевые компоненты (хосты, транспорты и т.д.), реализовать недостающее
• Больше опций для поставки UI
84
![Page 105: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/105.jpg)
В долгосрочной перспективе• SDK для наиболее частых задач (данные, DOM etc)
• Перевести существующие инструменты на rempl
• Безопасность
• Connection specific content
• Возможность авторизации и разделения прав
• … новые идеи появляются постоянно ;)85
![Page 106: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/106.jpg)
Подводим итоги
![Page 107: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/107.jpg)
rempl (remote platform) – платформа для получения контролируемого удаленного доступа к JavaScript runtime используя UI
87
![Page 108: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/108.jpg)
rempl предоставляет инфраструктуру и упрощает создание удаленных инструментов
88
![Page 109: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/109.jpg)
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
![Page 110: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/110.jpg)
90
Subject
Subject
Subscriber (UI)
Browser
Non-browser host
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher
![Page 111: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/111.jpg)
Это лишь начало – впереди много интересного
91
![Page 112: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/112.jpg)
может стать трендом 2017 года
92
![Page 113: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/113.jpg)
93
Просто подумайте в этом направлении
![Page 114: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/114.jpg)
github.com/rempl94
Присоединяйтесь, поддерживайте, помогайте, задавайте вопросы,
расскажите о ваших идеях
![Page 115: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/115.jpg)
95
Интересно,что получится у вас
![Page 116: Remote (dev)tools своими руками](https://reader034.fdocument.pub/reader034/viewer/2022051405/586f85c11a28ab54768b5203/html5/thumbnails/116.jpg)
Роман Дворнов @rdvornov
Спасибо!
github.com/rempl