聊一聊前端程序员的现状与挑战

前端这一块，得益于日益更新的前端框架降低了入门门槛，得益于目前全自动、半自动化的开发、测试、上线流程，也得益于目前越来越标准的产品设计流程和规范，等等这些都会让你的开发效率和工作量评估更加透明化。

可能让某些类别的前端工作逐步从一个脑力工作者变为劳动密集型的体力工作者。

前端是一个很广很大的领域，有一定的广度和深度；但是不可否认，也许80%的工作都是简单与单调的，随着技术的升级、技术门槛的降低，经过一些简单快速的培训，越来越多的人可以从事这80%的工作 => 整体看，前端的从业人员越来越多，好像越来越卷了。

但是剩余20%的具有一定复杂性、创造性、创新性、架构设计性、挑战性的工作，却不会受到太多影响，大部分情况，也正是这大约20%的工作，决定了一个产品、一个公司、一个团队的关键部分，所以如何具有足够的能力、经验和理论来承担、组织更具有价值和挑战性的这20%的工作，伴随解决挑战性问题的实战积累更多的经验和解决问题的能力，进入一个正向循环是在开发过程中不断成长和晋升的关键。

所以，前端的入门门槛低了，原本对你来说已经掌握技术的和不容易实现的内容，现在大家也许跳一跳就能伸手够到了。那么自然会要求你也不能安于现状，要学习和掌握更多东西，知识的更新周期也要缩短，才能时刻保持前端技术的领先性。

难点一：快

"前"端，顾名思义，是冲在"前"面的，好比直接服务于群众的派出所和整体把控的市局、省厅，跑在前面的派出所在响应突发事件和执行任务上的反应速度和周期都有更高的要求。

前端的"快"，体现在用户需求变化快，技术更新迭代快，和开发响应需要快等方面，都要求你不得不"快"起来。

1.1 用户需求变化快

用户使用的大部分产品的都是具有前端页面的产品，自然相关需求大部分是面向前端的。

后端可能开发一个接口，输入输出保持足够的通用性，只要没有大的变动，几周或者几个月不用变化，更多关注性能和扩展性。

从 需求 => 原型 => 设计 => 实现 的几个环节，前端也是研发岗位中更多和需求打交道的岗位。

所以需要有足够的经验和技术积累，能够对产品经理/客户提供足够灵活和可行（技术可行，时间可行，成本可行）的技术方案，来响应快速变化的需求。

1.2 技术更新迭代快

硬件升级速度快 => 客户需求变化快，相对于后端，大数据，运维，前端的技术更新迭代快是必然的。

一个接一个的框架，一个接一个的版本，今年还在用的16.7，明年发现已经过时了，17.0的生产力和便利度提升一大截。

所以要时刻保持技术的新鲜度，才能保持自身的领先性。

否则很可能一个新框架，新技术的产生，生产力直接翻倍，你学的稍微慢一点，差上半年一年，可能就让新人弯道超车了。

1.3 开发响应需要快

同样，需求要求快，技术迭代快，生产力提升快，自然开发、上线、测试、发布的周期也更加快，而前端是最受这个影响的。

因为看得到，摸得着，你的工作量是透明的，所以你的工期是可预估的。

也许下面的场景会经常出现：

• 上午出设计，预估开发6小时，测试0.5小时，那么今晚上线

• 11点测试出bug，预计修复半小时，12:00 之前要修复上线

难点二： 广

前端是一个同时具有广度和深度的领域，要解决的问题种类和范围覆盖面过于广，所以即使你的数据结构算法掌握的不够牢固、代码基本功不够扎实、对操作系统、线程、并发的概念理解的不够深入，但如果你能够具有一定前端知识的广度和经验，也能够让你在能够让你在部分的前端开发场景中游刃有余，而这里面的每一个知识和经验也许并不需要太多的技术积累，知道了就是知道了，不知道就是不知道，所以前端的积累很重要。

临时想到的一些比如，数不完，且不同领域用到的都会不一样

• 基础类: 常见的开发框架(React, Vue, Angular)有什么不同，开发框架的不同版本有什么特性(Vue 2-3, React 16-17-18), ECMAScript 2021,2022最近更新了什么特性等等

• 基础组件: 数据持久化, 数据状态管理, 路由管理, UI框架等

• 部署与发布: 打包过程控制, 依赖管理, web服务搭建, SEO, 性能优化等

• 布局类: 不同的CSS框架, 常见布局设计模式等

• 通信/协议类: HTTP1&2, HTTPS, RESTful, 常见认证协议, CORS, 长连接, SSO, DNS, TCP等

• 可视化: 2D, 3D, 常见可视化组件使用熟练度, canvas, webGL, 基础/进阶动画效果等

• 多媒体: 视频播放, 地图, 支付, 分享, 埋点, 兼容性, 声音等

• 框架/大前端: 微前端, 常见native开发框架, 小程序等

• 开发流程: 常用测试框架, 常见设计框架, 产品设计流程, 软件工程等

• 开源细节能力积累: 日期, 二维码, 水印, 动效, 加密, 压缩等

难点三： 深

如果你接触的产品日活达到数十万人，如果你开发的模块是团队内的公共模块，如果你要负责一条核心产品线前端整体开发把控，如果你要负责企业多个前端团队的系统开发的多条产品线，会遇到更多样，更复杂，更具有挑战性的前端问题，简单总结起来大致有如下几点。

3.1 代码基本功与设计模式: 能够处理复杂的数据状态与程序逻辑

这个属于所有程序员都需要面对和掌握的基本功，但这一块近几年由于框架的兴起，很多人投身于前端新知识的学习和普通功能页面的开发上，认为能够开发出来就行，从而忽视了作为程序员最基本的要素：代码。

但是要知道，框架、新的语法糖、新的语言会一直在变的，重要的和不变的还是代码基本功（涵盖很多方面），因为这个很大程度上可能会决定了你的发展上限，在关键时刻是你和别人拉开差距的关键，以及你的开发效率，开发质量，表现出的靠谱程度，能够同时掌控的产品线数量，都和你的代码基本功息息相关。

3.2 具有丰富表现能力的可视化效果

既然是前端，另一块不可忽视的就是可视化效果，这里说的不是表格，表单，按钮，弹框，css样式这种基础的可视化，目前的文档完善程度和强大的搜索引擎，都应该能够让你很快按照设计稿完成静态页面的样式渲染。

这里的可视化效果是通过使用svg, canva, webGL等技术进行更加灵活的可视化渲染的方案，可以说在前端开发中是很独立也很不同的一块。

将这些技术和相关的技术框架echarts, d3.js, three.js用活用好具有一定的挑战和理论知识，也十分也场景相关，但是这一块的熟练人才目前在市场上还是稀缺的，很多高阶的开源组件和大型产品的核心页面，都少不了这些技术的加持。

3.3 具有合理设计的前端公共组件

这一块其实也可以算代码基本功，也可以算设计模式与面向对象思想。当你接触到中大型项目或者企业中的多个团队都需要使用你的组件时，你需要对组件的设计、接口、内部实现进行充分的考虑和设计：是否符合企业统一的设计风格，是否在不同浏览器不同分辨率上都能正常显示，是否兼容不同的框架版本，源码是否容易维护是否可以内部/外部开源，组件调用接口是否合理是否足够灵活易于维护，如何安装与升级等等等等。

就好比要大家可能经常用的Ant Design或者其他UI框架的table组件，一般说明文档就十几页，对应背后的程序要经过更加精细的设计与实现。

3.4 前端架构设计 & 工作流程把控

当你负责多条产线的前端研发时，面对相对频繁的人员流动，面对日新月异的技术框架，面对公司内部的安全、部署、风格、规范要求，面对第三方测评公司或者合作单位的技术要求时，你可能会发现，如果没有一个统一的，良好设计的前端架构，会给团队之间的切换、合作、新人的培训、技术方案的统一带来很多麻烦，直接影响就是人效不足，分支混乱，经过一段时间以上的代码难以维护，好像狗熊掰棒子一样，好像都很忙，但只会越来越忙丝毫得不到改善。

这就需要一个更大的框架设计和工作流程定义，这个既依赖你的技术深度，也依赖你的技术经验广度；你的技术和经验要能够服众，你的方案要足够灵活能够适应互联网和企业的发展，在你定义的框架下前端整体的效率、质量能够得到保障与提升。

作者：JosiahZhao
来源：juejin.cn/post/7113560877067927560