11-24 02:02 阅读 58

前端周热点122: Next.js 13, Turbopack, Remixing Shopify, React-Three-Fiber Journey

大家好！

多么伟大的一周，充满了曲折和变化。

Next.js 13让我们有机会接触到最新的React创新技术
Turbopack可能取代Webpack
Shopify收购了Remix
Gatsby将发布其v5，并使其数据层不可知
Expo的SDK 47真的很有前途

另外，不要错过Three.js之旅课程的重大更新，其中包括React-Three-Fiber模块。我得到了促销代码 "TWIR"来推出。这将是第一个在我以后创建的 "交易 "页面上出现的课程。

我正在测试一个新的格式! 这比平时多花了很多时间????。如果你想支持我再做一次，我将非常感谢你的转发、推荐或推荐给朋友????通讯越大，我就越有机会改进它。

???? Check this newsletter on Twitter - visual format ????

⚛️ React

Next.js 13 - Dynamic Without Limits

Next.js的这个新版本在测试版中引入了新的路由系统和嵌套式布局。升级是增量的，可选的：你需要将你的Next.js页面移到一个新的app/文件夹。这会启用新的功能，如React服务器组件、支持Edge + Node.js运行时的SSr流式渲染。

⚡️ 其他重大改进。

Turbopack：一个新的Rust捆绑器，处于alpha状态（详情如下）。
next/image：新的更轻、更灵活、更快速的图像组件，避免了布局的偏移。
@next/font：有效地自我托管字体，避免布局转移（参见上周介绍的Fontaine

???? Comments:

Dan Abramov 对这个版本感到兴奋，它为React的目标架构提供了具体的实现。
Andrew Clark 解释了他有争议的 "Next.js 13才是真正的React 18版本 "的说法
Matt Kane t认为React与Next.js的关系过于紧密
Zach Leatherman 提到Next.js 13的Hello World仍然发送了太多的JavaScript。

???? Useful links:

???? Keynote Next.js Conf
???? Fireship - Next.js 13... this changes everything
???? Next.js Upgrade Guide - Visual thread

Introducing Turbopack: Rust-based successor to Webpack

Vercel聘请了Tobias Koppers（Webpack的创造者），负责Turbopack的工作，这是一个新的Rust中的快速捆绑器。目前，该工具还处于alpha阶段，主要支持Next.js，其功能也很有限。对其他框架（Svelte、Vue...）和功能（Tailwind...）的支持将在以后加入。

Turbopack针对开发者体验进行了优化，Vercel宣布，该工具比Webpack快700倍，比Vite快20倍。它基于Turbo，这是一个Rust记忆化框架，能够独立缓存每个函数的结果。Vercel还发表了一篇[文章]（turbo.build/blog/turbop…

???? Comments:

Jared Palmer 解释了缓存的作用，Turborepo/Turbopack可以合并。
Evan You 对基准进行了质疑，并创建了一个 Is Turbopack really 10x Faster than Vite? 页面。Vite默认不使用SWC，而公布的基准测试则依赖于Babel的使用。Vite可以用Turbopack取代esbuild/Rollup。
Sebastian McKenzie在这篇文章中，我们注意到冷启动时的性能提升相对较小（x4），可能是由于初始化缓存的开销所致。
Devon Govett 提到该架构与Parcel类似。
Amjad Masad 提到React-Native Metro捆绑器已经使用类似的缓存系统很长时间了。

Remix Joins Shopify to Push the Web Forward

Remix刚刚加入Shopify，并将在他们的Hydrogen电子商务元框架以及其他项目中使用。Hydrogen 2.0将用Remix APIs取代React Server Components的使用他们发现Remix模型比服务器组件更容易理解，也更强大。

对我来说，这是一次伟大的收购。Shopify可以专注于Hydrogen的核心业务而不是基础设施问题，并从Remix的逐步发展中获益，这对电子商务来说尤其重要。更不用说Remix是与React脱钩的，Shopify正在开发Hydrogen UI无关的库。Shopify应该能够接触到来自不同框架（Vue、Svelte......）的开发者，而不必强依赖React，同时需要一个共享的基础设施。

???? Comments:

Josh Larson 他在Hydrogen v1上工作，列出了遇到的挑战，并没有质疑React服务器组件的好处，这些组件在Next.js 13中比Hydrogen v1实现得更好。
Ryan Florence 提到Shopify并不反对服务器组件，而且它们可能会在以后的Remix中重新引入。
Ryan Florence 解释了这次收购将如何使他们完全专注于Remix。
Guillermo Rauch 他说，前端应该与无头的后端解耦。Anthony Frehner回答说，Next.js支持应该会出现在Hydrogen UI中。

???? Useful links:

???? The Hydrogen Roadmap has been updated with many more technical details.
???? Remixing Shopify: the Remix team announcement, which will remain an independent open-source React framework decoupled from e-commerce uses.
???? Fireship - When your JavaScript framework gets acquired

Three.js Journey is going React

Three.js Journey是学习如何使用Three.js在Web上创建3D场景的参考课程。布鲁诺·西蒙刚刚发布了基于React-Three-Fiber的24小时附加视频，它为Three.js带来了一个声明性模型。3D即将进入我们的应用程序：如果你想知道如何做表单和商业应用程序以外的其他事情，这是一个很好的时机。我也在这么做并一点都不后悔

布鲁诺将在未来10天为我们提供-30%(或66美元)的促销代码“TWIR”。这不是赞助的：我发现这个课程真的很酷，而且更新使它更适合Reaction开发人员。

我计划很快创建一个交易页面与其他有趣的课程(我不会赚到任何东西)。请不要犹豫地告诉我你对哪些课程最感兴趣，这样我就可以联系他们的作者了！

???? React core - Add fetch Instrumentation to Dedupe Fetches: monkey-patching fetch is controversial.
???? RFC - TypeScript + React - Allow anything to be rendered by function components
???? Full Stack Components: Kent C. Dodds Remix允许创建真正的全栈组件，将前端和后端代码封装在同一文件中。Remix的全栈模式不仅限于路由，还可以通过useFetcher挂钩用于微交互：像：按钮，AutoComplete。
???? Optimization techniques for Rive animations in React apps: Rive是一个比Lottie更高效的动画库。Alex解释了如何在Gatsby或Next.js应用程序中优化Rive动画的加载：WASM运行时的自托管、webpack加载程序、预加载、延迟加载...。了解这一点的好技巧也可以在其他环境中使用。
???? Deploy Next.js 13 on Netlify Today: Netlify brings support for the latest Next.js 13 innovations.
???? Code coverage with Storybook test runner: summarizes well the test features of Storybook. It is now possible to generate a coverage report thanks to the Istanbul instrumentation. The reporting format is configurable.
???? The Gatsby Slice API: High Precision Incremental Builds: explains how the new Gatsby 5 API works to improve build performance when a layout component (header, footer) is updated.
???? Seeding the Query Cache: describes a possible waterfall problem with React-Query when using Suspense. Suggests using prefetchQuery before component mount to optimize loading as much as possible. Gives an idea of how React-Query intends to integrate with the latest React innovations.
???? How to Build a Blog with Fresh: Fresh is the Preact framework based on Deno
???? Gatsby 5: the new version should be released today! The Gatsby Valhalla Content Hub should make it possible to use the GraphQL data-layer of Gatsby in other frameworks!
???? Docusaurus 2.2: support of Mermaid diagrams
???? Asta: new resumable SSR framework, inspired by Qwik and Marko, with a React-like syntax. To be continued!
???? TanStack Query 4.14: new ESLint plugin
???? Remix Forms 1.0
???? Downshift 7.0

???? React-Native

Expo SDK 47 beta is now available

新的Expo SDK有一周的测试版。一些头条新闻：

Upgrades to React-Native 0.70.4 and React 18.1
Hermes available in Expo Go on iOS. Hermes will be the default JS engine from SDK 48.
Fabric support in many Expo modules
Expo Modules API 1.0 that makes it easy to create native Fabric modules in Swift/Kotlin
Filesystem routing for React-Navigation in beta. The last release v0.0.34 is compatible with SDK 47. 下周我们会有更多的细节，但这显然是一个很大的版本，有一些非常好的新功能！

???? Andrew Clark: "I would love to see Expo adopt Server Components one day. We should really have Server Components for React-Native...": I've been interested in the use of Server Components with React-Native for a while, and I'm very happy that it's finally "officially" said publicly!
???? React-Native-Gesture-Handler 2.8
???? React-Native-Fast-Shadow
???? React-Native Android improves build speed + --active-arch-only flag
???? Stripe Identity: ID Authentication Made Simple
???? React Native - Guide to Integration with Existing Apps - Android
???? React Native - Guide to Integration with Existing Apps - iOS
????️ The React Native Show #17 - React Native New Architecture
????️ The React Native Show Podcast: Coffee Talk #6 - Webpack & Callstack experts’ take on Next.js Conf
????️ RNR 250 - React Native Firebase
???? The React Native Community Map
???? Wix Engineering - Now An Official React Native Partner

????‍???? Jobs

????‍???? Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

????‍???? G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

???? How to publish an offer?

???? Other

Babel 7.20: Deno target and TS 4.9 support with satisfies!
Announcing TypeScript 4.9 RC: with satisfies!
Node v18.12.0 (LTS): first v18 LTS release
Open-sourcing the new TypeScript type checker: l'auteur de swc open-source son type-checker stc qui sera finalement écrit en Rust
npm v9.0.0
Vercel acquires Splitbee to expand first-party analytics
Deno 1.27: Major IDE Improvements
Chrome 108 beta
Vite 3.2
Experimental Dev Server Persistent Caching for Vite
Two JavaScripts

作者：金虹桥程序员
链接：https://juejin.cn/post/7169411906443149343