Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间。回想这三个月做过的事情,很多很杂,但还是有重点。

本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我对前端进阶学习的一点思考。

一、漫谈

刚入职不久阿里巴巴就上市了,这是件振奋人心的事情。实际上在正式入职之前,我就已经在淘宝UED实习了三个月,所以这边的工作环境和开发流程都比较熟悉了。

在工作中,遇到了很多这样的场景:

1. 线上 bug 处理

运营:"嘿,小胡子,有客户反馈这个提交表单的页面中,上传图片预览总是失败,麻烦你跟进下这个case~"。 小胡子哥:"哦,好的!"

这个时候手头可能有很多工作,但记住一个原则,线上问题的优先级是最高的,"客户第一"是阿里也是所有公司必须秉承的一个价值观理念。

打开浏览器,发现我这边并没有图片上传预览失败的问题,我纳闷了良久,期间让用户尝试换浏览器、电脑,未果,最后不得不远程连接客户的电脑,查看问题。(最后定位原因为某个地区的 CDN 出了问题)

2. 网站改版(前端开发流程)

老大:"小胡子,以后你就负责这两条业务线了哈~"。 小胡子哥:"嗯"。 某天,运营:"网站上线几个新增功能,之前的流程需要优化,本次将对 xx网站改版,几哩吧啦几哩吧啦..... 小胡子啊,几哩吧啦几哩吧啦....."。 小胡子哥:"这个需求前端实现成本太高,是不是可以这样;这个地方的修改,几哩吧啦几哩吧啦.....好的!"。

一个大的需求过来,一般会经过多次评审。刚开始是产品GG和运营MM们互喷口水,喷完了PRM评审也就完了,那么这个时候一般就确定要做什么啦,然后会把前端、视觉、开发等同学都叫过去参加交互评审,交互评审敲定之后,视觉同学就回去画图啦,这个时候后端同学会去准备数据,前端同学会跟视觉MM联系紧密,形影不离。

视觉稿设计完了之后,前端就正式投入开发了。刚开始会面临一个问题,前后端的接口谁来拟订?

后端数据还在准备中,如果后端拟订接口,则刚开始后端需要模拟数据,此时接口地址和前端开发环境还不在一个域下,取数据存在跨域问题,如果先改成 jsonp 的接口,开发完毕再改成 json 接口,那么后续程序也需要跟着一起改动。如果前端拟订接口,则前端需要在本地 mock 数据,若开发完毕时后端数据依然没有准备好,那么联调又是一个麻烦事儿,可能后端还得模拟一次数据,这样前端后端都实现了依次数据模拟,重复工作,冗余。庆幸的是我们有数据接口拟订的工具,这个工具可以将接口信息以文档形式沉淀,并且提供了可跨域访问的 mock 数据,接口的修改也变得异常方便。

好,既然有工具,那我就辛苦点吧~ 写好数据接口,交给后端同学 review,然后开始切图(做业务嘛,唉...)公司内部使用的前端框架叫做 KISSY,目前已经升级到 5.0,而使用比较多的还是 1.4.x 版本。这是个啥玩意儿呢,很多公司没有自己的框架,于是便使用 JQ 开发,这个 KISSY 也是一样的,他就是公司的 JQuery,不过框架对业务更加有亲和力,KISSY 提供了数量庞大的组件和插件,易用性很强,但学习有一定的门槛。

使用 KISSY 完成业务逻辑的开发。我们会将代码发布到 CDN 上,这点我需要得瑟下,阿里的前端发布系统真是好用到了极致!因为 HTML 部分是后端管的,我们开发好 HTML/CSS/JS 之后,会将 HTML 交给后端同学,同时将静态资源 (CSS/JS/IMG) 发布到线上,图片可以直接上传,CSS和JS在本地打包之后,push 到仓库,系统会自动完成 CDN 部署,一般前端的改动在两分钟之内就能在线上见效,一天发布几十个版本毫无压力,不像某度公司,胆战心惊的排着长队发布一个小小的改动,发布的时候还担心别人抢先上线,自己又得 merge 代码(去年在百度实习情况还是这样,不知道如今改善了多少)。

待后端同学也开发完毕后,我们会把测试MM叫到旁边,让她们帮着测试系统bug,这个时候也可以把运营MM叫过来一起测试,修完 bug 就可以正式上线了。

所以在阿里,前端资源是提早上线的,完了后端代码才会上。上面所说皆为 PC 端的开发流程,Mobile 端还是有很大差异,这里就不细说了。

3. 需求的变更

小胡子哥正在得瑟顺利的完成了一个项目的开发,可是此时,运营MM跑过来说:"某个功能因为xx原因本期不能上线了,需要等到V2版本再发,需要前端协助删除xx模块。" 小胡子寻思着,皱了皱眉头。运营MM含情脉脉的对视着小胡子,小胡子说:"那,好吧,改完之后需求还变么?" 运营MM点了点头,然后又摇了摇头。 小胡子心想:"妈蛋"。

然后继续上述流程。

那些还没有出过校门的童鞋们,看到这里,你是不是对公司项目的开发有了大概的了解呢?以上的三个场景是十分常见的,但是在公司绝不仅仅只干这些事情。

在这三个月里,我参与了一个前端自动化检测工具的开发,完成了前后端的改造。所用到的技术嘛,稍微列一列:

  • websocket 实时通讯
  • scss/less css预处理语言
  • grunt/gulp 打包工具
  • MVC 分离思想
  • Promise 异步编程框架
  • Middleware 中间件的编写
  • Express Node的框架
  • ...

涉及到的技术点,很多很多,这些只是一个项目中用到的部分内容。前端,暗藏无数杀机,如果对基础东西掌握不牢靠,你会发现别人三小时搞定的事情,到你这里就得三天,因为你一直在踩坑!

二、前端进阶的思考

很多优秀的前端同学,在学到一定水平之后,会感觉学到尽头了,每天愁着怎么去学习新知识,学习什么新知识。也有很多同学,学习的重点跟工作后的从事内容偏差颇大。所以我想着能不能在这方面跟大家交流一下,一起探讨。

我在微博上也提出了这样的问题。很多同学学习没有规律,今天来点这个明天来点那个,学完之后感觉自己都懂了,但没有太多的平台/工具来检测自己所学是不是到位,然后突然某一天问道,下一步我该学啥?

每个人成长都有一个过程,在这个过程中,我们会经历多次蜕变。踏过前端门槛之后,下一步要想的事情是进阶,提升自己的技能。

在进阶方面,我问个简单的问题:git,你熟练么?

前端发布资源到 CDN 采用的就是 git,诸如 add commit diff log status tag remote push merge 等等,这些 git 常用命令,你是否都熟悉了?git 的版本管理有哪些思路,比如线上出现了 bug,你会如何处理程序,新建分支开发?在原有基础上开发?如何管理版本?等等。

很多知识是需要花费大量的时间学习的,比如 backbone, JQuery源码分析, MVVM, 设计模式, HTTP协议, 响应式, 异步编程, 模块化, websocket, DOM监控, 本地储存, 浏览器渲染原理等等,平时学习的时候可以把这些关键字枚举下,然后针对每个关键字延伸学习。

延伸学习的方式很简单,google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破。我一直都是这么学习的。

三、小结

好吧,叽哩咕噜又扯了一堆,阿里巴巴是个不错的公司,如果想过来的话,可以联系我哟~ 学习是件长久并且艰苦的事情,收拾好心情,先睡个好觉,明天搞起吧!