2023年前端发生了什么?

前言

文章内容灵感来源于What Happened in 2023?, 并结合个人观点。

这篇文章将带你回顾2023年前端圈发生了什么,时间从早到晚的顺序排列。

1. Astro v4.0 发布

2023年1月24日Astro 2.0 发布。 而到了 12月5日Astro 已经来到了 Astro 4.0, 是的,你没看错, Astro 今年发了 3 个大版本,这就是 Astro 团队和开源社区的战斗力!

Astro 由于其独特的岛屿架构所带来的优秀页面加载性能(Astro构建的网站客户端可以实现 0kb javascript 😱),而需要交互时候,也可以使用众多JS框架和UI库 (如 React,Vue,Anuglar等等), Astro 的性能和开发体验持续得到社区的肯定,尤其是在静态文档站点上, 社区发展也是走在正轨上。

Astro 甚至可以和同类竞品 Qwik 集合, 从而将 Astro 的岛屿架构(Island Architecture) 和 Qwik 的可恢复性(resumability) 相结合达到 Island Resumability,太潮啦!

2. Netlify 收购 Gatsby

2023年2月1日 Netlify 宣布收购 Gatsby, Netlify 是和 Vercel 类似的平台,可以提供平台即服务,常被用来托管和部署静态网站, 比如Vue 官方文档就是托管在 Netlify 上。

Gastby 则和 Next.js 类似是一个 React 元框架(框架的框架), 允许你使用 React 构建 web 应用程序,并采取各种策略来优化发送到客户端的 HTML,CSS 和 JS。

Vercel 旗下的明星产品 Next.js 以及两者之间的集成体验无疑打动许多开发者。Netlify 收购 Gastby 无疑也是为了提供更好的 paas (Platform as a Servuce 平台即服务)的支持。

3. Node.js v20 发布

2023年4月18日, Node.js v20 发布, 诞生于 2009 年的 Node.js 无疑是革命性的,如今的 Node.js 社区已经非常成熟,也已经有了固定半年发一次大版本的惯例,同年 10月17日, Node.js v21 发布。 一般来说, 双数版本是 LTS 版本,更推荐投入生产使用。

4. Qwik v1.0 发布

2023年5月2日,Qwik 正式推出 1.0 版本。

Qwik 为 web 提出了一个真正原创的想法 -- 可恢复性 (resumability) , 作者还在 X 上和 dan 展开了深入的技术讨论(撕逼), 感兴趣的查看 Angular之父为什么怼React?

5. Signals in Angular

2023年5月3日, Angular v16 发布并引入 Signal。 Signal 并不是一个新概念, 最早于 2010年 由 Knockout 首次引入前端领域,并最终流行起来,Signals 能提供更强大的响应式能力,可以更好地控制变化检测,从而提高性能。各大主流前端框架有一个趋同的趋势,也就是采用 signals 的这种开发范式( 除了 react )。 面对这个潮流 Angular 也不得不作出违背祖宗的决定,引入 Signal。目前评分: 褒贬不一(开个玩笑)

6. Million.js v2.0 发布

2023年5月10日Million.js 2.0发布, 同年12月7日,v3.0 发布 。

是的, 一名叫做 Aiden Bai 的高中生 开源了一个叫 Million 的库为 React 提供了优化的虚拟DOM, 这些优化使得 React 速度提高了 70%! Wow,Amazing!众所周知,高中生比 React team 更懂 React 性能优化 🤔 React 团队在干嘛呢?救一救啊! React team 专注于 Suspense 和 RSC 修补 UI 库。

7. Svelte v4.0 发布

该版本主要改动是开发体验以及减少近75%的包体积,为一个过渡版本,旨在为下个版本 v5 做铺垫。

8. Supabase Launch Week

云原生时代 (Cloud Native),由平台提供应用程序开发和部署所需基础设施的云计算服务是非常普遍的, 也就是PaaS(Platform as a Service),比如14年 AWS Lambda 的诞生标志云原生进入高级阶段, Serverless 的架构模式早已广泛应用于各大厂商产品和服务上。

Supabase 宣称是 Firebase 开源替代品, 也就是平台提供后端即服务。开发者只需要专注于应用业务逻辑,而不用编写身份验证,数据存储,文件存储等后端服务,常适合落地实现一个 idea 来实验可行性, 节省成本的同时交付速度也大大提升。

对于前端开发者来说, 如果想要快速实现一个产品。 使用 Supabase / Firebase 是一个不错的选择,当然,这种服务模式国内会相对少见,因为小公司不愿意花钱买服务,大公司则更乐意重新造一个同类的轮子

9. Bun v1.0 发布

前端的 Spring Boot 终于要来了?

Node.js 最开始只是提供一个浏览器以外的 javascript 运行时,能干的事情很少,但经过十多年的发展,各种各样的工具库层出不穷,尽管有 Deno 类似的挑战者,依然无法撼动 Node.js 的霸主地位。

Bun.js 是一个极具野心的项目,试图打造一个前端大一统的框架, 也就是说

  • 运行时 ( Node.js )
  • 打包 ( webpack, rollup, esbuild ... )
  • 转译 ( tsc, ts-node babel ... )
  • 包管理 ( npm,yarn,pnpm ... )
  • 测试库 (jest, vitest... )

通通 All in one, 全部都能通过 Bun 搞定。

当然,目前来看,Bun 要做的事情太多了,而且人手不足,能不能做不做成还不好说, 但万一做成了,则是一个大而全的方案, 类似 Spring Boot 那样。到了那时就不止后端有自己的 Spring boy, 前端也有自己的 Bun boy。

10. HTMX 达到最高流行度

11. Meta 开源 StyleX

Meta 开源了一款CSS-in-JS库 ------ StyleX , 是一种用JS描述CSS的语法规范。 面向公众开源也就意味着它已经应用在 Instagram 和 Facebook 当中,有人宣称其是 Tailwind 杀手, 并没有很明白两者有什么共同点 🤔。

12. 前端基建还在"锈"

相信大家都能感受到,前端技术逐渐稳定下来,React 已经一年多没发版了, Vue3 甚至是2020年发布的, 更多是在折腾前端开发体验上,或者是针对一些优势场景做优化,如:

  • Nuxt dev tools 针对 Nuxt 开发体验
  • Astro 是针对静态场景
  • qwik 针对电商场景带来极致的首屏速度加载
  • React 和 Next.js 推的 RSC 针对 emm ..., 可能是针对React开发者😔
  • ....

但不可否认的是,前端基建还在"锈"。比如

  • Webpack 作者基于 Rust 重新编写的 Turbopack
  • 字节基于 Rust 编写的 Rspack
  • 为改进 Vite 生产和开发环境不一致的基于 Rust 编写仍在开发中的 Rolldown
  • 基于 Rust 的 OXlint 性能是对 ESLint 碾压级别的。

许多人正在用 Rust 重写前端工具链, 以此带来更好的开发体验。

但这是否意味着前端工程师需要学习 rust 呢? 啪,很快啊,我立马 Google,敲入rust,打开 steam 商店页面,扫码付款。开始我的 rust 之旅呢 ( 开个玩笑😆 )。

当然不是的, 前端工程师如果不是搞基建没必要学 rust,也很难学会(学习曲线不是一般的陡峭),当然如果是在校大学生有那个时间和精力支撑是可以折腾下拓展思维的~

13. ChatGPT 的流行

相比 web3 区块链的热潮, AI 的冲击显然来得更加真实且迅猛,转眼间就对众多内容产业发起了降维打击,如绘画,编码等等, 相信许多开发者都感到了危机, 许多人甚至高呼 the end of programming, 考虑转行成为 prompt 工程师。 但目前来说, 还不能做到取代工程师, 不少工程师也是使用 ChatGPT 等 LLM 来提高日常效率。

相关推荐
轻口味27 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
sdaxue.com4 小时前
帝国CMS:如何去掉帝国CMS登录界面的认证码登录
数据库·github·网站·帝国cms·认证码
m0_748247554 小时前
github webhooks 实现网站自动更新
github