珑晴是淘系技术部前端技术专家，16年校招实习转正进入的阿里，当时是在聚划算前端团队，随着业务变化一路从聚划算到天猫至今加入淘系技术部，负责日常活动营销的同时，也多次参与大促会场&互动的研发，在支持业务的过程中不断挖掘提炼创新，最终从前端技术小白成长为专家。接下来小编将结合笔者的4年，具体谈谈她的前端技术成长经验吧。  

一、初到职场之实习期：  

初到职场时还是实习期，当时是北邮的一个师兄内推来的杭州这边。实习期间，主要负责2块东西，XList和周末淘宝，XList是聚划算之前的一个解决无尽滚动的框架，主要还是在熟悉团队的工具链、看源码，以及给其他业务打打杂。在这个时期的建议大家把重点放在团队的融入以及兴趣的探索，对实习生本身能力要求并不高，所以这个阶段的我们不要过于焦虑，关键还是看自己的个人意愿与团队的匹配度来进一步决定是否要继续待在这样的团队。  

二、入职第1年：  

入职第1年的时候，刚好赶上聚划算整个在做品牌升级，当时存在一个商家素材不规范的问题，亟需解决以提升用户体验。在师兄的指导下，设计了一个基于PSD解析的规范化合图方案。在PSD解析的基础上，自己还提供了一个可视化界面给设计师调控实现配置生成图片，界面是参考sketch实现的。这个方案在聚划算整个实施之后，也取得了很好的业务结果，覆盖了90%的业务线，平均每天合图超过1w张。而这个工具，也是当时团队内部第一个完整的node应用。  

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

三、独当一面：  

接下来，经过前面的工作积累，在个人业务能力上要学会独当一面。这里主要结合个人做的另一个工具阐述。坑位研发，是我们电商前端工程师日常开发过程中绕不开的事情，这是一些常见的商品坑位。受之前做的配置生成图片工具的启发，萌生了用编辑器产出布局的想法。然后，就做了一个坑位可视化开发工具，左边是编辑器界面，右边是消费者侧渲染的demo。通过这个工具，设计人员简单复制粘贴、拖拖拽拽就可以生成一个新坑位，极大地降低了UI的开发成本。  

这是当时在会场上的应用情况，做到了业务变化的分钟级响应。但是，工具在推广过程中，也遇到了一些问题，包括如下：不支持存在事件交互、数据处理等逻辑的场景。运行时解析方式在端上性能不佳，脱离正常的研发流程。  

当然，这些问题也正好给了我独立且重构产品的机会。于是，我结合了当时天猫的研发体系，推出了融入开发体系的模块可视化研发方案，即2.0版本。这是2.0版本的完整链路图。从个人角度，独当一面这个时期的重点是在能游刃有余的完成分发到自己的工作之外，建设核心能力、寻求突破。这个时期，已经对业务有了较为深刻的了解，可以从零到无设计一块东西，技术上能够对接业务方，技术之外要能做项目管理，协同多方有效完成任务。  

四、掌握关键技能：  

（1）跳出技术视角：  

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

（2）追求极致：  

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

（3）结构化的表达：  

第3个关键技能是结构化的表达。在完成事情的前提下，更好地让别人看到你的产出及价值。结构化的表达离不开结构化的思维方式，在建立结构化思维的过程中，好的画图工具也能实现事半功倍的效果。