Всем привет!
На этой неделе много отличных статей, в частности самый первый прагматичный отзыв об использовании серверных компонентов на Shopify.
Информационный бюллетень задержался на этой неделе, потому что я пытаюсь создать для него целевую страницу: cf.thisweekinreact.com. Я использую совершенно новый стек (Remix, Tailwind, Cloudflare Pages), но у меня есть некоторые проблемы с SSL и Cloudflare отказывается взаимодействовать с Revue API 😅.
Я также использую больше эмодзи для «категоризации» ссылок. Пожалуйста, дайте мне знать, если вы найдете это полезным 🤷♂️?
🙏 Поддержите новостную рассылку🙏:
- 😘 Порекомендуйте его своим друзьям: это действительно помогает!
- 💸 Спонсируйте эту неделю в React
- 😍 Написать отзывы в Twitter
- 🧵 Ретвитнуть последнюю ветку Твиттера
- 📨 Ответить на это электронное письмо: обратная связь приветствуется
Реагировать
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.
Дополнительно:
- 📜 Как настроить React Native Web в проекте Remix: React-Native-Web хорошо интегрируется с Remix, как и любая библиотека CSS-in-JS.
- 📜 Offline React Query: Доминик представляет ограничения React-Query 3 для решения проблем в автономном режиме или сети, а также представляет новую версию 4 (в альфа-версии), которая может помочь вам создавать более качественные приложения для автономного использования.
- 📜 Визуализация 3D в React стала проще благодаря react-three-fiber: хорошее введение в Three.js и R3f.
- 📖 Partytown: новый сайт документации + страницы для интеграции с Next.js и Remix
- 🐦 «Простой трюк с композицией, позволяющий избежать повторного рендеринга компонента»: тот же метод композиции, что и для серверных компонентов 😏 (первая статья)
- 📦 Гэтсби 4.7: с новой опцией:
trailingSlash
- 📦 Ерба: монорепозиторий Electron Turborepo с Next.js, Typescript, Vite…
- 📦 Lamina: послойный шейдерный материал для Three.js + React-Three-Fiber
- 🔗 Демонстрация маршрутизации ремиксов
- 🔗 Remix Bug Report Test: Remix предлагает сообщать об ошибках фреймворка, создавая неудачные тесты 😏
- 🔗 remix.guide: что-то вроде HackerNews для контента Remix
💸 Спонсоры
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
- 🧵 Эндрю Кларк: Я не могу это доказать, но подозреваю, что если бы кто-то создал Next.js/Remix/etc для React Native (то есть единую кодовую базу для клиента и сервера), он бы заработал триллион долларов»: Я не знаю, что именно имеет в виду Эндрю, но это очень интересная тема для обсуждения! Меня особенно интересует использование серверных компонентов в React-Native (или, по крайней мере, некоторых серверных пользовательских интерфейсов) и совмещение требований к данным с экранами (например, Remix/
loader
, Next.js/getServerProps
, но для React-Navigation) - 🧵 Сатьяджит Саху: «Вижу, как многие люди сравнивают React Navigation с React Router…»
- 📜 Отображение списка в React Native: метод карты или компонент FlatList
- 📜 Expo EAS + LogRocket: безграничные возможности для ваших выставочных приложений
- 📖 React-Navigation — Organizing Types: новый документ
- 📦 React-Native 0.68.0-rc.1: новая ветка и RC уже доступны, так как цикл релиза становится быстрее
- 📦 expo-e2e-demo: демонстрация запуска тестов Detox e2e в приложении Expo с действиями GitHub.
- 📦 React Location on React Native POC: объединяет библиотеку React-Location с React-Native, чтобы включить шаблон рендеринга по мере извлечения.
- 🐦 «Мы пересобрали документы NativeBase с помощью Nativebase»
- 👥 App.js Conf 2022: 8–10 июня Краков (CFP). У меня все еще есть билет на 2020 год, так что, надеюсь, вы меня там увидите 😉
- 👥 React Native London, февраль 2022 г.: встреча (прямая трансляция) с Куином Юнгом (Expo), рассказывающая о новых обновлениях EAS.
- 🎥 Безграничная разработка приложений с Expo и 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 и технологическое ядро многих технологических компаний.
Другой
Лука (участник 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 😏
Дополнительно:
- Почему эффективная гидратация в JavaScript-фреймворках так сложна: Райан Карниато (Solid) представляет компромиссы между различными стратегиями гидратации фронтенд-приложений, включая Remix, Server Components, Astro, Qwik…
- Публичная бета-версия Stately Editor: инструмент с низким кодом для визуального создания логики приложения на основе конечных автоматов и диаграмм состояний. Создатель XState.
- Вавилон 7.17.0: включает новые предложения декораторов (стадия 2)
- @tsconfig/strictest: потому что строгий режим недостаточно строгий
- Word с типами TypeScript 😝
- Отслеживание экспорта из пакетов в монорепозитории: использование моментальных снимков Jest +
codeowners
для отслеживания изменений в общедоступной поверхности API библиотек 🤔 - Структурирование сборника рассказов
- GitHub: Новые репозитории только для спонсоров, настраиваемые суммы и многое другое
- Новая опция
curl --json
- «Никто в Facebook не работал над Jest годами»: какая-то драма Hacker News
- Vercel — Эволюция Интернета: ретроспектива 2021 года
- Флаттер 2.10
- Анонс Flutter для Windows
- Push-уведомления, WebXR и улучшенная поддержка PWA в iOS
- Взгляд TypeScript на Go: появление кода в 2021 году
- ДизайнСистем.инструменты
- Vue 3 как новый стандарт по умолчанию
- Chrome 99: каскадные слои CSS, новый инструмент выбора элементов ввода и многое другое
- Электрон 17
- «Знаете ли вы, что вам, вероятно, следует использовать
interface
, а неtype
, где это возможно?» - Stackshare: 100+ лучших инструментов для разработчиков 2021 года
- Используйте потоки для создания высокопроизводительных приложений Node.js
- Использование fetch(), AbortSignal и setTimeout() для применения механики повторных попыток в JavaScript
- Да, я могу подключиться к БД в CSS
- Пользовательский API подсветки
- Wolvic: AR/VR браузер
- Когда следует использовать Module Federation и как?