У Кента С. Доддса есть несколько трехминутных подкастов на Briefs.fm, которые мне показались довольно интересными.
Вот несколько заметок, которые я сделал для некоторых из них, включая мои собственные мысли. Потому что, если я просто добавлю их в закладки, мне будет нелегко вспомнить, о чем они, без повторного прослушивания.
Рефакторинг больших компонентов React
Извлечение частных функциональных компонентов — это шаблон, который, как мне кажется, лучше, чем наличие нескольких методов «суб-рендеринга», таких как renderOnePart и renderAnotherPart, в самом компоненте. Они могут быть в одном файле или в отдельном.
Делимся своим обучением: Яйцеголовый в день
Ссылки на большой список видео EggHead, которые использовал он и его команда. К настоящему времени большинство из тех, которые помечены как бесплатные, стали доступны только для профессиональных участников, и список не обновлялся с марта 2017 года. Хорошая идея для обучения, а список — хороший источник идей для изучения.
Побочные эффекты от подготовки и выступления
Во время подготовки к докладу Дэн Абрамов создал Redux.
Гифки в пиаре
Я нашел гифки/видео очень полезными в отчетах об ошибках. Они могут четко и быстро проиллюстрировать проблему (как для захвата, так и для использования), без необходимости в большом описании и множестве аннотированных скриншотов. Для более длинных сценариев у видео есть то преимущество, что у него есть временная шкала, которая позволяет прыгать, а также ссылаться на определенные моменты. Всегда должно быть краткое текстовое описание в качестве краткой сводки, а также для того, чтобы потом можно было найти билет с помощью текстового поиска.
Автоматизация JavaScript Air
Экономия времени — не единственная причина для автоматизации таких вещей, как создание нового компонента или добавление нового теста. Это экономит переключение контекста и разрывает ваш поток для выполнения бессмысленной задачи, позволяет избежать человеческих ошибок и масштабируется, чтобы сэкономить много времени, если вы делитесь своей автоматизацией с другими.
Также послушайте/прочитайте: Аргумент в пользу автоматизации.
Упомянул:
- Plop — генератор фреймворка
- HanSON — JSON, но с комментариями, меньшим количеством кавычек и многострочными строками.
Генераторы, шаблоны и стартовые наборы
Изучите свои инструменты, создайте свой собственный стартер и используйте его. Незнание их вернется, чтобы преследовать вас. Используйте чужие в качестве эталона. Они хороши для быстрого начала работы, но могут затруднить последующие изменения/добавления.
Я также думал об этом в контексте create-react-app; это делает вещи очень простыми, но также делает много вещей, которые мне не нужны, и вещей, о которых я не знаю. Это также не заставляет меня думать о решениях и предположениях, которые оно уже сделало для меня.
Вложенные модульные тесты: анти-паттерн
Это затрудняет понимание того, что происходит, несколько beforeEach блоков для чтения. Вместо этого добавляйте префикс к каждому имени теста, чтобы сгруппировать их. Используйте служебные функции для настройки.
Упоминается: Ава — параллельный тест-раннер.
Вопросы и ответы: Афродита против Радия
Raidum использует встроенные стили, а Aphrodite генерирует CSS и вставляет его в DOM. Это позволяет ему использовать функции CSS, не прибегая к хакам.
См.: сравнение css-in-js.
Поддерживаемые тесты
Тесты с похожей настройкой затрудняют выделение различий, которые делают каждый из них уникальным. Вытяните настройку в функцию и передайте различия. Это делает действительно ясным в каждом тесте, что меняется.
Почему я обычно не использую пакеты с ограниченной областью действия
Привязывает модуль к вашему имени, вы можете передать проект кому-то. Трудно запомнить людям.
Упоминается: nps — скрипты пакетов NPM, не входящие в package.json, что позволяет избежать ограничений JSON и избежать раздувания.
Когда использовать снимки 📸 с Jest
Хорошо создавать перед изменением существующего непроверенного кода или для часто меняющегося пользовательского интерфейса. Мы теряем детализированные утверждения, не можем легко увидеть, что отличается между каждым тестом.
По теме: Мысли о моментальных шутках
Усыновление красотки на работе
Они использовали eslint --fix, чтобы изменить то, что они не соглашались с Prettier. Это вызвало изменения повсюду, заменив вкладки на пробелы, что вызвало множество конфликтов.
Стратегия такого изменения (если я правильно понял), которая в основном работает:
- Перебазируйте коммит прямо перед большими изменениями
- Выбирайте только изменения инструментов
- Запустите инструмент над файлами, которые вы изменили
- Перебазируйте, чтобы принять изменения форматирования, принимая ваши в случае конфликтов
- Rebase, чтобы взять остальную часть базовой ветки
Полезность ESLint
Точка зрения других — linting config может мешать, если вы не привыкли к набору правил другого человека/проекта. У него есть свой конфиг, который расширяет красивее.
Шаблоны тестирования React
Поверхностный рендеринг слишком много имитирует, компонент может работать, но только изолированно. Каждый раз, когда вы проводите рефакторинг, вам также придется изменить свой тест, что является признаком плохого теста. Вместо того, чтобы получать экземпляр и вызывать методы, он взаимодействует с компонентом, как пользователи (предположим, что это означает запуск обработчиков кликов). Когда вы утверждаете о состоянии, вы не знаете, что это означает с точки зрения того, что выводится пользователю, поэтому лучше утверждать о фактическом выводе. «Никогда больше не используйте поверхностный рендеринг».
Структура кода газеты и объявления функций
Крупные важные вещи вверху, детали внизу. Хостинг объявлений функций (вместо функциональных выражений) позволяет нам делать это в JS.
Ответить на вопросы
Только клиентская сторона вместо изоморфной (рендеринг на стороне сервера) добавляет сложности, не стоящей усилий.
Упоминается: next.js — минималистичный фреймворк для серверных React-приложений.
