This Week In React #104: Zag, Next.js, Remix, Ultra, ClickToComponent, Tilg, Component Party, Expo, Skia, TypeScript…

Привет всем!

На этой неделе много ссылок!

Рассылка запаздывает из-за технических проблем в Twitter. Надеюсь, я смог опубликовать его сейчас. Буду очень признателен за ретвит 🙏 проблемы не способствовали хорошему началу рассылки.

Отличные новости для Next.js: только что было объявлено об обновлении роутера!

React-Native также в центре внимания на этой неделе: 0.69 в RC, Expo SDK 45 и React-Native-Skia 👌.

⚠️ В ближайшие 2 недели выпуска не будет. Следующий выпуск будет 24 мая.

🙏 Поддержите информационный бюллетень:

  • 😘 Порекомендуйте его своим друзьям: это действительно помогает!
  • 💸 Спонсируйте эту неделю в React
  • 😍 Пишите отзывы в Twitter
  • 🧵 Ретвитните последнюю тему в Twitter
  • 📨 Ответить на это письмо: отзывы приветствуются
  • 👥 Следить на LinkedIn

Если вам нравится эта рассылка, подпишитесь на нее там:

  • 🇬🇧 ThisWeekInReact.com
  • 🇫🇷 ReactHebdo.fr


Содержание
  1. React
  2. React-Native
  3. Другие

React

Click To Component

Новая очень практичная либа, которая позволяет легко открыть исходный файл React компонента, простым Option + Click на интерфейсе. Поддерживает CRA, Next.js, Vite… Работает только с VS Code, но могут поддерживаться и другие IDE, например Intellij.

Zag

Zag — это коллекция примитивных компонентов, основанных на машинах состояний. Это позволяет отделить логику от фреймворка и предложить привязку для React, Vue, Solid… Это новое решение позволит легче адаптировать React Chakra UI lib к другим фреймворкам, разделяя при этом гораздо больше кода поведения.

Почему я не скучаю по React: история об использовании платформы

Джек работал в Google над Chrome DevTools в течение 2 лет. С тех пор он больше не использует React и делится отзывами о своем переходе на стандартизированные веб-интерфейсы API, не требующие зависимостей: формы, пользовательские элементы…

Переход с Next на Remix

Кристофер ради интереса перевел свой личный сайт с Next.js на Remix. Он дает свой отзыв и делится тем, как это повлияло на оценку Lighthouse. Он перечисляет основные изменения, которые ему пришлось сделать: интеграция Chakra, компонент Link, маршрутизация, выборка данных, метаданные…

Как разработчики HashiCorp ускоряют итерации с помощью ISR

Отзыв об использовании Incremental Static Regeneration из Next.js для сокращения времени сборки сайтов документации в HashiCorp. Новый режим ISR «по требованию» позволяет аннулировать кэш Next.js и, следовательно, давать немедленную обратную связь при публикации обновления.

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

  • 💡 Обновление Next.js Router: Next.js получит вложенные маршруты и новый дизайн для работы с серверными компонентами и функциями React 18.
  • 🧑🎨 3D-дизайн Spline теперь можно экспортировать в React-Three-Fiber: это позволит вам сделать ваши сцены интерактивными и добавить физику
  • 🔗 Component Party: сайт, позволяющий легко сравнить синтаксис React с другими фреймворками (Vue, Svelte, Solid…) на различных сценариях использования
  • 🏢 Convex: новая бессерверная база данных реального времени с привязкой к React. Они только что привлекли $27 млн. и хорошо интегрируются с Netlify или Vercel.
  • 🎥 The Story of Concurrent React: 10 минут об истории привязки Concurrent React, с 2016 года до сегодняшнего дня. Отличная исследовательская работа
  • 📦 Ultra 1.0: современный мета-фреймворк React для Deno только что анонсировал свой v1
  • 📦 React 18.1: в основном исправления ошибок
  • 📦 useTilg: удобный хук React для отладки
  • 📦 zustand v4.0.0-rc.1
  • 📦 Gatsby 4.13
  • 🐦 Использование useReducer для управления односторонним булевым состоянием
  • 📜 Создание терминальной Wordle-игры с помощью React Ink
  • 📜 Управление React Monorepos с помощью Nx

React-Native

Expo SDK 45 beta теперь доступен

Новый SDK Expo стал доступен в бета-версии на неделю. Несколько классных новинок:

  • React-Native 0.68.1: Expo обновляется до последней версии, но пока без включения рендеринга Fabric
  • редизайн Expo Go, с лучшей интеграцией EAS Update и возможностью видеть/открывать ветки
  • несколько либ переведены на JSI и/или Expo Sweet Module API
  • совершенно новый expo CLI (бета-версия), который будет версионироваться и устанавливаться локально, а не глобально.
  • либы-обёртки Expo устарели: оригинальные нативные либы можно использовать через плагины конфигурации

React Native Skia — для нас, для вас и для удовольствия

Skia — это 2D-движок Google, и вы наверняка им пользуетесь: Chrome, Flutter, Android… Shopify поддерживает разработку React-Native-Skia, чтобы предоставить графические/2D примитивы, отсутствующие в React-Native, и не быть ограниченным при реализации сложного дизайна. Либ предлагает выразительный декларативный API, а также императивный низкоуровневый API, совместимый с Flutter, который может помочь с поддержкой веб-технологий через React-Native-Web и CanvasKit.

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

  • 📦 React-Native 0.69-rc.0: первая версия, основанная на React 18, с возможностью использования параллельных функций, если вы включите новую архитектуру!
  • 📦 React-Native-Graph: новая библиотека графов с анимацией, основанная на React-Native-Skia
  • 🎥 Charts with React-Native-Skia: последнее видео от William Candillon, связанное с вышеупомянутой библиотекой 😉
  • 🐦 Предварительный просмотр React-Native-WishList: Marc Rousavy работает над новой мощной виртуализированной либой списков, которая должна исправить недостатки существующих в плане производительности
  • 🎥 RN.live: Канал livestream Джамона Холмгрена.
  • 🎙️ RNR 233 — React 18 и будущее React Native
  • 📜 Использование RevenueCat с Expo’s Managed Workflow: показывает, как легко интегрировать нативную либу в Expo
  • 📜 Twitter переходит на Jetpack Compose: меня до сих пор восхищает тот факт, что Twitter использует React-Native в вебе, но не React-Native в мобильных устройствах 😄.
  • 📜 Apple готовится удалить почти 30% приложений в App Store: будьте осторожны, ваше старое приложение может оказаться неопубликованным 😅
  • 📜 Какова производительность вашего пользовательского устройства?
  • 📜 Эффективный способ использования PouchDB@7 на React Native в 2022 году

Другие

Переводчик ошибок TypeScript

Новый инструмент в процессе разработки, который переводит ваши ошибки TypeScript на человеческий язык, простой для понимания, с дополнительными пояснениями (источник). Он даже может интегрироваться в вашу IDE (расширение VS Code).

Поддержание TypeScript Type Guard в безопасности и актуальности

Поднимает проблему, с которой я никогда не сталкивался 😅: если у вас есть защита типов, основанная на атрибуте объекта, и вы добавляете второй атрибут, ваша защита типов становится устаревшей, но TypeScript все равно компилируется.

Дополнительные возможности:

  • Web Scraping via Javascript Runtime Heap Snapshots: оригинальная техника скраппинга, которая заключается в извлечении JS объектов прямо в память.
  • Node 16.15: экспериментальная поддержка fetch.
  • Lerna теперь официально мертвый проект. Проект официально не поддерживается, но есть альтернативы, такие как Nx и Turborepo
  • Свежий релиз Nx 14
  • Zaplib post-mortem: отзывы, еще раз доказывающие, что Rust и Wasm не всегда быстрее JavaScript
  • WebAssembly vs Javascript: «не используйте WebAssembly в первую очередь ради производительности»
  • Обнаружение компонентов пользовательского интерфейса с помощью TypeScript Compiler API
  • Неправильное использование функций утверждения TypeScript для развлечения и прибыли
  • SemVer для TS на практике
  • Сужение типов в TypeScript
  • google/wireit: модернизация ваших скриптов npm, чтобы сделать их умнее и эффективнее
  • Четыре эпохи фреймворков JavaScript

Оцените статью
Procodings.ru
Добавить комментарий