前端周热点121: Next.js, experimental_cache, CSS-in-JS, Qwikify, Typesafety, 3D
大家好！
现在是会议季：ViteConf的重播已经开始，React Advanced刚刚结束，还有更多的会议即将到来。
Next.js大会在几个小时后开始。我们可能会得到Next.js 13的公告，以及嵌套式布局和其他一些以Turbo🤭开头的超级酷的东西。我们下周再讨论这个问题吧。
不要错过William Candillon的React-Native视频第五季，该季今天开始。
我上个月与PodRocket录制了一集关于Docusaurus 2.0的播客。完全忘了提了😅我想在未来做更多的播客节目，所以请邀请我吧!
⚛️ React
Why We're Breaking Up with CSS-in-JS
为什么我们要与CSS-in-JS分手？
Sam是Emotion的维护者，它是最受欢迎的CSS-in-JS库之一。他解释了CSS-in-JS的优点和缺点，重点是运行时库的问题。对于他的公司Spot来说，序列化样式的成本太高了。他们用Sass模块（CSS模块+Sass）取代了Emotion，并建立了一个CSS实用系统。在Docusaurus上，我们使用CSS模块，我确认它是一个很好的无运行时和相对简单的替代方案。DX没有那么好，但还是相当可以接受。
这篇文章引发了许多有趣的讨论。人们已经知道，带有运行时的CSS-in-JS库会导致性能问题。Dan Abramov证实了这一点，并且不希望在新的React doc网站上使用任何运行时。Ryan Florence提到了Chakra的性能问题，它使用了Emotion。
Tailwind仍然是一个不错的选择。对我来说，它可以被归入CSS-in-JS无运行时类别，特别是在React环境中，Tailwind的样式是通过JSX完成的。有些人质疑它的可维护性，但在实践中它运行得很好。
Qwik是一个创新的SPA框架，避免了与客户端水化有关的性能问题。它现在可以通过qwikify$()函数与React集成，以包装任何现有的React组件。客户端：指令（受Astro启发）允许控制React组件何时被水化，并具有很大的颗粒度。该演示将Material UI整合到Qwik应用中。也请看这个视频。我认为这是一个很好的解决方案，可以避免对这个新的框架进行全盘否定，而逐步尝试。我们还可以保留React的跨平台属性，同时采用Qwik来提高网络上的性能。
Kent C. Dodds解释了具有端到端类型安全的兴趣，从数据库到用户界面，通过不同的边界：网络、本地存储、数据库......。他谈到了验证（模式、类型保护）、类型生成（Prisma）和约定（Remix）。他解释了如何通过Remix实现这种体验，这要归功于推理：使用typeof比使用as更好。
Building an interactive WebGL experience in Next.js
Vercel解释了他们如何基于React-Three-Fiber为Next.js会议创造了一个令人印象深刻的沉浸式注册体验。如果没有3D/WebGL/Three.js的经验，理解起来还是很复杂的，但连续几步的解构很有意思，让人了解到做创意开发的思维方式。
- 👀 React Cache API Pull-Request: exposes a new
React.experimental_cacheAPI - 📖 New beta doc - cloneElement
- 📦 Vitest Preview: permits to visually debug Vitest tests. Little brother of Jest Preview.
- 📦 Outstatic - A static CMS for Next.js: new Git-based CMS that integrates nicely with Next.js. Simple user-friendly editor with the ability to upload images.
- 📜 Netlify - Background and Scheduled API Routes for Next.js: Netlify using its background functions to call Next.js API based on cron expressions.
- 📜 Cloudflare Pages support for Next.js Edge Runtime: Cloudflare now supports Next.js, only via the
experimental-edgeruntime that can run on Cloudflare Workers (unlike the Node.js runtime). Their solution is based on Vercel Build Output API, which seems to pave the way for better portability of edge-first frameworks between different clouds. - 📜 Microsoft - Extending Next.js support in Azure Static Web Apps: Azure will now support Next.js SSR (previously: only SSG).
- 📜 Persist inputs after a form submit in Remix: proposes a progressive enhancement solution to keep the values of a form after a submission. 2 solutions: return the values in the Remix action or use the flash session.
- 📜 Currying Layout Component Patterns in Next.js: suggest to parametrize the
getLayoutof Next.js to create Layout variants without leading to unmount/remount. Nice trick today, might become less relevant with the upcoming nested layouts support. - 📜 Throwing vs. Returning responses in Remix
- 📜 Lessons learned from moving to Recoil.js
- 📜 Separate API Layers In React Apps
- 🎥 Is the new React use hook a footgun?
- 🎥 React Advanced London 2022 - Day 1
- 🧵 Lottie vs Rive: Lottie is quite popular in the React ecosystem but its competitor Rive looks much more performant at runtime.
- 🐦 Zustand code in a tweet
- 🔗 New website for Storybook
📱 React-Native
- 🎥 Headspace Player - “Can it be done in React Native?”: season 5 just started today 🤗
- 🤫 Some rumors going around about Expo SDK 47: a promising SDK!
- 🗣 The new architecture is here… what now? 3.0: React Advanced talk slides from Lorenzo (Microsoft).
- 📈 React-Native performance brenchmarks: Alexandre does daily benchmarks and compares the performance of the old VS the new architecture on various scenarios.
- 📖 Reassure documentation: Reassure has a brand new Docusaurus doc site 🤗
- 📖 Expo Docs Updates - new Flipper plugin integration guide
- 📦 create-react-native-library 0.25: Kotlin Turbo module template
- 📦 Expo Router 0.0.31
- 📦 Expo Router 0.0.33
- 📦 Realm JavaScript v11 - Hermes Support, Realm React, Flipper, and Much More
- 🎙️ RNR 249 - A Redux Maintainer’s Thoughts on RTK vs MST
🔀 Other
- Let’s talk about web components: Brad Frost关于Web Components的有趣阅读，它不一定与React不兼容，但可以补充它（例如：React应用中的设计系统）。目前的困难（SSR）最终会被克服。
- Replit App: new app to code on your phone (made with Expo). There are templates to code in Next.js.
- Introducing Node.js 19 - Note: Node.js 18 enters LTS today!
- Introducing Stately Studio 1.0: XState state machine editor
- Vite 4 plans: upgrade to Rollup 3, es2020 compat...
- ViteConf 2022 replay
- Turborepo 1.6 - Use Turborepo in non-monorepos
- Solid 1.6
- Futuristic CSS
- Is There Too Much CSS Now?
- npm bin script confusion: Abusing ‘bin’ to hijack ‘node’ command
- Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries
- Tailwind CSS v3.2: revisiting my “feature creep” warning
- Can I DevTools - Compare the features of browsers DevTools.
- Vercel - Regional Edge Functions
- Deno - Which serverless edge platform has the fastest git deployments?
- Cloudflare Workers and micro-frontends: made for one another
- Blink: Intent to Ship: CSS Color Module Level 4 + color-mix()
- Release Notes for Safari Technology Preview 156
- WebKit Features in Safari 16.1
- JavaScript metaprogramming with the 2022-03 decorators API
🧑💻 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.