Фронтенд неделька. 14 августа — 20 августа

Привет, Мир! 🍷

Ловите дроп свежего про разработку интерфейсов.

Наткнулся на обсуждение алиасов для импортов в твитере у Кента Доддса.

В его RFC говорится, что алиасы помогают избегать длинных путей, перемещать файлики не думая о том, что забыл где-то изменить путь. В тоже время, алиасы не всегда очевидные, особенно если есть много папок с одинаковыми названиями. Плюс к этому приходится каждый раз их прописывать для каждого тулинга: сборщик, ESLint, фреймворк для тестов. Каждый из них читает настройки из своего конфига. Джессика также делится наблюдением, что отказ от алиасов ускоряет сборку приложения.

Кент переписал все алиасы на относительные пути, чтобы не было этих проблем с тулингом, хоть и немного больно их поддерживать. А через пару дней пришла идея переписать всё на нативные алиасы, которые описали в стандарте Node.js. Вот обсуждение и RFC, где говорится про этот подход.

Суть в том, что описать алиасы один раз в package.json проекта и временно задублировать их в tsconfig.json, пока там не сделают поддержку чтения из package.json.

В итоге получаем и автокомплит и типизацию импортов, используя привычные алиасы. Современный тулинг поддерживает такие алиасы, по крайней мере Vite, Vitest и ESLint.

Многие, наверное, знают про normalize.css или reset.css. Если нет — это такая штука, которая правит мелкие баги в стандартных стилях браузера, приводит их к единому виду. Сейчас уже стараются этот пакет не использовать, глобальные стили — зло. Да и сами правила уже устарели, мало кто поддерживает браузеры того времени. Появляются, конечно, новые подходы, но сегодня не про них.

Наткнулся на reset, только для TypeScript. В статье Мэт подробнее рассказывает про свой пакет. Если вкратце — пакет правит неочевидные поведения в типизации. Например с [].filter(Boolean).

По умолчанию, после фильтра в типах всё равно остаётся undefined.

Это поведение можно поправить вот так, но приходиться кастить тип через as

С использованием пакета всё работает как нужно

Есть ещё одно неприятное поведение в TypeScript — когда ты достаёшь ключи объекта через Object.keys() или Object.entries(). Этот момент Мэт специально не правит, так как это поведение оправдано. В статье есть пример, как типизацией ключей можно себе выстрелить в ногу.

А так рекомендую присмотреться к проекту, есть много интересных фиксов. Один раз определяете импорты в d.ts файле и наслаждаетесь.

Прикольные фичи подъедут в Chrome 117.

Мне больше всего понравилась фича про локальную подмену запросов. Можно будет переопределять ответы от бэкенда прямо в DevTools. Станет намного удобнее тестить различные ошибки, форматы ответа. Причём полезно будет не только фронтендерам, но и тестировщикам.

Со всеми плюшками можно ознакомиться в статье.

А как прошла ваша неделька?