rempl – крутая платформа для крутых инструментов

Rempl – крутая платформа для крутых инструментов

Роман Дворнов Руководитель фронтенд разработки, Avito

Новосибирск, 2017

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

2

Руководитель фронтенда в Avito

Основной интерес – SPA

Open source:basis.js, CSSO, component-inspector, csstree, rempl и другие

Инструменты

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

React Developer Tools

github.com/facebook/react-devtools

React Developer Tools

github.com/facebook/react-devtools

Redux DevTools Extension

github.com/zalmoxisus/redux-devtools-extension

Reactotron

github.com/reactotron/reactotron/

Reactotron

github.com/reactotron/reactotron/

Basis.js DevTools

github.com/basisjs/basisjs

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

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

rempl плагин для Atom

68

github.com/rempl/host-atom

Demo env

69

Remote devtools → remote apps

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

71

Demo shower-remote-control

72

youtu.be/So_81loUFx0

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

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

@rdvornov

Вопросы?

rdvornov@gmail.rugithub.com/rempl

Роман Дворнов