Web前端退役篇 #41
Comments
|
退役指的是转行？ |
|
是呀，转游戏开发了，这篇系列还需要完善和整理，后续找时间再更新 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
前言
不要尝试去寻找确定性，要学会拥抱变化，因为变化才是人生常态。
生涯回顾
你们可曾想过，自己当初为什么会踏入现在从事的行业？
我最初接触 Web 前端是在2016年7月初（大二下学期末），当时是参加学校组织的专业实训，实训内容大概是结合 Java 的三大马车(ssh框架)的学习成果，做一个电商系统。经过小组内的讨论，最终我是负责系统的前端页面工作，也是第一次接触一些网页前端开发的相关开发技术：jQuery 和 H5。从那以后，我对 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涵盖的纯函数、高阶组件、单向数据流、Action、State等概念，短时间内搞得我晕头转向。当时Redux刚出不久，我还要费好长时间去抉择用Flux还是Redux，换作现在，简直可笑。但不得不说，对于绝大部分的初学者来说，状态管理这一块应该是最烧脑的了，我花了1周左右的时间，才真正弄懂并应用到实战中（在这里我要特别感谢阮一峰老师的博客教程）。不得不说，我发现一个很有趣的现象，在当时很多 Web 前端新的、优质的、前沿的知识和技术，很少作者能在官网把自己的想法和理念讲清楚，并且能够很好地传递给开发者的，往往都需要借助第三方技术博客文章来辅助理解，也或许因此，让那时候很多技术博客自媒体火起来了。不管怎么样，最后我自己还是坚持把React开发环境搭好了。现在回想，才深刻感受到脚手架是一个多么伟大的发明呀！配置系统后续遇到的技术细节和难点我就不展开了。纵使我们夜以继日般地学习，披星戴月般地开发，最后配置系统完整的功能还是没有按预期那样完成。但我无法忘记当时奋斗的样子，每日面对无数个超出能力范围的问题，但却一次次地解决，大概也是我一步一步地让自己蜕变的过程。项目最后虽然失败了，但是我学会三样宝贵的东西：
搜索能力、学习能力、解决问题的能力，这三种能力的培养在我日后职场生涯中起到至关重要的作用。时间继续往前推进，很快到了2017年3月底，在导师的介绍下，我来到了一家专门为研究院服务的外包企业实习，真正开启了技术套现之路。碰巧的是，当时入职后负责带我的师兄，恰巧是当时和我一起做OJ项目的朋哥。朋哥是一个极具注重细节的人，在他的教化中，我养成了很多强迫症，几乎到了像素级细节都不放过。实习公司前端用的技术栈是当时发布了大半年的 Vue.js2.x，当时的
Vue.js远没这两年火，国内用的人还很少。例如当时的阿里云系统前端还是在用AngularJS.1.x，阿里云已经算比较激进的一个了，很多大型网站都还停靠在jQuery的怀抱，虽然React发布了将近4年，国内的从业开发者也日益增长，但是现实中很多项目都大多停留在对React的摸索期，真正投入开发成熟的产品中，还是非常稀少的。Vue能在这两个巨头中脱颖而出，肯定是有过人之处。刚开始参与到
Vue的项目开发中时，我印象最深刻的就是JavaScript语法规范: Airbnb和Standard，当时项目里面选用的是Standard规范。接到第一个开发需求后，我就迫不及待地比划了几句装逼的代码，接着自信地按下Ctrl + S，静待Webpack重新编译，迎接预期的效果渲染在浏览器页面上。谁知，控制台里面输出了一大堆错误。这是怎么回事，难道没配置 ES6 语法转换插件，导致我几句有逼格的代码不能被识别了？仔细一看，发现不对劲。是一个叫 eslint 的插件抛出的错误。可是这报的都是什么错误呀？于是，马上咨询了一下“网络高级顾问度娘”，得到的答复大概如下：
===替代==随后我向师兄确认了一下，他说，加入
eslint插件是为了规范团队代码格式统一。但我吐了，这eslint插件的发明确定不是折磨开发者的吗？迫于无力反对下，我只好怪怪逐个排查代码语法格式，逐个修正。就这样，边写代码边报错，边查文档边纠错，过程令人烦躁，但时间长了，我竟然喜欢上了这种被规范代码格式的感觉！直至如今，我无论是写C#、Lua、OC和Python等，都会保留不少之前写JavaScript的一些规范。反观现在，只需一个lint-fix指令就能在秒级内修复代码中的语法格式问题，然而，这样会让很多初学者无法体会到自己逐步自我纠正，逐步规范化的过程。其实，如今越来越多自动化工具，都很容易让绝大部分的初学者失去了独立摸索的机会，而探索的过程，正是很好地让人渐渐地建立自己的主动性思维架构。作为一名初学者，
Vue对我来说并不会产生陌生感，反而有些许亲切感的框架。我感觉它就是AngularJS.1.x和React的结合体，它里面的指令系统、过滤器、观察者模式等很像前者，而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逻辑，剩下那些复杂的逻辑书写和数据接口对接，下一环流程都会有专门的人跟进，我只需要将HTML、CSS等静态页面的实现做到极致就可以了。这里的“极致”是怎么定义的呢？我总结为大概如下三点：CSS文件加载失败了，网页文档基本布局不变，也就是语义化HTML，而不是无脑堆砌DIV。PSD设计稿，像素级做到不误差，并且能为页面加入合适的交互动画效果。一开始，我承认我是有些瞧不起这个重构岗位的，甚至有种像是被蒙骗进来的感觉。但是后来我慢慢发觉，这个我看似简单的东西，如果我要做到和其他同事（老前辈）相当的重构效果，就要花更多的时间和精力，最后成果还不一定能与前辈们媲美。特别在页面的规划布局、细节展现和用户交互方面，纵使我不断偷师、不断模仿分析其他同事的静态页面，但我感觉总比他们少了点“灵魂”之类的东西，难以形容，可是自己能感觉的到。那是我第一次切身体会到，真的不要看轻任何一个岗位工作，因为你永远不知道把某件事情做到极致的人，在这个领域是怎样轻易地碾压着你，所以，我们永远都要怀着一颗学徒的心。
入职初期的2-3个月里面，我积极参与了公司大大小小的新人培训活动和课堂，发现公司的核心其实都是围绕着游戏研发方向的，很少提及到 Web 领域。一开始我还不太在意，因为当时我认为我已经处在一个足够令自己满意的 Web 技术氛围，这得益于我的顶头上司--勇哥，他也是我当初过来公司应聘时的主面试官。“进好的公司不如进好的团队，进好的团队不如有好的领导”。而勇哥，他是我 Web 前端生涯中的第二座灯塔。
2018年8月中旬，勇哥鼓励下属的我们积极参加在广州举行的中国首届React开发者大会，并通过他的推荐下，以比门市价便宜几百块钱的价格，买下了早鸟票。同月18号，在勇哥的带领下，我们如期参与这场开发者大会。大会上来了很多行业大咖，我觉得最有趣的是克君老师提出的“有限状态机”，而印象最深刻的是题叶老师将
Virtual DOM的思想，应用在多端在线同步编辑领域。在 Web 前端领域，勇哥一直指引着团队前进的方向。
The text was updated successfully, but these errors were encountered: