2023年度总结——我为什么选择了前端

前言

2023年对我来说是彻底改变了自己的一年。

在这一年中，我从稀里糊涂的半吊子学生成功上岸职场，将自己职业初期的角色定形为Web前端工程师。同时，在技术方面也从只会用react写简单的CRUD应用进化成了了解一些底层技术、对各种工具使用都更得心应手的多面手。

趁着2023年还没有完全过去（春节还没过呢），我决定赶快把这篇攒了一年总结发出去，希望能给对前端开发抱有兴趣或疑惑的同学有所帮助。

重度拖延症患者的自白

从3月份就开始筹备这个系列，到2023年底2024春节了终于发出来了。

在略显漫长的完善和准备时间中，本文的主题也发生了多次的变化：

• 最开始想做的是关于前端工程化相关的内容，主要集中于构建工具（如webpack）这一块的变化
• 后面因为对Web开发更熟悉了，逐渐变化为了整个前端为什么要做工程化、技术演变的过程
• 最后，到年末了又加上了个人的入行总结，但由于内容串联不是很好所以没赶在元旦发出来

内容组织形式

在正式发表之前，我将本文的内容分为了以下几个板块，其他部分可以在我的博客中看到。

• 本文主要关于对入行经历的思考和对整个前端生态发展的想法
• 对前端工程化的思考转移到了 《为什么要前端工程化》 的博客中
• 对模块化规范的研究在之前的**包管理器系列（npm篇）和《Node模块解析策略》**博客中均有涉猎

这里也是我第一次系统地思考和输出我对整个前端生态的看法，以及对我并不长的前端学习生涯的一个简单总结。

我的前端入行经历

这一段仅供看个乐子，不值得学习和提倡

2021年底：稀里糊涂的入行

2021年末，也就是大二上学期末，为了找点事情做和挣点学分，我稀里糊涂地报名了我们学校和腾讯合办的Web前端开发课程。

在此之前，我唯一的前端开发经验（如果能算是的话），就是之前用DW写过几个丑的要命的网页。

但是我们最终却需要用React实现一个全功能的网易云播放器 （2024-01-29悲报：造福一方的网易云开源API被网易告然后Archive了），就像下面这样：

当时的一点基础都没有的我完全跟不上这种上来就React开写的课程，基本什么都没听懂，稀里糊涂混到了结业就让我们完成一个项目。

只能硬着头皮上，什么基础都直接跳过，赌上计算机学生最后的自信，直接进React文档开始自学。最终，在借鉴了大佬的项目 后跌跌撞撞地做完第一个项目——网易云Web版。

从文档里就能看出当时的我们真的是纯小白，工程化开发中脚手架部分和Web页面部分傻傻分不清、对UI、构建等技术栈一概不知，连Git协作都不是很熟练（被merge冲突折腾了一整天的痛苦回忆）。更惨的是，现在看来我似乎当年都选择了难度最高的技术栈开起手（QAQ）。

不过好在虽然啥都不会还抄别人的作业，最后这个项目还是进入了答辩流程，保留了大二组最后的荣光。但就算做完了项目，我脑子里对前端开发仍然是一片模糊，只有一些云里雾里的想法和很多问题。

但毋庸置疑的，这个项目的最后完成给了我很大的鼓舞，这也是我最后入行的一大契机吧。

2022：在项目中学习

后续整个大二下学期其实对前端没有什么进一步的学习和了解，对整个前端技术的态度也没有什么改观，继续持有一种写JS和样式的人算什么程序员的态度。（回旋镖打到自己了属于是）

阴差阳错地，我又参加了金山和我们学校合办的前端课程，报名时的想法其实是我都能自己独立完成项目了，水你个学分还不简简单单。

确实，这次有了上次的自学基础，我更加得心应手了，而且老师讲得也比上次地更系统、更基础，让我好好地补齐了一下相关短板。虽然大部分还是靠自学，在课上只是了解到相关主题是自己的薄弱点。

后续也陆续接了几个外包项目，涉及到Hexo博客系统 、Electron客户端 等等，这个时候我对前端开发开始有了一定的认知，包括对JS开发思想、React开发模式等，也是在这个时候我开始有了自己的博客网站（毕竟对于前端来说个人网站就是自己的简历和脸面）。

具体的突破点个人觉得比较重要的有：

• 理解函数可以像普通对象一样作为参数、返回值传递，这是从古典的过程思维迈向函数式编程思维的重要一步
• 理解Promise异步的逻辑，明白如何中消除所谓“传染性”（即去掉Promise包装取得数据），个人感觉这一步完成了有一种开悟的感觉
• 了解React在什么时候会重新渲染，能熟练并正确地使用常用Hook（如useState、useEffect和useRef）
• 能在简单应用中处理好React的数据流和组件封装，可以正确地提取数据为props传入，实现基础的组件封装和复用
• 了解并使用TypeScript，在简单应用开发中可以做到不用any也不出现任何类型错误
• 了解现代工程化前端应用的运行全流程，从开发环境（运行时 & 包管理）到构建部署（转译 & 打包 & Web部署）使用了哪些工具，分别做了哪些工作

从个人经历来看，最不推荐的学习方法就是抱一本大部头开始看，个人推荐的是从项目中学习，在博客和文档中查漏补缺，遇到重点和感想记录下来汇总，输出为博客，形成一套实践 → 遇到问题 → 收集信息 → 解决问题 → 输出信息的学习链路，这条链路实测在工作中也很有用。

如果找不到项目，其实现在很多文档里已经提供了示例项目，比如很多前端框架都会教你实现一个简单TODO App，或者看看Github上著名的project-based-learning 。

2023上半年：第一份前端实习

在进入大三后，我经由之前的课程评估进入了金山实习，做一些基础的前端工作，包括中后台埋点数据分析平台、原型开发等。由于在项目学习中，我已经对前端有了一些基础的系统认知，包括包管理器（npm）, 构建工具webpack还有开发中的许多实践积累如React Hooks、组件拆分与状态提升以及TypeScript类型使用等。

彼时的我，已经可以从零开始创建项目，完成webpack配置，也独立完成了几个项目，自信空前地高涨。

在实习做的项目中，我披荆斩棘，不仅成功转型写了一段时间Vue，还在WPS AI原型设计和实现上做了一点贡献，发布了几个npm包（虽然都在内网）。

这段时间的工作经历对我来说其实是很宝贵的成长，虽然从工作内容上说还算比较简单，但我还是学到了不少。

在工作中学习，不放过可能存在的改进点或者缺陷；这点其实真不是空话，而是实现上面提到链路的重要渠道，也是不断进步的重要来源。在这段工作中，我学到的东西有：

• 基于内部邮件开发场景，首次进行了前端工具链开发：maileeze-core
• 首次进行npm包发布
• 首次写Docker镜像部署Node服务
• 学习现代前端开发部分知识，包括monorepo架构和不同包管理器的区别

面试驱动学习

在实习的过程中，我也不断地在寻找面试机会。第一次面试机会是字节飞书团队给的，当时毫无准备且不知八股为何物的我，自信满满地连接，灰心丧气地退出，被各种问题拷打得体无完肤。

在自信备受打击，消沉了几天以后，我决心恶补基础知识。当时的我还心高气傲，对八股不屑一顾，决心从JS基础开始学起。我的原计划是从JS的语言设计开始，从历史开始一步步学到ES6语法，再拓展到现代前端框架。但计划总是赶不上变化，一份份面试接踵而至，新问题扑面而来。

被堆积如山的问题掩埋的我，不仅面试全挂 （点名表扬某团挂了我8次），原有的学习计划也几乎无法推进，走投无路的我最终还是选择了八股取士，以八股面经的问题为大纲，对认为有价值的主题进行深入探究。

以这种模式，我的面试水平快速进步，同时也不是单单背诵了八股，也学到了一些底层逻辑和技术。在这种模式下，我对八股非常认可！现在我也保持着用面试题驱动学习新知识的领域，不过获取途径增加到了各种技术食堂、周报和日推中。

2023下半年：进入字节

在春招经历了一整个学期加上假期的败北后，我积累了大量的经验，前端基础迅速补齐，正当我对秋招蓄势待发时，字节一个电话又打了过来。

在三天时间内，我迅速完成并通过了三轮面试（这是我第一次这么顺畅的面试），并在三天内完成了金山实习工作的交接，直接飞到了北京，租房、报道一气呵成。

碰巧我到北京那几天遇到了特大暴雨，城市几近停摆，但还是顺利地在预期内完成了租房、报道等准备工作（说来我运气是真好，今年特大雪居家也被我遇到了）。

在字节实习的几个月，也是我个人生产技能进步最快的几个月，包括接触到一系列完善的生产脚手架和底层框架，这些技术形成了完整的应用部署生态。

在字节内部，借助这些成熟的底层能力可以快速创建和维护项目；研究这些项目的实现也对我的技术栈宽度有很大的提升：

• 前端技术框架（内部叫EdenX，外部叫ModernJS），包括构建能力、通用业务能力封装：
  • CLI工具开发思维，如Hook、生命周期、插件API等
  • 前端构建工具实现，如HMR、Bundleless Serverr等
  • webpack与rspack的loader和plugin生态
• 全流程流水线自动化，包括零配置Docker部署、Serverless部署、流水线协作等
  • 通用的Docker配置，支持通过简单配置就将产物编译好镜像
  • Serverless部署，使业务侧无需关心容器在什么环境中运行，支持自动扩容、运行Node服务
  • 全自动流水线，支持通过GitLab Action触发操作，通过原子服务对上述部署服务等进行关联，支持多方人员（如测试、产品等）
• 数据分析平台，包括后台埋点SDK、分析平台、AB实验平台等等
  • 埋点SDK提供给前端，为业务提供无须关心实现的埋点上报API，实现了埋点预收集、批量上报、兜底上报避免丢失等功能
  • AB实验和埋点数据分析平台结合，可以帮助PM分析不同方案的收益
• 前后端协作框架与平台
  • 通用API接口声明和请求代码生成，如swagger/OpenAPI、Thrift、Protobuf等
  • 通用配置下发平台，方便通过配置的方式、避免修改代码及逆行敏捷迭代
  • 低代码配置平台，支持非研发同学进行可视化读取和修改配置等，对于前端来说就是传统的B端开发

在上面的技术中，我最感兴趣的就是构建工具相关的技术，包括Vite Bundless Server、HMR等，在Landing期也花了大量的时间去研究，这也是我创作这篇工程化思考博客的最初契机。

横向对比，在字节我的技术博客产出相对金山时期明显是更少的，虽然期间我也发了一些文章，并且用Astro重构了我的博客系统，但字节更高的工作强度确实也让我积累了不少研究话题在Notion里。

我对前端的思考

前端的未来

其实走到这里我的职业规划初期基本就定形为前端开发了，虽说过程确实充满了意外，但最终走到这里我也并不后悔，因为我现在确实认识到了前端技术的广度和深度，也真正对其产生了兴趣。

都说前端已死，吵吵了很多年，2023年一波AI浪潮更是让前端死缓提前，但前端真的死了吗？

就我个人观察而言，现在的前端开发已经是两极分化很严重的情况，一些只有基础开发能力而没有技术深度或广度的前端er的淘汰被大大加速了，AI的存在虽说不能完全替代这中简单外包需求，但确实可以实现一个熟练开发者+AI > 很多菜鸟开发的效果。

另一方面，所谓大前端仍然有很广阔的发展空间，也是我未来在前端这个技术领域的发展和学习方向。

不断拓展Web技术栈：走出去（大前端），吸进来（使用其他技术改进Web）

一方面，从交互领域去看，广义的前端指所有涉及到与用户交互的地方，因此CLI算前端，TUI算前端，Web应用算前端，Native应用也算前端，这也是大前端一词当下最精准的释义，一切在终端（end）上与用户的交互系统的设计与实现。而开发在这个领域的角色，就是不断地提高页面质量和开发效率，从Web1静态页面到Web2可交互再到Web与Native融合，以后的趋势依然是通过不断提高开发效率和性能来提高页面所能实现效果的上限，用一套Web逻辑去开发更多东西，展现更多效果。

另一方面，也是我最感兴趣的方面，是从语言视角去看，对传统视角下“写JS的就是前端”做进一步地拓展。正视JS的短板，如性能瓶颈、历史包袱等，在此基础上做拓展和优化。

• 在性能产生瓶颈的领域，如工具链生态，对JS工具用Native语言重构，如当前非常火热的Rustify工作
• 在框架领域，针对开发效率和性能不断创新，如Signal和React Server Component
• 在语言上，对JS不断改进，尽量使用新的、好的范式，抛弃历史写法；在JS不再适用的场景积极拥抱新技术选择，如在性能敏感场景使用Native编写WASM、使用WebGPU完成图形渲染和深度学习计算等。

大前端技术栈

本部分新人可跳，这里是我对“前端已死”这个问题个人的看法

大前端技术栈在我看来分为横向和纵向两个维度，这也是我认为在所谓“前端已死”的今天，一名前端工程师可以也应该去点亮的一些技能点。

横向拓展

横向是在UI/UX层（通俗地讲就是所有与用户打交道的领域）不断拓展和融合前端技术栈：

• Hybrid方向：应用内嵌Webview组件，如H5网页，抖音Lynx，微信小程序等，只将UI逻辑交由Web技术实现，核心功能则由Native客户端实现
  • 优点：相比传统Native开发更灵活，Web部署也较方便，与网页没有本质区别
  • 缺点：本质上仍是浏览器加载网页，无法达到Native体验
• 跨端开发方向：特指将Web技术栈迁移到Native平台，如桌面端的Electron、Tauri和移动端的React Native等
  • 优点：降低拥有前端技术栈的开发者横向拓展业务的门槛，可以使用几乎同一份代码快速创建跨平台应用，达到近似Native的体验
  • 缺点：无法跳出前端技术栈本身的局限性，如浏览器模型或直接使用浏览器内核渲染等，性能上有硬性瓶颈
• Native方向：将前端思维拓展到传统客户端开发中，诞生出新的跨平台开发模式，以Flutter为代表
  • 优点：和跨端开发一样一次开发，多端部署，且理论性能上限更高
  • 缺点：对于传统Native开发者和Web开发者都有一定学习成本

纵向拓展

纵向则是从前端一路向后，走出浏览器的虚拟机，探寻Native的世界：

• 全栈方向：使用前端化的思想去探索Web后台的边界，如使用JS/TS进行服务端开发，常见的工具有Deno/Node、NestJS、tRPC、TypeORM等（也不一定要是用JS/TS，Go/SpringBoot/.NET都是很好的技术栈）
• 工具链方向：对前端工程化体验进行整合和升级，比如使用对现有工具进行优化（如swc和esbuild），对新场景提出新的方案（如BFF框架），或对现有场景进行抽象和整合。
• 底层方向：对Web技术的提供层进行开发，如WASM、WebGPU、Web Workers，甚至Chromium内核本身，