Роман Дворнов (Avito) Фронтенд усложняется с каждым днем, и уже не представить жизнь разработчика без инструментов. Инструментов становится все больше, но нельзя сказать, что их достаточно. Если у вас собственный стек или технологическое решение, вам рано или поздно потребуется сделать свой инструмент. Это не так просто! Особенно если вы захотите интегрировать его интерфейс в браузерные Developer Tools, IDE, редакторы или открыть их на другом устройстве. Добавьте сюда проблему версионирования и другие сложности, и вам покажется, что задача неподъемная. Но есть хорошая новость! Большинство из этих проблем решает Rempl — платформа для создания и использования удаленных инструментов (на самом деле не только инструментов). Сделаем небольшой обзор Rempl: что это, зачем нужно, какие проблемы решает. А также посмотрим примеры готовых решений, построенных на Rempl. После докладов мы проведём дискуссионную панель на тему "Организация системы компонент", в которой примут участие докладчики, а также приглашенные эксперты.

1. Rempl – крутая платформа
для крутых инструментов
Роман Дворнов
Москва, 2017

2. Чем дольше я занимаюсь rempl,
тем больше вижу возможностей
2

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

4. Инструменты

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

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

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

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

9. Reactotron
github.com/reactotron/reactotron/

10. Reactotron
github.com/reactotron/reactotron/

11. Basis.js DevTools
github.com/basisjs/basisjs

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

13. 11
Runtime
ToolSubject
Простой случай
Инструмент работает
в том же runtime, что и
объект изучения – в нем
же отображает интерфейс

14. Удаленный инструмент
12
RuntimeRuntime
Subject Tool

15. Удаленный инструмент
12
RuntimeRuntime
Subject Tool
???

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

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

18. Несколько экранов / контексты
Удаленное
взаимодействие
Subject Editor and devtools

19. Browser's Developer Tools

20. Browser's Developer Tools
runtime #1

21. Browser's Developer Tools
runtime #1
runtime #2

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

23. Удаленное взаимодействие
=
больше сценариев
17

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

25. 19
Runtime
ToolSubject
Вернемся в начало
Инструмент работает
в том же runtime, что и
объект изучения – в нем
же отображает интерфейс

26. 20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть
инструмента собирает данные,
а другая их визуализирует
Tool

27. 20
Runtime
Data
Subject
Разделение ответственности
UI
Заметим, что одна часть
инструмента собирает данные,
а другая их визуализирует
Tool

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

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

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

31. Схема работы
22
RuntimeRuntime
PublisherSubject
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber

32. Схема работы
22
RuntimeRuntime
PublisherSubject
Transport
Subscriber (UI) может быть вынесен в произвольный runtime
Tool
Subscriber

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

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

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

36. Разные разработчики
решают одинаковые проблемы,
наступая на одни и те же грабли
26

38. Решение: rempl

39. Rempl спешит на помощь
29
RuntimeRuntime
Publisher Subscriber (UI)Subject

40. Rempl (remote platform)
платформа для получения
контролируемого удаленного доступа
к runtime используя UI
30

41. Терминология
• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин),
создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной
функциональностью (devtools, редактор…)
31

42. Терминология
• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин),
создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной
функциональностью (devtools, редактор…)
31
Инструмент

43. Терминология
• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин),
создает sandbox для выбранного publisher'а
• Sandbox – изолированная среда для subscriber'а
• Env – доступ к окружению с дополнительной
функциональностью (devtools, редактор…)
31
Инструмент

44. Фокус на самом инструменте –
об остальном позаботится rempl
32

45. Принцип работы

46. Принцип работы
34
Publisher Subscriber (UI)

47. Принцип работы
34
Publisher Subscriber (UI)
publish(data)

48. Принцип работы
34
Publisher Subscriber (UI)
publish(data) subscribe(data => { … })

49. Принцип работы
34
Publisher Subscriber (UI)
publish(data) subscribe(data => { … })
on each update

50. Принцип работы
34
Publisher Subscriber (UI)
publish(data) subscribe(data => { … })
call('method', …args, callback)
on each update

51. Принцип работы
34
Publisher Subscriber (UI)
publish(data) subscribe(data => { … })
call('method', …args, callback)method(…args, callback)
on each update

52. Принцип работы
34
Publisher Subscriber (UI)
publish(data) subscribe(data => { … })
call('method', …args, callback)method(…args, callback)
callback(…args)
on each update

53. Где живет subscriber?
35
• Subcriber может запускаться в произвольном
WebView
• Если WebView-клиент будет знать о subscriber,
то будет заточен на один UI и его версию
• Поэтому информация о subscriber хранится в
publisher'е, а клиент ее запрашивает

54. «Минутка» кода

55. Live coding
37

56. npm install rempl
38

57. Publisher
39
<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>

58. Subscriber
40
var myTool = rempl.getSubscriber();
myTool.subscribe(function(data) {
document.body.innerHTML = new Date(data);
});

59. Обмен командами (RPC)
41
endpoint.provide(
'method',
function(…args, callback) {
/* ... */
}
);
На одной стороне На другой стороне
endpoint.callRemote(
'method',
/* … args */
/* callback */
);
endpoint – publisher или subscriber
декларируем методы вызываем метод

60. RPC API
42
publish(data)
provide(methods)
revoke(method)
callRemote(method, ...args, cb)
ns(name)
publish/provide/...
subscribe(fn)
provide(methods)
revoke(method)
callRemote(method, ...args, cb)
onRemoteMethodsChanged(fn)
ns(name)
subscribe/provide/...
Publisher Subscriber

61. Дистрибуция subscriber'а (UI)

62. 44
RuntimeRuntime
Publisher
Subscriber (UI)
Инициализация Subscriber'а

63. 44
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а

64. 44
RuntimeRuntime
Rempl host
Publisher
Subscriber (UI)
Инициализация Subscriber'а

65. 44
RuntimeRuntime
Rempl host
getRemoteUI
Publisher
Subscriber (UI)
Инициализация Subscriber'а

66. 44
RuntimeRuntime
Rempl host
getRemoteUI
{ type: 'script',
content: '/* js */' }
{ type: 'url',
content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а

67. 44
RuntimeRuntime
Rempl host
getRemoteUI
Rempl sandbox
{ type: 'script',
content: '/* js */' }
{ type: 'url',
content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а

68. 44
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script',
content: '/* js */' }
{ type: 'url',
content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а

69. 44
RuntimeRuntime
Rempl host
getRemoteUI
Subscriber (UI)
Rempl sandbox
{ type: 'script',
content: '/* js */' }
{ type: 'url',
content: 'http://…' }
или
Publisher
Subscriber (UI)
Инициализация Subscriber'а

70. Типы subscriber'а
45
script – JavaScript bundle (string)
sandbox.eval(rempl.source)
sandbox.eval(content)
url – адрес страницы с subcriber'ом
sandbox.src = content
// нужно подключить rempl самим
Better for
production
Better for
development

71. rempl.source (quine)
46
Rempl может реплицировать себя
Не нужно включать rempl.js в subscriber (для script)
;(function $rempl() {
// … rempl bundle (rempl.js)
rempl.source = ';(' + $rempl + ').call(this);';
}).call(this);
Финальный шаг сборки

72. 47

73. 47
Not bad ;)

74. 48
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка
решения на rempl

75. 48
Publisher
Publisher
Subscriber (UI)
Rempl
Типовая самодостаточная сборка
решения на rempl
Rempl sandbox

76. Transport

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

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

79. Транспорт не всегда WebSocket
Event based
communication
Сервер явно не нужен

80. Extending DevTools
52
developer.chrome.com/extensions/devtools

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

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

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

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

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

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

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

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

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

90. Хорошая новость –
за вас это всё сделает rempl
54

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

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

93. Insight #1:
Publisher работает только с данными –
можно запустить в node.js
57

94. Publisher – косметические изменения
58
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'));
}
...

95. И мы получаем ту же
инфраструктуру и для node.js
59

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

97. webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer

98. webpack-runtime-analyzer
github.com/smelukov/webpack-runtime-analyzer

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

100. Insight #2:
ServiceWorker,
WebWorker,
…
63

101. Insight #3:
Publisher может «жить»
не только в JavaScript
64

102. Source + Runtime

103. Два мира инструментов
66
Source
Static analysis
Editors, IDEs, linters, etc
Runtime
Dynamic analysis
Devtools, etc

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

105. Расширяем возможности subscriber'а
68
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)

106. Editor
Rempl plugin
Расширяем возможности subscriber'а
68
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)

107. Editor
Rempl plugin
Расширяем возможности subscriber'а
68
RuntimeRuntime
Rempl host
Subscriber (UI)
Rempl sandbox
Publisher
Subscriber (UI)

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

109. rempl плагин для Atom
70
github.com/rempl/host-atom

110. Demo
env
71

111. Remote devtools → remote apps

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

113. Demo
shower-remote-control
74
youtu.be/So_81loUFx0

114. rempl не для построения сервисов,
но отличная возможность
для экспериментов
75

115. Планы

116. rempl в фазе MVP –
многое на подходе
77

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

118. Интеграции
• Browser's devtools
• Chrome (Opera)
• Firefox (планируется)
• В других браузерах пока невозможно
• Редакторы и IDE
• Atom
• VS Code (github.com/Microsoft/vscode/issues/22068)
• JetBrains IDEs (планируется)
• …
79

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

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

121. Rempl (remote platform)
платформа для получения
контролируемого удаленного доступа
к runtime используя UI
82

122. В чем польза
83
Для разработчиков
• Не нужно тратить
время на инфраструктуру
• Готовые решения
для типовых задач
• Надежная и обкатанная
платформа (в перспективе)
• Не нужно наступать на грабли ;)
• Не нужно ставить плагины
под каждый инструмент
• Возможность выбрать
наиболее подходящий
сценарий использования
• Нужно разобраться только
с одним решением (rempl)
Для пользователей

123. 84
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

124. 85
Subject
Subject
Subscriber (UI)
Browser
Node.js
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher

125. Одна из миcсий проекта –
снизить порог входа
в разработку инструментов
86

126. 87
Rempl – первопроходец

127. github.com/rempl
88
Присоединяйтесь,
поддерживайте,
делитесь идеями …

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

129. @rdvornov
rdvornov@gmail.ru github.com/rempl
Роман Дворнов
Вопросы?