探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章，在这份汇总中，发现前端技术的精髓，概括个人观点，共同探索前沿技术与行业动向。与笔者一起在每周的学习中前行，不容错过的前端精选，助力你成为技术领域的探索者。
总结系列
2023 JS受欢迎库盘点
2023 年度盘点，根据比较过去12个月在GitHub上添加的 Star 数量与对 Best of JS 的项目进行分析，得到一个与
web平台相关的最佳项目列表。
总体最流行项目排行
其中 shadcn/ui最让笔者意外，接下来让我看看一款复制粘贴的一组 UI 组件如何席卷全球！
shadcn/ui 是一款基于 React 的 UI 组件库，通过 TailwindCSS 定制样式。其建立在 Radix之上，与其它传统 UI 组件库不同的是，它不是一个 NPM 包，你可以通过 cli 的命令将代码集成到你本地，或者直接从官网将对应的源码粘贴到你本地。在前两期我们介绍过的 v0.dev，其生成的 UI组件代码就使用了 shadcn/ui。简单看一下通过 cli 安装到本地的代码，对于有一定业务定制诉求的需求来说，基于源码维度的修改不要太方便！
另外列举几款笔者比较感兴趣的项目介绍：
- tldraw：一个好用的画图工具，上榜的 excalidraw也是同类型的画图工具。在一些负责的系统架构图上，drawio 也是一个不错的选择。
- tauri：使用 Web 前端技术构建更小、更快、更安全的桌面应用程序。相较于 Electtron ，tauri 的脚手架要丰富很多，能够快速搭建一个小 demo 上手，这对新手玩家来说很重要。下面简单对比一下二者的优缺点：
| 特征/优缺点 | Tauri | Electron |
|---|---|---|
| 使用的技术 | 使用 Rust 和 Web 技术（HTML/CSS/JS/TS） | 使用 JavaScript/TypeScript、HTML 和 CSS |
| 二进制文件大小 | 相对较小 | 相对较大 |
| 启动时间 | 较短 | 较长 |
| 系统资源占用 | 相对较少 | 相对较多 |
| 跨平台支持 | 是，支持 Windows、macOS 和 Linux | 是，支持 Windows、macOS 和 Linux |
| 安全性 | 考虑较多，使用 WebAssembly 和沙盒技术 | 较低，共享主进程可能存在潜在的安全风险 |
| 自定义窗口和功能 | 是，提供灵活的 API | 是，提供灵活的 API |
| 社区和生态系统 | 相对较小但活跃 | 相对较大且成熟 |
| 开发语言 | 使用 Rust（底层）和 Web 技术 | 使用 JavaScript/TypeScript、HTML 和 CSS |
| 学习曲线 | 相对较陡，需要了解 Rust | 相对较缓，使用 Web 技术更为常见 |
| 适用场景 | 适用于对二进制大小、启动时间和系统资源占用要求较高的项目 | 适用于较大型应用，对二进制大小和启动时间要求相对较宽松 |
前端最受欢迎项目
大部分项目都是大家日程接触过或正在使用的项目，这里介绍一个号称能让让 react 速度提升 70%的项目 -- Million。 Million 是一个轻量级、快速的虚拟 DOM 库，它使用编译器来预先计算用户界面。这使得 Million 的性能比传统的虚拟 DOM 库更高，并且可以减少 JavaScript 包的大小。并且 Million 可以作为 React-DOM 的替代品，来提升 react 性能。
Million 的优势包括：
- 性能：Million 的性能比传统的虚拟 DOM 库高出 133% 到 300%。
- 包大小：Million 的包大小只有 1KB，比传统的虚拟 DOM 库小得多。
- 易用性：Million 的 API 与 React 类似，可以快速上手。 更多关于 Million的介绍，可以点击查看
最受欢迎的后端/全栈项目
tRPC 在上周的周刊中已经介绍了，这里再对另外一款笔者比较感兴趣的项目--Astro 项目做一个简单介绍。 提到 Astro 就不得不提其群岛的前端设计架构。“Astro 群岛“指的是静态 HTML 中的交互性的 UI 组件。一个页面上可以有多个岛屿，并且每个岛屿都被独立呈现。你可以将它们想象成在一片由静态（不可交互）的 HTML 页面中的动态岛屿。 在 Astro 中，“岛屿”指的是页面上的任何交互式 UI 组件。你可以将岛屿想象成在一片由静态、轻量级、服务器渲染的 HTML 所构成的海洋中所漂浮的交互式小部件。岛屿始终独立于页面上的其他岛屿运行，且一个页面上可以存在多个岛屿。尽管岛屿在不同的组件上下文中运行，它们仍然可以共享状态并相互通信。 这种灵活性使得 Astro 能够支持多个 UI 框架，如 React、Preact、Svelte、Vue 和 SolidJS。由于它们是独立的，你甚至可以在每个页面上混合使用多种框架。详细的群岛架构设计文档请看：群岛架构：Jason Miller
更多细分领域榜单，请点击查看。
文章推荐
what-is-htmx
htmx 在2020年 11 月正式发布 1.0.0 版本。它可以用超文本(标记)的简单和强大来创建尖端的用户界面。它提供了使用属性直接在HTML中访问AJAX、CSS过渡、WebSockets和服务器发送事件的功能。对于开发人员来说，这已经成为游戏规则的改变者，因为它使他们能够仅从标记中实现交互性(JavaScript提供的)。
引用 Jamie Birch 在前端2024趋势预测 UI框架板块对其的评价
In the background, though, is the refreshingly measured advocation of HTMX, which, although it may be the worst framework, is becoming increasingly hard to ignore in this age of complex build tooling.
react-server-component
对于最近网上讨论比较凶的 react-server-component的观点输出。本文评估了
React Server Components在Next.js中的应用。作者认为React Server Components为React引入了服务器端能力，强调了其在用户体验和开发者体验方面的一些优点和局限性。文章中提到对批评的考虑以及作者对React演进的回顾。作者指出React Server Components的一些新特性，并讨论了其中的一些优势和不足之处，包括在处理高级用例时可能变得繁琐的问题。此外，文章还提及了与Next.js App Router相关的问题，包括对内置fetch API的修改和增加的复杂性，以及JavaScript bundle的大小问题。最后，作者总结了对React和Next.js未来发展方向的一些观点，认为解决现有的客户端问题同样重要。
工具推荐
vx.dev
Vercel 的 v0.dev 可以通过输入需求，直接生成网站。这里是它的一个开源仿制品，通过逆向工程进行模仿，详见介绍文章。
Github Copilot Chat
作者发现 Github Copilot Chat 的底层是调用 ChatGPT 接口，因此做了这个工具。可以实现将 Github Copilot 转换为 ChatGPT。具体实现原理
杂七杂八
nostalgist
一个在浏览器中运行怀旧游戏主机模拟器的 JavaScript 库，比如运行任天堂FC 模拟器、世嘉 MD 模拟器、街机模拟器等等。
结语
本文全面盘点了2023年JavaScript库热门趋势，通过GitHub Star和Best of JS项目分析，列举了web平台相关的最佳项目，特别关注了shadcn/ui等。此外，作者还介绍了其他有趣项目，包括tldraw、tauri、Million等。在后端/全栈方面，文章关注了Astro。除了库的盘点，还推荐了一些工具如Vercel的v0.dev、Github Copilot Chat、nostalgist等。这些工具包括网站生成、代码生成和怀旧游戏模拟器等
