Hyper Fetch 5.0: фреймворк для получения данных

Hyper Fetch – относительно новый фреймворк для получения данных. Он включает в себя логику для выполнения запросов, кэширования, создания очередей и offline-first режима. Основные особенности:
- написан на TypeScript.
- есть мапперы запросов/ответов, где можно сделать валидацию.
- поддержка дедупликации запросов, создание очереди запросов, создание интерцепторов, отмена запросов.
- поддержка кастомных адаптеров, включая Firebase и Graphql.
- есть отдельный модуль для работы с сокетами.
- встроенная возможность создания моков.
- есть поддержка React.

Примеры создания запросов:

export const getUser = builder.createRequest<UserModel>()({
  endpoint: "/api/user/:userId",
  cache: true,
  cacheTime: DateInterval.second * 10
});

export const postFile = builder
  .createRequest<{ response: string }, { file: File }>()({
    endpoint: "/api/files",
    method: "POST",
    queued: true,
    retry: 0
  })
  .setDataMapper((data) => {
    try {
      const formData = new FormData();
      formData.append("file", data.file);
      return formData;
    } catch (err) {
      return data;
    }
  });

https://hyperfetch.bettertyped.com/

Телепортация в React: позиционирование, контекст наложения и порталы

В блоге Нади Макаревич вышел обзор о причинах использования порталов в React. Основная причина, по которой стоит прибегать к использованию порталов – избежать проблем с контекстом наложения DOM элементов. В порталах можно рендерить модальные окна, чтобы они всегда были поверх других слоев.

Также в статье разобрано свойство position, какие у него есть значения и как они влияют на DOM. С помощью position можно определить, как будет отображаться элемент. Свойство position подвержено контексту наложения, поэтому все равно используют порталы для отображения модальных окон.

https://www.developerway.com/posts/positioning-and-portals-in-react

Использование useMutation для оптимистических изменений

Туториал по использованию React Query для использования оптимистических изменений для компонента “переключатель”. В туториале описано, как использовать хук useMutation, useQuery, как локально обновить кэш и инвалидировать его.

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

https://www.propelauth.com/post/using-usemutation-to-make-an-advanced-toggle-in-react

Создание лучшего и более быстрого представления кода

В блоге Github вышла статья о том, как разрабатывалась новая страница просмотра исходного кода репозитория.

Авторы описали проблемы, с которыми столкнулись при разработке этой страницы, а также пути решения. Например, при открытии исходного файла с большим количеством строк возникла проблема с производительностью: создание подсветки кода занимала много времени. Для решения проблемы использовали виртуализацию, т.е. генерировали подсветку только для части кода видимой в окне браузера. Виртуализация добавила другую проблему – перестал работать поиск по документу через Ctrl + F. Для быстрого решения проблемы нужно было создать свой поиск по документу.

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

Как работает useState() внутри React

В блоге JSer вышел обзор по устройству хука useState() в React. В обзоре рассматривается исходный код хука, функция изменения стейта, процесс обновления стейта в потоке рендера компонента. К исходному коду даны комментарии автора по тому, что делает определенный участок кода и в каких случаях он выполняется.

https://jser.dev/2023-06-19-how-does-usestate-work/

Расстаемся с SVG-in-JS в 2023 году

Хранение SVG в JS бандле ухудшает производительность сайта и будет лучше использовать SVG в HTML, сохраняя JS бандл небольшим и быстрым. В блоге Джейкоб Гросс вышел обзор использования SVG в JS и почему это неправильно, а также как правильно хранить и использовать SVG на сайте.

Основная причина, почему SVG в JS это плохо – производительность. При хранении SVG в JS браузеру приходится тратить больше времени на парсинг и компиляцию. Плюс там, где есть парсинг, там и увеличение объема использованной памяти для хранения результатов. Особенно эти проблемы с производительностью ощущают пользователи недорогих смартфонов.

Есть несколько практик вставок SVG на сайте, каждый из них может использоваться в разных ситуациях:

- Использование тега <img />.
- Использование SVG и <use /> для спрайтов текущего домена.
- Использование CSS и mask-image для спрайтов любых доменов.

https://kurtextrem.de/posts/noscript-in-js

Пишем хорошие компоненты, которые захочется переиспользовать, а плохие — не пишем

На Хабре вышла статья, в которой рассказывают про признаки хорошего и плохого компонента в React.

Основные признаки того, что компонент плохой:
- Сложный: делает слишком много, используются сложные технологии для решения простых проблем.
- Неконсистентный: использование пропсов не соответствует ожидаемому поведению.
- Props hell: большое количество пропсов, которое со временем становится сложно поддерживать.

Признаки хорошего компонента:
- Гибкость: компонент адаптируется к использованию в разных сценариях.
- Коробочность: удобство использования компонента вне проекта.
- Зависимость: чем меньше зависимостей, тем гибче и надежнее компонент.

https://habr.com/ru/companies/avito/articles/739330/

HolyJS в поисках спикеров!

На конференции HolyJS открыт CFP — Call for papers. И нет, это не «звонок для бумаги». Это ребята ищут спикеров, которые хотят выступить на конференции.

Если вы хотите поделиться знаниями или интересным кейсом компании, подавайте заявку на выступление. Расскажите о графике и анимациях, языках, бэкенде, инструментах разработки, UI-разработке и soft skills. Полный список тем — на сайте. И не стесняйтесь предлагать свои.

Вы можете выступить онлайн или офлайн и выбрать любой формат выступления — доклад, воркшоп, интервью, обсуждение, BoF-сессию или придумать что-то свое. 

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

Подавайте заявки до 25 июля.

Создание бесшовного мультиязычного UI в React

Туториал по созданию мультиязычного UI с помощью react-i18next. Внутри него показывается, как использовать хук useTranslation, как сменить язык и как использовать файлы переводов.

react-i18next – одна из наиболее популярных библиотек для переводов, поддерживает TypeScript и популярные фреймворки.

https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/

Не наступил ли у React момент переписывания Angular.js на Angular?

Обзор нового подхода к разработке на React с помощью Server Components. При использовании серверных компонентов меняется подход к разработке. Например, для получения данных вместо useEffect и react-query нужно использовать fetch и асинхронные компоненты. При этом fetch – это улучшенная версия fetch от React с кэшированием и дедупликацией запросов.

Помимо react-query для разработки не доступны и другие популярные библиотеки, например, material-ui, styled-components, emotion. CSS-in-JS не будет работать в серверных компонентах.

Плюс React в том, что в проекте серверные компоненты можно использовать по желанию. Серверные компоненты хорошо подходят для сайтов, где важна SEO оптимизация или есть сложные вычисления в компонентах, которые лучше делать на сервере.

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

Понимание SVG путей

В своем блоге Нанда Шахрасяд опубликовала гайд по использованию атрибута d в SVG путях.

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

В гайде разобраны абсолютные и относительные команды, курсоры, как рисовать линии и закрывать путь, про кривые Безье и дуги.

Во всех темах есть интерактивные примеры и самостоятельные задания на практику.

https://www.nan.fyi/noscript-paths

Галерея D3.js графиков на React

React Graph Gallery – примеры графиков с использованием D3.js и React. Каждый пример разобран по шагам и сопровождается объяснением использования API. Для анимаций в некоторых примерах используется react-spring.

Хорошая подборка наиболее популярных типов графиков, которые можно самостоятельно кастомизировать, используя D3.js.

https://www.react-graph-gallery.com/

Демистификация RSC с NextJS 13 App Router

Туториал, объясняющий как работает React Server Components в NextJS. Туториал рассчитан на последовательное прочтение глав, начиная от базовых вещей и заканчивая более продвинутым материалом. В туториале объясняется что такое RSC, как он интегрируется с клиентскими компонентами, почему может возникнуть ошибка гидратации и т.д.

Сам сайт туториал сделан упрощенно специально. Автор предлагает склонировать репозиторий с туториалом и проходить его локально, изучая RSC на практике.

https://demystifying-rsc.vercel.app/

MDX Editor – редактор markdown разметки

Автор библиотеки react-virtuoso, Петьо Иванов, представил библиотеку MDX Editor – редактор markdown разметки. Особенность этого markdown редактора в том, что он поддерживает WYSIWYG режим. Кроме этого редактор поддерживает:

- Блоки кода с предварительным просмотром с помощью Sandpack.
- Поддержка таблиц, изображений, кастомизации тулбара.
- Возможность отображения diff изменений.

https://mdxeditor.dev/

React Query и React Context

Одной из лучших особенностей React Query является то, что можно использовать запрос в любом месте дерева компонентов. Если запрос уже был выполнен и результат закэширован, то вернутся закэшированные данные. Если запрос еще не был выполнен, то React Query запросит данные и вернет их.

Доминик Дорфмайстер в своем блоге разобрал пример использования React Query вместе с React Context. Например, есть компонент <ProductTable>, который использует хук useCurrentUserQuery для получения информации о пользователе. Внутри есть компонент UserNameDisplay, который отображает имя пользователя и рендерится, только если пользователь существует. Если не использовать проп-дриллинг, а только React Query, то в компоненте UserNameDisplay переменная data из хука useCurrentUserQuery со стороны TypeScript будет обозначаться как потенциальная undefined. Но мы знаем, что она не undefined и хотим использовать ее без ненулевого оператора утверждения.

Для решения данной проблемы можно использовать контекст, в котором будут переложены значения из React Query. В этом случае при использовании контекста будет явно видно, что запрос о пользователе был выполнен и данные уже существуют.

const CurrentUserContext = React.CreateContext<User | null>(null)

export const useCurrentUserContext = () => {
  const currentUser = React.useContext(CurrentUserContext)
  if (!currentUser) {
    throw new Error('CurrentUserContext: No value provided')
  }

  return currentUser
}

export const CurrentUserContextProvider = ({
  children,
}) => {
  const currentUserQuery = useCurrentUserQuery()
  // --snip--
  return (
    <CurrentUserContext.Provider value={currentUserQuery.data}>
      {children}
    </CurrentUserContext.Provider>
  )
}

https://tkdodo.eu/blog/react-query-and-react-context

React95 – UI библиотека вдохновленная Windows 95

React95 – это полноценная UI библиотека в стилистике Windows 95. В ней есть все основные UI элементы, а что самое главное – она не заброшена, а развивается, судя по репозиторию в Github.

Помимо UI библиотеки есть отдельные проекты с React95, например тема для Gatsby в стиле Windows 95.

https://github.com/React95/React95
https://react95.github.io/React95/?path=/story/all--all

Кастомный хук для переходов без мерцаний

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

Для решения данной проблемы автор написал кастомный хук useDataTransition. Верхнеуровнево нужно предотвратить дочернему компоненту видеть новые данные до тех пор, пока не завершится переход или не истечет время ожидания.

export function useDataTransition<T>(
  real: T,
  inTransition: boolean,
  timeout: number
) {
  const [timeExpired, setTimeExpired] = useState(false)
  const cache = useRef(real)

  useEffect(() => {
    if (!inTransition) cache.current = real
  }, [inTransition, real])

  useEffect(() => {
    let id: number
    if (inTransition) {
      id = setTimeout(() => setTimeExpired(true), timeout)
    } else {
      setTimeExpired(false)
    }
    return () => clearTimeout(id)
  }, [inTransition, timeout])

  if (inTransition && !timeExpired) return cache.current
  else return real
}

https://www.jameskerr.blog/posts/use-data-transition/

Vaul – базовый drawer компонент

Под капотом компонент использует примитив Dialog от UI библиотеки Radix. На странице в github есть несколько примеров использования.

import { Drawer } from 'vaul';

function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <p>Content</p>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

https://vaul.emilkowal.ski/

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

Подкаст для тех, кто только начинает свой захватывающий путь в 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