Всем привет!

На этой неделе много отличных статей, в частности самый первый прагматичный отзыв об использовании серверных компонентов на Shopify.

Информационный бюллетень задержался на этой неделе, потому что я пытаюсь создать для него целевую страницу: cf.thisweekinreact.com. Я использую совершенно новый стек (Remix, Tailwind, Cloudflare Pages), но у меня есть некоторые проблемы с SSL и Cloudflare отказывается взаимодействовать с Revue API 😅.

Я также использую больше эмодзи для «категоризации» ссылок. Пожалуйста, дайте мне знать, если вы найдете это полезным 🤷‍♂️?

🙏 Поддержите новостную рассылку🙏:

Реагировать

Shopify: рекомендации по работе с серверными компонентами React

Отзыв Кэтрин об использовании серверных компонентов в Shopify, которые она научилась использовать с помощью их нового фреймворка Hydrogen. Без передового опыта вы можете не использовать эту новую функцию React должным образом и в конечном итоге получить пакет больше, чем мог бы быть.

Она советует использовать Shared Components по умолчанию, вместо Client Components (то, что мы используем сегодня). Для интерактивности извлеките несколько клиентских компонентов с максимальной степенью детализации. Затем попробуйте преобразовать остальные в серверные компоненты, если это возможно. Шаблоны композиции (использование children), которые мы иногда используем для оптимизации, также могут использоваться для чередования компонентов разных типов.

Она предлагает реальное дерево решений, которое иллюстрирует двумя примерами: подписка на рассылку новостей и часто задаваемые вопросы о продукте.

Также было опубликовано руководство Shopify с использованием серверных компонентов: Быстрая разработка с помощью Hydrogen: Создание страницы продукта

Как писать эффективные приложения React с помощью Context

Надя объясняет, как можно оптимизировать рендеринг в сложной форме React, используя контекст React. Во-первых, вам нужно разделить на 2 контекста и хуки useFormData() и useFormAPI(). Не забудьте правильно запомнить объект api. В конечном итоге мы можем разделить состояние на несколько более мелких контекстов.

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

«Лучший способ управления иконками в React.js»

Есть много способов использовать иконки в React, каждый со своими компромиссами.

.svg файлы не могут быть оформлены в CSS. Компоненты React, которые отображают SVG (также относится к SVGR), удобны, но они встраивают разметку SVG в вывод HTML и утяжеляют страницу. По моему опыту, мы очень быстро видим эту проблему на статических страницах (или SSR), которые используют один и тот же значок много раз.

Бен предлагает отличную, но менее известную альтернативу: использование спрайтов SVG.

Дополнительно:

💸 Спонсоры

Stream: мощный чат и каналы для React и React-Native

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

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

Stream предоставляет надежные клиентские SDK для популярных фреймворков, таких как React, React-Native, Flutter, Android, Angular, Compose, Unreal и iOS. Он также поддерживает управляемый рабочий процесс Expo.

Разблокируйте возможности, функции и компоненты пользовательского интерфейса корпоративного уровня совершенно бесплатно для своего стартапа или побочного проекта с Учетной записью Maker.

React-Native

Партнеры

  • Запустите React Native: узнайте все о жестах и ​​анимации с Уильямом Кандиллоном
  • React-Native Weekly: будьте в курсе основных обновлений React-Native
  • TypeScript Weekly: лучшие ссылки на TypeScript каждую неделю прямо в вашем почтовом ящике.
  • ES.next News: узнайте о последних новостях JavaScript и кроссплатформенных инструментах.
  • Еженедельник Tailwind: все о Tailwind CSS, новый выпуск каждую субботу
  • G2i: предварительно проверенные удаленные разработчики React и React-Native, которым вы можете доверять на условиях контракта или на постоянной основе.
  • Infinite Red: американские специалисты React-Native воплощают вашу идею в жизнь
  • Software Mansion: соавторы React Native и технологическое ядро ​​многих технологических компаний.

Другой

Список всех веб-API в Deno

Лука (участник Deno) исчерпывающе упоминает все веб-API, поддерживаемые Deno. Неудивительно, что это хорошая платформа для развертывания приложений Remix.

Вероятно, это ответ на объявленные на прошлой неделе новые веб-API для Node.js 18. Также читайте: fetch() в ядре Node.js: почему вас это должно волновать.

Неизменяемость не бесплатна

Забавная история в бэкэнд-контексте, но в значительной степени применимая к приложениям React. Использование FP и неизменяемости привело к плохой производительности, связанной с копированием массива и алгоритмом O(n2). Возвращение к изменяемому коду значительно повысило производительность.

Примечание. Также можно повысить производительность за счет неизменности, используя векторные попытки и совместное использование структур, которые используются внутри таких библиотек, как ImmutableJS.

Запланированные функции Netlify

Quirrel (бессерверные задания cron SaaS) и его создатель Саймон (см. его пост) присоединяются к Netlify, которая представила новую функцию запланированных функций в бета-версии.

Такой функции явно не хватает в текущей бессерверной среде. Обратите внимание, что Blitz (Саймон является соавтором) использует Blitz Toolkit для предоставления аналогичных услуг. Мы не удивились, увидев предложение Vercel 😏

Дополнительно: