Download as PDF, PPTX
More Related Content
Similar to Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
- 1. Rempl – крутаяплатформа для крутых инструментов Роман Дворнов Москва, 2017
- 2. Чем дольше язанимаюсь rempl, тем больше вижу возможностей 2
- 3. Руководитель фронтенда вAvito Основной интерес – SPA Open source: basis.js, CSSO, component-inspector, csstree, rempl и другие
- 4.
- 5. Что значит инструмент? «Инструменты»бывают разные!
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 11 Runtime ToolSubject Простой случай Инструмент работает в том же runtime, что и объект изучения – в нем же отображает интерфейс
- 14.
- 15.
- 16.
- 17. Мобильные устройства Удаленное взаимодействие Editor anddevtoolsSubject
- 18. Несколько экранов /контексты Удаленное взаимодействие Subject Editor and devtools
- 19.
- 20.
- 21. Browser's Developer Tools runtime#1 runtime #2
- 22. Browser's Developer Tools runtime#1 Удаленное взаимодействие runtime #2
- 23.
- 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.
- 36. Разные разработчики решаютодинаковые проблемы, наступая на одни и те же грабли 26
- 38.
- 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.
- 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.
- 56.
- 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.
- 62.
- 63.
- 64.
- 65.
- 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) Remplsandbox { type: 'script', content: '/* js */' } { type: 'url', content: 'http://…' } или Publisher Subscriber (UI) Инициализация Subscriber'а
- 69. 44 RuntimeRuntime Rempl host getRemoteUI Subscriber (UI) Remplsandbox { 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.
- 73.
- 74. 48 Publisher Publisher Subscriber (UI) Rempl Типовая самодостаточнаясборка решения на rempl
- 75. 48 Publisher Publisher Subscriber (UI) Rempl Типовая самодостаточнаясборка решения на rempl Rempl sandbox
- 76.
- 77. WebSocket 50 Publisher Subscriber (UI)Server Протокол#1 Протокол #2 Соединение publisher-subscriber = 2 WS соединения
- 78. Транспорт не всегдаWebSocket
- 79. Транспорт не всегдаWebSocket Event based communication Сервер явно не нужен
- 80.
- 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.
- 97.
- 98.
- 99. Плюсы • Можно открытьв любом rempl-хосте • Построен на web-технологиях • Проще делать UI • Возможность сделать более богатый UX • Можно прикрутить готовые решения для анализа и пр. 62
- 100.
- 101. Insight #3: Publisher может«жить» не только в JavaScript 64
- 102.
- 103. Два мира инструментов 66 Source Staticanalysis Editors, IDEs, linters, etc Runtime Dynamic analysis Devtools, etc
- 104. Представьте, что увас есть информация о коде, контексте редактирования и состоянии runtime в одном месте… 67
- 105. Расширяем возможности subscriber'а 68 RuntimeRuntime Remplhost 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.
- 111. Remote devtools →remote apps
- 112. Инфраструктура позволяет создавать разноплановые решения(приложения) 73
- 113.
- 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 DeveloperTools 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 DeveloperTools Browser Editor Subscriber (UI) Subscriber (UI) Subscriber (UI) Publisher Publisher
- 125. Одна из миcсийпроекта – снизить порог входа в разработку инструментов 86
- 126.
- 127.
- 128.
- 129.