工作经历(五)——56网上篇

Heero.Luo发表于2年前,已被查看1095次

在奔步公司萌生了辞职的念头后,我先后去了56网和酷狗面试,前者是通过内部推荐,后者则是猎头介绍。虽然酷狗给的待遇要更高一些,但无论是技术面还是HR面,56网要更加专业,所以我最终选择了56网。

初来乍到

第一天到公司报到,发现这里有不少原网易员工,其中一位设计师还曾经是网易以及3G门户的同事。当然,创始人更是网易创业帮的一员。

上了几天班后,基本上搞清楚了这边Web开发的概况。其中JS出现了职责分裂:前端主要负责UI方面的逻辑,后端PHP会编写一些数据加载、提交方面的逻辑。Web主管和前端主管有意把JS完全纳入前端工作范围,所以需要一个领头的人搭建架构规范代码指导开发,这也就是我的主要任务了。

熟悉业务

刚进入一家公司,无论开发能力多么强,都得先熟悉业务。现在看来,刚开始做的两个需求意义非常大:

  1. 瀑布流组件:从刚离职的同事手上接过来的代码,出现过好几个BUG,性能不是很好,调用方式也比较复杂。但解决问题的经验让我更好地完成了新的瀑布流组件。
  2. iPad视频播放页:新项目,由于只兼容iPad,难度不高。在这个项目中,我试用了一些移动Web类库(Zepto、jGuesture),知道了它们核心功能的实现原理,也发现了不少问题。这为开发JRaiser Mobile提供了参考。此外,iPad播放页的某些逻辑跟PC播放页是类似的,这也让我对PC播放页有所了解。

接下来的任务就比较严峻了,要重构PC视频播放页的JS代码。该页面功能繁多,内容大多是通过Javascript异步加载渲染,加上版本更迭较为频繁,所以JS代码异常臃肿复杂,光重构代码就花了一个多月。即便如此,上线后还是出大事了。上线当天就不断出现BUG,有些页面甚至因死循环导致卡死。出现这种情况,除了测试不够全面外,主要原因是重构过程中没有任何文档,只能根据旧代码去写新代码,出现疑问的时候也只能抓原来负责这部分代码的PHP同事来问,这样很容易忽略或误解了某些功能细节。虽然进行了好几轮的BUG修复和代码调整,但PV还是没有回到上线前的量,最后只能回退版本。当时还计划着重构完成后,播放页的UI要进行改版,在前者难产而后者必须按期进行的情况下,只能在原来旧JS代码的基础上开发了。

JRaiser与模块化

由于播放页改版是在旧JS代码基础上开发,所以这部分工作又交还给PHP同事,而我则暂时闲了下来。回顾之前开发过程中发现的问题,模块化开发是比较合适的解决方案。

参加工作以来,我一直在开发、维护一个Javascript类库,即JRaiser。在网易门户网站使用此类库时,出现过很多问题,这些问题促使我开发了能支持模块化开发的2.0版本,但一直缺乏实际应用,现在机会终于来了。于是我把时间花在了完善JRaiser和编写新瀑布流组件上。两者并非毫无联系,新瀑布流组件将会作为JRaiser的UI组件,而用到瀑布流组件的“看台”(地址为kan.56.com,已下线)则被我挑选为试验JRaiser的产品。

这次试验非常成功,这时又接到一个需求——视频上传页增加对HTML 5视频上传的支持,趁此机会又把模块化的试验范围扩大到上传业务。此后,我给前端同事普及了模块化开发的知识,并制定计划把一些业务逻辑较为简单的JS代码分配给各组员进行模块化重构,以熟悉这种开发模式,在此过程中陆续把JS的职责转移到前端。

随着JRaiser的应用越来越广,也出现过一些在特定场景下产生的BUG,但由于是自己编写的代码,修复起来不会太麻烦。可以说,JRaiser打破了56网JS代码的混沌局面,而56网这个平台则帮助JRaiser提高了代码质量。

再战播放页重构

那个曾经失败的PC播放页JS重构项目还是要做的,因为这可以说是56网最重要的产品,提升性能和可维护性的意义非常大。吸取上次的教训,这次重构前就已经有详细的产品说明文档,测试妹子也非常负责地准备了一堆测试用例,此外还讨论出一系列保障方案:

  • 灰度发布。挑选某些分类的视频“试用”新代码,一段时间没有异常后再全量发布。
  • 分阶段开发。PC播放页有三种类型,那就先做好一种,灰度发布没有异常后再继续下一种。灰度发布决定了项目持续时间较长(因为需要时间观察数据),这样做方便插进一些小需求,但总时间不宜拖得太长。
  • 监控JS异常信息。通过window.onerror捕捉异常信息发送到服务器,通过对异常信息的分析发现和定位BUG。
  • 对重要功能进行统计并监控。主要是对一些重要区域链接的点击及视频连播做统计,因为这些都是播放页的重要来源。

在这样的保障下,这次重构想不成功都难,就是持续时间长了点。从此,PC视频播放页成为了我负责的主要业务。

后来,播放页又进行了一次大改版,除了根据需求进行开发外,还调整了之前重构过程中设计得不合理的代码架构,至此代码基本稳定。

流量统计

很多公司的流量统计JS代码都非常落后,因为它们都由非前端人员开发维护,而且为了稳定起见,一般不会进行修改。然而,这些代码越是不改,就越是难改

56网的流量统计JS偶尔会有一些小改动(一般是增删参数),改得多了,对里面的某些代码实在深恶痛绝,就抽空给重写了。在本机测试的结果显示,重写后代码执行时间比原来减少了30%左右(毫秒级的,感觉不出来)。上线过程也是逐渐覆盖到全量。

作为前端工程师,流量方面我们最关注的是浏览器份额,但是56网的数据展示系统非常难用,统计逻辑中的浏览器识别规则也很久没有更新过。针对这种情况,我发起了“访客环境统计系统”项目:

  • 识别规则。让数据组同事维护识别规则是不靠谱的,毕竟他们对浏览器不熟。于是我通过node.js写了一个,他们调用这个包里面的命令就能识别出设备品牌(仅对手机)、操作系统、浏览器核心和浏览器。
  • 展示页。做了一个包含图表(通过Highcharts绘制)的简洁直观的页面。

在数据组同事和PHP同事的协助下,这个系统在一个月内开发完成并投入使用,前端组从中获得了很多重要的数据。

最后

经常有人会问:什么样的公司比较适合我?有的说去大公司,可以学到更多东西;有的人说去小公司,可以做更多事情。在我看来,能与员工当前所处阶段和发展需求相吻合的公司,才能给员工带来满足感和成就感,正如56网和我(以及JRaiser)。后来之所以选择离职,主要也是为了更好地进入下一个发展阶段。

评论 (3条)

发表评论

(必填)

(选填,不公开)

(选填,不公开)

(必填)