В чем разница между инструментированием кода и инструментами разработки? Какие инструменты экономят время и улучшают жизнь разработчика? Как идеи меняют ваш взгляд на проблемы и используемые в их решении инструменты? Почему идеи гораздо важнее, чем то, какие вы привыкли использовать библиотеки и фреймворки? Как написать свой собственный интсрумент и сэкономить время, а не сидеть все выходные и не добиться никакого эффекта? Ответы на все эти вопросы, а также многие другие, включая каверзные вопросы касательно текущей и будущей работы Романа Дворнова над OpenSource проектами, вы услышите в этом выпуске!
Базой для разговора стали многочисленные споры в кулуарах конференций, а также следующие выступления Ромы:
- доклад на Codefest 2015 “Инструменты разные нужны, инструменты разные важны“
- доклад на FrontTalks 2015 “Инструментируй это“
- доклад на SPA Meetup в марте 2015 “SPA инструменты“
Основные тезисы и темы разговора:
- Что такое инструменты разработки и инструментирование кода? 01:26
- инструменты – это все, что позволяет эффективно достигать результата
- инструментирование – это один из подходов при создании инструментов
- IDE vs легковесные текстовые редакторы 05:00
- component-inspector 09:30
- инструмент для быстрого перехода к коду компонента, использующий инструментирование
- видео, демонстрирующее принцип работы
- имплементация для React и Backbone
- Имплементация инструментирования 12:45
- производительность при компиляции и в рантайме
- использование плагинов к Babel
- использование WeakMap
- Линтеры 19:12
- eslint
- jscs
- CSSComb
- сложности при использовании CSSComb для линтинга
- встраивание линтеров в редактор кода
- считать ли линтерами инструменты, которые изменяют код автоматически
- линтеры для разных фреймворков
- basis.js lint – часть инструментов для сборки basis.js
- eslint-plugin-react
- eslint-plugin-angular
- eslint-plugin-backbone
- eslint-plugin-mocha
- … и многие другие eslint-plugin-*
- Статический анализ кода 34:34
- области применения кроме линтинга
- статические анализ vs регулярки
- альтернатива AST – CST
- форматтеры и бьютефаеры кода
- Визуализация истории мутаций объекта и time travel 40:43
- сохранение истории мутаций, трансформировавших объект в определенное состояние
- визуализация истории мутаций
- применение визуализации для обучения программированию
- применение визуализации для объяснения работы приложения
- проблема создания подобного инструмента при работе с изменяемыми данными
- чем данный инструмент похож на time travel, популярный в сообществе ФРП
- time travel для реализации функционала undo/redo в редакторах
- time travel для отделения данных от кода и отладки разного кода с теми же данными
- доклад Никиты Прокопова “Функциональное программирование в браузере“
- remote time travel debugging для отладки ошибок в пользовательских приложениях на сохраненных данных
- Документирование кода 56:09
- может ли понятный код заменить документацию
- другие инструменты, обсужденные выше, решают те же проблемы
- визуализация иерархии классов
- doxygen
- jsdoc
- автодокументация basis.js
- jsdoc для документирования типов как альтернатив TypeScript и Flow
- Идеи и воплощение их в жизнь 1:04:09
- самое главное – это идеи и концепции, а не библиотеки и фреймворки
- адаптация идей в своем любимом фреймворке может занимать немного времени
- некоторые инструменты возможны только тогда, когда фреймворк обладает нужной степенью свободы
- проблема выбора: брать актуальные задачи по проекту или делать инструмент для решения целого класса подобных задач
- выделение времени в компании на развитие инфраструктуры инструментов
- нужны ли гениальные разработчики, чтобы интегрировать сложные инструменты в текущую кодовую базу
- Тренд интеграции IDE и среды исполнения (браузера) 1:20:35
- встраивание инструментов в Dev Tools
- браузеров много, не все используют Chrome
- на данный момент эта интеграция слабая
- за какими редакторами кода будущее
- LightTable как пример подобного тренда
Пики
- Костя 1:28:20
- popmotion – библиотека для анимаций, физики и слежением за действиями пользователя
- Миша 1:29:00
- flexboxin5 – интерактивная обучалка Flexible Box Layout
- iconic – платформа SVG-иконок с набором правил для создания свой библиотеки иконок
- Андрей 1:32:38
- Документация на контексты в React
- Elm – функциональный язык программирования для браузера
- Рома 1:34:00
- Ближайшее будущее CSSO после того, как Рома стал мейнтейнером