“Помогите, я Джун!”

Подкаст для тех, кто только начинает свой захватывающий путь в IT или сталкивается с сомнениями и трудностями.

Давайте вместе разбираться в том:
- как войти и остаться в IT,
- как не перегореть,
- как достигать своих профессиональных и карьерных целей,
- как стать и оставаться востребованным и крутым айтишником.

Мы вместе с гостями хотим делиться с вами нашим опытом и накопленными знаниями. И будем рады вашим вопросам, предложениям и замечаниям)

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

https://news.1rj.ru/str/+SJQPyQhe-ZVkNDQy

Истоки JSX и почему он существует

JSX  – это JavaScript с синтаксическими приемами, облегчающими представление HTML. Это похоже на Sass, который транспилируется в CSS.

Чтобы написать простой HTML код с помощью JS, потребуется много кода. Чтобы упростить написание HTML кода на JavaScript, появилась библиотека HyperScript:

const h = require("hypernoscript");
document.body.appendChild(
 h("div", { id: "content" },
  h("div", { id: "child" },
   h("p", null, "text")
  )
 )
);

Но такой код сложно читать и понимать. Для решения данной проблемы появился JSX. Он позволяет писать код похожий на HTML и транспилируется в JS. Например:

const el = (
 <div id="content">
  <div id="child">
   <p>text</p>
  </div>
 </div>
);

// Транспилируется в следующий код:

const el = (React.createElement("div", { id: "content" },
 React.createElement("div", { id: "child" },
  React.createElement("p", null, "text"))));

Код похож на HyperScript, вместо h используется React.createElement. В TypeScript это можно изменить. Есть параметр jsxFactory, с помощью которого можно изменить JS функцию создания элемента. Например, можно использовать h из preact вместо React.createElement по умолчанию.

https://dodov.dev/blog/origins-of-jsx-and-why-it-exists

Все что я хотел бы знать перед миграцией на RSC

В блоге Mux вышла статья с фидбеком по миграции проекта на RSC. В ней автор рассказывает с чем столкнулись во время миграции и дает советы по использованию RSC.
Основные проблемы, которые отмечены в статье:
- Отсутствие поддержки CSS-in-JS.
- Не работает React Context в серверных компонентах.
- Дополнительная сложность в разработке при использовании RSC.

Миграция была проведена поэтапно. Сначала добавьте директиву "use client" в корне приложения. Потом переместите директиву "use client" как можно ниже по дереву. Если возникают проблемы с производительностью, то используйте Suspense и старайтесь большие библиотеки использовать на сервере.

https://www.mux.com/blog/what-are-react-server-components

Частично контролируемые компоненты

Джеймс Керр вводит новый термин / концепцию, который описывает компоненты способные предложить как контролируемое, так и неконтролируемое состояние в зависимости от передачи в него всего стейта или только часть стейта.

В React есть контролируемые и неконтролируемые компоненты:

- неконтролируемые компоненты управляют изменениями внутри себя.
- контролируемые компоненты управляются снаружи, извне.

В реальных проектах встречаются компоненты, которые могут управляться внутри себя, если не передано управление извне. Например tanstack-table:

const table = useReactTable({
  data,
  columns,
  state: {
    columnVisibility, // видимость
    columnOrder, // порядок
  },
  onColumnVisibilityChange: setColumnVisibility, // установка видимости
  onColumnOrderChange: setColumnOrder, // установка порядка
});

В примере выше видимость и порядок столбцов управляется извне. Но если не передавать состояние и колбеки изменения видимости и порядка, то они будут управляться внутри компонента. Это и есть частично контролируемые компоненты.

https://www.jameskerr.blog/posts/partially-controlled-react-components/

Использование SVG спрайта в React

В своем блоге Джейкоб Пэрис объясняет, как использовать SVG спрайт с иконками в React приложении. Каждая иконка спрайта хранится как <symbol> внутри noscript файла. Мы можем отображать иконку, используя тег <use>.

Чтобы создать SVG спрайт, нужно добавить SVG иконки. Чтобы добавить отдельные SVG иконки из библиотек, можно использовать утилиту sly-cli:

npx @sly-cli/sly add @radix-ui/icons camera card-stack

Эта команда скачает и добавит иконки camera и card-stack из библиотеки @radix-ui/icons.

Для создания SVG спрайта из отдельных иконок и генерации типов Джейкоб Пэрис поделился примером скрипта. Пример компонента иконки:

import { type SVGProps } from "react"
import spriteHref from "~/app/components/icons/sprite.noscript"
import { type IconName } from "~/app/components/icons/names.ts"

export function Icon({
  name,
  ...props
}: SVGProps<SVGSVGElement> & {
  name: IconName
}) {
  return (
    <noscript {...props}>
      <use href={`${spriteHref}#${name}`} />
    </noscript>
  )
}

https://www.jacobparis.com/content/noscript-icons

Опыт перехода пакетов на ESM

Марк Эриксон, один из разработчиков Redux, делится своим опытом перехода пакетов на ESM. По его словам в интернете нет единого авторитарного гайда по переходу пакетов на ESM. Свою статью он не делает гайдом, а рассказывает в ней, с какими трудностями и испытаниями пришлось столкнуться при переходе пакетов на ESM.

Также автор поделился инструментами, которые использует в разработке:
- release-it: автоматизация публикации пакетов в NPM.
- yalc: позволяет локально проверить работу пакетов, установить их без npm link.
- publint.dev: проверяет правильно ли собран пакет для работы с популярными бандлерами.
- arethetypeswrong.github.io: анализирует экспорт пакета для проверки совпадения TS типов и JS файлов.
- tsup: бандлер TS библиотек.

https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/

Создание UI библиотеки с помощью веб-компонентов React

С помощью React можно создать универсальную UI библиотеку, которую можно использовать в любом фреймворке и веб приложении с помощью веб компонентов. Основная концепция заключается в написании обычного компонента на React и компиляции его в веб-компонент с помощью обертки в сочетании с Preact Custom Element.

В случае с UI библиотекой Preact может заменить React, и у него есть преимущество в размере: он меньше React и в нем нет ничего лишнего.

По заявлению автора статьи, чтобы использовать события компонента и добавить стили, простое использование Preact Custom Element не подходит и нужна доработка. Поэтому авторы создали кастомизированную версию preact-custom-element, которая позволяет добавить события и стили.

https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/

Если веб-компоненты так хороши, почему я их не использую?

Дэйв Руперт в своем блоге поделился мнением, почему веб-компоненты не популярны и ими мало кто пользуется:

- Слишком низкоуровневый, рассчитан на авторов фреймворков. Однако переход на Shadow DOM и инкапсуляция стилей нарушают соглашения, принятые в фреймворках.
- Проблемы с маркетингом.
- Трудно инвестировать во что-то неизвестное. Не хватает материалов и кейсов использования веб-компонентов, из-за чего сложно сделать выбор в его пользу.
- Полная поддержка веб-компонентов в браузере появилась не так давно.
- Веб-компоненты медленно развиваются. Если вы ждете какую-то фичу, то полной поддержки во всех браузерах порой придется ждать два года.

https://daverupert.com/2023/07/why-not-webcomponents/

Функция createStateContext, чтобы поделиться хуком useState

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

const [CheckboxContext, useCheckboxContext] =
  createStateContext<string[]>()

// опционально для отладки ошибок
CheckboxContext.displayName = "CheckboxContext"

function CheckboxGroup({ children }) {
  const state = useState<string[]>([])
  return (
    <CheckboxContext.Provider value={state}>
      {children}
    </CheckboxContext.Provider>
  )
}

https://www.jacobparis.com/content/use-state-context

Оптимизация Next.js приложения

На Хабре вышла статья с советами по уменьшению размера бандла и оптимизации загрузки сайта для существующего проекта на Next.js. Какие стоит предпринять шаги:

- Удалите код, который не используется. Для поиска такого кода можно использовать TS-Prune.
- Удалите неиспользуемые npm пакеты используя Depcheck.
- Удалите дублирующие npm пакеты с разными версиями. Бывают случаи, когда помогает обновление версии по единой.
- Используйте next/image и современные форматы изображений avif и webp.
- Используйте стандартный механизм разбиения кода на чанки в Next.js.

https://habr.com/ru/articles/754684/

React Suspense в трех разных архитектурах

Изначально Suspense использовался как способ отобразить спиннер во время ленивой загрузки компонента. С релизом React 18 появились новые способы использования Suspense. Причем в разной архитектуре Suspense играет разную роль:

- Рендеринг на стороне клиента: показ заглушки во время ленивой загрузки компонента; декларативная обработка загрузки/ошибки во время получения данных в дочерних компонентах, например через react-query.

- Рендеринг на стороне сервера: все что выше + компоненты отрендеренные на сервере и обернутые в Suspense, выборочно гидратируются на клиенте.

- Серверные компоненты: все что выше + асинхронные серверные компоненты, обернутые в Suspense, передаются клиенту поэтапно: сначала заглушка, потом содержимое.

https://elanmed.dev/blog/suspense-in-different-architectures

Передозировка useMemo

Разработчики склонны злоупотреблять useMemo и даже не могут адекватно объяснить, почему они это делают. В своем блоге Эдвин Антонов поделился мнением по поводу того, когда стоит использовать useMemo. Если кратко:

- Сначала профилируйте, потом оптимизируйте. Профилируйте сначала производительность, чтобы выявить узкие места, а потом оптимизируйте компонент.

- Мемоизируйте только дорогостоящие операции. Например, вложенные циклы, рекурсивные операции, преобразование большого объема данных или сложные математические вычисления.

- Следите за тем, чтобы зависимости useMemo были точными.

https://edvins.io/usememo-overdose

Релиз Astro 3.0

Вышел релиз Astro 3.0. Вот основные изменения:

- Поддержка нативного View Transition. Это браузерное API для создания плавных переходов между страницами, как в SPA. В Astro можно добавить плавные переходы на сайт всего лишь двумя строчками кода. Для поддержки старых браузеров, Astro добавляет небольшой фолбек скрипт.

- Более быстрый рендер. Astro стал рендерить на 30% быстрее для большинства компонентов.

- Оптимизация изображений. При использовании встроенного компонента <Image>, Astro будет оптимизировать переданное в src изображение: переводит изображение в формат WebP и устанавливает ширину/высоту для предотвращения смещения макета (CLS).

- Улучшение в SSR для Serverless.

- Улучшение в HMR для JSX.

- Оптимизация сборки: автоматическая минификация HTML, ID компонентов в data атрибутах, встраивание небольших блоков стилей в HTML для более быстрой загрузки.

https://astro.build/blog/astro-3/

Минималистичный фреймворк React с серверными компонентами

Waku – это минималистичный фреймворк, который поддерживает серверные компоненты. Существует не так много фреймворков, которые поддерживают RSC, но в них помимо RSC еще много других фич. В Waku только RSC и он сделан в первую очередь для изучения разработчиками RSC.

В Waku есть клиентские и серверные модули. Для создания серверных компонент нужно создать entries.ts файл в корне проекта и объявить в нем функцию getEntry, которая будет возвращать серверные компоненты:

import { defineEntries } from "waku/server";

export default defineEntries(
  // getEntry
  async (id) => {
    switch (id) {
      case "App":
        return import("./src/App.js");
      default:
        return null;
    }
  }
);

Для рендера серверных компонентов на клиенте надо вызывать функцию serve из клиентского модуля:

import { createRoot } from "react-dom/client";
import { serve } from "waku/client";

const root = createRoot(document.getElementById("root")!);
const App = serve<{ name: string }>("App");
root.render(<App name="Waku" />);

https://waku.gg/

Релиз новой среды установки+выполнения+тестирования JavaScript!

https://www.youtube.com/watch?v=BsnCpESUEqM

Хайлайты:

- hello world запускается за 4мс
- отлично работает с cjs и mjs
- бесшовный импорт раст файлов
- пишит / читает диск в несколько раз быстрее ноды
- может держать 4x больше RPC чем нода
- 6x больше WS messages чем нода
- большая встроенная стандартная библиотека для фенси DX
- совместимость с большинством node апи, можете попробовать запустить на нем next/nuxt/nest и т.п.
- установка зависимостей в десятки и сотни раз быстрее всех аналогов
- встроенные методы для тестов слизанные с jest
- тесты запускаются и десятки и сотни раз быстрее vitest / jest

Добавлю от себя. Сам JS в Bun работает быстрее чем в Node по моим скромным замерам. Ну SSR по их тестам сильно быстрее. Чекайте https://bun.sh/

Вот вам самый краткий пример что бы продемонстрировать каким местом Bun повернут к разработчику и как заботиться о его DX. Он реактовские компоненты в консоль выводит в виде JSX!
https://bun.sh/guides/ecosystem/react

Гайд по тестированию React компонентов

Базовое погружение в тестирование React компонентов от React Handbook. Кратко о чем там написано.

Тестирование полезно как для разработчиков, так и для бизнеса: уверенность в деплое, раннее обнаружение багов, снижение рисков и гарантия качества.

Чтобы начать тестирование, выберите тест-раннер: Vitest для юнит тестирования, Cypress или Playwright для E2E. А также установите библиотеку для тестирования React Testing Library. Этого достаточно для написания тестов.

Можно тестировать визуальную часть приложения: снапшоты DOM, сравнение скриншотов, сравнение стилей. А также можно тестировать поведенческую часть приложения: работу UI компонентов, кастомные хуки, утилитарные функции, страницы и фичи и полный флоу пользователя. Для каждого есть свой инструмент.

https://reacthandbook.dev/automated-testing

Родители и владельцы в React: поток данных

Джулс Блом объяснила проблему проп-дриллинга и способ, как избежать этого, используя слоты. Также автор объяснил концепцию “родительского дерева” (parent tree) и “дерева владельцев” (owner tree) на следующем примере:

function App() {
  return (
    <Dashboard>
      <DashboardContent currentUser={currentUser} />
    </Dashboard>
  );
}

function Dashboard({ children }) {
  return (
    <div>
      <h2>Dashboard</h2>
      {children} {/* DashboardContent will be rendered here */}
    </div>
  );
}

1. “Родительское дерево”: компонент или элемент, в который вложен другой компонент. Например, в <App> компонент <Dashboard> это родитель для <DashboardContent>.
2. “Дерево владельцев”: компонент, который рендерит другие компоненты. В примере это компонент <App>.

Поток данных - пропсы – следует из “дерева владельцев”. Поддержание плоской иерархии “дерева владельцев” путем декомпозиции компонентов может сократить путь потока данных, что приведет к лучшей инкапсуляции компонентов.

В заключение, стоит отметить, что проп-дриллинг не всегда плохо. Для каждого паттерна есть свое место и время, когда он будет полезен.

https://julesblom.com/writing/parents-owners-data-flow

SSR с Bun и React

Алекс Кейтс сделал пример приложения на Bun и React и реализовал SSR с роутингом.

Туториал, в котором по шагам показывают, как создать проект с помощью Bun и запустить сервер.

Создать проект с помощью Bun можно командой bun init. Она подготавливает проект, создает bun.lockb как lock файл package.json, а также index.ts и tsconfig.json, т.к. по умолчанию создает проекты на TypeScript.

https://alexkates.dev/server-side-rendering-ssr-with-bun-and-react

Тренинг по популярным JavaScript паттернам

Лидия Халли собрала популярные паттерны проектирования на JavaScript и React, а также паттерны по улучшению перфоманса и рендера.

Контент основан на Patterns.dev. Почти каждый паттерн можно проверить на понимание – выполнить задание и сравнить свой результат с решением на сайте.

https://javanoscriptpatterns.vercel.app/patterns

Релиз Next.js 13.5

Вышел релиз Next.js 13.5. Список изменений:

- Запуск dev сервера на 22% быстрее для App и Pages Router.
- HMR работает на 29% быстрее.
- Уменьшение потребления памяти сервера на 40%.
- Пофикшены более 438 багов.
- Оптимизированный импорт модулей. Более быстрое обновление в dev режиме и быстрый старт в проде при использовании модулей с большим количество экспортов, например для библиотек с иконками.
- Улучшение next/image. Функция unstable_getImgProps для продвинутых сценариев с изображениями без использования компонента <Image>. Например, можно использовать с тегом <picture>:

import { unstable_getImgProps as getImgProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImgProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImgProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

https://nextjs.org/blog/next-13-5