探索前端技术的无尽旅程从这里开始！每周精选前端领域的热门文章，在这份汇总中，发现前端技术的精髓，概括个人观点，共同探索前沿技术与行业动向。与笔者一起在每周的学习中前行，不容错过的前端精选，助力你成为技术领域的探索者。
1. Ant Design Web3发布啦！
Ant Design 作为前端 UI 组件库的老牌选手，正式发布 针对 web 3.0 社区的 UI 特性的组件库。除了提供了连接Web3 DApp所需的组件外，还额外提供了和链的交互的能力，支持以太坊及兼容EVM的链。具有通用API，适配不同区块链的能力。可作为纯UI组件使用，也提供适配器连接区块链。
2. structuredClone浏览器原生自带的深拷贝函数
你是否还在为如何处理深拷贝一个未知数据类型对象而烦恼，使用 JSON.parse(JSON.stringify) 担心部分数据类型处理不符合预期（如 Date 会被处理为字符串），使用 lodash 又担心 tree-shaking 处理不当带来包体积的增长。现在这些烦恼，使用 structuredClone 都将被解决。当然我们还需要考虑其使用时的一些隐患。
- 浏览器兼容性
- 部分无法处理：函数、Dom 节点、属性描述符（
setter、getter）、对象原型
3. AI 自动创建 React 组件 — V0
Vercel 提供的代码生成工具让用户只需输入自己的需求，即可生成相应的 React 代码。对于使用 NextJS 框架的用户，更可享受一键直接安装使用的便捷。在笔者的试用中，简单场景下生成的组件基本可用，然而在复杂的需求描述中，生成的代码则显得不够实用。（PS：可能对中文的理解有限😅）
4. 总结：javaScript 与 TypeScript 在过去三年的全部新特新
有多少同学与笔者一样，在 ES6 推出后对 EScript 的新特性与规范关注甚少。通常，我们更多地依赖外部的技术文章获取关于这些新特性的信息，而在实际的应用中，除了一些常用的，其他新特性的了解相对较少。本文对过去三年内 JS 与 TS 的新特性进行了综合梳理。希望在我们完成日常需求之后，能够抽出时间深入了解这些新特性的使用，除了查漏补缺外，还可以了解它们背后创作的原因。
5. 年终总结：回顾一下 Robin Wieruch 的 2023 10个前端发展趋势
- (META) FRAMEWORKS： 单页应用程序（SPA）及其相关框架（如React.js、Vue.js、Svelte.js）经历了多轮炒作，但最近几年，元框架的崛起表明应用程序正在从客户端渲染（CSR）转向服务器端渲染（SSR）。其中，Next.js成为最受欢迎的元框架之一，它在React.js的基础上提供了全方位的支持，为开发人员提供了出色的开发体验。
- APPLICATION AND RENDERING PATTERNS： 过去十年一直被单页应用程序（SPA）主导，但最近几年对服务器端渲染（SSR）的兴趣不断增加。新兴的渲染技术，如增量静态再生（ISR）和流式SSR，正在改变渲染模式，为更细粒度的性能优化提供可能。
- SERVERLESS AT THE EDGE： SSR和SSG的流行与无服务器边缘计算的趋势高度相关，旨在提供更快的网页和Web应用程序体验。各云服务提供商（例如Cloudflare、Vercel和Deno）竞相推出边缘计算服务，以实现最佳的时间交互体验。
- DATABASE RENAISSANCE： 随着无服务器的崛起，数据库也经历了复兴。服务商如PlanetScale、Neon和Xata提供了与边缘缓存等功能结合的服务器数据库服务，为全球用户提供低延迟的数据交互。
- JAVASCRIPT RUNTIMES： 从Node.js到Deno，JavaScript运行时的竞争激烈。云服务提供商通过实施自己的JavaScript运行时（如Cloudflare Workers）来优化基础设施，这使得JavaScript运行时的多样性成为需要关注的问题。
- MONOREPOS： 单体仓库不再仅用于大型应用程序，而是成为小型公司和开源项目的热门选择。Turborepo等工具推动了单体仓库的热潮，使团队能够在单一版本控制存储库中构建所有应用程序和包。
- UTILITY-FIRST CSS： Tailwind CSS等实用主义CSS工具在近期崛起，尤其在服务器端渲染（SSR）的环境中表现出色。相较于CSS-in-JS的解决方案，实用主义CSS在SSR环境下具有更好的性能。
- END-TO-END TYPE SAFETY WITH TYPESCRIPT： JavaScript向TypeScript的演进不可阻挡。端到端的类型安全性在全栈应用中变得愈发重要，而使用OpenAPI或GraphQL Code Generator等工具可以实现对客户端和服务器端通信的类型安全。
- BUILD TOOLS： Vite取代了一度主导React领域的create-react-app（CRA），成为单页应用程序的新宠。它借助esbuild实现更快的依赖项捆绑，为前端开发提供了更高效的工具。
- AI DRIVEN DEVELOPMENT： GitHub Copilot和ChatGPT等工具为AI驱动的开发奠定了基础。开发者可以在其IDE中与AI程序员进行合作，实现代码的智能自动补全。
从笔者今年的经历来看，谈一下几个对自己感受比较大的方向
- MONOREPOS：随着业务的增长，前端不再是简单的单业务单页面模式，更多的是领域模式。如交易领域、流量领域。每个领域都有着自己的特性，monorepo 的组织方式能够更有效的加速业务基础能力的沉淀。同时 Lerna、rushstack等管理工具，有效较低了工程化的解决成本。
- JAVASCRIPT RUNTIMES：除了 Deno 与 NodeJS 的竞争，Bun 也是有利竞争者之一。
- BUILD TOOLS： 今年看到的更多内容是构建性能提升，使用 rust 改写底层库的构建工具越来越多，作为一名前端，需要对 rust 保持一定的关注。
- AI DRIVEN DEVELOPMENT： AI 绝对是今年最爆💥的方向，没有之一。各类好用的 AI 工具，让开发效率得到了极大提升。笔者现在已经深度依赖 Copilot 和 ChatGPT。
6. 年终总结：更快的 V8 引擎
回顾 2023 年，V8 引擎主要做了以下事情
- 一个新的中间层编译器：Maglev。它的工作介于Sparkplug和TurboFan编译器之间。在机器码生成方面，相较于 Sparkplug 慢大约 20 倍，在机器码优化上，相较于 TurboFan 快了 10 到100倍
- Turboshaft：顶层优化编译器的新架构。与 CPU 无关的后端操作编译速度提升了两倍
- 更快的 HTML 解析器、更快的 DOM 分配
- JavaScript 新特性支持、更友好的 WebAssembly 支持
- 安全性能提升
- 附：Chrome V8 引擎中，Sparkplug、TurboFan、Maglev 引擎的工作职责
- Sparkplug：Sparkplug 是 V8 引擎的初始编译器，它负责将 JavaScript 代码转换为机器码。Sparkplug 使用的是基于栈的架构，它可以快速生成机器码，但效率较低。
- TurboFan：TurboFan 是 V8 引擎的优化编译器，它负责对 Sparkplug 生成的机器码进行优化。TurboFan 使用的是基于寄存器的架构，它可以生成更高效的机器码，但速度较慢。
- Maglev：Maglev 是 V8 引擎的实验性编译器，它是 TurboFan 的替代方案。Maglev 使用的是基于 SSA（Static Single Assignment）的架构，它可以生成更高效、更易于优化的机器码。
Sparkplug 和 TurboFan 是 V8 引擎中的主要编译器，它们共同负责将 JavaScript 代码转换为机器码。Sparkplug 负责快速生成初始机器码，TurboFan 负责对初始机器码进行优化。
7. github 热门前端项目
7.1 专为开发者提供的便签App — heynote
Heynote是一个专门为开发者准备的便签本。它的功能是作为一个大的持久文本缓冲区，您可以在其中写下任何您喜欢的内容。比较适合随手记录一些信息，支持快速新增 block，每个 block 都有自己的特性，如 Math block、markdown block、javaScript block 等
7.2 极简个人网站 — Shiro
喜欢极简主义的同学注意啦！如果你想搭建一个极简风格个人网站，那么 Shiro 将会是一个不错的选择。
8. 杂七杂八
- 一个检查自己账户是否安全的网站
- 免费使用 Google Gemini
结语
在这篇文章中，我们一同踏上前端技术的无尽旅程，每周探索前沿技术。Ant Design Web3、structuredClone、Vercel的AI自动生成React组件，以及JavaScript与TypeScript的新特性，展示了前端不断创新的面貌。Robin Wieruch的趋势总结指出了元框架崛起、无服务器边缘计算等重要方向。2023年，V8引擎的升级、AI驱动开发的兴起，为前端开发带来了更高效的工具和性能提升。同时，推荐了Heynote和Shiro等热门前端项目。在新的一年里，让我们继续前行，共同迎接更多前端技术的挑战与创新，成为技术领域的探索者。前端技术之旅永无止境，愿我们共同创造更精彩的前端未来！
原文链接：https://juejin.cn/post/7317535572432633890 作者：xiaoTuiMao
