React
Remix vs Next.js
我们终于有了与Next.js的正式比较!
首先,你应该知道,Remix团队非常欣赏Vercel平台,尽管Next.js和Remix之间存在竞争。但他们说Remix显然更好😏而且有很好的论据和waterfalls来证明这一点。
这个比较是基于一个真实的电子商务应用,与Shopify的API集成,他们基本上分析了2个页面:一个具有相当静态内容的登陆页面和一个非常动态的搜索页面。所有这些都部署在Vercel和Fly上。
服务器渲染优势是一个很好的亮点:有时在服务器端渲染所有内容,而不是将两者混合在一起(正如Next.js似乎推荐的那样):静态外壳,以及在客户端获取的搜索结果。
Next.js更复杂,它的生命周期函数到处运行(服务器、浏览器等)。Remix更倾向于保持简单,只做动态渲染,但要做得好。通过依赖浏览器的本地函数,这也减少了客户端需要发送的JavaScript数量。
文章很长,不容易总结,读完后可以自己做决定。我还没有完全理解Remix,对于Shopify API宕机时的错误处理、安全性、Redis缓存的架构复杂性、缓存失效时应用的重新部署......总之,Jamstack有很多我们喜欢的,而且也不想失去的东西
总的来说,这真的让我想在一个非关键项目上尝试Remix:幸运的是,正好我需要为我的文章建立一个网站,刚好可以尝试下。
How React server components work: an in-depth guide
这是一篇非常有趣且相当技术性的关于服务器组件如何工作的文章。很多细节都是我到目前为止在其它地方都没见过的。特别解释了服务器端的React树是如何通过 "模块引用 "在JSON中序列化的,并提供了一些客户端/服务器通信的有效负载示例。
拓展阅读:
- What is a react component, anyways?: 关于究竟什么是React组件的有趣想法。不太容易描述,即使是官方文档也是如此。提供4个定义,其中一个是 "unite of update".
- Mastering the art of forms in React: Kolby认为使用受控输入不应该是自动的,他推荐React-Hook-Form + Zod来满足高级需求.
- Sneak peek into React 18 useDeferredValue hook: 允许在React中取消一些渲染工作的优先级,使紧急更新的速度更快
- Exploring React 18’s three new APIs: useId, useSyncExternalStore, useInsertionEffect
- How Redux DevTools broke Jira for 14 hours: 有趣的事后总结,与React没有多大关系
- Vercel Platforms Starter Kit: Vercel发布了一个基于Next.js的模板,供那些想要创建平台(多用户,每个用户一个域名)的人使用。给出了一些例子,比如Hashnode博客平台。
- Blitz pivot is confirmed: meta-framework将转化为Blitz Toolkit,这是一个与框架无关的工具包,应该可以很好地在其他框架之上工作(首先是Next.js), 与tRP的合作 是可能的.
- Custom Elements + React: Dan Abramov asks again for community feedback
- Storybook Addon Next
- Remix Conf: 24-25th May
- 🐦 Daishi Kato 解释了这些库的工作原理 : Zustand, Jotai, Valtio
- 🐦 Props drilling: context is not the only option
- 🎥 Remix Singles: new series of videos about Remix
- 🧵 Amazon dev: “SSR React wasn’t fast enough for us.”: 一位亚马逊员工解释了他们是如何优化网站的。不幸的是,关于React的细节不是很多.
- Deep dive into the new Suspense Server-side Rendering
- Type-safe routing in React with
fp-ts-routing(part 1)
React Native
Announcing React Native 0.67
这并不是最令人兴奋的发布点 😅 这篇文章主要谈了发布过程中的改进,应该更稳健和规范。这个过程在另外一篇文章中也被提及到
React Native - H2 2021 Recap
这是新架构推广的重要一步。再一次提醒我们,React-Native不仅仅是iOS+Android😏.注意:我们应该从微软那里得到一些关于MacOS和Windows平台的更新,因为他们正在追赶上游发布。
From Native to React Native to Flutter
这是一篇相当长但非常有趣的文章,它公平地讨论了Reaction-Native和Flutter遇到的各种问题。我认为,如果他们是为iOS+Android以外的其他平台(例如网络支持)构建的,或者如果他们经常需要转换混合原生视图和Flutter视图太糟糕了, React-Native-Skia之前不存在😄,他们可能会喜欢它。
拓展阅读:
- Chain React cancelled this year
- 🎥 Unboxing Expo SDK 44
- 🎙️ RNR 224 - React Native Web on Next.js with Fernando Rojo
- 🐦 React-Native Fabric + Apple TV
- 🐦 iOS UI recreated with React-Native
- 🐦 Enter/Exit Layout animations with Reanimated
- 🐦 Skia + Raycasting
- 🐦 Flutter web: opinions from Jake Archibald & Jamie Kyle: 证实了我们使用React-Native进行跨平台的选择😄
其它
Announcing TypeScript 4.6 Beta
一个伟大的版本,不断增加有用的改进,特别是在控制流分析上,这对一个React开发者来说是非常有用的。官方博客文章没有展示这一点,但我测试了一下,这将对React道具析构有一点改进,但遗憾的是不足以与{...props}工作:也许在下一个版本?
Monorepo.tools
一个介绍很好的页面,给了你采用monorepo的好理由,并对一些流行的工具进行了比较。Lerna, Nx, Turborepo, Bazel, Lage... 由Nwrl(Nx背后的公司)发布的这一比较仍然是公平和客观的
拓展阅读:
- SpiderMonkey Newsletter (Firefox 96-97): Records & Tuples has been implemented in Firefox! You know I love this 😍!
- TypeScript Features to Avoid: enums, namespaces, decorators,
private - TypeScript: How Type Guards Can Help You Get Rid of ‘as’
- What is the Jamstack in 2022?
- Div divisiveness: 如何正确的使用
<div> - Safari Technology Preview 138: 对于
:focus-visible的支持. 比较有争议的是苹果需要众筹 😅 - Fly: Free Postgres Databases: moderne host @ Edge
- Opera Crypto Browser
structuredClone(): deeply copying objects in JavaScript- 🐦 "我厌倦了TSC对我的代码进行长期的类型检查,所以我用Rust做了一个Typescript类型检查器,供大家玩乐"
- 🎥 作为一名JavaScript开发人员,你应该在2022年学习Rust吗?