最新前端技术趋势——菜鸟必看

前端的车轮滚滚向前，轮子造的越来越圆，速度造的越来越快，每个人都在适应这个轮子的节奏，稍微不注意就会被甩出车轮之外。狼狈不堪之外还会发自心底的大喊一声：别卷了！！

话虽这么说，但现实就是这样，无论是客观还是主观因素都不得不让你继续的往前走。既然是往前走， 那么能知道一些前面有啥东西岂不是更好，也许能少走弯路。

自己对前端23年大概的技术做了一些展望，想到什么写什么。毕竟谁都不知道会不会突然间又出了个frontEndGPT打翻了所有人的饭碗。

1 AI

最先说的肯定是AI，22年末，23年初的chatgpt让AI话题火的一塌糊涂，同时也被认为是一次重大的技术革新，技术革新带来的就是重塑，一切都要被重塑，你的职业，你的工作。 视觉层面的stable diffusion和midjourney已经对设计师产生了重大影响，而涉及到视觉ui层面的话，前端肯定是绕不开的部分。虽然目前没有直接的对前端产生影响，但下面的就一个就不只是对前端了，而是对整个程序员都产生了影响。

• copilot

Your AI pair programmer. Trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.

看看醒目的文字就知道，程序员或多或少都会被影响了。

还有什么CodeWhisperer, Cursor等也都是AI辅助编程。

更有Fronty，Locofy等将图片AI分析为HTML文档，无代码快速建站，figma快速解析成代码等，虽然是提效不少，但谁能说这些不是对前端的一种重塑呢。

​2 主流框架

随着React，Vue等框架进一步的普及，现在前端想要脱离它们的场景越来越少了。那么它们的下一步规划，也会对我们产生一些不小的影响。

react

react 18以后，react似乎是对create-react-app这种项目启动方式也不怎么主推了，毕竟速度摆在那里，没有任何优势。而使用直接竞争对手的产品似乎又不太合适，而直接说又不用又显得跟开源精神不吻合(当然竞争对手的一些基本特性也确实和现有的构建思想不太吻合)。

他们似乎采取一种围魏救赵的方式，着重宣传next的方式。next不仅仅是一个ssr的框架，同时它也支持csr,ssg等不同的方式(next13开始，对于客户端组件和服务端组件可以有了比较好的区分)。同时next与react有着千丝万缕的联系，而next正在进行一个新的构建工具的替换。 next采用了turbopack,也是Webpack作者TobiasKoppers的作品，官方说它更新速度比Vite也要快10倍、比Webpack快700倍

而react也应该大概率会引入turbopack(当然它如果继续搞前端脚手架的话)。当然也可能会直接使用next环境。

至于快多少，以及评价基准等我们可以看下turbopack真比Vite快10倍吗？

next

next最新版本也加入了很多的特性，比如server component理念，约定式路由的更改，流式渲染，客户端组件与服务端组件分离更简单，更好的构建速度等等功能。可以让开发体验，用户体验更好，性能也会有响应的提升。

vite

这个不用说了，优秀的构建速度以及越来越丰富的社区，让其在22年有了很大提升。随着浏览器的逐步升级，23年vite肯定也会是重大的一年。

webpack

虽然5有了好多的功能提升，不过速度似乎一直是一个绕不过去的坎。就连作者也已经开始搞turbopack了，虽然加入swc能让编译有很大提升，但是目前从我身边的人的了解看，越来越多的人开始转向vite等其它方式了

turbopack

是webpack作者去的新公司开发的一款基于rust的打包工具。官方明确说明就是为了替换webpack。 同时强调webpack是这十年最火的工具，那turbopack就定位成未来几年的工具。由于作者和webpack, Vercel, next, React这些之间千丝万缕的联系，很难不说未来React也许会和这个打包工具绑定上。下面是官方提供的速度参考

而除了turbopack外，同一团队还在做Turborepo。

这是一款项目管理的工具，最主要的面向场景是Monorepo这种复杂的多项目管理

Monorepo有很多优势，但是在多个项目中会有很多复杂的构建过程和相对闭塞的构建步骤，每一次上线都是耗时严重。所以Turborepo是为了解决这个问题出现的，让一些构建重复的构建步骤提炼出来，基于整个Monorepo项目的维度来管理多个子项目。

同时对于单个CI的构建步骤，解决每台机器，每个人都要单独构建的问题，还提炼了类似store的方案，脱离了构建环境，只跟项目绑定，当然这个方案是否使用要看你自己，毕竟原理是把构建产物放到第三方储存，而第三方又不是一个类似npm的开源机构。

3 轻量级的低代码开发平台

前端技术在不断更新和迭代，新的技术和框架层出不穷。大佬们都说要追求高复用、高内聚、低耦合、易拓展，大家开始忙不停蹄的学习这些概念和应用实践，讨论到低代码，大家好像都蛮兴奋的。

在低代码领域，JNPF开发平台还不错，很多人都用过它，是功能的集大成者，任何信息化系统都可以基于它开发出来。

依托自身的技术生态，不仅可以在一个平台内搭建OA、ERP、MES、EHR等各种传统管理系统，也可以通过API接口，对接企业原有的管理系统和数据，企业微信、钉钉、公众号等平台，JNPF支持搭建聚合已有系统、平台和设备，承载20万+用户体系的并发和数据处理能力，支持大规模复合式业务场景使用。

应用地址：https://www.jnpfsoft.com/?csdn ，找个有空的时间自己试试。

4 服务端

node从7，8年前的爆火，到现在的不温不火，前端语言介入服务端这个命题似乎现在是越来越清晰了。那就是定位，可以做网关，可以做转发，可以做一些数据代理合并，定位清晰node依然有自己的使用场景。 node也马上到了20版本，迎来了一些特性

• esm的更好支持，

• 测试功能更加丰富

• V8 引擎更新至 11.3，与Chromium113版本大部分相同

• 支持以虚拟机的方式，动态运行js代码

• WebAssembly的支持(实验性的)

于此同时，node曾经的作者Ryan Dahl几年前搞的Deno似乎没有太多的消息，似乎在向商业化方向前进。打造出Deno Deploy及其即时边缘渲染SSR框架Deno Fresh

4 其它

WebAssembly, 元框架，ts，微前端？