17 min read

前端工作四年多

今天,是 2019 年 6 月 26 日,哔哩哔哩十周年的日子。 明天,也是我入职两周年的日子。 我是 2015 年 3 月份开始工作的,那么到现在,大概 4 年 3 个月了。

今天,是 2019 年 6 月 26 日,哔哩哔哩十周年的日子。
明天,也是我入职两周年的日子。

我是 2015 年 3 月份开始工作的,那么到现在,大概 4 年 3 个月了。

我这四年我都做了什么?

转行

考研

18 年下半年的时候,周围同学都在紧张的备考研究生。我也一样报了名,准备考材料专业的研究生。
但是和好朋友一起泡了几天考研自习室以后,开始思考,我到底是不是应该继续上学。
在校期间,我参加过大大小小的学术竞赛,在实验室也带过一年多。我可以肯定,我对我的专业毫无兴趣。

于是,大概复习了一个月的时间,我决定放弃研究生考试,找工作。

双选会

我漫无目的地去了几家双选会,彼此入眼的一家都没有。

后来,回想起我小学三年级接触计算机起,老师就说过我,很有天赋。
当初做 flash 动画的时候,老师还在一点点手滑运动轨迹,我就已经可以自己琢磨出直线然后用锚点拉出平滑的曲线。
我还记得当时老师坐在我旁边,惊讶地看着我操作,然后说:跟我到外面去干吧,最少能赚…(他用伸出一个食指)。我以为,他说可以赚一百块。
我那时还只是个小学生,估计就是老师为了鼓励我的吧。后来不了了之。

回到双选会,我起初是想着,可以去学校里搞搞电脑,当个微机员,我还会 ps,各方面还算有点基础。但是经过打听,所有学校,都只要北京户口的员工。遂放弃。

有一次我去双选会,看到了有个公司招聘前端,我不知道是什么,就去打听了一下,似乎是真的程序员。但是人家说的什么语言,我都不懂,他们留了我的简历,然后没有了下文。

双选会回来以后,我去图书馆借了本有点古老的讲 div 布局的书,看了几天,觉得挺有意思。

这算是与前端开始结缘。

自学

其实目前大多数的前端从业者,都是自学的前端,我也不例外。

开始的时候,我在网上寻找学习前端的方法。
那时候,知乎还很纯粹,我从这里得到了大部分的学习指导。
那就是看书
这一点,一直到现在都深深影响着我。我深刻地体会到,想要精通,必须要系统地学习。零散地看看文章,收效甚微。

我先从 head first 系列开始,学习了 htmlcss,还有 JavaScript dom 编程艺术大体了解了 js
这段期间,我大部分精力都放到了 htmlcssjs 傻傻不懂。

寻找实习

海投

学了点“前端”,能写写网页代码,我觉得已经很开心了,所见即所得给了我很大的信心。

过年结束,我马上开始寻找实习机会,期望能够通过实习阶段良好的表现, 毕业后转正。

但是现实的确有点残酷吧,我投递简历,估计快上百家了吧,只要是公司基本都投了。获得面试的,大概 20 家0 通过

但是我当时我却异常有信心,也不知道哪里来的。

微博

印象最深刻的,还是我通过微博,得知微博招聘前端,于是我通过邮件联系了刘巍峰(就是微博上的巍峰),不知道他现在还记不记得我了,我很感谢他。
他很高兴地叫我去理想国际面谈。

我现在翻看了当时照片,我穿了非常糟糕的外套,看起来像是脑子有点问题。

巍峰给我找了一套笔试题,让我先做做。当时觉得,太难了,我只能答出来几道,一种马上挂科退学的紧迫感。

答完题,巍峰说我应该是不能满足他们的条件的,不要工资的实习也是不行的。但是他还是替我去问了他们的主管,当然答案也是不行。

但是接下来,他带我到大厅的花坛内,和我讲起来这套笔试题里面的大部分题目。还给了我一些学习上面的建议。我记得他说,他们现在的老大,也是学化学的,所以让我保持信心,期待以后能够在新浪再次看到我

可以说巍峰让我坚定了要从事前端工作的信念。

唯一一份实习

2015 年 3 月,我终于找到了实习工作。
我只经历过这一段实习。

当时我真的很菜,连 jQuery 都用不顺。
那个时候,vue 1.0 还没有发布。

这是一家电商公司,主要做线下的智慧社区产品,其实前景还不错,可惜没做起来,如今网站无法访问,应该已经倒闭。
老板是华为出来的工程师,可能是因为我说,我可以不要实习工资,他说他觉得我挺有诚意,就留我实习了。

我在这里的每一天,基本就是看书,看网上的教程,也没有什么工作分给我。
似乎整个公司的人都这样,估计这也是倒闭的原因之一吧。

我在这里,学会了 jQuery 的基础,当时用 bootstrap 做了很多 demo,天花乱坠。

但是好景不长,听正式员工说,他们工资只有 4k,就是我实习工资的两倍还不到,还赶不上大公司实习生的工资,根本不能过活。
他们都劝我,说我学校也不错,技术也还行,赶紧走吧,不要等这里转正了,没希望。

我听了他们建议,实习了刚好三个月,回学校了。刚好我也快毕业了。

这期间,有个高中同学在搜狗工作,他内推我去面试了前端,结果很尴尬地被婉拒。
面试完,我的同学还请我喝了星巴克,那是我第一次喝星巴克,好甜,也好贵。
我本想请他的,但是他执意要买单。
坐下来听他讲他的工资,我心理有了一点宽慰,毕竟这杯咖啡只是他工资的一点点零碎。

北京

机遇

距离毕业,还有差不多一个月,我得寻找正式工作了。

有了第一份的实习经历,我的简历还算拿得出手,至少吹嘘自己可以的时候,不至于胆颤。

能够获得实习工作,我觉得已经很幸运了。这份正式工作,我觉得也是运气使然

面试我的,是一个比我年纪还小的小妹妹,当时她和我聊天,还有点羞涩。后来工作了才得知,这是老板的妹妹。
面试非常简单,也很顺利,就问了问我都会什么,这个设计稿能不能做,想要多少钱,住的多远一类的。
面试官说,看你简历做得挺好,应该挺靠谱,就你了,每个月 7k 工资

我当场就抑制不住激动地心情,7k,我的同龄人很少有这么多工资的。
我拿到 offer 以后的几天,感觉都是笑着睡过去的。

我刚来这家公司的时候,公司还在以投资者的身份去给其他创业公司风险投资。
当时公司人还有点多,20 多人吧,挤在立方庭的一个复式楼里面,大家都在楼下办公,楼上是老板的家。
后来公司拆分,我们到了人人信,成了科技公司,全身心搞产品了。投资公司的人慢慢都离职了,人越来越少。

我进来的时候,只有一个前端,用 angular 写了个雏形。当时他用得是 MacBook,那是我第一次见到,就中了草。

但是没多久,他就走了。
重担落到了我还有另外一个和我一起实习的女生(敬聪)身上。
无奈我们俩都挺菜,只能写写 csshtml,逻辑还是搞不定,ajax 完全调不通。

当时有个服务端大佬,我们后来叫他蒋老师。他是个热心的人,现在已经回家乡从事计算机教育工作了。
蒋老师会写 jQuery,他写了大部分逻辑,然后一点点给我和敬聪讲,让我们也慢慢上手。
就这样,我开始了真正的前端道路,我写的代码,也顺利上线了。

我写的大多数业务,都在微信服务号上,我们产品,也是得围绕着微信的要求,带着枷锁舞蹈。我也因此对当时微信的规则和框架十分了解。

后来整个创业市场进入寒冬,我们大概一年时间,一分钱都没有融资到。
公司濒临倒闭的时候,我们的一个很久没有人运营地产品自己活了,而且开始盈利。
公司从此起死回生。

创业公司,一定会经历无数的坎坷,每一次失误,都可能是毁灭性的。
但是我们活了下来。
原因我感觉有两点吧:幸运抠门
我想,大多数活下来的创业公司,无外乎这两点。

后来公司慢慢做大做正规,人来人往,我留到了最后,做工牌的时候,成为了第 4 号员工,获得了期权。虽然没啥用,但是也算是对我的认可。

做了什么

现在回想一下,我为这家公司都做了什么:

  1. 引入了项目管理工具 towerteambition等等,小公司能有我这么个员工真是太幸运了😏。
  2. 把公司的版本控制系统从 svn 迁移到了 git
    而且给前端写了很多服务端构建的脚本,也算是做了点自动化。
  3. 一意孤行,把代码里面 jQuery 全部干掉,直接上 vue
    当时好像 vue 好像刚出 1.0 版本,我就开始学习,写了一点 demo,然后就开始重构,摸着石头过河。当时的 vuex 还没有中文文档,还提了 PR 翻译了 actionmutationstate 三个章节,也算是在 vue 仓库里留下了脚印。
  4. 我还给公司用上了用户数据上报的系统。算是能够给产品运营提供一点数据支撑。
    当时我是既要做研发,还得去和这些数据公司谈合作,好在他们都没有欺负我这个老实人。
  5. 我还接了个监控系统,免费的,功能简单,每 5 分钟访问一下我们的网站,再访问一下关键接口,看看通不通。
  6. 公司最惨的时候,就 2 个前端,1 个服务端,1 个产品,一个 UI,一个老板。
    我们几个人,得轮流做客服,接一个座机电话。
    后来我觉得,真是太烦人了,一般打电话的人,脾气都挺差,当客服真是折寿。
    我就找了几家里面便宜客服系统接了进来,然后把座机也设置成语音导航的,电话一下子少了很多。
    公司活了以后,招了客服,我们才算是解脱了。

公司慢慢扩大,人越来越多。后来,我离开了北京,当时公司已经坐满了复式楼的两层,还额外租了其他办公室。
听说现在已经一百多人了。

离开

我离开北京时候,老板和我聊了很多次,最后许诺我在上海远程办公,给我双倍的工资,差不多 20k 吧。

离开北京的前一天,还留在公司的老员工们一起吃了饭,没什么特别的道别,我第二天就乘飞机到了上海。

上海

幸运至极

在上海远程工作了 2 个月,坚持把一个套壳的 web app 上线以后,我决定在上海找一家公司。毕竟远程的效率很低,心态也不好。

很幸运,我来到了 B 站。这是我来到上海最想来的公司。

面试官是我后来的同事,一个和我经历很像的人,他后来说,我是他面试过的唯一一个所有问题都答上的人

B 站也是大风大浪里活下来的公司,薪水开得不算很高,在我同期拿到的 offer 里面,是最低的一个。但是情怀真是可以当饭吃,我还是毅然决然选择了 B 站。

消息

起初我是在直播团队,但是我所属的是一个内部孵化的小团队,后来拆分出来独立了。

我接到的第一个挑战,那就是把整个消息的前端重构
比较无法理解的是,期初没有源码。项目太古老了,只能一点点照着样子扒下来。但是狗血的是,后来源码又找到了,这时候重构都快结束了。
还好,给了我一个月时间,顺利从 jQuery 重构到 vue

但是挑战马上就又来了,服务完全推翻了,整个聊天系统重写
这可以算是我见过难度最高的前端项目了,难在服务端给出的设计,是很超前的。

我们都知道,即时通信系统(IM)是有会话概念的。但是我想大家应该都感受过在电脑端登录微信客户端的时候,消息似乎是从老的一点点同步到新的。

B 站的消息系统也是一样,只有一个 feed 流,从老数据开始,一批一批吐出知道最新的一条。
然后,客户端再把消息聚合成一个个会话,展示给用户。

对于客户端来说,用户一般时刻在线,也不会轻易卸载软件,数据始终存在客户端,所以每次只需要增量数据即可。
但是 web 用户就不一样了,用户每次关掉会话,如果数据没有在浏览器落地,就会丢失,下载再来只能重新同步。但是从最老的一条,到最新的一条,可能是上万条数据,每次同步这么多,浏览器可吃不消。

因此,web 消息的设计我想了好久,还参考了 twitter 的方案。
最后决定,用一个大的列表,存储消息序列,保证时间顺序,另外通过 indexedDB,存储 kv 结构的消息主体。这样,读取消息序列,只是很小一部分数据,还可以列表分页;消息主体是数据大头,kv 结构数据库读取的时间复杂度最低。

其实这也是大多数 feed 流的服务端采用的设计,关系型数据库和 kv 数据库组合。但是在前端,这种实现还是相对较少的。

消息系统最后不是很顺利地上线了,bug 倒是没什么,主要是性能太差,毕竟我没什么数据库优化的经验。
后来陆陆续续优化了半年,算是可以达到 2-3s 内初始化完毕可以使用了。

消息系统的设计,算是我在 B 站最满意的作品了。

动态

后来,我们以动态(类似微博)为主的业务线慢慢起步,消息日渐被冷落,我也慢慢开始接手动态和话题项目。

动态的设计和消息如出一辙,只不过是倒过来,从新的往老的数据拉去,所以 web 端省了省了很多工作。

动态项目里面,最大的挑战,莫过于富文本发布框了。
众所周知,富文本编辑器是前端领域里面最坑的,多少前人都警示我们不要碰。但是我碰了,挺难挺有挑战,但是也非常有趣。

我们的发布框其实需要的功能不多,主要是跟随光标的联想、文本替换、文本高亮。后面我会写一篇文章单独介绍这里的一些心得。

基础组件

同时,我也负责了前端团队的组件库的维护工作。
组件发布得瞻前顾后,生怕不兼容。
我还负责了全站顶栏里面的两个模块,可以说我也具备了炸 B 站的能力了。

后来业务越来越多,需求也来越多,有时候同时很多任务在一个仓库同时进行。
由于历史原因,仓库都是不带 lock 文件的,所以一不小心,刚刚发布的组件,只是为了到测试环境测试,其他不知情的人构建线上版本,就会不小心上线。

为此,我给团队安利了很久的 package-lock.json 文件的作用,以及好处。
目前已经全面实施了,收效显著。可以保证,同一个分支在构建的时候,一定能产出同一份代码,不会出现这一次构建是老的,下一次就变新的了。排查 bug 也轻松了许多。

我们原来的项目,大多是一个页面一个仓库,导致很多公共组件不好复用。
后来我们慢慢把相似项目,整合到同一个大仓库内,一下子发布效率提升一大截,不用每次发布三四个项目了。

但问题也随之而来,大仓库不能用传统的 git flow 工作流,dev 分支如果合入了太多不稳定代码,在没有完备的自动化的条件下,很定会崩的。

于是我们放弃 git flow,采用了分支研发,分支上线。上线前,保证主干分支合并到特性分支,上线完毕,特性分支再合并回去。
这样不仅保证了代码隔离,还避免的多次构建导致的不确定性。

可能我能力有限,在 B 站我也没能做出啥特别的成果,都是一些不停迭代的小功能。
我也有点懈怠了。
但是 B 站在不断摸索中,是有沉淀较为成熟的工作流程的,虽然不算完美,但是几乎解决了我在创业公司遇到的大部分项目管理的问题了。

也就这么多。