前端周热点124：FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix

大家好！

在经过短暂的几周后，React生态终于缓了口气，各种公告也逐渐放慢！

我们仍然有一些不错的文章在发表。Next.js的TypeScripts针对Next.js的插件看起来相当棒！

GitHub Universe会议已经结束。Guthub看起来准备在更多的场景中使用React，在一些可交互的文档中也可以使用实现MDX的Github Blocks.

💡 在Twitter上订阅期刊 - visual format 🎨

---

⚛️ React

Inside Framer's Magic Motion

一篇有趣生动的介绍Layout动画的可交互文章。它极大的解构了FLIP技术的，允许通过css transforms(position，scale)使这种转化表现的更好。我们一步步重现了Framer Motion的布局动画。

类似的主题，我推荐也可以阅读Frameer Motion动画布局概览.

Timeline of a React Component With Hooks（推荐阅读）

一篇含有可交互Demo的文章，展示了React组件的生命周期，包含hooks、refs和Dom 更新/渲染（移动端不能用）。还包括一个知识测验，有很多文章引用。

Next.js 13 TypeScript Plugin

Shu Ding正在开发一个TypeScript 语言服务插件（源码）,通过在Next.js和Server Components约定的基础上，包含文档、新的错误以及自动完成，大大改善了Next.js DX。这很好的弥补了TypeScript无法从ES Module导出类型的缺陷，也是框架作者强烈呼吁的功能。

Writing Performant CSS with vanilla-extract

一篇非常详尽介绍vanilla-extract的文章，这是Mark Dalgleish(CSS Modules的作者)开发的无运行时的CSS-in-JS库。还提到了它的原子CSS overlay Sprinkles。基于React的示例：重新实现了Tailwind UI组件。和Tailwind以及其它CSS-in-JS解决方案做了很多比较。它看起来很强大，实际上用起来并不简单，我们必须好好学习。

---

• 📖 React beta版本文档: class component API ref (WIP)
• 🐙 GitHub UI using React (Hacker News thread): GitHub似乎越来越多地使用React。他们也有一个React设计系统。 Primer React。即将推出的GitHub Blocks功能可以使README成为互动的，也是用MDX实现的。
• 📜 Fetching data in React: the case of lost Promises: 这是一篇图文并茂的交互式文章，介绍了在发出请求时可能出现的竞赛条件。给出了一些技术来避免它们。我也写了一篇关于这个问题的文章😜（这两篇文章都值得一读，很有互补性）。
• 📜 A Love Letter to React: Phoenix（Elixir框架）的创建者解释了他是如何受到React的启发而创建LiveView的：一个在服务器端渲染的HTML上添加互动性的解决方案。LiveView让我想起了Remix!
• 📜 Open Development for Remix: Remix希望该项目由社区驱动。一切都变得公开：roadmap/进程，以及在Youtube上进行的规划会议。
• 📜 Type-safe environment variables on both client and server with Remix: 有意思的解决方案是用Zod解析env变量，并将其中一些变量暴露给客户端，包括类型安全和自动完成。
• 📜 Chromatic - Interaction tests for user behavior: Storybook interaction tests are now integrated with Chromatic SaaS
• 📜 React Server vs Client components in Next.js 13
• 📜 What is a state manager
• 📜 A novel schema-first approach to building forms
• 📜 Creating fluffy trees with Three.js (part 1)
• 📊 I compared deploy speeds for Reflame, Vercel, Netlify, Cloudflare Pages on the same repo: the marketing around "instant deploy" is not always true.
• 💰 Remotion - We raised CHF 180k to simplify programmatic video!: I bring my modest contribution 🤭
• 🐦 Comparison between Next.js 12 and the Next.js 13 experimental app dir!
• 🗣 RemixConf 2023 CFP Open
• 📦 Fontpie: new CLI solution to avoid custom font layout shifts (see this demo to understand). It makes techniques used in next/font framework-agnostic.
• 📦 Remix-Vite: adds Hot Module Replacement support to Remix
• 📦 craco 7.0: allows to customize CRA - CRA v5 support
• 📦 Redwood 3.3
• 📦 Rockpack 3.0 - create-react-app on steroids + SSR

---

📱 React-Native

• 📜 Expo-router and remote code: 展示了如何使用react-native-wormhole和Expo Router来消费远程URL上的React-Native组件。这与拥有React-Native服务器组件的想法相当相关。
• 🧵 Expo Modules API thread: Tomasz Sapeta分享了一些关于在Swift/Kotlin中创建现代本地模块的新Expo API的有趣信息，包括一些未来的发展，如SwiftUI/Jetpack Compose支持。
• 📦 React-Native 0.70.6
• 📦 Moti 0.21
• 📦 JestNative v5.2 matchers - toHaveAccessibilityState()
• 🎙️ The React Native Show 18 - Module Federation
• 🎙️ RNR 252 - Ionic's React Native Portals with Josh Thomas

---

🔀 其它

• TypeScript 4.9: with satisfies!
• TypeScript satisfies operator: another example of using satisfies
• Qwik Showcase: great Lighthouse scores
• Introducing SolidStart: The SolidJS Framework: the SolidJS meta-framework SolidJS is now in beta. It takes some React ecosystem inspirations and bring some novel ideas. See also Fireship - A Solid Start
• Parcel 2.8: great improvements around bundling, perf, HMR, code splitting...
• Deno 1.28 - Featuring 1.3 Million New Modules: npm compatibility with security in mind. See also this video.
• The evolution of scalable CSS: nice retrospective of the evolution of CSS techniques, including CSS-in-JS popularized by React
• Why would anyone need JavaScript generator functions?
• Stylify - Write CSS Faster
• Everything new from GitHub Universe 2022
• Octoverse 2022 - The state of open source software
• Forking Chrome to turn HTML into SVG
• This week in stc, 1
• Change Array By Copy in Chromium
• ultrahtml 1.0
• Announcing Cypress Component Testing GA and Performance Improvements in Cypress 11
• GreenFrame - measure the carbon footprint of websites
• Doctolib - 10 lessons I learned owning on a Design System for 30+ Product Designers and 200+ Developers
• Node.js Security Best Practices

---