На этой неделе в React # 137: извлечение кода, серверные компоненты, сигналы, компилятор Forget, Next.js,

Всем привет!

На этой неделе еще много материалов о сигналах, но настала очередь серверных компонентов взять на себя обсуждение!

Осталась одна неделя, чтобы отправить ваше предложение о выступлении в CFP React-Native-Connection (Париж — 1 июня).

💡 Проверьте эту рассылку в Твиттере — визуальный формат 🎨

Чтобы поддержать меня:

😘 Порекомендуйте рассылку своим друзьям: это действительно помогает!
💸 Поддержите рассылку или поддержите меня
🧵 Ретвитнуть последнюю ветку Твиттера
📨 Ответить на это письмо: обратная связь приветствуется

💡Подпишитесь на Эта неделя в ответе

⚛️ Реагировать

WTF — это извлечение кода

Мишко (Qwik) объясняет преимущества совместного размещения кода сервера/клиента в одном файле и ограничения текущей модели Next.js (извлечение экспорта): вы можете объявить только одну функцию getServerSideProps, и вы должны использовать ReturnType для ввести правильный тип данных в клиентский компонент. Извлечение функций и извлечение замыканий обеспечивают лучший опыт разработчика.

Эти методы еще не используются в мире React сегодня, но мы можем ожидать их скорого появления в наших фреймворках. Команда Qwik планирует отделить извлечение кода от фреймворка. Таннер Линсли сотрудничает с ними и уже использует этот тип извлечения в Bling, наборе инструментов, который должен стать основой будущей платформы TanStack Start.

Я думаю, что мы также можем включить React Server Components в категорию методов, позволяющих беспрепятственно смешивать серверный/клиентский код: нам лучше рассмотреть это решение при обсуждении текущих ограничений Next.js.

Компоненты сервера React

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

🧵 Дэн Абрамов — «Мне нужно начать собирать способы питча реактивных серверных компонентов»
🧵 Дэн Абрамов — «Спроси меня что-нибудь о компонентах React Server»
🧵 Дэн Абрамов — ui = client(server(data), state)
🧵 Рик Хэнлон — «они перемещают компоненты вашего контейнера на сервер»
🧵 Джош Комо о серверных компонентах
🧵 Эндрю Кларк о независимых от фреймворка и хорошо интегрированных инструментах
🐦 Бен Холмс — «Компоненты React Server и Astro — это как… одно и то же»
🐦 Дайши Като — «Вот как я помещаю RSC в клиентские компоненты»
🎥 React теперь является бэкэнд-фреймворком
🎥 Компоненты сервера React с Дэном Абрамовым, Джо Савоной и Кентом С. Доддсом: обсуждение в прямом эфире начнется совсем скоро, должно быть очень интересно.

Серверные компоненты также могут иметь неожиданные преимущества: уровень связи для потоков Electron или гибкий уровень данных для генераторов статических сайтов.

📜 React vs Signals: 10 лет спустя: не пропустите ответ Дэна Абрамова на эту статью Райана Карниато. Дэн не хочет, чтобы функция компонента React была настроена, как SolidJS: повторный запуск функции является добровольным.
📜 Доводы в пользу сигналов в JavaScript: Райан Карниато приводит несколько веских причин для использования сигналов с довольно интересными аргументами. Я также думаю, что вам не нужно менять организацию ваших компонентов из соображений производительности.
📜 Предстоящий компилятор React решает только часть проблемы: объясняет, почему компилятор React Forget не будет разрешать промежуточные повторные рендеры, в отличие от сигналов.
📜 Были ли хуки React ошибкой?: Джейк объясняет проблемы, связанные с хуками, и чем сигналы очень похожи на компоненты класса React.
📜 Инфраструктура, определяемая платформой: технический директор Vercel объясняет, как инфраструктура автоматически адаптируется к вашему коду, и использует Next.js в качестве примера.
📜 Отчет о производительности веб-фреймворка за 2023 год: Фред (Astro) проанализировал реальные данные о производительности, чтобы выявить тенденции того, как фреймворки влияют на производительность наших приложений. Мы находим показатели производительности для Astro, Gatsby, Remix и Next.js.
📜 Deno — вам не нужен этап сборки: объясняет сложность 4 этапов сборки Next.js (компиляция, минимизация, объединение, разделение кода). Предлагает альтернативу Fresh и его режим Just-In-Time.
📜 Распространенные ошибки новичков в React: отличная интерактивная статья Джоша Комо для начинающих.
📜 Список пожеланий для компилятора React: Майкл объясняет, что он хотел бы, чтобы компилятор React-Forget делал, иллюстрируя множество примеров до/после компиляции.
📜 Сравнение сигналов Preact и альтернатив React
📜 Фронтенд-тесты Sentry: переход с Enzyme на React Testing Library
📜 Бурение реквизита и композиция компонентов в React
🎨 Визуализация «Мышления в React»
🎥 Пересборка Jotai State Manager для React за 20 минут!
📦 preact-reconcilers: пакет для создания пользовательских рендереров Preact. Коди умеет запускать React-Three-Fiber + Preact.
📦 Remix 1.14: Горячая замена модуля + Горячая ревалидация данных.
📦 Signia — Масштабируемые сигналы для TypeScript: новая библиотека сигналов с привязкой к React.
📦 Поддержка Remix + Fastly: новый серверный адаптер для Remix
📦 Мантин 6.0
📦 Сборник рассказов-Докузавр

💡Подпишитесь на Эта неделя в React

📱 React-Native

👀 Устранение кода для демонстрации приложений React Native: предстоящая функция интерфейса командной строки Expo, которая сообщит вам, какой собственный код не используется в вашем приложении и может быть безопасно удален.
👀 React Native скоро станет монорепозиторием
📜 Я сделал JSON.parse() в 2 раза быстрее: Радек предлагает повысить производительность Hermes за счет использования очень быстрых библиотек C++ на основе SIMD-инструкций. Интересно читать, даже если вы не используете React-Native. Продолжающиеся обсуждения на Hermes PR.
📜 Десять главных причин перейти на Chain React
🔗 Автостопом по React Native: Оскар делится своей базой знаний React-Native. Много дополнительных тем, многие из которых связаны с JSI.
🎙️ РНР 261 — Что там с EAS?
🎥 Riveo Page Curl — «Можно ли это сделать в React Native?»
📦 React-Native-Graph 1.0: стабильная версия графовой библиотеки Margelo на базе Skia.
📦 Экспо Роутер 1.2
📦 React-Native-Replicache
📦 Обнаружение объектов VisionCamera в реальном времени с помощью TensorFlow Lite — демо

🧑‍💻 Вакансии

🧑‍💼 Passionfroot — Senior Full-stack Engineer (Remix) — €160k+, Берлин/удаленно

Миссия Passionfroot — расширять возможности независимых предприятий завтрашнего дня с помощью YouTube, подкастов, социальных сетей и информационных бюллетеней. Присоединяйтесь к нам в создании инструмента, который позволит создателям контента во всем мире создавать масштабируемый и устойчивый бизнес.

🧑‍💼 Callstack — старший разработчик React Native — полностью удаленный, 21–32 тыс. злотых нетто на B2B, ежемесячно

Хотите работать над самыми популярными приложениями в мире? Хотели бы вы стать соавтором технологии React Native? Присоединяйтесь к команде Callstack лидеров React и React Native. Посетите наш веб-сайт для получения более подробной информации. Мы с нетерпением ждем вашего приложения — покажите нам, что у вас есть!

🧑‍💼 G2i — 100 % удаленных React Native Jobs

У нас открыто несколько вакансий для разработчиков, ориентированных на React Native! Зарплата ~160к плюс бонус 10%. Вы должны иметь производственный опыт работы с RN и находиться в США. Напишите в директ @gabe_g2i, чтобы узнать больше, и не забудьте упомянуть об этой неделе в React.

💡 Как опубликовать предложение?