我的前端职业进阶之路

大家好。我叫陈梦兰，花名沫沫，来自政采云团队，担任前端技术专家一职，实线带领 10 人负责项目采购业务线，虚线负责前端物料体系建设和前端 AI 智能化方向。今天给大家分享的主题是：我的前端职业进阶之路。

本次分享的内容主要分为两个部分：

第一部分，关于个人成长，整体概览下我的个人职业发展过程，以及在这个过程中，我在每个阶段所遇到的问题、瓶颈和破局的方法。

第二部分，主要是通过整个成长过程后，沉淀的一些经验总结和对未来的展望。

个人成长过程

第一阶段：一线执行

2014-2017 年，当时这个阶段的目标是：夯实技术基础、扩展技术广度，尽可能多的接触复杂的业务场景和技术方案。

在编码上，要关注编码规范和代码质量，尽可能每个需求都自己做下 Code Review，或者让师兄一起 Code Review，总结最佳实践。平时可以抽空看一些开源项目的源码，会有很多的收获。

另外，提及到扩展技术广度，我个人觉得比较好的一种方式是：从实际的场景或者问题出发，去寻找解决方案，过程中去学习和实践新的技术，这样成长速度会更快。

如果我们只是一门心思学了很多东西，而短时间内得不到实际场景的应用，一方面容易感觉到迷茫和困顿，另一方面，很多时候只有在实际场景中应用后才会发现一些问题和新的关联知识点。

第二阶段：业务接口人/师姐

2018 年开始带 2 个同学，负责一条业务线，独当一面。

当时除了自己作为那条业务线的核心开发以外，还需要协助新人/师弟成长，帮助他们提升技术能力和职业化能力。

作为业务接口人，需要把控技术方案的合理性和扩展性，了解业务的短期和长期规划，考量需求的投入产出比，尽可能的帮助业务实现利益最大化等等。

回顾那个时候，其实也是综合能力快速提升的阶段。潜移默化中，跨团队的沟通协调能力，风险把控能力，业务理解力都有很大的提升。

第三阶段：组长 Acting

2019 年开始带 7 - 8 个人，负责多条业务线。当时大家都是之前来自不同的业务团队，相互之间的熟悉度和信任度会差一些。

所以，刚开始我是刻意安排两两结对的方式来对接不同业务，让大家彼此之间快速熟悉起来。我一直认为，没有什么比一起 “打过仗” 来得更容易建立信任关系。

随着整个小组的凝聚力逐渐加强，而后，为了更好的支撑多条业务线，就要考虑小组的梯度建设，业务接口人的培养和我自己的 Backup 培养。

以上这些都是对小组内部的团队建设，除此之前，还需要具备某个领域的技术专项化能力，虚线能带动其他人共建和落地一些技术建设的事情。

我个人在这个阶段负责的是前端物料体系的建设。当然，在这个阶段需要面对更多的人和事，更多跨团队的沟通和推动，对自身软实力的培养也会很有帮助。

当前阶段：Team Leader

从工作内容上来说，很多跟去年是类似的，今年负责的也是对我而言崭新的业务和团队。

目前对我而言，也需要进一步强化体系化能力、对内对外的影响力、跨部门的推动和建设、梯队建设和人才培养、绩效管理（确定绩效目标，过程跟进，结果评估）等等。

第一阶段：一线执行

在一线执行阶段，当时遇到的问题是，在外企这样一个比较安逸的环境工作了 3 年后，明显感觉到自己的成长已经进入了滞缓期，同时在工作节奏偏慢的氛围下，感觉这样下去自己会走下坡路。

所以，当时的选择是跳槽来到了政采云。但在半年多之后，已经逐步熟悉了业务和技术栈，能独立负责后，发现自己本质上还是在做 “纯业务执行” 的事情，跟之前没什么太大的区别。

这边讲的 “纯业务执行” 指的是，能够很好的把业务需求做完并按时交付，但并不会思考如何从业务和技术的角度出发，做得更好。

破局：认知的突围

这个阶段的破局，很大程度是思想和认知方面的转变。

我意识到，换平台并不能解决根本问题，而本质上是我把自己当做了一个单纯的执行角色，觉得做完了产品需求就够了。

但业务支撑并不只是如期交付业务需求就可以了，而是要自驱的去发现业务中的一些痛点问题，寻找解决方案，并推进落地，然后再不断迭代优化，形成一个完整的闭环。其实就是从做完到做好，给业务带来改变。

有时候我会想，对公司而言，我的个人价值点在哪里，如果只是做业务纯执行，那么其实所有人都是一样，因为做完业务是最最基本的，本职工作而已。

所以，个人价值的体现在于，能发现别人发现不了的问题点，解决别人解决不了的事情。

案例：知识问答小机器人

这边给大家分享一个具体的 Case。当时有个知识问答小机器人的业务需要交接到我这边。

交接过程中，和业务方、产品提前沟通了后续一个季度的业务规划，期望在全平台所有业务的所有页面全部植入这个小机器人，总计 100+ 个前端应用。

但基于当时植入的技术方案，这个植入成本非常高，每个业务线需要挨个手动接入，并且后续小机器人的迭代，各业务线也需要发版。

显然当时的技术方案对后续业务的扩展是有影响的，所以，决定推动重构，最终实现了个业务线的 0 成本植入，后续迭代各业务线也无感知。

这个 Case 其实很小，但可能大家在日常工作中都会遇到类似的问题。

我们可以总结 2 点经验：

• 第一，主动提前了解业务后续规划，不要只看当下产品导入的需求，会对技术方案的选择很有帮助
• 第二，需要有一定的洞察力，能发现一些痛点问题，寻找解决方案，并推进落地，帮助业务快速推广

针对一线执行阶段，我做了下复盘和总结，主要分为 4 个方面：在这个阶段的基本要求、更高的标准、素质瓶颈以及能力结构的瓶颈。

基本要求：

包括业务理解和支撑能力；独立承担和独立执行；扎实的技术功底和编码质量；风险反馈意识。其中风险反馈意识是比较容易忽略的，这也是一个比较重要的基本要求。

• 为什么风险反馈意识这么重要

  我们很难做到所有需求在具体执行过程中，确保完全没有风险。导致风险的原因有很多：

  • 比如前期技术方案评估有疏漏；
  • 在研发过程中需求有变更；
  • 需求拆解不够细，导致估时不够准确等等。

• 假设真的出现了风险，那及时反馈就很重要了，如果是在最后一刻搞不定了才反馈的话，那团队也无法横向协助解决问题，可能最终会导致项目延期

• 千万不要觉得反馈风险是不是显得自身能力不够，在我看来，及时反馈风险是职业化的体现。事后可以复盘，后续如何规避类似风险的发生，但当下最有效的就是及时反馈问题

• 这个阶段往往已经一个人负责某个业务模块或者业务线了，所以，业务理解力、独立承担和独立执行也很重要，这点能体现出我们的技术功底和解决问题的能力

更高标准：

包括对编码质量的精益求精；自驱主动的发现痛点问题，具备强执行力，针对问题能输出好的解决方案并推动落地。

• 一部分人可能对问题的感知力比较弱，本质上也没有精益求精的习惯。
• 还有一部分人缺乏的不是对问题的感知力，而是发现问题后的视而不见，可能会吐槽下，但不会主动去寻找解决方案，并推动落地解决。
• 但其实我们的目标是问题能够最终得以落地解决，所以就需要具备强执行力。

素质瓶颈，体力

在这个阶段大多数事情都是通过体力来解决，下个阶段就是用脑力来解决问题。

能力结构瓶颈

包括业务理解能力、技术方案能力、沟通能力、反馈意识、推动落地的强执行力。

第二阶段：业务/团队核心

在作为业务接口人/师姐的阶段，开始带几个新人，负责一条大的业务线。当时遇到的问题用一个字概括就是 “忙”，但这种情况下的忙其实是有问题的。

由于当时自己在这条业务线待的时间比较长，对整体业务更熟悉，所以其他协作方遇到问题会习惯于找到我。

刚开始很多事情还是习惯于自己来解决，每天加班到很晚，而对于新人而言，反而得不到更快速的成长，小组整体的业务支撑能力也偏低。

破局：思考和复盘

越忙的时候，越要抽出时间来思考和复盘。

当变成业务接口人之后，不仅要考虑自己个人的能力提升，更要学会靠一群人的力量解决问题，更要考虑其他人的成长和小组整体的业务支撑能力。

要给新人足够的授权和信任，制定新人培养计划，在过程中进行辅导，每周阶段性沟通，协助新人快速成长。

同时，每周组织小组内部 Code Review、业务分享和技术分享等等，这些都是提升小组成员业务理解力、技术能力以及整体产出能力的很好方式。

案例：物料体系0到1的建设

这个阶段，除了实线负责业务线以外，还虚线主导整个前端物料体系的建设。

这边给大家解释下什么是 “虚线” 的技术建设。在我们公司并不是由独立的前端架构组来做技术建设，而是来自不同业务线的同学组成 “虚线” 小组的形式。

本身所有的技术建设其实都是为业务服务的，业务线的同学会更深入了解业务上的问题，以及如何落地。

接下去，我大概回顾下，如何从 0 到 1 规划和建设整个物料体系的。

当时我们面临了什么问题呢？

• 第一，由于历史原因，各业务线的视觉规范不统一
• 第二，当时公司内部只有一个 React 选型的 UI 组件库，对整个物料体系而言还只是很薄的一层

我们知道物料体系建设很明确的目标就是对内进行研发提效。首先，我们思考一个问题，如何实现研发提效？对物料体系而言，很直观的 2 个方向就是通过物料复用和工具化来提效。

那物料应该包含哪些内容呢？因为前端交付的是完整的页面，我们可以把一个页面拆解为模板、业务组件、UI 组件、底层视觉规范，具体详细见上图。

而工具化其实就是为了让研发同学在使用物料的过程中更加便捷，进一步提效。当然，还有任何技术建设中，必不可少的一个模块，就是量化数据统计。

数据可以很好的反映出整个物料体系在业务线的使用情况，也是为后续物料体系不断优化迭代提供数据支撑。

其实，我的第一版规划里面并没有全部涵盖上面所有的内容，大概只有 70% 左右。我想说的是，有时候很多事情一下子想不全没关系，这是一个逐渐完善的过程。先 0 到 1 建设最最核心的能力，然后再不断丰富完善，进行 1 到 10 的优化迭代。

另外，这边也给大家分享下，如何做好整体规划？明确且细致的规划能够让大家更有目标感和方向感，也能更好的把控推进节奏。

一种思维方式是，先确定大方向需要做什么，然后细化各种 Action，最后思考这些 Action 达成了哪些目标。

但其实更好的是以下这种方式：

1. 从业务/技术场景出发，分析背景/现状
2. 根据现状，分析和罗列出痛点和问题
3. 为了解决这些痛点和问题，我们需要指定的整体目标是什么
4. 将整体目标进行细化拆解成阶段性小目标
5. 针对每个阶段性小目标，思考要达成阶段性小目标，有哪些可突破的方向
6. 有了具体方向后，针对性的拆解成对应的 Action
7. 制定里程碑计划
8. 落地和推广

针对业务接口人/师姐阶段，同样做了复盘和总结，主要分为 4 个方面：在这个阶段的基本要求、更高的标准、素质瓶颈以及能力结构的瓶颈。

1. 基本要求，包括深入理解业务、独当一面、培养新人/师弟、把控风险、把控技术方案、沟通协调能力。
2. 更高标准，包括考虑投入产出比（ROI）、帮业务赢、带动和影响他人。
   • 为什么投入产出比的考量很重要？
     • 在业务高速发展的公司，业务需求的增加速度是非常快的，通常需求体量是超过研发资源负荷量的。
     • 在研发资源有限的情况下，我们需要考虑投入产出比，和产品一起实现业务价值交付的最大化。
3. 素质瓶颈，脑力。
4. 能力结构瓶颈，包括主导能力、流程感知、ROI 考量、跨部门的项目 PM 能力。

第三阶段：Leader

第三阶段 Leader 阶段，因为今年正好刚轮岗到了一个新的团队，所以我着重讲下今年遇到的一些问题以及解决方法。

来到这个崭新的团队，第一件事就是盘人和盘事，过程中我发现了以下几个问题：

• 业务流程链路长，复杂度高，研发同学对整体业务熟悉度不够
• 部分项目的技术选型老旧（jQuery），历史 “债务” 较多
• 合作伙伴同学占比较高，代码质量参差不齐
• 需求迭代流程不合理，一线同学疲惫感较重

破局：团队环境升级

面对上述这些问题，目前我的解决方法如下：

• 分享沉淀：加强内部业务分享，建立业务知识库
• 技术选型升级：降低复杂度和维护成本，研发提效
• 流程规范：标准化、合理化
• 梯队建设：培养自己的 Backup。每条业务线都配备业务接口人+合作伙伴。每个新人指定对应师兄，一对一帮带
• 团队凝聚力&氛围：互帮互助、乐于分享、群策群力

作为 Leader，我也还在不断地学习和成长中。回顾在这个阶段的经历，我也简单做了下复盘和总结，同样分为 4 个方面：在这个阶段的基本要求、更高的标准、素质瓶颈以及能力结构的瓶颈。

1. 基本要求，包括梯队建设、绩效管理、沟通协调、推动优化&改变。
2. 更高标准，包括破圈建设、跨部门项目的 PM 能力、探索新的技术领域。
   • 破圈建设就是跨出前端职能部门，以更开阔的视野去看，各个职能部门之间更好的协作和共建，帮助业务拿到更好的结果。
3. 素质瓶颈，心力。
4. 能力结构瓶颈，包括前瞻性、目标感、主导力、整合力、推动并拿结果的能力、影响力、领导力。

职能·能力矩阵

上述图表达的是作为一个优秀的职业化的前端，所该具备的能力项矩阵。

纵向分成 4 块，业务支撑力、技术创新力、组织发展力、内外影响力。很多能力项之前都有详细讲过，这边就不再赘述了。

其实每个人的成长过程都是在不断的丰富和提升自己的能力项：

• 在业务非常忙的时候，过程中可以重点提升自己业务支撑力。
• 在业务相对稳定的时候，可以做一些技术建设，更好的为业务赋能。

• 任何职业阶段，过硬的技术功底都是立身之本
• 关注行业动态、了解新技术和趋势
• 多横向/纵向对比，三人行必有我师
• 勤复盘，勤总结
• 保持利他和共赢的思维

未来：智能化

提到未来，我所想到的一个词就是 “智能化”。过去的几年我们用 Low Code 搭建的方式完成了一次大幅度的提效，但搭建最终还是要依赖于组件的迭代。

相信接下去就是智能化的时代，简单的 HTML + CSS 都可以通过智能化的方式直接从 UI 视觉稿生成可用代码。

目前我们已经开始了 “前端智能化（UI to Code）” 方面的探索，对这方面有兴趣的同学，欢迎加入我们。

我个人非常推荐《金字塔》这边书籍，它能够帮助我们强化思考架构能力和逻辑沟通能力，帮助我们更高效的思考、表达和解决问题。