#Web前端技术# 虽然在 2023 年的前端大舞台上并没有出现革命性的明星项目，但在各个细分的技术领域都有一定的拓展与深耕，而且 2023 年 AI 大模型的迅猛发展也为前端领域注入了活力，2024将持续发展。

● 首先在被誉为大模型元年的今年，大模型的应用能力持续完善，并逐渐开始在前端多个领域中落地。

● 在前端语言与标准领域，今年 JavaScript 和 CSS 都有一些新的变化，在 TypeScript 已成为前端项目标配的如今，今年社区为何频频出现了不一致的声音？

● 在前端框架领域，前端框架的四驾马车 React、Vue、Svelte 和 Angular 继续领跑，它们都在按照自己的特色不断发展与进步。此外 Qwik 和 Htmx 在今年也广受前端社区喜爱，成为年度前端框架的黑马。

● 在前端基础建设领域，Rust 在前端的影响力越来越大：基于 Rust 的构建工具 Rspack 和 代码检查工具 Oxlint 正式发布、 Vite 官方也正式宣布计划使用 Rust 重构 Vite，替换掉原有的 Esbuild 和 Rollup。此外，前端全能工具包 Bun 正式发布 1.0 版本，成为 JavaScript 年度明星项目。

● 在低代码领域，低代码社区建设持续完善，基于源代码驱动和与大模型结合的低代码引擎于今年首次亮相。

● 在 D2C 领域，出现了 C2D2C 这个新的解决方案，大模型为 D2C 赋能未来可期。

● 在跨端领域，鸿蒙应用的异军突起为跨端领域开辟了新天地。

● 此外在浏览器、 WASM、音视频等与前端息息相关的底层能力领域也有新的发展。

1、语言与标准：CSS、ES 和 TS 语法持续完善，社区竟现反 TS 声音

根据 StackOverflow 2023 年度流行语言报告中统计显示， 前端三剑客（HTML/CSS/JavaScript）依然位居榜首。而 JavaScript 已连续 11 年成为最流行的编程语言，而 TypeScript 也上升到第五的位置。整体而言，前端社区依旧充满朝气与活力。接下来让我们回顾一下 2023 年前端在语言与标准的领域上有哪些变化吧。

已成前端项目标配的 TypeScript 社区竟现抛弃呼声？

近年来，由于 TypeScript 提供的类型安全性、更好的工具支持以及与 JavaScript 生态系统的兼容性，它所带来的对代码质量和可维护性方面的价值已被前端社区所认可，目前已经成为开发 Web 应用程序的主要编程语言之一。从 Github 2023 年度报告显示，今年 TypeScript 首次超过 Java，成为 GitHub 上 OSS 项目中第三大最受欢迎的语言，其用户群体增长了 37%。

TypeScript 5.0：对包体积及构建速度进行全面优化

今年 3 月 16 日 TypeScript 5.0 正式发布，该版本更新了许多令人激动的新特性，例如支持全新的装饰器、extends 支持多配置文件、引入 const 类型参数等。笔者认为 TypeScript 5.0 最大提升应该是在一直令人诟病的包体积大小和编译构建速度上的优化。

首先，TypeScript 从命名空间转移到了模块中，这使我们能够利用现代构建工具来执行优化，如作用域提升，此外还删除了一些废弃的代码。优化后，TypeScript 5.0 相较于 TypeScript 4.9 ，包体积从约 63.8 MB 减少到约 37.4 MB，降低了约 42%

其次，TypeScript 5.0 还对代码的数据结构以及算法实现上进行优化，例如 TypeScript 5.0 会现有对一些常用的机制进行了缓存，以便在编译操作之间重复使用。TypeScript 5.0 相较于 TypeScript 4.9 编译速度上有着明显的提升。

众望所归的 CSS 嵌套和 CSS 父选择器正式落地

CSS 支持嵌套一直是 Sass 中最受开发者喜爱的功能点之一，它允许让开发者在编写样式的时候更加整洁、内聚。

除了 CSS 嵌套外，父选择器也是受访者认为 CSS 最需要补充的功能之一。简单来说，CSS 父选择器的作用能通过子元素选中其父元素。既然是万众期待且如此实用的选择器，为什么各大浏览器迟迟没有支持呢？

主要是以下两个原因：

a) 浏览器的渲染模式是以流的方式，一个元素接一个元素进入。因此当一个元素在浏览器渲染出来时，其父元素的样式计算已经完成并且也已经渲染好了。在此之后，通过子元素选择父元素并应用样式触发重绘时，需要对父元素和子元素都进行重新绘制，这样的计算对于当时的渲染引擎而言是昂贵的。

b) 与其他选择器而言，父选择器触发重绘的性能开销很大，如果有一个父选择器，那将很容易成为低效率选择器中的新老大。

我们要知道：任何的一个技术都将会是一把双刃剑，它带来了改进的同时，也会带来新的不便。

Vue 和 React 算是前端的常青树，目前也是国内最火的两个框架。

Vue 的话，建议大家直接从 Vue3.0 开始学起。

React 的话，建议至少从 16.8 以上学习，直接学习 函数式组件与 Hooks 即可。

webpack && vite

虽说 vite 是为了颠覆 webpack 而存在的，同时 vite 也确实提供了 10 倍以上的构建速度。但是 webpack 足够丰富的生态，所以 vite 想要彻底颠覆 webpack 短时间之内并不现实。

这就导致，webpack 和 vite 我们需要一起进行学习。从现实的角度来看 vite 非但没有带来取代 webpack，反而增加了打包工具的学习成本（毕竟之前只需要学一个，现在需要学两个…）

NestJS

NestJS 是一个基于 Node 开发服务端的框架，结合了 OOP （面向对象编程）、FP （函数式编程）和 FRP （函数响应式编程）。很多同学把它比作前端的 Spring 框架。

在目前互联网行业这么卷的情况下，很多 java 的同学开始卷前端，而前端的同学如果想要卷后端的话，那么除了直接学习 Spring 之外，NestJS 也是一个可以快速从前端切入到后端的框架。

特别是针对一些想要自己接项目开发的同学，NestJS 的学习成本相对于 Spring 更低，是一个不错的选择。

低代码 && 无代码 平台

低代码和无代码平台在 3 年前开始被大规模的应用，发展到现在已经逐渐成熟起来了。

最初的低代码平台旨在：通过可拖拽、可配置的方式，实现不需要手写代码就可以搭建一个应用。

发展到现在，低代码平台的应用场景开始越来越广泛，营销页面、大屏可视化、后台管理系统 都开始出现了低代码构建的影子。

虽然现在低代码平台可以做的东西还比较少，但是基于目前的场景来看，未来低代码的应用会越来越多。

AI大模型

年初的 ChatGPT 火爆全网，随之而来的就是大量的国内 AI 项目。阿里的【通义千问】，百度的【文心一言】都是在这个时间段推出的。

同时大量的 AIGC 公司开始出现，也就是所谓的国内 GPT。

那么在这样的一种环境之下 AI大模型 想不火都难。跟上科技创新的步伐前进...前进...