前端早读精选：React 2024 RoadMap、2024 你应该关注的前端框架

探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章。文章方面，本期为大家带来，React 2024 RoadMap、2024 你应该关注的前端框架、手把手教你如何完成一个开源库的完整流程、利用 qwik 替换react开发微型项目、react-native 对 Apple Vision Pro 支持；工具方面，融合多个 AI 工具的GUI软件 - Noi、AWS 新的 JS runtime - LLRT、迷宫、地形和角色的JavaScript程序生成器 - Labyrinthos。话不多说，详细内容请大家查阅。如果觉得有收获，动动大拇指点个赞，以示鼓励！

文章推荐

What We've Been Working On -- February 2024

React 团队 2024 RoadMap。其中 React Compile 取得了不错的进展，在 Instagram 生产环境中已经落地。React Compiler 能够通过对 JavaScript 规则_和_"React 规则"进行建模来安全地编译代码，从而提高性能。同时也会有相应的语法限制，通过启用严格模式并配置 React 的 ESLint 插件来捕获 React 代码中的细微错误，提高当前应用程序的质量，为后续适配 React Compiler 提供基础。React 正在探索使用服务器操作将数据从客户端发送到服务器的解决方案 -- Actions。action函数可以同步或异步操作，并且"use client"和"use server"来们标记代码的执行环境，"use client"指示会生成<script>标签（如Astro Island），同时"use server"告诉捆绑器生成 POST 端点（如tRPC Mutations），不会将代码打包到JS bundle 中。想要体验上述的部分新功能，可以使用 React Canary，目前 Actions 的能力已经集成到 Canary 版本中。由于当前很多新功能将会是一个breaking change，所以 react 的下一个版本将会是大版本升级 React V19。最后还有一个小的改动，将Offscreen 重新命名为Activity。"Offscreen"这个名称意味着它仅适用于应用程序中不可见的部分，但在研究该功能时，React 团队意识到应用程序的某些部分可能是可见的和不活动的。新名称更准确地反映了将应用程序的某些部分标记为"活动"或"非活动"的行为。

React、Angular、Next.js、Solid 创建者告诉你，2024 年你需要关注哪些框架！

在The New Stack上讨论了主要JavaScript前端框架如Angular、Next.js、React和Solid的未来计划和发展。每个框架关注不同的方面：

Angular：强调更精细的反应性和使Zone.js可选，这将导致更快的加载时间和初始渲染。

Next.js：计划简化缓存，提高性能，并引入新的编译器以加快工具操作速度。

React：旨在扩大对React Server Components的采用，并继续开发新功能，如React Forget和Static Hermes。

Solid：预计将发布SolidStart 1.0和Solid.js 2.0，专注于基本原语，并提供一个可更换部分的元框架，以提供更大的灵活性。
附 Static Hermes 的一些信息 Static Hermes 是 Hermes 引擎的下一代版本，它在 Hermes 的基础上增加了静态类型检查和提前编译功能，从而进一步提高了 JavaScript 代码的性能。

静态类型检查：Static Hermes 可以对 JavaScript 代码进行静态类型检查，从而发现潜在的类型错误并防止其在运行时发生。这可以提高代码的可靠性和安全性。

提前编译 ：Static Hermes 可以将 JavaScript 代码提前编译为原生机器代码，从而提高代码的执行效率。 Static Hermes 的主要优势在于：

更高的性能：Static Hermes 可以将 JavaScript 代码的执行效率提高到与 C/C++ 代码相当的水平。

更小的代码包：Static Hermes 可以将 JavaScript 代码包的大小缩小 20% 到 50%。

更强的安全性 ：Static Hermes 可以通过静态类型检查来防止类型错误的发生。相较于 Hermes，Static Hermes 更侧重于编译时，除了更好的性能与安全性也会带来一定的语法限制 。更多信息参考

如何使用 TypeScript、测试、GitHub Actions 发布包并自动发布到 NPM

文章阐述如何用 TypeScript 编写一个库与对应的单元测试，并将编译后的代码、类型在包中发布。使用 github Action 完成 CI 构建测试流程，最后发布到 NPM。还在本地发包的同学，不妨参考一下该自动化流程。

在Astro中使用 Qwik 替换 react

针对一些轻量级的web项目。使用 Astro构建，默认情况下，它向客户端发送零 JavaScript --- 对于快速、轻量级和高性能的内容网站来说非常出色。但有时，我需要一些客户端 JavaScript 来实现交互性。此时，我发现自己很难在普通的 Vanilla JavaScript 还是 React 之间做出选择。一方面，Vanilla JavaScript 通常比 React 更轻量级，但它可能变得难以维护。 React 在某种程度上解决了这个问题，但对于最小的客户端 JavaScript 需求来说，它太重。这个时候不妨考虑一下 react 的替换方案 -- Qwik。

announcing-react-native-for-apple-vision-pro

React Native 现已在 Apple Vision Pro 上可用，为开发人员释放了该平台的全部潜力。与兼容模式不同，这种方法可以在visionOS上实现沉浸式体验和XR功能。还在等什么，花 $3000 上车 Vision Pro 🐶🐶🐶

工具推荐

Noi

集成了多款 AI 应用的 GUI 程序。

LLRT

LLRT 是一种实验性的轻量级 JavaScript runtime，旨在满足对快速高效的无服务器应用程序不断增长的需求。与 AWS Lambda 上运行的其他 JavaScript 运行时相比，LRT 的启动速度提高了 10 倍以上，总体成本降低了 2 倍。它采用 Rust 构建，利用 QuickJS 作为 JavaScript 引擎，确保高效的内存使用和快速启动。目前可以通过配置 Lambda functions 来使用LLRT。但需要注意的是，LLRT 仅支持一小部分 Node.js API。它不是 Node.js 的替代品，也永远不会。LLRT 适用与对性能要求较高的函数，因此不建议将有 node_modules 依赖的函数进行部署。

Labyrinthos

一个用于迷宫、地形和角色的JavaScript程序生成器。专为游戏开发者和专业爱好者，迷宫。js 提供了一个非常简单易用的API来制作复杂的，可定制的景观