复盘我的前端专家长成之路

左手的ㄟ右手 2022-12-19 11:43 177阅读 0赞

## 正文如下 ##

> 本文是第十一届 - 前端早早聊女生前端职业发展专场，也是早早聊第 73 场，来自淘宝的前端技术专家 — 珑晴 的分享（完整版含演示请看录播视频和 PPT）：

![format_png][] ![format_png 1][]

大家好，我是来自阿里巴巴的珑晴，感谢 Scott 的邀请，非常荣幸能在女生前端专场给大家分享我这几年的技术成长经历。

## 分享大纲 ##

这是我的分享大纲，包括如下 4 部分

*  自我介绍
 *  职业经历
 *  关键技能
 *  一些反思

## 自我介绍 ##

我先介绍下我自己，我是 16 年校招实习转正进入的阿里，当时是在聚划算前端团队，随着业务变化一路从聚划算到天猫再到现在的淘宝，负责日常活动营销的同时，也多次参与大促会场&互动的研发，在支持业务的过程中不断挖掘提炼创新，最终完成从前端小白到前端技术专家的蜕变。

![format_png 2][]

## 职业经历 ##

接下来，我将结合这 4 年，具体谈谈我的前端成长之路。

#### 职场初探-实习的那几个月 ####

首先是实习期，当时是北邮的一个师兄内推来的杭州这边。实习期间呢，我主要是负责 2 块东西， XList 和周末淘宝， XList 是聚划算之前的一个解决无尽滚动的框架，当时主要还是在熟悉团队的工具链、看源码，顺便给其他业务打打杂。

![format_png 3][]

**这个时期的重点**是**团队融入**和**兴趣探索**，对实习生本身能力要求并不高，所以这个阶段的同学们不要过于焦虑，重点还是看自己的**个人意愿与团队的匹配度**来进一步决定是否要继续待在这样的团队。

![format_png 4][]

#### 新人菜鸟-入职第1年 ####

然后是入职第 1 年，我的菜鸟时期。我入职的时候，刚好赶上聚划算整个在做品牌升级，当时存在一个商家素材不规范的问题，亟需解决以提升用户体验

![format_png 5][]

我就在师兄的指导下，设计了这么一个基于 PSD 解析的规范化合图方案，这是技术方案的简图

![format_png 6][]

在 PSD 解析的基础上，我还提供了一个可视化界面给设计师调控实现配置生成图片，界面是参考 sketch 实现的

![format_png 7][]

这个方案在聚划算整个实施之后，也取得了很好的业务结果，覆盖了 90% 的业务线，平均每天合图超过 1w 张。而这个工具，也是当时团队内部第一个完整的 node 应用，我也依靠 TA 成功晋升到了 P6

![format_png 8][]

总的来说，第 1 年是**新人时期**，在这段时间，要开始学习识别业务需求，能进行方案设计，推动**个人技术栈的成型**。这个时期，我们完成的是从学生到社会人身份上的转变，在做业务的同时，一定要时不时的**抬抬头**，把自己做的东西拿出来跟大家**分享**，既增进了团队对自己的了解，也促进了自己对知识的进一步总结概括。

![format_png 9][]

#### 独当一面-升级打怪 ####

接下来，就是作为新人成功 landing 之后的升级打怪了。这个时期，我给自己的定义是独当一面。这里主要结合我个人做的另一个工具阐述。

坑位研发，是我们电商前端工程师日常开发过程中绕不开的事情，这是一些常见的商品坑位

![format_png 10][]

受之前做的配置生成图片工具的启发，我萌生了用编辑器产出布局的想法

![format_png 11][]

然后，我就做了一个坑位可视化开发工具，左边是编辑器界面，右边是消费者侧渲染的 demo。通过这个工具，设计人员简单复制粘贴、拖拖拽拽就可以生成一个新坑位，极大地降低了 UI 的开发成本

![format_png 12][]

这是当时在会场上的应用情况，做到了业务变化的分钟级响应

![format_png 13][]

但是，工具在推广过程中，也遇到了一些问题，包括如下

*  不支持存在事件交互、数据处理等逻辑的场景
 *  运行时解析方式在端上性能不佳
 *  脱离正常的研发流程
 *  。。。

当然，这些问题也正好给了我独立 owner 且重构产品的机会。于是，我结合了当时天猫的研发体系，推出了融入开发体系的模块可视化研发方案，即 2.0 版本。这是 2.0 版本的完整链路图

![format_png 14][]

这是 2.0 版本上线之后取得的结果，我也在那一年拿到了年度 3.75，并晋升到了 P7。

![format_png 15][]

从我个人角度，独当一面**这个时期的重点**是在能游刃有余的完成分发到自己的工作之外，**建设核心能力**、寻求突破。这个时期，已经对业务有了较为深刻的了解，可以**从零到无设计一块东西**，技术上能够对接业务方，技术之外要能做项目管理，**协同**多方有效完成任务。

![format_png 16][]

## 关键技能 ##

接下来，我将重点介绍下我过去 3 年多解锁的一些关键技能

#### 技能一：跳出技术视角 ####

第 1 个关键技能是跳出技术视角。不少开发都有类似【我只是一个技术，不应该参与 QA、PM 的工作】的想法，实际上也确实有人在技术路线越走越精深，并得到了认可。然而，凡事都有个但是，很多人技术水平非常高，但一直得不到认可，这种现象更为常见。尤其对于我们前端来说，很难彻底脱离上下游、脱离业务方来完成工作，甚至除了 QA 和 PM 的工作之外，还需要向业务方 “推销” 自己的工具。一个更加 “全面” 的前端才能更加顺风顺水。那么，怎么做到更加全面呢？可以从以下几个方面入手，比如从 why 出发做事情，做业务的同学，关注业务数据、跟进线上问题，做技术产品的同学，提供出色的产品服务文档

![format_png 17][]

#### 技能二：追求极致 ####

第 2 个关键技能是追求极致，也可以理解为我们常常称赞的匠人精神。以我为例，我入职第一年就做了个在线编辑器，在完成基础功能的同时，还增加了快捷键、辅助线、自动吸附等功能，不断打磨编辑器的产品体验，因此也吸引了很多小伙伴的加入，共同把这个产品推广到更多的业务域。

![format_png 18][]

#### 技能三：结构化的表达 ####

第 3 个关键技能是结构化的表达。俗话说的好，酒香也怕巷子深，结构化的表达，是我们在完成事情的前提下，更好地让别人（比如你的老板）get 到你的产出及价值。结构化的表达离不开结构化的思维方式，大家可以看看金字塔原理这本书。除此之外，在建立结构化思维的过程中，好的画图工具也能实现事半功倍的效果。

![format_png 19][]

## 一些反思 ##

既然是复盘，也来做下自我批判，也是对大家的一些建议

#### 反思一：No 三点一线 ####

程序员长时间工作、加班，三点一线的奔波，对身体伤害其实蛮大的。身体是革命的本钱，要保持一个良好的健身习惯，不需要很频繁或者很专业的锻炼，其实每周 1 次的健身房养成习惯就好。保持一个良好的身体状态，工作时其实也能更有精力。

![format_png 20][]

#### 反思二：Keep learning ####

经常会有人说，做业务一直在 CRUD，感觉工作几年下来没什么成长。诚然，有意思、有挑战的工作确实不多见，更多的是一些琐碎的、重复的工作。所以，在工作之外，也需要花一些时间，关注下业内资讯、新闻，看看书、写写博客、参与一下 GitHub 感兴趣的项目。keep learning，保持对新技术的关注~

![format_png 21][]

## 好书推荐???? ##

推荐看下《凤凰项目》这本书，他是以小说的形式，讲述了一个凌乱的无可救药的运维项目组，是如何一步步达成最后高效且舒心的工作状态。通过该书，能学会有效的自我、团队、项目管理方法，让开发不再深陷于无尽的业务交付。

![format_png 22][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EdXRFOGRZclFBNmg5QU03Njg0VWxzRXd6T3lQR2Y1YkxqSnoxT0t5a2hhSlBndWtUNVRpYnpmdTdhS0pyOHRLY3dxdlUxNXR0eTNmTUZrNEVuZkdvSWcvNjQw?x-oss-process=image/format,png
[format_png 1]: /images/20221120/510fc46e54e148f1beb38dfe04c78969.png
[format_png 2]: /images/20221120/8474a4540df64cabac302186da1cc88f.png
[format_png 3]: /images/20221120/158bc1dcd3e64ca48bf332699b8d7827.png
[format_png 4]: /images/20221120/78c884aa48a04fdda4c69be1e44a2003.png
[format_png 5]: /images/20221120/e2318220237b46528088e550581a2805.png
[format_png 6]: /images/20221120/6a7a8778d6b64631b014bd29feb7edc2.png
[format_png 7]: /images/20221120/75747601ea7442f4860b2d3da9b8db0f.png
[format_png 8]: /images/20221120/10b022509ff6494eb485a3102cf7cee4.png
[format_png 9]: /images/20221120/6738354768784ddcb86f932862fc88a8.png
[format_png 10]: /images/20221120/bb51ebdeb0844e2195676decd08ac84a.png
[format_png 11]: /images/20221120/26e101ca65324ac6b04e461d0ffabdf3.png
[format_png 12]: /images/20221120/60ca436c3f004a598990f59d681e76ea.png
[format_png 13]: /images/20221120/fb3779689de54f4aa20034db68ece267.png
[format_png 14]: /images/20221120/49708cf646d542c68d3848dbd82a0df9.png
[format_png 15]: /images/20221120/6e94debf00654c5db02a4b2e5097bf50.png
[format_png 16]: /images/20221120/e7e09c8958124784a243cfbff7f4cf10.png
[format_png 17]: /images/20221120/5720c94c39434a6ca15797f586570a13.png
[format_png 18]: /images/20221120/312b3dcf01aa49dc9892e999e272bfad.png
[format_png 19]: /images/20221120/0e4197ba4f774e4d9b801a5666ff95c1.png
[format_png 20]: /images/20221120/b4ecf103ac354f7d9276d95e87714f49.png
[format_png 21]: /images/20221120/f56acb007a2847d185f336001e02c0db.png
[format_png 22]: /images/20221120/d78d9c90dc1a4b71a90f5d7816a167d1.png