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

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

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

image.png

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

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

职业经历

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

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

image.png

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

image.png

▐ 新人菜鸟-入职第1年

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

▐ 独当一面-升级打怪

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

image.png

关键技能

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

▐ 技能一:跳出技术视角

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

image.png

▐ 技能二:追求极致

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

image.png

▐ 技能三:结构化的表达

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

image.png

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

一些反思

▐ 反思一:No 三点一线

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

image.png

▐ 反思二:Keep learning

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

image.png

好书推荐

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

image.png

image.png

关注「淘系技术」微信公众号,一个有温度有内容的技术社区~

image.png

相关文章
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
1月前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
80 0
|
1月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
146 29
|
25天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
43 5
|
1月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
32 3
|
1月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
43 3
|
1月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
79 4