Frontend Garden

Викли 1, февраль

время чтения ~1 мин.

Create React App – всё!

14.02.2025, Ссылка на новость

Create React App – всё! Проект помечен как deprecated на официальном сайте и были добавлены соответствующие сообщения при установке.

В самом начале Create React App был самым популярным решением, которое позволяло создать приложение очень быстро и оно работало. Для большинства проектов такого было достаточно – не нужно было копаться в конфигах, что-то настраивать и проверять работоспособность. В этом же и был минус Create React App - невозможность гибкой настройки, потом появлялись различные решения, которые могли “подлезть” в CRA, или вариант с eject’ом всех настроек – разобраться потом было нелегко.

Время доказало – разработчикам нужно уметь гибко настраивать их приложения, выбирать что оптимизировать, а что нет, настраивать несколько вариантов сборки, писать свои плагины и т.д. И тогда начали появляться различные современные решения - Rollup, Vite, RSBuild, Farm и нет им конца, причём они постоянно соревнуются в скорости сборки приложений.

Современным подходом создания React-приложений теперь считаются фреймворки: Next.js, Remix (ныне React Router 7) и Expo. Для более классического вида есть различные шаблоны и современные сборщики: Vite, Parcel RSBuild и т.д., которые позволяют создать SPA.

Команда TanStack тоже не осталась в стороне и очень оперативно представила новый Create TSRouter App, полностью построенный на своих решениях.

Create React App умер, да здравствует Create TSRouter App!

Ссылка на оригинал

Prettier 3.5 – улучшает форматирование выражений и объектов

09.02.2025, Ссылка на новость

Вышел Prettier 3.5 и добавил несколько приятных фич: objectWrap – правила форматирования объектов, и experimentalOperatorPosition – экспериментальная опция для переноса операторов, которая полезна при форматировании длинных выражений.

Для форматирования объектов появился новый параметр – objectWrap, теперь можно принудительно “свернуть” объект, если он помещается на одну строку.

Форматирование объектов

До версии 3.5 форматирование объектов происходило либо по длине строки – если не помещался в одну строку, то он “раскрывался” на несколько строк; либо по первому символу после литерала – если перенос, то тоже будет “раскрыт”.

Так было:

const person = {
	firstName: 'John',
	lastName: 'Doe',
};
 
const item = { name: 'Effective TypeScript', type: 'book' };

А так станет с objectWrap в значении collapse:

const person = { firstName: 'John', lastName: 'Doe' };
 
const name = { name: 'Effective TypeScript', type: 'book' };

Prettier нередко добавляет фичи в виде экспериментов, так и был добавлен experimentalOperatorPosition, который позволяет объяснить форматтеру, в каком месте расставлять переносы строк в математических операциях: в в конце или в начале.

// Пример математического выражения
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;
 
// `experimentalOperatorPosition: end` (стандартное поведение)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;
 
// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Дополнительными плюшками релиз не обделили: и конфиги на TypeScript’е писать разрешили, и переносы строк в JSX и CSS улучшили и дотюнили форматирование для Vue, Angular и Markdown.

Ссылка на оригинал

Способы разделения задач в JavaScript

03.02.2025, Ссылка на статью

Таски. Они везде, мы постоянно пишем код, который можно назвать тасками. Разделить их тоже можем — на макротаски и микротаски, хоть это и не всегда верное утверждение1. Для простоты назовем весь синхронный код, где бы он не вызвался - макротасками. Использование макротасок заставляет и браузер выполнять определенные процессы внутри них, например reflow2 и repaint3. Такое поведение может стать бутылочным горлышком в некоторых сценариях, например расчет размеров элементов, особенно если их много. Решением может быть разделение макротаски на несколько макротасок.

Как много вы можете придумать способов разбиения долгих макротасок? Я смог придумать только 3 — setTimeout, requestAnimationFrame, requestIdleCallback, и оказалось, что не все способы хороши. А вот Алекс МакАртур, автор статьи “Способы разбиения длинных задач в JavaScript” рассказал больше способов:

  • setTimeout;
  • async/await & setTimeout;
  • scheduler.postTask();
  • scheduler.yield();
  • requestAnimationFrame();
  • MessageChannel();
  • и использование Web Workers.

А вот использование requestIdleCallback автор исключает, т.к. он не гарантирует исполнение кода.

[! tip] Не стоит забывать про requestIdleCallback Данная функция является очень важной для оптимизации приложений, например тех же часто вызывающихся reflow. Функция попросит браузер найти “окошко” для его исполнения, хоть оно может и найтись сильно позже.

Как отмечает автор, лучшим вариантом является scheduler.yield(), но пока Scheduler есть только в Хроме мы можем использовать подход с async/await & setTimeout:

await new Promise((resolve) => setTimeout(resolve, 0));

Сноски

  1. В спецификации ECMAScript нет прямого упоминания “макрозадач” и “микрозадач”, данные термины удобны в рамках описания работы Event Loop. ↩

  2. Процесс, при котором браузер пересчитывает позиции и размеры элементов. Может вызвано обращением к clientHeight, clientWidth и т.д., подробнее описано в What forces layout / reflow. ↩

  3. Процесс, при котором браузер перерисовывает изменения, затронутые reflow. ↩

Ссылка на оригинал

TypeScript 5.8 – учимся использовать стираемый синтаксис

TypeScript имеет некоторые фичи, которые после компиляции добавляют код – enum’ы, алиасы импортов, модификаторы параметров классов. С Node версии 22.6 была добавлена экспериментальная фича, которая позволяет опускать типизацию и запускать код на TypeScript’е в JavaScript-движке, а с версии 23.6 фича включена по умолчанию.

Некоторые решения добавили возможность использовать сразу TypeScript с ограничениями для написания кода и конфигов, например как Prettier 3.5, и для этого был добавлен специальный флаг для TypeScript: --erasableSyntaxOnly. Наряду с этой фичей есть proposal для браузеров, который также бы позволил просто вставлять код на TypeScript в консоль и исполнять, но пока он находится в Stage 1.

Новый режим позволяет писать, к примеру, CLI, которые не нужно будет дополнительно конвертировать в .js-файлы, а можно будет сразу исполнять, или писать серверные приложения на Node.js без установки дополнительных зависимостей (напр. vite-node) для запуска TypeScript-файлов.

Релиз TypeScript 5.8 принесёт ещё несколько полезных фич: улучшили проверки ветвления типов в return’ах и улучшение генерации файлов деклараций.

Ссылка на оригинал

CSS-функциям быть!

09.02.2025, Ссылка на новость

В конце 2024 было ясно, что в будущем CSS будет много перемен – кастомные функции и миксины1, и новые псевдоклассы2, всё это было запланировано. Однако, не ожидалось, что работы по ним, их прототипирование начнёт так скоро.

Bramus (Bram Van Damme) анонсит нам функции в CSS, и это действительно “изменит правила игры”. На данном этапе кастомные функции рассматриваются как расширение синтаксиса CSS-переменных и они уже потрясающие:

@function --negate(--value) {
	result: calc(-1 * var(--value));
}
 
:root {
  padding: --negate(1px); /* = -1px */
}

Кастомные CSS-функции поддерживают ветвление, но не поддерживают early-return, а это значит, что сначала описать media query или container query и после него стандартное значение функции не выйдет:

@function --light-dark(--light, --dark) {
	result: var(--light);
	
	@media (prefers-color-scheme: dark) {
		result: var(--dark);
	}
}

Фича уже прекрасно работает в Canary и можно ожидать, что к концу года мы получим её стабильную версию.

Сноски

  1. CSS Functions and Mixins Module – спецификация описывает кастомные функции и миксины в CSS. ↩

  2. CSS Values and Units Module Level 5 – спецификация описывает работу со стандартными единицами измерения, манипуляции со значениями, синтаксис свойств CSS. ↩

Ссылка на оригинал

Вид графа