Создание 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

Создание компонента тоста

Эмиль Ковальски в своем блоге рассказывает с какими проблемами столкнулся и как их решал при создании библиотеки тостов.

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

https://emilkowal.ski/ui/building-a-toast-component

Эффект ввода текста с помощью React

В своем блоге Жюльен Тибо показал, как создать эффект ввода текста с помощью хука на React. Его можно использовать при создании чатов как анимацию загрузки или просто добавить динамики на сайт.

const useTypingEffect = (
  text: string,
  duration: number,
  isTypeByLetter = false
) => {
  const [currentPosition, setCurrentPosition] = useState(0);
  const items = isTypeByLetter ? text.split("") : text.split(" ");

  useEffect(() => {
    setCurrentPosition(0);
  }, [text]);

  useEffect(() => {
    if (currentPosition >= items.length) return;

    const intervalId = setInterval(() => {
      setCurrentPosition((prevPosition) => prevPosition + 1);
    }, duration);

    return () => {
      clearInterval(intervalId);
    };
  }, [currentPosition, items, duration]);

  return items.slice(0, currentPosition).join(isTypeByLetter ? "" : " ");
};

https://www.julienthibeaut.xyz/blog/create-text-typing-effect-with-react

Лучшие практики создания форм с react-hook-form

Обзор лучших практик создания больших форм с использованием react-hook-form и TypeScript:

1. Разделите форму на несколько небольших компонентов. Например, если форма состоит из нескольких секций, то вынесите каждую секцию в отдельный компонент.

2. Используйте пропы value и onChange для ввода и вывода для кастомных компонентов. Такой подход позволит бесшовно интегрировать react-hook-form.

3. Используйте проп name у полей формы для идентификации полей.

4. Используйте кастомный хук для типизации контекста формы:

import { useFormContext } from 'react-hook-form';
export const useMyFormContext = () => useFormContext<MyFormInterface>();


https://orizens.com/blog/best_practices_for_developing_complex_form-based_apps_with_react_hook_form_and_typenoscript_support/

Sugar High – легковесная подсветка кода

Sugar High - это легковесная подсветка кода на JSX, которая весит 1КБ после минификации и сжатия. Есть возможность кастомизации: можно поменять цвета токенов через CSS переменные.

https://sugar-high.vercel.app/

Тестирование своих библиотек локально с помощью Yalc

При разработке библиотеки возникает необходимость проверить локально его работу. Обычно используют npm link или выкладывают в npm альфа-версию. Оба варианта не идеальные, например, при npm link могут возникнуть ошибки из-за несоответствия версий React в библиотеке и в приложении.

Yalc решает проблему локального тестирования библиотек и делает это довольно просто. Используйте команду yalc publish для публикации библиотеки и yalc add my-package в приложении, где хотите протестировать библиотеку.

https://github.com/wclr/yalc

Апдейт по компилятору React Forget

Сатья Гунасекаран, член основной команды React, рассказал почему затянулось создание компилятора React Forget и насколько он сложнее чем задумывался.

Компилятор будет поддерживать весь JavaScript, включая все его особенности. React Forget будет обратно совместим, поэтому приходится работать с существующим кодом, что усложняет задачу.

Есть задачи, которые на первый взгляд кажутся простыми, но на деле гораздо сложнее – это алиасы. Например, если создать алиас и присвоить переменную x другой переменной y:

function Component({a, b}) {
  const x = [];
  x.push(a);

  const y = x;
  y.push(b);
    
  return <Foo x={x}/>;
}

Для компилятора есть вариант запомнить вычисление x отдельно и сделать его зависимостью для y:

// Неправильно
function Component({a, b}) {
  const x = useMemo(() => {
    const x = [];
    x.push(a);
    return x;
  }, [a]);

  const y = useMemo(() => {
    const y = x;
    y.push(b);
    return y;
  }, [x, b])
    
  return <Foo x={x}/>;
}

Однако, правильным способом компиляции будет объединение этих вычислений в группу под одним useMemo:

function Component({a, b}) {
  const x = useMemo(() => {
    const x = [];
    x.push(a);

    const y = x;
    y.push(b);
    return y;
  }, [a, b]);
        
  return <Foo x={x}/>;
}

Этот пример довольно простой. А теперь представьте, что между x и y добавится поток управления или вызов функции, тогда такой код добавит еще больше сложности для анализа компилятору.

https://www.reddit.com/r/reactjs/comments/16nnh4z/comment/k1jbr4t/