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

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

本文，将结合笔者的 4 年，从以下几点具体谈谈我的前端成长之路。

职业经历
关键技能
一些反思

职业经历

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

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

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

▐ 新人菜鸟-入职第1年

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

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

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

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

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

▐ 独当一面-升级打怪

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

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

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

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

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

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

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

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

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

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

关键技能

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

▐ 技能一：跳出技术视角

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

▐ 技能二：追求极致

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

▐ 技能三：结构化的表达

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

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

一些反思

▐ 反思一：No 三点一线

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

▐ 反思二：Keep learning

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

原文链接：https://developer.aliyun.com/article/776226?

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

四年，如何从前端小白蜕变为前端技术专家？相关推荐

django项目如何连接前端_工作笔记前端小白如何搭建前端项目
"前言,来到杭州差不多有两年左右了,大小小做过不少项目.之前都是有技术大佬在前面抗住.作为菜鸡的本人只要在大佬后面听大佬指挥摸鱼划水就行.最近公司接到一个新项目,由于大佬们纷纷出走,于是搭建 ...
2019年小白学习web前端路线图及学习攻略
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
前端小白学习路线及知识点汇总（三）-- JavaScript基础
前端小白学习路线及知识点汇总(三)-- JavaScript基础一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...
前端小白配置mac下node+vue开发环境的各种姿势
背景:笔者(前端小白)之前mac环境下用的node 9.8.x版本,npm 6.13.4版本,昨天尝试ts,用vue-cli构建项目对时候,vscode给提示说node版本太低了,好,笔者听从前辈经验 ...
Web前端小白入门指迷
大前端之旅大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
c++局部对象是什么_小白学Web前端难点是什么 JS进阶知识点有哪些
小白学Web前端难点是什么?JS进阶知识点有哪些?JavaScript是前端小白学习的难点,但又是前端工程师必须要掌握的技能.很多同学反映JavaScript知识点多而杂,不知道如何下手,下面就给大家 ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...
前端网页广告无线翻滚_从小白到web前端工程师进阶之路从0到1到更深
互联网的发展,让web前端技术发生了翻天覆地的变化,前端开发工程师可以让网页内容变得更加生动,为用户带来更好的体验.那么,武汉web前端培训哪个好?web前端好学吗?作为一个合格的Web前端工程师,需 ...

四年，如何从前端小白蜕变为前端技术专家？

职业经历

关键技能

一些反思

四年，如何从前端小白蜕变为前端技术专家？相关推荐

最新文章

热门文章