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

作者简介:珑晴——淘系技术部前端技术专家,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

 

原文链接
本文为阿里云原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat 一键启停脚本 linux

文章目录一、脚本开发1. 编写脚本2. 修改脚本3. 赋予权限二、脚本执行2.1. 启动tomact2.2. 查看tomact状态2.3. 停止tomact一、脚本开发 1. 编写脚本 vim start-tomcat.sh添加以下内容: #!/bin/bash# description: Tomcat start/stop/status script#Location of …

从 Storm 迁移到 Flink,美团外卖实时数仓建设实践

简介: 本文主要介绍一种通用的实时数仓构建的方法与实践。实时数仓以端到端低延迟、SQL 标准化、快速响应变化、数据统一为目标。 作者:朱良 本文主要介绍一种通用的实时数仓构建的方法与实践。实时数仓以端到端低延迟、SQL 标准化、快速响应变化、数据…

Arm发布移动端v9体系新架构,CPU、GPU、IP全囊括了!

2021年5月25日晚,Arm发布了针对移动端的Armv9体系新架构,除了公布首款全面计算(Total Compute)解决方案,Arm还发布了首批基于Armv9 架构的Cortex-A CPU,为消费电子视觉体验而设计的Mali-G GPU系列&#xff…

阿里 双11 同款,流量防卫兵 Sentinel go 源码解读

简介: 本文主要分析阿里巴巴集团开源的流量控制中间件 Sentinel,其原生支持了 Java/Go/C 等多种语言,本文仅仅分析其 Go 语言实现。下文如无特殊说明,sentinel 指代 Sentinel-Go。 作者 | 于雨 apache/dubbo-go 项目负责人 本文…

工业发展 安全护航 2021年工业互联网安全发展峰会成功召开

在数字化创新日益深入的背景下,工业互联网已经成为制造企业构建敏捷、弹性的基础架构的重要转型方向。但与此同时,安全风险与威胁向OT环境渗透,产生了额外的复杂性,对于关键业务与数据带来了严重威胁,构建工业互联网安…

基于 Flink + ClickHouse 打造轻量级点击流实时数仓

作者:LittleMagic Flink 和 ClickHouse 分别是实时计算和(近实时)OLAP 领域的翘楚,也是近些年非常火爆的开源框架,很多大厂都在将两者结合使用来构建各种用途的实时平台,效果很好。关于两者的优点就不再赘…

Spring boot 2.3优雅下线,距离生产还有多远?

简介: 对于任何一个线上应用,如何在服务更新部署过程中保证业务无感知是开发者必须要解决的问题,即从应用停止到重启恢复服务这个阶段不能影响正常的业务请求,这使得无损下线成为应用生命周期中必不可少的一个环节。 前言 在生产…

发布 128 核 Altra Max,自研内核,明年推出 5nm 处理器,“性能怪兽”Ampere 搞大事?

2015 年,在英特尔就职 28 年的总裁 Renee James 辞职,正在大众纷纷猜测她将如何开启下一段旅程时,她有了创业的想法,2017 年带领新团队创立了专注于为云和边缘打造微处理器的 Ampere 公司。 在云原生浪潮下,底层硬件需…

2020亚太内容分发大会 阿里云荣获“边缘计算领航企业”奖

10月21日,第八届亚太内容分发大会在北京隆重召开。凭借在边缘计算领域的先发优势、技术实力与丰富实践,阿里云荣获“边缘计算领航企业”称号。 伴随着中国5G商用进程提速,大带宽、大连接、低时延的应用场景爆发,将催生产业变革&a…

最佳途径 | 容器规模化落地如何四步走?

随着云原生时代的发展,传统 IT 基础设施加速云化,云原生化成为云上的必然趋势。作为云原生代表技术之一,容器技术可帮助企业提升 IT 架构的敏捷性,加速应用创新,帮助企业更加灵活地应对商业发展中的不确定性。疫情期间…

elasticsearch 嵌入式_Elasticsearch 开箱指南

内容概要ES 基础介绍,重点是其中的核心概念。基础 API 实践操作。1. 基础介绍Elasticsearch (ES) 是一个数据库,提供了分布式的、准实时搜索和分析。基于 Apache Lucene,可以操作结构化数据、非结构化数据、数字类型数据、地理空间数据。数据…

最良心的 chrome 插件可以良心到什么程度?

CSDN下起了红包雨399 元智能音箱199 元天猫精灵300元现金红包/会员100元红包/会员更有千万流量曝光100%有奖......作为日常总发现 " 宝藏 " 的你总体验过一些 " 王炸 " 级别的chrome插件让你想 “ 真诚 ” 安利所以,CSDN开启了彩虹屁chrome插件…

一文教会你如何写复杂业务代码

简介: 这两天在看零售通商品域的代码。面对零售通如此复杂的业务场景,如何在架构和代码层面进行应对,是一个新课题。针对该命题,我进行了比较细致的思考和研究。结合实际的业务场景,我沉淀了一套“如何写复杂业务代码”…

Day.js 常用方法

文章目录1. 初始化日期 / 时间2. 格式化日期 / 时间3. 加 / 减4. 获取某年某月的第一天或最后一天5. 获取星期几6. 获取毫秒数7. 获取时间差(默认输出的差值单位是毫秒)8. 获取时、分、秒9. 将毫秒转为时分秒10. 判断一个日期是否在另外一个日期之后 isA…

如何使用云原生数据湖,助力线上教育行业逐步智能化

简介: 阿里云基于对象存储OSS构建的数据湖解决方案,帮助企业有效消除数据孤岛的现象,让数据的价值真正被利用起来。 行业综述 线下教育行业因疫情受挫,线上教育却逆势增长 随着90年代互联网的引入,在线教育产品也依托…

caas k8s主控节点如何查询_k8s--04 部署harbor作为k8s镜像仓库

k8s实战部署harbor作为k8s镜像仓库1.实验目标部署k8s私有镜像仓库harbor把demo小项目需要的镜像上传到harbor上修改demo项目的资源配置清单,镜像地址修改为harbord的地址2.再node1上安装harbor[rootnode1 ~]# cd /opt/#上传harbor软件包[rootnode1 /opt]# rz -Erz w…

vue3中使用cookie

前端使用cookie 步骤一 编写方法cookie.ts //获取cookie、 const CooieTool {getCookie: (name: string) > {var arr, reg new RegExp("(^| )" name "([^;]*)(;|$)");if (arr document.cookie.match(reg))return (arr[2]);elsereturn null;},//设…

无人机、IoT 都危险?第五代网络威胁有哪些特点

从无序中寻找踪迹,从眼前事探索未来。2021 年正值黄金十年新开端,CSDN 以中立技术社区专业、客观的角度,深度探讨中国前沿 IT 技术演进,推出年度重磅企划栏目——「拟合」,通过对话企业技术高管大咖,跟踪报…

持续定义SaaS模式云数据仓库+Serverless

导读:今天主要和大家交流的是网易在数据湖 Iceberg 的一些思考与实践。从网易在数据仓库建设中遇到的痛点出发,介绍对数据湖 Iceberg 的探索以及实践之路。 主要内容包括: 数据仓库平台建设的痛点数据湖 Iceberg 的核心原理数据湖 Iceberg 社…

循序渐进db2 第3版_「图书推荐」焊接工程师手册第3版

机械工业出版社陈祝年 陈茂爱 著内容介绍《焊接工程师手册》(第3版)是焊接专业的综合性工具书,基本涵盖了焊接专业的技术内容。本版在保留第2版精华和特色的基础上添加了先进的工艺技术内容。全书共9篇58章。第1篇汇集了焊接工程师最常用而又不易记忆的符号、公式和…