前端早早聊大会-与掘金联合举办-全年学习

一、前言

image.png

大家好,我是鳗鱼,现在在百度担任前端开发,今天要跟大家分享一下自己的成长历程,先简单的自我介绍一下。我是 14 年在学校就开始接触前端,16 年 4 月的时候在菜鸟实习,17 年 7 月校招进入百度到现在。在百度之后,大概是经历了一年半左右,从 T3 走到 T5,18 年底开始负责一些事情,并辅助团队建设,现在是大概带十个人左右。

image.png

说实话作为本次主题的第一个,有点紧张,特别这是一个妹子专场。自己虽然作为妹子,然而一个踏入职场没多久的妹子,感觉还没经历太多的“男女生差异”,经验也不是太多,所以着重点不在于“女前端的差异”。

不过互联网行业,一般都是女生当男生用,男生当畜生用,所以无论男女都会面临职业发展上的困惑。这里主要会侧重于在成长过程中,我们可能会经历哪些阶段,可以通过哪些维度来理解,结合自己的经历分享一些个人觉得不错的小经验。

image.png

本次分享大体包括两部分,一个是自己的成长经历描述,分为适应期,热血期,焦虑期,还有突破期。其次是一些具体的经验分享,后续仔细讲。

image.png

二、成长历程

image.png

1. 适应期

这是刚进入职场的小萌新的时期,主要是 16 年在菜鸟实习,以及刚进入百度前一两个月的一段经历,这个时期在我身上主要是从校园到职场的过程。

image.png

这个时期的背景:自己虽然在学校有接触前端,但都是小打小闹的类型,没有系统的做过大项目,而且经历过那个时期的同学可能会有感受,当时是出于前端技术混乱的一个阶段,自己还是停留在使用 jQuery 操作 DOM,对于现在前端每天都会用的 npm 都不是很清楚,更别说 Vue 或者 React 了。在沟通合作方面,对项目的一个开发运作流程也不是很清楚,还停留在别人让做什么就做什么的阶段。

image.png

然后自己当时进去是在做什么呢?

  1. 在业务上,做的是一个快递的电子面单编辑器的项目。当时的技术栈是 Vue + TypeScript,作为一个 npm 是啥都不知道的人,基本上也只是打打辅助,帮忙修修小 Bug。
  2. 另外还有基础建设的任务,说实话现在已经不记得是做了啥了。当时在被负责的同学催了无数次,只能说照葫芦画瓢,提交上去,后来发现,提交的内容基本上被改得我也不认识了。
  3. 另外还有作为实习生,一个比较偏打杂类型的项目,就是帮各大业务部门上线各种合同协议上的功能,很简单,就是 Word 转 HTML 然后帮忙优化优化样式上线。

image.png

现在回过头看,这个经历真的就是平平无奇的,技术上其实也没感受到太大的进步,但是有一些特质是有了一些苗头的,对于自己之后的成长有很大的帮助。

在做合同上线的时候,发现都是机械劳动,秉着偷懒是程序员美德的一个想法,这种事情肯定是说能不自己做就不自己做,但是有过类似想法的同学都知道,想让业务方自己操作,但是去让一个不懂技术的人写几行代码上线真的就太难了。

然后自己经过各种研究,发现当时的淘宝有套 CMS 系统,能直接上线 HTML。这在当时相当于是一个跨部门的调研,在自己尝试几次之后,书写了转换攻略,以及一份 CSS 文件给整成了模版,教相关同学使用后就完全交出去了,后续在其它的业务中也借鉴这种模式。

image.png

说完上面的故事,其实这里有两个特质是值得去沉淀的:

  1. 不只是满足于分配的任务,可能还会主动做一些额外的事情,虽然是个简单的实习生还什么都不懂;
  2. 能从普通的小事里面发现更优解决方案。

总结下来就是会搞事情,这个特质一直持续到了后面的整个成长过程中。

image.png

2. 热血期

在过了一个基本的适应期之后,业务开始逐渐熟悉,然后就进入了下一个阶段热血期,这个时期听名字就知道,是充满激情与热情的一个时期。

image.png

首先还是说一下大背景,这是在进入百度之后的几个月后,发现团队内部的历史包袱还是比较重的,项目基本是 Riot 框架开发,就是一个过气的小网红,甚至有残留的 jQuery,更别说现代的工程化组件化这些东西了,以及团队对于新人的培养机制也是有待加强的阶段。

image.png

这个时期自己做了什么呢?具体做的业务就不详细说了,也就是一些 Web 端,移动端的开发。当时自己感觉很多东西看得不顺眼,在项目中给了一定的任务,但没有太大的约束,就有空间去各种捣鼓,不仅说业务上接触了 PC 端移动端,以及 HyBird 的混合开发。在基础建设层面,也沉淀了不少通用组件,梳理了团队代码规范,还弄了几个脚手架,照着 AntD 的市场弄了个内部的脚手架市场。额外的甚至还玩了玩 Three.js 的 3D 动画,学了学 OC 的基本语法,并给我们 iOS 客户端提交了代码。

image.png

总的来说就是一句话,这个时期不断的基于现有的业务,衍生出了很多可以沉淀的东西,也有去提前调研一些前沿感兴趣的东西,并贡献进了基础建设层面。

image.png

回过头看,这个时期是技能点突飞猛进的阶段。基本内部提交记录每天都是满的,没怎么休息过,每天下班或者周末回家,都是没啥事就开开心心写代码。到现在为止,也是系统记录的加班时间,跟自己每天的代码提交记录是完全对不上的。这个时期的所作所为,为后面把控全局能力提供了一定的视野基础。

image.png

总结来看呢,这个时期有两个点自我感觉不错的:

  1. 对待项目,是一个主动,积极热情的态度,不光只是应付了事;
  2. 专注,虽然刚刚说做的事情多,但是每个事情其实都是一步步,专心的去完成的。

image.png

3. 焦虑期

上个时期大概维持了一年多吧,其实也没有太明确的界限之分,然后就进入了下个时期。

image.png

随着参与业务的增多,以及逐渐从配角变成主要负责人,什么事情都想亲力亲为,逐渐有些应付不过来。发现之前在热血期虽然捣鼓了很多东西,但是落地的效果比较一般。更加悲惨的是,当时自己的老大离职了,团队人员变动也挺大的,在这个阶段自然而然的就有些焦虑。

image.png

焦虑期,这个时期做了什么东西呢?

首先是推进工程化落地的过程,毕竟刚刚说落地效果不佳,就找部门其他团队商量对策不断改进,最终全部门接入。其次是还有些项目,开始承担项目负责人的角色,不光是前端开发,还把控整个项目的进度节奏,以及有一个小小的实验点,就是有一个稍微简单的项目,使用 Node.js 做后台,算是 JS 打入了一个新领域。

image.png

现在回过头来看这个时期,实际上就是充满荆棘的。

我相信大家或多或少都体会过,我们的人生可能不会是一直一帆风顺的,我对这个时期的认知,就是职业生涯的焦虑期。比如我自己就遇到了三个经典的挫折:

  1. 由于之前热血期像打了鸡血一样,处于一个向前狂奔的状态。很多事情更在意产出,而忽略了整体的质量,以至于累积的技术债开始让自己踩坑;
  2. 团队的调整和人员的变动,让大家开始在工作上感觉到迷茫和失落;
  3. 负责的东西多了,任务繁杂之后,什么事都想自己做,明显精力不够用,经常就是白天各种扯,晚上回家继续写代码。

image.png

幸运的是自己熬过了这个焦虑期,感觉不用多久就会升职加薪、迎娶白富美、走上人生巅峰,想想还有点小激动呢。

说回正题,走出焦虑期的关键所在,可能不在于你做什么事,而在于你怎么去做事,以及如何去看待事情,一句话概括,就是软技能。

image.png

以我自己为例,感觉主要有三个点:

  1. 对于技术债,通过每次项目的复盘,不断总结反思,去看到自己的不足并快速改正;
  2. 对于团队的变动,可以去调整自己的心态,以及用积极的心态进一步影响周围的同学;
  3. 在面对事情过多的情况,这个其实就是时间管理的范畴,市面上有很多文章书籍可以参考,自己的经验就是每天花十分钟整理好自己的 TODO 系统,分清优先级,再开始工作。

4. 突破期

最后一个阶段突破期,这个时期感觉是从 19 年的 6 月开始的,但也还是目前的一个时期。

image.png

这个时期的一个大背景就是,自己在技术上已经有一定的沉淀了,但是缺乏整体的规划。团队上经过不断的招聘,开始趋于稳定,自己也有一定的精力开始思考更多的东西。在协同方面目前充当一个技术管理的角色,当然还是会实际参与一些业务开发,但是通过经验的积累有了更高层面的视野。

image.png

这个时期,不仅是技术上的成长,有更加丰富解决问题的能力,日常任务工作开始感觉到能够更好的应对。这个时期具体是做了什么呢?

在业务上,自己主要负责对一个历史性大型项目梳理出了一套渐进式重构方案,然后在新人项目由于进度把控不当,也会当当救火队员,参与开发。另外更多的可能是一些自己捣鼓的事情,比如说团队规章制度的完善,去规范项目的开发流程,以及在部门层面推进 Code Review 和文档沉淀之类的东西,并参与部门层面的基础建设。

image.png

因为这就是目前的时期,所以其实也没有回过头看的环节了。最开始,感觉到很多事情都趋于稳定,没有太大的挑战,这时候想起了大家常说的一个词,舒适区。这里思考一下,我们讨论的舒适区到底是什么?个人感觉舒适区有两个特点:

  1. 你当下做的事情能够应付自如;
  2. 你被动接触新的挑战的机会变少。

那么我们应该如何去走出舒适区,大家应该都听说过一句话,温故而知新。这里稍微改动一下,就是我们的答案了,温故知新

image.png

温故,其实就是一个厚积薄发的过程。举个例子,比如 CI 的处理,基本上看到的问题都知道怎么做,但是这还是处于遇到问题解决问题的状态,甚至有一小部分问题只是停留在表层,没有触及到问题的根源。然而有些同学就止步不前,进入了舒适区。

这里有几个走出舒适区的建议:

  1. 系统化的去看待问题;
  2. 追溯根源;
  3. 多沉淀。

image.png

再送大家一句话,华罗庚说的:读书最好状态先把书读厚再把书读薄。实际在工作过程中也是一样。

image.png

刚才说的是温故,现在说一下知新,顾名思义就是探索新的领域。通常来说大家在一段环境呆久了,可能就会稍微有点麻木,看不到新的方向,这个时候,可以看看外面的世界。具体呢,可能需要自己感悟。

image.png

其实刚刚跟大家扯了那么久,感觉我自己也并没有突破这个阶段,只是说在不断探索的过程中,有了一些感悟,并给大家简单分享分享。

总的来看,自己一路走来经历的几个阶段:

  1. 适应期,主要是能力提升;
  2. 热血期,开始分辨优劣,形成个人主张的一个过程;
  3. 焦虑期,主要是出现一些现实跟预期不符的一些冲突管理,并在冲突解决中寻求自我成长;
  4. 最后是,在一切趋于稳定的状态,懂得怎么去走出舒适区。

比如说对于工作任务上,在适应期的时候是被指派的,在热血期就开始能对任务做一个自我把控,在焦虑期的时候学会了整体的项目排期,并开始知道和指派其他同学,在突破期的时候,就开始负责多项目的排期,当然有一些细节层面的排期会委托给其他同学负责跟进。

基本上就是一个能力提升,到形成个人主张,到冲突出现,以及后续稳定求变的过程。另外还有个人主张,业务能力,技术设计,团队协作这几个维度,都有一定的变化,这里就不做赘述。

image.png

三、经验分享

image.png

上面的自我故事已经讲完了,可能每个阶段都有一些小回顾总结,有心的同学可能已经发现,那里的经验也是有不少。然后让我们整理再来看,总结总结升华升华,上述所有经历贯穿的有几个点。

1. 方向

首先方向。可能大家初入职场,有时候有很多不适应的地方,会出现迷茫,找不到自己的方向。或者在职场中期,一直埋头写业务,觉得自己没有任何进步,想努力又不知道怎么做。

image.png

这里呢,先抛出一个问题,思考一下,作为一名前端工程师,我们平时在做啥?

image.png

这里引用王兴的一句话,他认为 “互联网改变了生活的方方面面,最重要的是衣食住行,生老病死。”

个人感觉其实这就是我们所有产品需求的根源。

image.png

为了满足上述的需求,总结下来,产品做的主要也就三件事。把线下的变成线上的,把手动的变成自动的,把一些繁琐的变成智能的。即电子化,自动化,智能化。

image.png

然后再看回我们的前端,前端做的工作,主要是负责产品的界面,流程,数据这几方面,作为一个人机交互的粘合剂的存在的。往下拆分,最简单的有界面的渲染,交互体验优化,基础业务逻辑的开发,动画动效的探索。有些业务为了更好的用户体验,可能需要进行多端支持,比如说移动端,小程序,React Native 等。然后我们为了提升开发体验,我们有中台服务,需要了解构建部署,需要跟不同的人协调,需要处理研发交付的流程等。

这些每个点再往下拆分,又能有很多很多的小点,这里要表明的一个点就是,前端不简单,对于一些不知道方向,不知道做什么,是一件很正常的事情。

image.png

个人的建议来说,一开始,迷茫的时候,不用被市面上的各种资料给吓到,不用想着面面俱到,什么都想深入研究。
初入职场,作为新鲜血液,很多东西跟你认知的不一样,因为这个时候是难得的过程,因为这个时候是没有麻木的惯性的理念束缚,可以优先去接触不同的东西,不断探索。然后把所有看不爽的东西都可以记下来,后面等时机成熟了,所有令你不爽的,都是优化空间。

然后当你看的东西多了之后,可能才会找到你所喜欢的方向,然后深耕下去。其实这个的专业术语叫,T 字型人才,具体细节可以自己查找。

image.png

这个是乔布斯在 05 年斯坦福演讲说的话:“You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.”

对英语不大好的同学,简单翻译一下:虽然你现在可能看不见未来,但在未来的某个时刻回头看,你生命的点点滴滴都是有联系的,你目前的所作所为都构成了你的未来。

image.png

2. 态度

image.png

可能我们在职场生活中,都会遇到一些不如意的事。比如一个凡是有规模的,存在了一定时间的公司,基本都会有历史债的存在,也可能会有其它沟通协调你觉得不舒服的地方。这个时候,就是传说中丰满的理想和骨感的现实不一样,你的态度是怎样的,不同的态度导致出来的结果肯定是不一样的。这里我们看个小例子。

image.png

有小 A 和小 B 两个同学,他们进了同一家公司,发现这里还是一个刀耕火种的时代,老板每天只是看着你的系统做完了没上线了没,公司盈利多少。这是一个很常见的场景,然后两个同学他们不同的态度。

小A:进来开始吐槽,这公司怎么这样啊,跟我想象的一点都不一样,垃圾公司毁我青春。然后他出去跟之前同学吃饭,也这么吐槽没想到他们是这样的,遇到一个人吐槽一次,然后就没有然后了。

小B:他感觉,这家公司虽然说基础建设差了点,但是整体业务还是不错的。所以他就不断的思考怎么去优化,结合实际手头上的业务,积极贡献,并跟自己的负责人不断讨论规划。

然后这个故事就到这里截止了,假设小 A 和小 B 后续还在这家公司,那一年后,三年后他们的发展会是一个怎样的效果,大家可以自行脑补一下。

image.png

3. 格局

下一个点,就是格局,格局这东西说起来比较虚,但是不同格局的人,看到的东西是不一样的。还是举例子的形式来看看。

image.png

假设有一个问题,就大家在业务之中经常可能遇到的一个现象,页面加载时间长。然后不同人他们看到的东西可能就是不一样的。

对于初级同学,他可能觉得,我代码写成这样了,感觉还行也没什么办法,不知道应该做什么,然后就放哪里了表示搞不定。

对于中级同学,他可能会从前端层面分析,尝试优化资源体积或者从体验层,加个 Loading 动画或者写个骨架图之类的。

对于高级同学,他可能会尝试从全链路去分析,比如我假设这是一个在客户端打开的前端页面,从 Webview 初始化的时间,到前端资源请求速度,接口拉取时间等各个地方去看,并推动不同角色协助优化这事。

对于进阶同学,他觉得光全链路的分析完了解决了这个问题还不够,可能还会思考为什么会有这个问题,其他业务有没有遇到。从全局来看怎么去避免他,比如说增加一些开发规范,完善数据监控等。

这里说的这个例子,也许还有更高的层次,但是刚刚说的这些大家可能也能感受到不一样的处理方式,那我们应该怎么去提升自己的格局呢?

image.png

我们经常自己调侃自己,别人问你是干嘛的,可能就会说,自己是搬砖的,所以我们这里就以搬砖为例子。大家初入职场,都是从搬砖开始。

image.png

但是对于不同的人呢,他可能会有不同的发展路线。比如有的人,刚进入的时候在搬砖,过了三年还是在搬砖,所以他还是从前的那个搬砖工。

而有的人可能在进去半年的之后就发明了推板车,可以一次性搬更多砖,后面过了一年买了台拖拉机,再过两年又搞起了楼房 3D 打印,这个时候他也可能从搬砖工到了技术总监,然后到区域经理的级别。

这个例子就说明,不同的人会产生的结果不一样。我们在平时遇到问题的时候,有时候可以尝试从更高的角度去看问题,想想如果他是你,他会怎么做,都站到下一个高度去思考,慢慢的你的格局应该就会有所提升了。

image.png

4. 软技能

第四个点,软技能。当达到一定程度之后,可能会是限制技术人员发展的一个因素了。有时候,不光光说你的代码写得多牛逼就行,可能还需要一点点,代码之外的生存指南。

image.png

简单解释一下,什么是软技能?

image.png

这里自己画了几幅画。首先,我们大家在日常生活工作中,除了面对自己的电脑写代码,还会要接触各种不同的人,去沟通协调,也要去处理各种五花八门的事情。你怎么把这些东西处理好,就是软技能的体现了。

image.png

所谓软技能,无非是几个点:

  1. 处理人与人之间的关系,即沟通能力;
  2. 处理任务任务之间的关系,怎么把他们串起来,即时间任务管理能力;
  3. 怎么去处理人和事混杂的项目,就是组织协调能力。

image.png

具体怎么提升,市面上有很多很多的书可以学习,很多也都是道理都懂系列,具体肯定是要自己不断的实践感悟练习出来的。这里强调的一个点,软技能不容忽视,但是具体要怎么做,需要自己自行体会。

image.png

5. 可复制性

可复制性,这是一个可能听得比较少的一个词,具体的一个思想呢,就是:你能力很强,终究只是一个人能力很强,你怎么让你的能力,转移到其他人身上,甚至再从其他人转移到其他人身上。

image.png

继续举个栗子🌰:你可能觉得 Code Review 很重要,你每天辛辛苦苦的帮 ABC 三个同学去做 Code Review,提出各种意见思路。但是呢,如果你是一个带二十个人的 Leader,如果你每天帮每个人看半小时,加起来就是十个小时,那你一天就不用干别的事了。

image.png

这个时候,你可能要做的,不仅是停留在努力的给别人做 Code Review,而是要让你做 Code Review 的能力,复制到被你 Review 的同学的身上。对 ABC 同学 Code Review 的同时,告诉他们这事很重要,以及应该怎么去做,等到一定程度之后,可能 ABC 已经得到了你的真传,这个时候,他们也能代替你,去给甲乙丙丁做 Code Review,但是这样还不够。

image.png

可复制性的这件事,应该是个递归的过程。作为一个 Team Leader,你不仅自己要强,你还要能够培养其他同学变强,还要培养其他变强的同学,有培养其他的同学变强的能力。这里可能比较绕,再重复一遍:你还要培养其他变强的同学,有培养其他的同学变强的能力。

比如上述的 ABC 学会了怎么去给别人 Code Reivew,你还要思考,如何让 ABC 有能力教别人去做 Code Review
这就是所谓的可复制性,这个是在大家后期带团队的时候可能需要具备的一个能力。

6. 兴趣

上面我们罗列了五个点:方向,态度,格局,软技能和可复制性。肯定还有很多其他的点我们需要去思考,但是呢,还有一个最最最重要的,就是兴趣

无论说你有再强力的外部支持比如说有很多的资源素材在很牛逼的团队或者你有再好的方法工具甚至你有再高的报酬都比不上你自己对技术的一个兴趣和热情这才是支撑你快速成长的一个必备特性

image.png

四、推荐的书

image.png

软技能—代码之外的生存指南》,这是一本面向技术人员的职场书籍,对于初入职场或者有困惑的同学可以看看,它的优点是全面,你很少会在一本介绍职场的书籍里面看到对你健身的建议。缺点:涉及的话题多但是不深入,但是的确是很多道理都懂系列,自行取舍。

五、广告时间

image.png

大家有兴趣或者有问题的,可以加早早聊专场的微信群或者说直接加个人微信。

目前是招 T4 T5 的同学,地点在北京和上海都是处于一个正在招聘的状态。对于深圳的小伙伴可以观望观望,应该七月份就会启动了。具体介绍可见:

百度-智能办公平台团队

谢谢大家~


别忘了点下方送稻谷