Занимаясь разработкой интерфейсов, мы постоянно разбираемся как и что устроено. Вы задумывались, сколько времени у вас уходит на то, чтобы найти нужный фрагмент кода, который отвечает за компонент на странице? В своем докладе я покажу как это можно сделать за один клик, а так же раскрою технические детали.

1. Component Inspector
Роман Дворнов
Avito
Москва, октябрь 2015

2. Работаю в Avito
Делаю SPA
Автор basis.js
Я…
За любую движуху,
кроме голодовки ;)

3. DEMO
поговорим про боль

4. • Позволяет инспектировать компоненты,
показывает их DOM фрагмент
• Может показывать фрагмент кода для разных
значений (классов, методов, объектов)
• Позволяет по клику открывать редактор с
нужным файлом с курсором на нужном месте
4
Component Inspector

5. !
• Не завязано на фреймворк/библиотеку
• Библиотеки могут расширять возможности и
предоставлять дополнительную информацию
5
Более того

6. 6
За пределами браузера
Браузер dev-server
Редактор
Файл
Команда в терминале
Запрос на
открытие файла
Инструментированный
код + source maps

7. Части решения
7
• Инструментирование кода
• Runtime API
• Инспекция DOM дерева
• dev-сервер

8. Инструментирование

9. Инструментирование –
дополнение кода другим кодом,
который делает что-то еще
9

10. 10
Код Код
AST
(ESTree)
Парсинг
Трансформации
(Babel)
Трансляция
Esprima
Делаем трансформацию кода правильно
Просто добавь
свой плагин

11. Инструментирование делается
плагином для Babel
11
github.com/restrry/babel-plugin-source-wrapper

12. Что делает плагин
12
var foo = $devinfo(function(a, b) {
return a + b;
}, { … });
!
var obj = $devinfo({ foo: 1 }, { … });
var foo = function(a, b) {
return a + b;
};
!
var obj = { foo: 1 };

13. Делается автоматически
и только на этапе разработки
13

14. Runtime API

15. 15
window.$devinfo = (function() {
var map = new WeakMap();
var api = function(ref, data) {
if (!map.has(ref))
map.set(ref, data);
return ref;
};
api.get = function(ref) {
return ref ? map.get(ref) : undefined;
}
return api;
})();
Основное API
Упрощенный код

16. 16
window.$devinfo = (function() {
var map = new WeakMap();
var api = function(ref, data) {
if (!map.has(ref))
map.set(ref, data);
return ref;
};
api.get = function(ref) {
return ref ? map.get(ref) : undefined;
}
return api;
})();
Основное API
Упрощенный код
Используем WeakMap для
хранения информации:
- объекты как ключи
- не трансформирует объекты
- не создает утечек памяти

17. 17
window.$devinfo = (function() {
var map = new WeakMap();
var api = function(ref, data) {
if (!map.has(ref))
map.set(ref, data);
return ref;
};
api.get = function(ref) {
return ref ? map.get(ref) : undefined;
}
return api;
})();
Основное API
Упрощенный код
Основная функция регистрации,
"добавляет" информацию только
если ее еще нет у объекта

18. 18
window.$devinfo = (function() {
var map = new WeakMap();
var api = function(ref, data) {
if (!map.has(ref))
map.set(ref, data);
return ref;
};
api.get = function(ref) {
return ref ? map.get(ref) : undefined;
}
return api;
})();
Основное API
Упрощенный код
Получение информации,
используется инструментами

19. 19
var obj = {};
!
$devinfo(obj, { data: 123 });
!
console.log($devinfo.get(obj));
// > { data: 123 }
Использование

20. Инспектирование DOM

21. • знать границу компонента, т.е. определять
элемент-контейнер компонента (DOM узел)
• определять владельца компонента (view)
по элементу-контейнеру (по DOM узлу)
21
Для инструмента нужно

22. • если у DOM узла есть свойство __view –
значит это контейнер компонента
• в свойстве __view хранится ссылка на view
22
Решение в лоб
Но лучше использовать
WeakMap (node ➝ view)

23. Крохотный патч для Backbone
23
!
var _setElement = Backbone.View.prototype._setElement;
Backbone.View.prototype._setElement = function() {
_setElement.apply(this, arguments);
this.el.__view = this;
};

24. Или с WeakMap
24
!
var map = new WeakMap();
var _setElement = Backbone.View.prototype._setElement;
Backbone.View.prototype._setElement = function() {
_setElement.apply(this, arguments);
map.add(this.el, this);
};
window.getBackboneViewByNode = function(el) {
return map.get(el)
};

25. Использование

26. basis.js
26
Работает из коробки
(нужен basis.js 1.5)

27. component-inspector
27
github.com/lahmatiy/component-inspector
Другие фреймворки
npm install component-inspector --save-dev

28. React
28
Подключение в html перед React!
<script src="node_modules/component-inspector/dist/react.js">
</script>
<script src="react.js"></script>

29. Backbone
29
Подключение в html после Backbone
<script src="backbone.js"></script>
<script src="node_modules/component-inspector/dist/backbone.js">
</script>

30. Свое решение?
Запросто!
30

31. 31
<script src="node_modules/component-inspector/dist/base.js"></script>
Инициализация
<script>
initComponentInspector({
isComponentRootNode: function(node){
return Boolean(node && node.__view);
},
getInstanceByNode: function(node){
if (node) {
return node.__view;
}
}
});
</script>

32. 32
<script src="node_modules/component-inspector/dist/base.js"></script>
Описываем API
<script>
initComponentInspector({
isComponentRootNode: function(node){
return Boolean(node && node.__view);
},
getInstanceByNode: function(node){
if (node) {
return node.__view;
}
}
});
</script>

33. Можно определить многое
33
• isComponentRootNode(node)
• getComponentNameByNode(node)
• getInstanceByNode(node)
• getInstanceRootNode(instance)
• getInstanceClass(instance)
• getInstanceLocation(instance)
• ...
github.com/lahmatiy/component-inspector#api-free-build

34. dev-сервер

35. • отдавать инструментированный код
• при отдаче html встраивать в него runtime.js
• исполнять команды, например, открытие
файла в редакторе
35
dev-сервер должен
в идеале

36. 36
Вариант настройки: webpack
Инструментирование
webpack
+ babel + babel-plugin-source-wrapper
!
Открытие файла в редакторе
express или webpack-dev-server
+ express-open-in-editor

37. 37
Пример конфигурации
для Webpack + React
tinyurl.com/pwj6bln

38. Вариант настройки: basisjs-tools
38
> npm install basisjs-tools -g
> npm install basisjs-tools-instrumenter
// создать конфиг basis.config
> basis server
{
"plugins": [
"basisjs-tools-instrumenter"
]
}
Сервер будет отдавать
инструментированный код и
встраивать необходимое в html

39. • open-in-editor
npm пакет для программного открытия файла в редакторе
github.com/lahmatiy/open-in-editor
• express-open-in-editor
расширение для Express для открытия файла по урлу
github.com/lahmatiy/express-open-in-editor
• extract-code-fragment
получение раскрашенного фрагмента кода из файла
скоро
39
Побочные продукты

40. Главное – идея

41. Попробуйте – это круто! ;)

42. Вопросы?
42
Роман Дворнов
@rdvornov
rdvornov@gmail.com
github.com/lahmatiy
tinyurl.com/moscowjs-ci
Component Inspector
basis.js
github.com/basisjs