SlideShare a Scribd company logo
Remote (dev)tools своими руками
Роман Дворнов
Avito
HolyJS
Москва, 2016
Руководитель 

фронтенда в Avito
Основной интерес – SPA
Open source:

basis.js, CSSO, 

component-inspector, 

csstree, rempl и другие
Инструменты
Что значит инструмент?
«Инструменты» бывают разные!
В рамках доклада, «инструмент» – 

программа, которая наблюдает за
приложением (страницей, окружением
etc), собирает данные и предоставляет
к ним графический интерфейс
5
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
github.com/reactotron/reactotron/
Reactotron
github.com/reactotron/reactotron/
Reactotron
github.com/basisjs/basisjs
Basis.js DevTools
Забудьте не сможете
10
Анатомия инструментов
12
Runtime
ИнструментApp
Простой случай
Инструмент работает 

в том же runtime, что и
приложение – в нем же
отображает интерфейс
Удаленный инструмент
13
RuntimeRuntime
App Инструмент
Удаленный инструмент
13
RuntimeRuntime
App Инструмент
???
Почему удаленные
инструменты?
14
Developer Tools
Developer Tools
runtime #1
Developer Tools
runtime #1
runtime #2
Developer Tools
runtime #1
Удаленное
взаимодействие
runtime #2
Мобильные устройства
Мобильные устройства
Удаленное
взаимодействие
Несколько экранов
App
Приложение или сайт
Editor and devtools
Редактор и инструменты
Несколько экранов
Удаленное
взаимодействие
App
Приложение или сайт
Editor and devtools
Редактор и инструменты
Удаленное взаимодействие
=
больше сценариев
использования
18
Идем к удаленным инструментам
20
Runtime
ИнструментSubject
Вернемся в начало
Очевидно, что одна
часть инструмента
собирает данные, 

а другая визуализирует
21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI
21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI
Publisher
собирает и публикует данные
21
Runtime
Data
Subject
Разделение ответственности
Хорошо ложится на паттерн
publisher-subscriber
UI
Publisher
собирает и публикует данные
Subscriber
визуализирует полученные данные
Общая схема работы
22
RuntimeRuntime
Publisher Subscriber (UI)Subject
Транспорт
С этой моделью subscriber (UI) может быть вынесен в произвольный runtime
Терминология
• Subject – то, за чем наблюдаем
• Publisher – собирает и публикует данные
• Subscriber – получает данные и строит интерфейс
• Transport – канал и протокол взаимодействия
• Host – интеграция в другие приложения (плагин),
создает sandbox
• Sandbox – окружение для UI
23
Создавая инструмент, нужно
создать publisher, subscriber,
transport, host и sandbox
24
Например: транспорт
WebSocket
26
Publisher Subscriber (UI)Server
Протокол #1 Протокол #2
Соединение publisher-subscriber = 2 соединения
Транспорт не всегда WebSocket
Транспорт не всегда WebSocket
DOM event based
communication

Сервер явно не нужен
Extending DevTools
28
developer.chrome.com/extensions/devtools
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Runtime (devtools)
Что это значит для нас?
29
Runtime (page)
Publisher
Subscriber (UI)Subject
Content script DevTools Tab
Runtime
Background page
Соединение publisher-subscriber = 4 event-based соединения
Транспорт – pain points
• Минимум 2 типа коммуникации
• 2-4 соединения между publisher-subscriber
• Соединения могут разрываться и восстанавливаться
• Нужен протокол взаимодействия
• Коммуникация асинхронная, нужен механизм callback'ов
• Обмен данными в JSON (на самом деле строками)
30
Проблемы разработки
инструментов
Ключевые проблемы
• Сложность реализации инфраструктуры
• Неудобство процесса разработки
• Версионирование
32
habrahabr.ru/company/jugru/blog/317060/
Пример: изменение в DevTools плагине
• Перезагрузить плагин (в Chrome это Extensions)
• Перезагрузить страницу
• Закрыть Developer Tools
• Открыть Developer Tools
• Открыть закладку плагина
33
Remote (dev)tools своими руками
Самое печальное – 

разные разработчики
инструментов решают одни и те
же проблемы
35
Remote (dev)tools своими руками
Свет в конце тоннеля
Сначала нужно сделать:
хосты, транспорты и возможность
запускать UI удаленно
38
И только после этого
приступить к разработке
самого инструмента
39
40
Полезная функциональность
Инфраструктура
(оверхед)
Rempl спешит на помощь
41
RuntimeRuntime
Publisher Subscriber (UI)App
rempl (remote platform) – 

платформа для получения
контролируемого удаленного
доступа к JavaScript runtime
используя UI
42
Rempl обеспечивает
• WS и DOM event транспорты, организует автоматическое
соединение
• Простое API обмена данными/командами для Publisher и
Subscriber
• Хосты: developer tools, electron app, web interface, editor
plugins etc
• Обеспечивает песочницу, самостоятельно получает UI и
инициализирует его
43
Одна из задач проекта – 

снизить порог входа
в разработку собственных
инструментов
44
С rempl не нужно думать об
инфраструктуре
45
Фокус на самом инструменте –
нужно написать только 

Publisher и Subscriber
46
Минутка кода
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>
Subscriber
49
// subscriber создается песочницей автоматически
// не нужно ничего подключать/создавать – получаем готовое API
rempl.subscribe(function(data) {
document.body.innerHTML = new Date(data);
});
Удаленный инструмент – готов!
50
Publisher и Subscriber могут
обмениваться командами
51
Обмен командами
52
endpoint.define({
method: function(a, b) {
console.log('call smth', a, b);
},
…
});
На одной стороне На другой стороне
endpoint.invoke('method', 'hello', 42);
endpoint – publisher или subscriber
декларируем методы вызываем метод
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
Новые горизонты
Не только браузер
Озарение #1:
Publisher работает только с
данными, значит его можно
запустить в node.js
56
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'));
}
...
И мы получаем ту же
инфраструктуру и для node.js
(за исключением браузерных Developer Tools,
возможно временно)
58
webpack-dashboard
59
github.com/FormidableLabs/webpack-dashboard
rempl-webpack-analyzer
60
github.com/smelukov/rempl-webpack-analyzer
аналог webpack-dashboard на rempl
Преимущества
• Можно открыть в любом rempl-хосте
• Построен на web-технологиях
• Проще делать UI
• Возможность сделать более богатый UX
• Можно прикрутить готовые решения для
анализа и пр.
61
Например, source-map-explorer
62
github.com/danvk/source-map-explorer
Озарение #2:


ServiceWorker, WebWorker, …
63
Идея для «стартапа»
• Разрабатываем frontend раньше backend
• Не хотим захламлять frontend моками – 

мокаем серверное API в ServiceWorker
• Добавляем publisher в ServiceWorker
• Делаем UI для управления моками

в ServiceWorker
64
65
Мы это уже запатентовали.
Если у вас проблемы с
этим – увидимся в суде!
66
Мы это уже запатентовали.
Если у вас проблемы с
этим – увидимся в суде!
Это Open Source –
пробуйте, делайте
Озарение #3:


Теоретически, Publisher может жить
не только в JavaScript – 

веб-интерфейс для любого процесса?
67
Source + Runtime
Есть прекрасные инструменты
для работы с кодом
69
Есть хорошие инструменты
заглядывающие под капот
приложений (runtime)
70
Но эти два мира инструментов
существуют раздельно
71
Представьте, что у вас есть
информация о коде, контексте
редактирования и состоянии
runtime в одном месте…
72
За сложной схемой…
73
Editor
Rempl host (editor plugin)
Rempl sandbox
Subscriber (UI)
Browser
Publisher App
Rempl transport
… простая идея
74
AppSource …
… простая идея
74
AppSource …
Связь двух миров
Несколько идей
• Подсвечивать на странице то, на что влияет
редактируемый файл
• Доступные в шаблоне биндинги или текущие значения
• Во что ресолвится ссылка на модуль и переход к
нужному файлу
• Во что транспилируется редактируемый файл
• … ограничивается лишь вашей фантазией
75
rempl хост в Atom
76
github.com/rempl/host-atom
Remote devtools → remote apps
Инфраструктура универсальна 

и позволяет создавать
разноплановые решения
(приложения)
78
«Безумные» идеи
• Управление презентацией (например, Shower)
• Стриминг медиа с одного устройства на
другие
• Свой файлообменник
• …
79
rempl не для коммерческих
решений или сервисов
80
Но отличная основа 

для экспериментов 

и персональных решений, 

где требуется удаленный доступ
81
Планы
rempl в фазе MVP – 

многое на подходе
83
В первую очередь
• Стабилизировать API
• Документация, туториалы, примеры
• Обкатать ключевые компоненты (хосты,
транспорты и т.д.), реализовать недостающее
• Больше опций для поставки UI
84
В долгосрочной перспективе
• SDK для наиболее частых задач (данные, DOM etc)
• Перевести существующие инструменты на rempl
• Безопасность
• Connection specific content
• Возможность авторизации и разделения прав
• … новые идеи появляются постоянно ;)
85
Подводим итоги
rempl (remote platform) – 

платформа для получения
контролируемого удаленного
доступа к JavaScript runtime
используя UI
87
rempl предоставляет
инфраструктуру и упрощает
создание удаленных
инструментов
88
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
90
Subject
Subject
Subscriber (UI)
Browser
Non-browser host
Browser's Developer Tools
Browser
Editor
Subscriber (UI)
Subscriber (UI)
Subscriber (UI)
Publisher
Publisher
Это лишь начало –
впереди много интересного
91
может стать 

трендом 2017 года
92
93
Просто подумайте в этом
направлении
github.com/rempl
94
Присоединяйтесь, поддерживайте,
помогайте, задавайте вопросы,
расскажите о ваших идеях
95
Интересно,

что получится у вас
Роман Дворнов
@rdvornov
rdvornov@gmail.com
Спасибо!
github.com/rempl

More Related Content

What's hot

C# Web. Занятие 11.
C# Web. Занятие 11.C# Web. Занятие 11.
C# Web. Занятие 11.
Igor Shkulipa
 
Приступаем к разработке Android приложений
Приступаем к разработке Android приложенийПриступаем к разработке Android приложений
Приступаем к разработке Android приложений
metaform
 
Мастер класс- Maven + Jenkins
Мастер класс- Maven + JenkinsМастер класс- Maven + Jenkins
Мастер класс- Maven + Jenkins
Valentin Fedoskin
 
Лекция Android. БД SQLite, ContentProvider, Loader
Лекция Android. БД SQLite, ContentProvider, LoaderЛекция Android. БД SQLite, ContentProvider, Loader
Лекция Android. БД SQLite, ContentProvider, Loader
Александр Брич
 
Opensource на .NET
Opensource на .NETOpensource на .NET
Opensource на .NET
lugnsk
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другие
lugnsk
 
Лекция Android. Хранение данных
Лекция Android. Хранение данныхЛекция Android. Хранение данных
Лекция Android. Хранение данных
Александр Брич
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
Igor Shkulipa
 

What's hot (8)

C# Web. Занятие 11.
C# Web. Занятие 11.C# Web. Занятие 11.
C# Web. Занятие 11.
 
Приступаем к разработке Android приложений
Приступаем к разработке Android приложенийПриступаем к разработке Android приложений
Приступаем к разработке Android приложений
 
Мастер класс- Maven + Jenkins
Мастер класс- Maven + JenkinsМастер класс- Maven + Jenkins
Мастер класс- Maven + Jenkins
 
Лекция Android. БД SQLite, ContentProvider, Loader
Лекция Android. БД SQLite, ContentProvider, LoaderЛекция Android. БД SQLite, ContentProvider, Loader
Лекция Android. БД SQLite, ContentProvider, Loader
 
Opensource на .NET
Opensource на .NETOpensource на .NET
Opensource на .NET
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другие
 
Лекция Android. Хранение данных
Лекция Android. Хранение данныхЛекция Android. Хранение данных
Лекция Android. Хранение данных
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
 

Viewers also liked

Basis.js – «под капотом»
Basis.js – «под капотом»Basis.js – «под капотом»
Basis.js – «под капотом»
Roman Dvornov
 
Как сделать ваш JavaScript быстрее
Как сделать ваш JavaScript быстрееКак сделать ваш JavaScript быстрее
Как сделать ваш JavaScript быстрее
Roman Dvornov
 
Карточный домик
Карточный домикКарточный домик
Карточный домик
Roman Dvornov
 
Компонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноКомпонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективно
Roman Dvornov
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
Alexey Ivanov
 
Developer tools - подробное руководство разработчика
Developer tools - подробное руководство разработчикаDeveloper tools - подробное руководство разработчика
Developer tools - подробное руководство разработчика
Aleksandr Boichenko
 
Приёмы функционального программирования в обычном JavaScript
Приёмы функционального программирования в обычном JavaScriptПриёмы функционального программирования в обычном JavaScript
Приёмы функционального программирования в обычном JavaScript
Pavel Klimiankou
 
А готов ли ваш проект к лету?
А готов ли ваш проект к лету?А готов ли ваш проект к лету?
А готов ли ваш проект к лету?
Elizaveta Selivanova
 
Functional programming techniques in regular JavaScript
Functional programming techniques in regular JavaScriptFunctional programming techniques in regular JavaScript
Functional programming techniques in regular JavaScript
Pavel Klimiankou
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"
Roman Dvornov
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!
Roman Dvornov
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)
Roman Dvornov
 
CSS parsing: performance tips & tricks
CSS parsing: performance tips & tricksCSS parsing: performance tips & tricks
CSS parsing: performance tips & tricks
Roman Dvornov
 
Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
Roman Dvornov
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
Roman Dvornov
 
Парсим CSS: performance tips & tricks
Парсим CSS: performance tips & tricksПарсим CSS: performance tips & tricks
Парсим CSS: performance tips & tricks
Roman Dvornov
 
CSSO – история ускорения
CSSO – история ускоренияCSSO – история ускорения
CSSO – история ускорения
Roman Dvornov
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
Ontico
 

Viewers also liked (20)

Basis.js – «под капотом»
Basis.js – «под капотом»Basis.js – «под капотом»
Basis.js – «под капотом»
 
1 grammar preintermediate
1 grammar preintermediate1 grammar preintermediate
1 grammar preintermediate
 
Как сделать ваш JavaScript быстрее
Как сделать ваш JavaScript быстрееКак сделать ваш JavaScript быстрее
Как сделать ваш JavaScript быстрее
 
Карточный домик
Карточный домикКарточный домик
Карточный домик
 
Компонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноКомпонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективно
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScriptCSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
 
5 standardy kompetencji
5 standardy kompetencji5 standardy kompetencji
5 standardy kompetencji
 
Developer tools - подробное руководство разработчика
Developer tools - подробное руководство разработчикаDeveloper tools - подробное руководство разработчика
Developer tools - подробное руководство разработчика
 
Приёмы функционального программирования в обычном JavaScript
Приёмы функционального программирования в обычном JavaScriptПриёмы функционального программирования в обычном JavaScript
Приёмы функционального программирования в обычном JavaScript
 
А готов ли ваш проект к лету?
А готов ли ваш проект к лету?А готов ли ваш проект к лету?
А готов ли ваш проект к лету?
 
Functional programming techniques in regular JavaScript
Functional programming techniques in regular JavaScriptFunctional programming techniques in regular JavaScript
Functional programming techniques in regular JavaScript
 
DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"DOM-шаблонизаторы – не только "быстро"
DOM-шаблонизаторы – не только "быстро"
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)
 
CSS parsing: performance tips & tricks
CSS parsing: performance tips & tricksCSS parsing: performance tips & tricks
CSS parsing: performance tips & tricks
 
Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
 
Инструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важныИнструменты разные нужны, инструменты разные важны
Инструменты разные нужны, инструменты разные важны
 
Парсим CSS: performance tips & tricks
Парсим CSS: performance tips & tricksПарсим CSS: performance tips & tricks
Парсим CSS: performance tips & tricks
 
CSSO – история ускорения
CSSO – история ускоренияCSSO – история ускорения
CSSO – история ускорения
 
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
55+1 прием для улучшения Javascript-кода / Татьяна Бабич (Simbirsoft)
 

Similar to Remote (dev)tools своими руками

Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
AvitoTech
 
Создаем Drupal дистрибутив: от идеи до сопровождения
Создаем Drupal дистрибутив: от идеи до сопровожденияСоздаем Drupal дистрибутив: от идеи до сопровождения
Создаем Drupal дистрибутив: от идеи до сопровождения
Ovadiah Myrgorod
 
Масштабируемая архитектура фронтенда
Масштабируемая архитектура фронтендаМасштабируемая архитектура фронтенда
Масштабируемая архитектура фронтенда
Roman Dvornov
 
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Ontico
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
IT-Доминанта
 
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Ontico
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
Provectus
 
терминология vol.2
терминология vol.2терминология vol.2
терминология vol.2
SBTech
 
Cовременный станок верстальщика
Cовременный станок верстальщикаCовременный станок верстальщика
Cовременный станок верстальщика
mcslayer
 
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Yandex
 
Компонентный веб. Проникновение в дизайн.
Компонентный веб. Проникновение в дизайн.Компонентный веб. Проникновение в дизайн.
Компонентный веб. Проникновение в дизайн.
Anton Winogradov
 
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
Testableapple
 
Online TechTalk “Flutter Mobile Development”
Online TechTalk “Flutter Mobile Development”Online TechTalk “Flutter Mobile Development”
Online TechTalk “Flutter Mobile Development”
GlobalLogic Ukraine
 
Ігор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developerІгор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developer
LEDC 2016
 
Модульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NETМодульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NET
Dev2Dev
 
Модульная структура
Модульная структураМодульная структура
Модульная структура
Denis Tsvettsih
 
Юрий Василевский "Автоматизация в XCode"
Юрий Василевский "Автоматизация в XCode"Юрий Василевский "Автоматизация в XCode"
Юрий Василевский "Автоматизация в XCode"
Yandex
 
Юрий Василевский «Автоматизация в XCode»
Юрий Василевский «Автоматизация в XCode»Юрий Василевский «Автоматизация в XCode»
Юрий Василевский «Автоматизация в XCode»
Yandex
 

Similar to Remote (dev)tools своими руками (20)

Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
Rempl — крутая платформа для крутых инструментов - Роман Дворнов (Avito)
 
Создаем Drupal дистрибутив: от идеи до сопровождения
Создаем Drupal дистрибутив: от идеи до сопровожденияСоздаем Drupal дистрибутив: от идеи до сопровождения
Создаем Drupal дистрибутив: от идеи до сопровождения
 
Масштабируемая архитектура фронтенда
Масштабируемая архитектура фронтендаМасштабируемая архитектура фронтенда
Масштабируемая архитектура фронтенда
 
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
 
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
 
терминология vol.2
терминология vol.2терминология vol.2
терминология vol.2
 
Cовременный станок верстальщика
Cовременный станок верстальщикаCовременный станок верстальщика
Cовременный станок верстальщика
 
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
 
Компонентный веб. Проникновение в дизайн.
Компонентный веб. Проникновение в дизайн.Компонентный веб. Проникновение в дизайн.
Компонентный веб. Проникновение в дизайн.
 
MockServer-driven development
MockServer-driven developmentMockServer-driven development
MockServer-driven development
 
Online TechTalk “Flutter Mobile Development”
Online TechTalk “Flutter Mobile Development”Online TechTalk “Flutter Mobile Development”
Online TechTalk “Flutter Mobile Development”
 
Ігор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developerІгор Карпиленко — PHPStorm for drupal developer
Ігор Карпиленко — PHPStorm for drupal developer
 
Модульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NETМодульная структура. Цветцих Денис D2D Just.NET
Модульная структура. Цветцих Денис D2D Just.NET
 
Модульная структура
Модульная структураМодульная структура
Модульная структура
 
лек11 1
лек11 1лек11 1
лек11 1
 
Юрий Василевский "Автоматизация в XCode"
Юрий Василевский "Автоматизация в XCode"Юрий Василевский "Автоматизация в XCode"
Юрий Василевский "Автоматизация в XCode"
 
Юрий Василевский «Автоматизация в XCode»
Юрий Василевский «Автоматизация в XCode»Юрий Василевский «Автоматизация в XCode»
Юрий Василевский «Автоматизация в XCode»
 
Little Service in 2h
Little Service in 2hLittle Service in 2h
Little Service in 2h
 

More from Roman Dvornov

Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Roman Dvornov
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
Roman Dvornov
 
My Open Source (Sept 2017)
My Open Source (Sept 2017)My Open Source (Sept 2017)
My Open Source (Sept 2017)
Roman Dvornov
 
CSSO — сжимаем CSS (часть 2)
CSSO — сжимаем CSS (часть 2)CSSO — сжимаем CSS (часть 2)
CSSO — сжимаем CSS (часть 2)
Roman Dvornov
 
CSSO — минимизируем CSS
 CSSO — минимизируем CSS CSSO — минимизируем CSS
CSSO — минимизируем CSS
Roman Dvornov
 
Component Inspector
Component InspectorComponent Inspector
Component Inspector
Roman Dvornov
 
Инструментируй это
Инструментируй этоИнструментируй это
Инструментируй это
Roman Dvornov
 
Жизнь в изоляции
Жизнь в изоляцииЖизнь в изоляции
Жизнь в изоляции
Roman Dvornov
 
SPA инструменты
SPA инструментыSPA инструменты
SPA инструменты
Roman Dvornov
 
Не бойся, это всего лишь данные... просто их много
Не бойся, это всего лишь данные... просто их многоНе бойся, это всего лишь данные... просто их много
Не бойся, это всего лишь данные... просто их много
Roman Dvornov
 
Быстро о быстром
Быстро о быстромБыстро о быстром
Быстро о быстром
Roman Dvornov
 
Как построить DOM
Как построить DOMКак построить DOM
Как построить DOM
Roman Dvornov
 
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Roman Dvornov
 
basis.js - почему я не бросил разрабатывать свой фреймворк
basis.js - почему я не бросил разрабатывать свой фреймворкbasis.js - почему я не бросил разрабатывать свой фреймворк
basis.js - почему я не бросил разрабатывать свой фреймворк
Roman Dvornov
 

More from Roman Dvornov (14)

Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьер
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
My Open Source (Sept 2017)
My Open Source (Sept 2017)My Open Source (Sept 2017)
My Open Source (Sept 2017)
 
CSSO — сжимаем CSS (часть 2)
CSSO — сжимаем CSS (часть 2)CSSO — сжимаем CSS (часть 2)
CSSO — сжимаем CSS (часть 2)
 
CSSO — минимизируем CSS
 CSSO — минимизируем CSS CSSO — минимизируем CSS
CSSO — минимизируем CSS
 
Component Inspector
Component InspectorComponent Inspector
Component Inspector
 
Инструментируй это
Инструментируй этоИнструментируй это
Инструментируй это
 
Жизнь в изоляции
Жизнь в изоляцииЖизнь в изоляции
Жизнь в изоляции
 
SPA инструменты
SPA инструментыSPA инструменты
SPA инструменты
 
Не бойся, это всего лишь данные... просто их много
Не бойся, это всего лишь данные... просто их многоНе бойся, это всего лишь данные... просто их много
Не бойся, это всего лишь данные... просто их много
 
Быстро о быстром
Быстро о быстромБыстро о быстром
Быстро о быстром
 
Как построить DOM
Как построить DOMКак построить DOM
Как построить DOM
 
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)
 
basis.js - почему я не бросил разрабатывать свой фреймворк
basis.js - почему я не бросил разрабатывать свой фреймворкbasis.js - почему я не бросил разрабатывать свой фреймворк
basis.js - почему я не бросил разрабатывать свой фреймворк
 

Remote (dev)tools своими руками