Bob自习室

Appearance

前端现状分析 ​

不定时的实时更新版...

  • V1.0.0：2025-12-03

从事前端开发的同学们应该知道，从 2024 年开始，AI 工具对前端开发领域的冲击是非常大的，无论是写代码还是写文档，AI 工具都展现出了强大的能力（其实这个冲击不止是前端岗位，服务端或者其他文员类的岗位都有类似的冲击）。

也有很多在职的前端开发岗位的同学，因为 AI 工具的出现，而面临失业的风险或已经失业。

同时，我们也要看到，AI 工具的出现，也带来了很多新的机遇，比如我们开发的效率提升、代码质量提升、开发体验提升等等。

凡事都有两面性，我主张的观点是：拥抱变化，积极应对。 AI 很强大，秉承“打不过就加入”的态度，把 AI 工具融入到我们的开发工具链中来，迅速提升我们的自身能力才是关键。

未来，我认为：完全依靠 AI 开发的程序员（缺乏自身思考和能力的）会越来越难有竞争力，但能借助各种 AI 工具并且具备自身思考能力的程序员会越来越吃香。

简单来说，AI 工具的出现，不能使我们丢失了独立思考的能力以及判断力，你把个人主体的能力完全 AI 化的话，那你的价值就非常低了，这时候，公司有你没你，其实就无所谓了。你的价值应该是：“我能有效的指挥 AI 工作，并在它工作出错的时候快速发现问题并高效的解决问题，以及 AI 所缺乏的人类创造性思考能力”。

一、现状 ​

前端开发领域，在多年前就已经进入“大前端”时代，目前横跨的具体领域有：PC、APP、移动端、小程序、H5、低代码平台、大屏、物联网、AR/VR、桌面应用、服务端 等等。

前端，早已不是“HTML、JS、CSS”的切图仔形象，而是涵盖了更多领域，更多技术栈的综合性技术岗位。

那么，现阶段的“大前端”领域，都有哪些技术栈呢？

  • 主流四大框架：React、Vue、Svelte、Angular
  • 前端跨平台开发：React Native、Flutter、uni-app、Taro、NativeScript(-vue)、Cordova、Ionic
  • 前端桌面应用开发：Electron、NW.js、Tauri
  • 主流三大 UI 库：Ant Design、Element UI、Material UI
  • JS 运行时：Node.js、WinterJS、Bun、Deno、Nest.js、Express、Koa、Fastify
  • 前端工程化：Webpack、Vite、Rsbuild、Monorepo、Turborepo、Rollup、Parcel、ESBuild、Gulp、Grunt
  • 前端构建工具：Babel、TypeScript、PostCSS、Prettier、ESLint、Stylelint
  • 前端测试：Jest、Mocha、Chai、Sinon、Cypress、Puppeteer
  • 前端状态管理：Redux、MobX、Vuex、Zustand
  • 前端路由：React Router、Vue Router、Angular Router
  • 前端动画：GSAP、Anime.js、Velocity.js、Three.js
  • 前端可视化：ECharts、Highcharts、D3.js、Chart.js
  • 前端地图：Leaflet、Mapbox、Google Maps
  • 前端拖拽：React DnD、Vue.Draggable、SortableJS
  • 前端富文本编辑器：Quill、Draft.js、TinyMCE
  • 前端图片处理：Fabric.js、Pica、Exif.js
  • 前端视频处理：Video.js、DPlayer、flv.js
  • 前端音频处理：Howler.js、Web Audio API、AudioContext
  • 前端网络请求：Axios、Fetch API、SuperAgent
  • 前端存储：LocalStorage、SessionStorage、IndexedDB、WebSQL
  • 前端权限管理：OAuth、JWT、SSO
  • 前端监控：Sentry、LogRocket、New Relic
  • 前端性能优化：Lighthouse、WebPageTest、Chrome DevTools
  • ......

注意： 不管什么工具，用在什么场景，都是工具，关键在于我们如何使用它。做好工具选型，做好工具链的整合，做好工具的优化，才是关键。

二、趋势与展望 ​

2.1 AI 工具的深入融合 ​

2025 年了，如果你做前端开发还不会使用 AI 工具进行工作提效，那你就 out 了（简单来说，留给你的适应时间并不多了）。

  • Devin
  • Cursor
  • Trae
  • Windsurf
  • Google Gemini
  • ChatGPT
  • Deepseek
  • ......

2.2 代码工程化 ​

工具再好，再花里胡哨，工作的核心终究还是要回到具体的产品以及业务中来，底层依然还是各种代码，有代码就有管理，有管理就有工程化。

大家回想一下，我们引入 Typescript 的目的是什么？引入 webpack、vite、rollup 等打包工具？引入 eslint、prettier 等代码规范工具？引入 git、gitlab、github 等版本控制工具？

这些都是为了提高代码的管理能力、可维护能力、可扩展能力，这些都是工程化的体现。

我们做开发，很大程序上就是想着“快速、优质、稳定”的交付产品，而工程化就是实现这个目标的重要手段。

这就是很多公司的架构师需要重点思考的地方！！！我认为，一流程序员就是搭建流程、规范、优化流程，二流程序员就是写代码、优化代码，三流程序员就是写 bug、改 bug。

2.3 Rust 化 ​

待补充中......

2.4 放大视角 ​

如果你作为前端开发人员，你长期把自己定位为“前端开发”，我认为是缺乏竞争力的。

我们除了要关注前端，还要关注整个互联网行业的发展，关注整个技术行业的发展，关注整个社会的发展。

前端领域的技术更新换代非常快，工具集也是层出不穷，但万变不离其宗，我们要做好从底层理解技术原理，理解工具的优劣势，才能在具体架构和业务中，找到最合适的解决方案。

既要懂产品，也要懂技术，更要懂业务。会前端开发，也要会 Node 开发，如果你会了 Node 开发，那你就要关注更多的后端技术，比如数据库、服务器、运维等，而不仅仅只是用 Node 开发几个简单的 API 接口就结束了。试试用 Java、Go 语言做点项目试试，看看效果如何。这些都是你扩大视角，提升竞争力的重要手段。你把整个链路都打通了，你才有可能成为真正的架构师，你才有可能成为真正的技术专家。

参考资料