Checkson / blog

Checkson个人博客
12 stars 3 forks source link

Web前端退役篇 #41

Open Checkson opened 4 years ago

Checkson commented 4 years ago

前言

不要尝试去寻找确定性,要学会拥抱变化,因为变化才是人生常态。

生涯回顾

你们可曾想过,自己当初为什么会踏入现在从事的行业?

我最初接触 Web 前端是在2016年7月初(大二下学期末),当时是参加学校组织的专业实训,实训内容大概是结合 Java 的三大马车(ssh框架)的学习成果,做一个电商系统。经过小组内的讨论,最终我是负责系统的前端页面工作,也是第一次接触一些网页前端开发的相关开发技术:jQueryH5。从那以后,我对 Web 前端的认识就有了一个雏形。

到了2016年7月底,当时,刷了一年算法水题的我,不再满足天天面对着枯燥无味的ACM题库,于是,在一个偶然的机会,加入了由我的计算机启蒙导师佳哥组建的OJ(Online Judge)团队,担任题库维护仔和 Web 前端打杂仔,开启了边刷题,边维护开发OJ系统前端之旅。在OJ团队里面,成员组成全都是同系同专业的师兄弟,而且技术氛围异常浓烈。我也是在这个时候,认识了真正意义上,带我入门 Web 前端的师兄豪哥。豪哥是OJ系统前端总负责人,是大我两届直系师兄,他带着比我大一届的直系师兄朋哥和萌新的我。当时的OJ系统运行着的前端框架是由谷歌研发的 AngularJS.1.4.x 版本,一个富有哲学思想的框架。

一个刚学会几句 jQuery 语句的我,面对着两个能把 AngularJS 玩转的人,只能躲在角落里面瑟瑟发抖。当时OJ系统前端采用的构建工具叫Gulp,再配合一堆 Gulp 生态的插件,通过 Nodejs 将工程代码、图片、字体等资源打包压缩在 dist 目录下,整个流程一体化,这也是我第一次接触前端自动化构建相关的内容。在参与OJ系统的维护中,我初步认识了:MVVM双向数据绑定指令过滤器依赖注入路由DOM操作耗性能等概念,为后来进军现代 Web 前端打下了坚实的基础。

到了2016年10月中旬,一路 Carry 我的豪哥师兄早已按时毕业了,OJ项目此时急需前端接班人,而大我一级的朋哥师兄也忙于大四毕业实习,那么,自然也只有我这等闲人才有时间去技术维护项目,成为新一代的接班人。坦白地讲,我当时加入OJ团队的初衷,仅仅只是出于好奇心,和抱着求学心态,完全没有做项目前端负责人的准备。但是,大环境趋势就是要让我背负着这个重任,顺应历史潮流的我,从此踏上了专研 Web 前端的道路,告别了摸鱼的日子。

到了2016年年底,我的OJ团队导师,看我平时能力还行,又肯学习和吃苦,维护的OJ系统又还算稳定,于是,我有幸加入了他当时的创立的一个孵化项目,目标是要研发一个能配置出管理系统的系统(下文统称为:配置系统)。我当时,真是初生牛犊不怕虎啊,完全忽略其开发工作量之大和技术要求之高,以为单凭一己之力能 hold 住这个系统的所有 Web 前端功能。我相信,开发过表单设计器图表设计器报表设计器以及富文本编辑器的同学应该都知道,如果能把设计器里面的视图,分成若干个原子组件随意搭配组合成所需展示的页面,并且能动态绑定后台数据,正确地显示在页面上(所见即所得),对 Web 前端技术考验到底有多高!年少的我不知天高地厚,只凭满腔的热血,一股脑儿扎进入就是一顿乱干,年轻就是任性!

配置系统开发前期的技术储备真得艰辛,以前维护别人的项目最多算是从“1”到“1+”,但是当自己真正去尝试从“0”到“1”建立新的项目的时候,才意识到每个开创者才是最伟大的,所以,我觉得我们要充分尊重每个项目中的创建者,他们才是最不容易的人!造全新的轮子,远比重造轮子难得多得多。这也是为什么很多新人,即使在现有的成熟项目中表现出色,但是某一天让他/她亲自来挑大梁的时候,效果却不如人意。

在豪哥和导师的指导下,配置系统的前端技术栈选用的是当时很火 React,为什么是它?原因很简单,当时真正突出组件化思想的前端框架,也只有 React 比较明显了。但在这里,我不得不吐槽一句,用 React 单纯写界面确实很简单,但是用它来写完整的系统就非常复杂了。请别杠,当时的我还是大三学生,而且 React 创建组件的方式还只是 React.CreateClass 的方式,最重要的是不同于现在的生态那么丰富。刚接触 React 时,我非常不习惯数据驱动Virtual DOM等理念,虽然受过 AngularJS 的熏陶,但很多时候差点没忍住引入 jQuery 来直接操作 DOM,幸好最后一直坚持遵循 React 的设计理念,才得以让该项目的前端技术栈更加干净和纯粹。

大约花了两三天的时间,我刚学会用 React 成功写出了需求中几个简单常用的组件,并正确地渲染到页面上,但却发现,要用 React 开发高性能的系统,不能只在页面引入一个 babel 插件链接来实时解析 React 代码,这样运行的 React 应用性能会大打折扣。于是我就在度娘中四处搜寻解决法案,最后发现一个叫 Webpack 的打包工具。说到这,我又忍不住吐槽起来了,Webpack1.x 的官方文档晦涩难懂,加上并不完善和明确的加载器(loader),如果当时有初学者能只看官方文档操作就成功配置出能跑的 React 项目算我输。我几乎全靠第三方技术博客分享,才得以搭建好整个项目的开发环境。

后来,好不容易,啃完 Webpack 这个硬骨头了,但随着开发进度往前的推进,发现 React 库因为过轻,没有内置的路由功能,我只好又去问“度娘”了。幸运的是,当时的 React-Router 并不算难找和复杂,不然我又免不了一翻折腾。

一顿操作下来,我本以为技术储备已经到了万事俱备之时。然而,事实上,我只是迈出了取经之路的第一步而已。当我开发遇到任意组件间互相需要通信的时候,才发现单纯的父组件作为子组件通信的桥梁并不能适用。于是,Redux 自然而然地受到了我的关注。Redux 涵盖的纯函数高阶组件单向数据流ActionState等概念,短时间内搞得我晕头转向。当时 Redux 刚出不久,我还要费好长时间去抉择用 Flux 还是 Redux,换作现在,简直可笑。但不得不说,对于绝大部分的初学者来说,状态管理这一块应该是最烧脑的了,我花了1周左右的时间,才真正弄懂并应用到实战中(在这里我要特别感谢阮一峰老师的博客教程)。不得不说,我发现一个很有趣的现象,在当时很多 Web 前端新的、优质的、前沿的知识和技术,很少作者能在官网把自己的想法和理念讲清楚,并且能够很好地传递给开发者的,往往都需要借助第三方技术博客文章来辅助理解,也或许因此,让那时候很多技术博客自媒体火起来了。不管怎么样,最后我自己还是坚持把 React 开发环境搭好了。现在回想,才深刻感受到脚手架是一个多么伟大的发明呀!

配置系统后续遇到的技术细节和难点我就不展开了。纵使我们夜以继日般地学习,披星戴月般地开发,最后配置系统完整的功能还是没有按预期那样完成。但我无法忘记当时奋斗的样子,每日面对无数个超出能力范围的问题,但却一次次地解决,大概也是我一步一步地让自己蜕变的过程。项目最后虽然失败了,但是我学会三样宝贵的东西:搜索能力学习能力解决问题的能力,这三种能力的培养在我日后职场生涯中起到至关重要的作用。

时间继续往前推进,很快到了2017年3月底,在导师的介绍下,我来到了一家专门为研究院服务的外包企业实习,真正开启了技术套现之路。碰巧的是,当时入职后负责带我的师兄,恰巧是当时和我一起做OJ项目的朋哥。朋哥是一个极具注重细节的人,在他的教化中,我养成了很多强迫症,几乎到了像素级细节都不放过。实习公司前端用的技术栈是当时发布了大半年的 Vue.js2.x,当时的 Vue.js 远没这两年火,国内用的人还很少。例如当时的阿里云系统前端还是在用 AngularJS.1.x,阿里云已经算比较激进的一个了,很多大型网站都还停靠在 jQuery 的怀抱,虽然 React 发布了将近4年,国内的从业开发者也日益增长,但是现实中很多项目都大多停留在对 React 的摸索期,真正投入开发成熟的产品中,还是非常稀少的。Vue 能在这两个巨头中脱颖而出,肯定是有过人之处。

刚开始参与到 Vue 的项目开发中时,我印象最深刻的就是 JavaScript 语法规范: AirbnbStandard,当时项目里面选用的是 Standard 规范。接到第一个开发需求后,我就迫不及待地比划了几句装逼的代码,接着自信地按下 Ctrl + S,静待 Webpack 重新编译,迎接预期的效果渲染在浏览器页面上。谁知,控制台里面输出了一大堆错误。这是怎么回事,难道没配置 ES6 语法转换插件,导致我几句有逼格的代码不能被识别了?

仔细一看,发现不对劲。是一个叫 eslint 的插件抛出的错误。可是这报的都是什么错误呀?于是,马上咨询了一下“网络高级顾问度娘”,得到的答复大概如下:

随后我向师兄确认了一下,他说,加入 eslint 插件是为了规范团队代码格式统一。但我吐了,这 eslint 插件的发明确定不是折磨开发者的吗?迫于无力反对下,我只好怪怪逐个排查代码语法格式,逐个修正。就这样,边写代码边报错,边查文档边纠错,过程令人烦躁,但时间长了,我竟然喜欢上了这种被规范代码格式的感觉!直至如今,我无论是写C#LuaOCPython 等,都会保留不少之前写 JavaScript 的一些规范。反观现在,只需一个 lint-fix 指令就能在秒级内修复代码中的语法格式问题,然而,这样会让很多初学者无法体会到自己逐步自我纠正,逐步规范化的过程。其实,如今越来越多自动化工具,都很容易让绝大部分的初学者失去了独立摸索的机会,而探索的过程,正是很好地让人渐渐地建立自己的主动性思维架构。

作为一名初学者,Vue 对我来说并不会产生陌生感,反而有些许亲切感的框架。我感觉它就是 AngularJS.1.xReact 的结合体,它里面的指令系统过滤器观察者模式等很像前者,而VDOM生命周期组件状态管理等很像后者,这是我当时对 Vue 最初最真实的认知。接触过前两者的我,肯定会不由自主地拿它跟“两位老前辈”相比的,因此也让豪哥(当时未接触vue)和朋哥(当时未接触React)觉得我很无聊。但1年后,也就是到了2018年,Web 前端三大框架的对比话题从未间断。你看,其实人性都喜欢拿相似的东西做去对比。任何存在同质化的领域,都逃不过被对比,人本身又何尝不是呢?

在实习的中前期,我除了用 Vue 去完成一些常规的研究院官网、众包平台、机器人创新平台、移动网页项目外,还花了大概两个月的时间,用 jQuery 成功地实现了配置系统的简易版,并顺利投入生产环境中,也算是弥补了之前失败过的遗憾。

和我一样在这家实习公司上班的,还有同班的其他9位小伙伴。实习的那段时间真的是充实而又轻松。我们当时是利用课余时间去实习的,所以,有课时可以到学校里去上课,没课才会过去实习,时间自由度非常大。像这种能让自身技术得到很好的磨练,又能赚到钱,又不会耽误学业的好事,也就只有当时的导师能给予我们了。另外,我的导师也非常器重我,因此,我也得到了很多锻炼机会。例如,我自己能像产品经理一样设计原型图、构想产品形态,又能像技术一样,实现产品落地,又能像项目经理一样参与合同签署和交付仪式等。很多超出了 Web 前端本身的职能,我在那时候都有幸体验过。你们可以理解为小公司里一人身兼多职是常态,但是遇到肯把机会留给自己的领导,真的很难得。

转眼间,时间轴来到了2017年的十月中旬,到了实习的中后期,是我的Web前端生涯一个至关重要的转折点。在这个时候,在我导师的带领下,我们组成了一支10个人的创业团队,名叫“黑胡子”,寓意“狼性”和“狂野”。目标是把配置平台的构思落地成 Sass和Pass 那样的云服务平台,下文统称“开发者平台”。没错,我又参与了创业项目!不过这一次,我们这10个团队成员,都是从原有的实习公司抽出来的骨干,代表着公司技术实力的最高象征。

我们这一群志同道合的年轻人,都不甘于平凡,都渴望着被社会认可,都梦想着能亲手开创下一个伟大的时代。这像极了绝大部分应届毕业生最初梦想的萌芽,我很庆幸,因为我曾经尝试过全力以赴去追寻它。

当时,考虑到浏览器的兼容性,前端技术栈选用了重 jQuery 和 轻 Vue 搭配,配合后端的模版渲染器,来达到兼容和性能的平衡。我负责的实体设计器表单设计器树状表格横表竖表等模块,是非常复杂且缺乏开源参考的,所以开发过程非常艰辛,开发进度非常难推进。很多方向都需要自己去思考和判断,很多方案都需要自己去尝试和验证,很多后果都需要自己评估和负责。这样,会导致大多时间都花费在试错上面。有人就会问,你们是个团队呀,不是应该由团队一起来解决吗?很抱歉,其他成员已经有他们同样需要挑战的领域了,况且他们也不了解这些方向的知识。其实在创业很多时候里,都需要团队成员自己独立去攻克自己负责的工作领域的难题。

在这段创业的日子里,团队成员除了完成日常的实习岗位工作任务之余,还要集中精力去研发开发者平台。大家都甘愿舍弃日常业余个人的时间,甚至牺牲假期时间来投入研发。没有补贴、没有奖励、没有怨言。每个人都朝着团队目标不断学习和进步,不断打磨理想中的产品。

经历了将近半年艰苦的研发,最终,市场还是选择了我们强大的竞争对手。这个事实很残酷,但是很真实。产品研发的理想主义者,往往在开发成本失控的情况下,白白断送了市场。而我这半年来,更加深化了自己的搜素能力学习能力解决问题的能力

到这里,很多人就会发现,我的创业和实习途中出现最多的人就是我的大学导师了。没错,我糊里糊涂走上了 Web 前端之路,他功不可没。如果用一句话形容他在我职业生涯中的地位,那就是:职业方向的灯塔。对于当代大学生来说,如果有贵人明确为你指明了方向,并且给予你足够多的帮助,那可是少走好几年弯路的啊!而现实大部分的情况却是,绝大部分的人糊里糊涂地选择了大学专业,又糊里糊涂地选择了就业岗位,逐渐迷失了人生职业的方向。

来到了2018年4月底,刚从创业中失败的我,不久就又面临着在实习公司是否如期转正的抉择。考虑到自身在实习公司到了技术瓶颈的阶段,又渴望着要见识外面的大千世界,最终我选择了放弃续签转正合同--裸辞。最后剩下一个多月的时间给自己,打算一边做毕业设计,一边找工作。计划归计划,可是人性懒惰呀。经历过将近两年艰辛的 Web 前端成长之路,突然有时间闲下来的我便立马放飞自我,除了花时间完成毕业论文和毕业设计之余,其余的业余时间都用来玩游戏(《刺激战场》)了。至于我做的是什么毕业设计?不要问,问就是抄袭了chrome浏览器一个叫"infinite"的插件,区别只是人家是用 Vue 实现的,而我是使用 React 高仿了一遍。

由于那一个月以来,我疏于 Web 前端技术基础的巩固训练,加上对自身技术经历的过于自信,以及对自身临场发挥的稳定性过于高估,导致在2018年5月底的一场CVTE内推面试中,遗憾落选。人生首次职场面试,以失败告终。到现在我都清楚记得三个技术问题分别是:

题目总体都不难,但我没有一道回答完全正确的,加上后两面回答HR的问题,答得也乱七八糟,用现在词语形容当时的我:“啥也不是!”

首次面试的失利,犹如一盘冷水泼在我脸上,顿时让狂妄自大的我,重新审视了自己的综合实力。于是,我开始逐步减少游戏时长,平时不爱看书的我,都开始啃红宝书等其他书籍,以此方式来疯狂补基础。其实我很早就意识到自己,没有对Web前端知识有立体性和系统性的认识,不少知识点都是从实战中摸索学习,然后拼凑到自己的前端知识体系中,从而形成了碎片化和断层化的认知。事实证明我的改变和重视,是颇有成效的!在后面的简历投放中,我有了50%机率进入面试阶段,而在后面的面试中,我又有75%机率拿到了offer。至此,不禁感慨道:机会不一定总是留给有准备的人,但是一定不会留给没准备的人。

四次面试下来,我拒绝了一家在深圳处于B轮融资的直播公司的offer(里面真的有很多漂亮的小姐姐,这也太诱人了吧)和一家在深圳做数据可视化的创业公司的offer,最后,选择了在我大学所在地广州的一家大型游戏公司《广州四三九九信息科技有限公司》。原因很简单,因为我想进规模大一点的厂。

2018年6月20日,我准时来到了四三九九(下文统一简称:四三)报到。第一次入职人数规模达1000+的游戏公司,心里还是非常激动和紧张的。新的办公环境敞亮整洁,新的同事热情健谈,那时是我初入职场中全新的起点。入职当天晚上有一个小插曲,鹅厂的电话面试邀请打来了,我承认我当时有些心动,但后面慎重考虑了一下还是拒绝了HR的所有邀请,打算先安心呆在了四三。正所谓:“既来之则安之”,再加上两个多星期下来的面试奔波,广州深圳两地来回跑,真的是累了。不过,刚挂断电话的我,手还是颤抖着的,而且心情还有些复杂,希望日后的我每次回想起这段回忆,都能够不悔当初的选择。

我被安排到一个叫“GDC”的部门中的 Web 前端小组,GDC 是 “Game Design Center" 的缩写,听说在页游时代立下了不少赫赫之功。部门大概由40个成员组成,主要负责的业务是公司的页游的活动页面的设计、开发,广告页面的创作、以及买量视频的制作,当然也有少量的手游需求,例如:微信小程序、微信小程序游戏、移动H5页面等。

新人入职,最大的幸运莫过于得到老同事的提携和重视。小到公司的考勤、伙食、行政单处理,大到公司组织架构、福利、战略、过去和未来,热情的同事都毫不吝啬地为我分享他们的心得和体会。

以前听得多公司体量大了,员工的职能和职责大多都像螺丝钉。无一例外,四三的岗位分工也非常明确和精细,就拿我当时入职岗位来说,我被安排的需求单里面,大多都是重构单。什么是重构呢?就是你只需要完成页面的静态内容和少量的 JavaScript 逻辑,剩下那些复杂的逻辑书写和数据接口对接,下一环流程都会有专门的人跟进,我只需要将 HTMLCSS 等静态页面的实现做到极致就可以了。这里的“极致”是怎么定义的呢?我总结为大概如下三点:

一开始,我承认我是有些瞧不起这个重构岗位的,甚至有种像是被蒙骗进来的感觉。但是后来我慢慢发觉,这个我看似简单的东西,如果我要做到和其他同事(老前辈)相当的重构效果,就要花更多的时间和精力,最后成果还不一定能与前辈们媲美。特别在页面的规划布局、细节展现和用户交互方面,纵使我不断偷师、不断模仿分析其他同事的静态页面,但我感觉总比他们少了点“灵魂”之类的东西,难以形容,可是自己能感觉的到。那是我第一次切身体会到,真的不要看轻任何一个岗位工作,因为你永远不知道把某件事情做到极致的人,在这个领域是怎样轻易地碾压着你,所以,我们永远都要怀着一颗学徒的心。

入职初期的2-3个月里面,我积极参与了公司大大小小的新人培训活动和课堂,发现公司的核心其实都是围绕着游戏研发方向的,很少提及到 Web 领域。一开始我还不太在意,因为当时我认为我已经处在一个足够令自己满意的 Web 技术氛围,这得益于我的顶头上司--勇哥,他也是我当初过来公司应聘时的主面试官。“进好的公司不如进好的团队,进好的团队不如有好的领导”。而勇哥,他是我 Web 前端生涯中的第二座灯塔

2018年8月中旬,勇哥鼓励下属的我们积极参加在广州举行的中国首届React开发者大会,并通过他的推荐下,以比门市价便宜几百块钱的价格,买下了早鸟票。同月18号,在勇哥的带领下,我们如期参与这场开发者大会。大会上来了很多行业大咖,我觉得最有趣的是克君老师提出的“有限状态机”,而印象最深刻的是题叶老师将 Virtual DOM 的思想,应用在多端在线同步编辑领域。

在 Web 前端领域,勇哥一直指引着团队前进的方向。

carvinlo commented 3 years ago

退役指的是转行?

Checkson commented 3 years ago

是呀,转游戏开发了,这篇系列还需要完善和整理,后续找时间再更新