Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Wird geladen in …3
×
1 von 42

Component Inspector

4

Teilen

Herunterladen, um offline zu lesen

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Component Inspector

  1. 1. Component Inspector Роман Дворнов Avito Москва, октябрь 2015
  2. 2. Работаю в Avito Делаю SPA Автор basis.js Я… За любую движуху, 
 кроме голодовки ;)
  3. 3. DEMO
 поговорим про боль
  4. 4. • Позволяет инспектировать компоненты, показывает их DOM фрагмент • Может показывать фрагмент кода для разных значений (классов, методов, объектов) • Позволяет по клику открывать редактор с нужным файлом с курсором на нужном месте 4 Component Inspector
  5. 5. ! • Не завязано на фреймворк/библиотеку • Библиотеки могут расширять возможности и предоставлять дополнительную информацию 5 Более того
  6. 6. 6 За пределами браузера Браузер dev-server Редактор Файл Команда в терминале Запрос на открытие файла Инструментированный код + source maps
  7. 7. Части решения 7 • Инструментирование кода • Runtime API • Инспекция DOM дерева • dev-сервер
  8. 8. Инструментирование
  9. 9. Инструментирование – дополнение кода другим кодом, который делает что-то еще 9
  10. 10. 10 Код Код AST (ESTree) Парсинг Трансформации (Babel) Трансляция Esprima Делаем трансформацию кода правильно Просто добавь 
 свой плагин
  11. 11. Инструментирование делается плагином для Babel 11 github.com/restrry/babel-plugin-source-wrapper
  12. 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. Делается автоматически
 и только на этапе разработки 13
  14. 14. Runtime API
  15. 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. 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. 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. 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. 19 var obj = {}; ! $devinfo(obj, { data: 123 }); ! console.log($devinfo.get(obj)); // > { data: 123 } Использование
  20. 20. Инспектирование DOM
  21. 21. • знать границу компонента, т.е. определять 
 элемент-контейнер компонента (DOM узел) • определять владельца компонента (view) 
 по элементу-контейнеру (по DOM узлу) 21 Для инструмента нужно
  22. 22. • если у DOM узла есть свойство __view – 
 значит это контейнер компонента • в свойстве __view хранится ссылка на view 22 Решение в лоб Но лучше использовать
 WeakMap (node ➝ view)
  23. 23. Крохотный патч для Backbone 23 ! var _setElement = Backbone.View.prototype._setElement; Backbone.View.prototype._setElement = function() { _setElement.apply(this, arguments); this.el.__view = this; };
  24. 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. 25. Использование
  26. 26. basis.js 26 Работает из коробки (нужен basis.js 1.5)
  27. 27. component-inspector 27 github.com/lahmatiy/component-inspector Другие фреймворки npm install component-inspector --save-dev
  28. 28. React 28 Подключение в html перед React! <script src="node_modules/component-inspector/dist/react.js"> </script> <script src="react.js"></script>
  29. 29. Backbone 29 Подключение в html после Backbone <script src="backbone.js"></script> <script src="node_modules/component-inspector/dist/backbone.js"> </script>
  30. 30. Свое решение? Запросто! 30
  31. 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. 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. Можно определить многое 33 • isComponentRootNode(node) • getComponentNameByNode(node) • getInstanceByNode(node) • getInstanceRootNode(instance) • getInstanceClass(instance) • getInstanceLocation(instance) • ... github.com/lahmatiy/component-inspector#api-free-build
  34. 34. dev-сервер
  35. 35. • отдавать инструментированный код • при отдаче html встраивать в него runtime.js • исполнять команды, например, открытие файла в редакторе 35 dev-сервер должен в идеале
  36. 36. 36 Вариант настройки: webpack Инструментирование webpack + babel + babel-plugin-source-wrapper ! Открытие файла в редакторе express или webpack-dev-server + express-open-in-editor
  37. 37. 37 Пример конфигурации для Webpack + React tinyurl.com/pwj6bln
  38. 38. Вариант настройки: basisjs-tools 38 > npm install basisjs-tools -g > npm install basisjs-tools-instrumenter // создать конфиг basis.config > basis server { "plugins": [ "basisjs-tools-instrumenter" ]
 } Сервер будет отдавать инструментированный код и встраивать необходимое в html
  39. 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. 40. Главное – идея
  41. 41. Попробуйте – это круто! ;)
  42. 42. Вопросы? 42 Роман Дворнов @rdvornov rdvornov@gmail.com github.com/lahmatiy tinyurl.com/moscowjs-ci Component Inspector basis.js github.com/basisjs

×