web前端学习圈|我在淘宝做前端的这三年 — 第一年 css|vue.js|html|html5|javascript

转眼已经离职半年多了，早就想写一篇工作总结，但由于一直在准备英语考试，又需要处理结婚和房子装修，没想到一拖拖了半年。在淘宝做前端是我第一份签了劳动合同的工作，在这个人才济济的大公司里，接触了非常多的人和事物，也学到了非常多的东西、开阔了眼界。所以还是有必要做一个回顾和总结，一是自己备忘，二是或许对一些前端新人有所帮助，因为这篇文章会涉及到一些入职、职业规划、招聘、晋升、离职等方面的信息。
由于篇幅过长，三年总结将会分三篇发布：
第一篇（第一年）主要总结如何进入淘宝要用什么样的策略，如何站在老板视角看问题，我眼中的阿里文化等。
第二篇（第二年）主要总结如何评审需求和推进项目，如何理解业务，飞冰项目的起源等。（预计将于 3 月 5 日左右发布，可以关注我的掘金收到提醒）。
第三篇（第三年）主要总结如何管理开源项目、推广项目，对招聘面试的思考，以及技术危机，我离职的原因，技术移民的考虑和未来规划等。（预计将于 3 月 12 日左右发布，可以关注我的掘金）。

“我自己是一名从事了8年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2020年自学的web前端全套培训教程（视频+笔记+素材+源码+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴（总共约85G），这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“2020”即可领取）。

来淘宝之前时间先回到 2011 年下半年大一的一个晚自习，在思考自己未来想要从事计算机哪一个领域，当时找了张纸用坐标轴画了市场前景和个人兴趣两个轴，罗列技术领域和个人特点，筛选出了安卓开发和网页制作这两个方向。鉴于个人特性偏视觉和感觉而非逻辑而且高中一直在折腾各种源码搭网站，不太擅长底层的开发，最终选了网页制作，后来发现这个行业叫做前端开发。
从那之后开始专注的学习，上课和自习都是看自己的技术书，在宿舍就是借助开发 WordPress 主题进行实践，并写很多文章（最早在潜行者m 博客上写）。当时看过一本很俗气的职业规划书，有个理论是挺认同的，专注一个领域三年可以成为高手，五年成为专家，十年成为高级专家。由于我的大学一般，分析下来能竞争的就是开发经验了，如果专注开发三年，毕业时的开发经验或许可以提升竞争力跟名校竞争一下。所以之后能逃课就逃课，绝大部分时间用来学习前端，再后来进入两个外包团队做项目，切了几十个整站项目，锻炼了各种前端基础技能同时还实现了经济独立。
当时各种技术团队都有博客，淘宝 UED 博客算是最大最棒的一个，自然也成了我的梦想团队。大二下学期就开始关注秋季校招并在线做了下题看了看流程为大三做准备（其实有能力的同学大二到大三的假期也是可以去淘宝实习的）。大三继续疯狂写博客来提升一些名气，功夫不负有心人，终于引来了前辈的邀请：

文章图片

“希望我能考虑下。” 还需要考虑啥？？我做梦都能笑醒了，马上联系过去告诉了目前的一些情况，并在后续知道春季实习生招聘计划后让他帮忙进行了内推，之后两个技术电面就通过了可以去实习了，可以算是相当顺利了。当时也有投一批二线互联网公司做兜底，本来觉得囊中取物，没想到里面有些公司很多简历关居然都挂了。感觉面试和找工作，运气成分其实挺大的。
在这段经历中，我深刻的感受到了“机会总是留给有准备的人”这句话，虽然看起来挺俗的。运气固然重要但如果没有提前思考规划和学习也是很难抓住的。计算机行业有个好处就是技术水平高于一切，对于学校不好或者专业不符的同学也是有机会的，关键还是看兴趣持久不持久。
正式入职淘宝在淘宝的第一年并不是从 2015 年 7 月毕业开始的，由于我觉得周围同事都会很厉害，为了早早熟悉工作情况，15 年 3 月多过完年我就赶紧申请离校来淘宝继续实习，只在快毕业那段时间，请假几天返校处理毕设和合影等。其实普通学校也有一些优势，比较容易好说话，跟老师申请后经过老师反复确认淘宝不是一个诈骗公司后，就放行了。
一回去实习，发现之前实习的团队居然拆了（第一次体会到“变化“），自己从基础架构挪到淘宝交易团队了，跟着师兄做购物车，后来还没正式签约就开始独立负责淘宝购物车业务，这时候要是出了什么事情背锅，是真的临时工。
得益于“笨鸟先飞”，早在劳动合同签约之前就开始独立负责业务线，很多同届同学毕业才开始由师兄带领熟悉业务，所以在签约三个月左右的转正面试上，我有很多内容可以汇报。也正是因为这样，事后 HR 姐姐说我的分享在团队里算是比较好的，后面组织了一期新同学分享会，让我又做了一次“转正面试”分享。大力是可以出奇迹的，笨鸟真的要想办法先起飞。
淘宝购物车业务这个阶段基本上就是跟着 PD 走，来需求就评审，评完了就尽快做，做好了就测试，没问题就上线，基本上像阿甘一样。毕竟这种核心系统挺稳定的，需求迭代节奏也比较缓慢。
直到 15 年双十一的一个需求，自己才第一次感觉到自己的工作价值。那是 15 年 10 月国庆后，双十一需求都基本做完了，而且快要进行全链路压测和封网了。这时候一个推荐算法团队的人找过来希望新增一个需求，算法接口都已经开发完成了需要前端做界面对接上去。由于早已经过了需求窗口期，完全可以直接拒掉，由于只涉及到前端部分，PD 将这个需求转给我自己评估，并给出建议如果不影响其他需求和稳定性并且来得及就做，来不及就不做。
这个需求是当购物车某个商品由于库存或者状态失效后，出现一个“查找相似商品”的按钮，点击可以推荐相似商品快速加购。我看了下这个需求非常合理而且必要，因为双十一当天库存消耗非常快，很多来不及下单的商品可能迅速库存为零失效，但自己又很需要这个商品，直接有个入口迅速加购相比重新搜索的确方便太多。所以接下了这个任务，并加班加点对接开发，最终在封网前三天完成测试并发布。
双十一复盘之后，收到了推荐算法团队同事发来的感谢邮件，加了这个功能双十一当天购物车的推荐量居然是平时购物车的几十或者几百倍（具体数字记不清了，但是很大），因为购物车原本只有最下面一个小推荐坑位平时推荐量不是很大。我按照比例简单计算了下，加的这个功能可能在双十一当天帮了几百万人快速加购，想想还是挺有成就感的。这个功能后来保留下来了，hover 就可以在右边出现：

文章图片

交易业务并不好做，因为是淘宝核心平台，很多业务线都有需求定制，代码里业务逻辑十分复杂，而且还要小心维护避免改坏了，特别害怕出现问题，因为一旦出问题可能就是 P1 级别故障，年终奖和晋升机会肯定是没了的。整个双十一或者大促期间都需要 on call，一接到电话需要马上起床开始处理。
这一年大促关于图标有一些小故事，一开始设计将双十一标放在了商品图片上面，但被评审调整到文字前面去了。原来有些商家会比较鬼，自己在商品图片上 P 一个双十一标，以假乱真。然后双十一零点一过逍遥子突然发下通知，要求淘宝全链路换掉双十一的标。原来淘宝标跟双十一标有点像，但双十一属于天猫，淘宝并不能使用，于是设计师马上做出一套新的淘宝嘉年华 Icon，全链路各种发布换标。由于交易链路太重要，所以先改好代码，到了六点下单低峰才发布修正。原来一个小图片背后关系到了大量商家的利益，因为天猫商家参加双十一需要各种备货和审核，而且用户也根据这个图标判断哪些是参加双十一活动的商品，这时候两个一样的商品，有标和没标，销量可能差距巨大。开始觉得业务还是挺有意思的。
做基础业务，压力还是很大的，害怕风险和线上问题，还不能延期。因为你延期了，很可能下面业务的促销活动就延期了，这可是非常大的问题。还好做完双十二就开始交接业务（第二次变化），淘宝交易前端交接给其他前端团队了。
购物车和交易这块业务，我学习到了很多：

规范的开发流程：淘宝交易是淘宝最老的业务，也是平台方地位最高，所以交易线制定了很规范的排期会制度和发布制度，如果一个需求没赶上排期或者发布点，不管你多么重要，一律延期到下个发布点。因为交易系统本身的稳定性是最关键的。
线上问题无小事：交易由于用户量大、涉及关键链路，一旦出现线上问题，影响用户非常广，很可能产生重大故障。所以做交易的同学，都会特别小心谨慎，关注线上情况，发现小问题也要尽快修复。而后来接触了很多其他业务，线上的小 Bug，如果不影响使用就暂时先不管了。这个时期也搞了一些发布安全相关的事情，比如一个 Checklist github.com/yujiangshui… （不过后来没有更新过了，有些点已经过时了，找时间我再更新下）。
Debug 和阅读代码能力：由于系统比较复杂，代码很多业务逻辑，想要绕开陷阱就需要仔细阅读代码和 Debug。有时虽然一个小需求，但是要前后 Debug 很多逻辑，确定这里没问题才能改。

得益于这段时期学到的东西，我在知乎上回答了一些关于 Debug 的问题：

研究学习javascript框架或jquery插件的正确姿势是什么？
哪些 JavaScript 框架（库）的源代码最值得阅读和学习？
研究js框架源码用处真的大么？

无线交易业务购物车是主线业务，支线业务当时是由师兄带领做无线交易的几个页面。当时是用 React 来开发这个项目，用了 reflux 等。当时应该算是淘宝最初用 React 的几个业务，主要是为了调研这个技术。
其实大公司相比小公司更愿意也更容易尝试和应用新技术。因为一旦有了开发效率或者性能提升，给业务会带来巨大提升，也有足够的人力来研究，也有非常多的新业务可以来尝试。
我们团队后来研发开源了 React Web（ github.com/taobaofed/r… ）项目，这个业务算是一个踩坑落地项目，用来发现一些问题。比较可惜的是，没过几个月，手机淘宝去掉了 React Native 并换成了 Weex，所以这一套对公司就没什么意义了，所以就停止了维护。不过一些经验积累，及时调头，老板又带人开发开源出来了 rax （ github.com/alibaba/rax ）。
所以看一个大公司的开源项目是否会长期维护，看看他们内部的使用情况就可以了。像 Weex 这种，再怎么说也是会长期维护下去，因为它已经十分融入在手机淘宝里面。无数的页面和应用，都是基于 Weex 开发的。
淘宝海外业务时间到了 2016 年初，交接完淘宝交易业务之后，我开始接手淘宝海外业务。淘宝海外业务是面向海外非大陆淘宝用户的业务，其实主要面向香港、台湾、东南亚等地区用户。
由于面向国外，淘宝需要做很多改造，比如很多商品（生鲜、法禁品）等不能运输需要过滤、繁简体等国际化语言处理还有下单配送地址支持海外集运等。因此在建立业务时期，基本上就是把淘宝核心业务 fork 了一遍，拿来改造了下自己维护。
淘宝海外首页是自己利用 TMS （运营平台）搭建、统一吊顶也是自己特殊定制的（增加国际化选项）、商品详情页是 Node 应用做的前后端分离、交易链路也自定义了一些样式和组件（比如海外集运）。相当于原本整个淘宝的核心链路，搞了一个微缩版本。
做这段工作算是比较爽的，一个人负责一个微缩版本的淘宝的前端，有利于了解整个淘宝的业务链路和很多淘宝业务的代码。然后为了沟通方便，我把工位搬到业务方办公区，整片包括运营、产品、设计、技术等都在一起。当然也没有交易那种排期规则，如果有什么需求和会议，随时沟通开始做效率挺高，感觉像是创业公司，我很喜欢这种工作氛围。此外还有三个外包同学参与这个项目，由我分配工作，这让我有了一点“小老板”视角并得出结论：原来你的老板可能真的比你更了解你。
由于这三位同学协助我工作，他们的工作能力和代码质量直接关系了我的工作量，所以我每周拿出一个小时做 Code Review and Share，在会议室让大家各自找一段本周写的比较好的代码出来分享，然后我也会找一段分析下好的地方和不好的地方。并且鼓励他们在阿里内部 ATA 平台写文章做分享，因为技术好的外包是可能转正的，这或许是个加分项。紧密工作一段时间后，很容易就看出这几位同学的能力和学习积极性的区别，再加上工作完成情况，可以说是对他们的能力看的比较清楚。
但仔细回顾一下，我跟平级的同事之间，其实是很难有所比较的。因为我们各自做的事情不同，而且也不会在意别人的优点或者缺点，更不会去“教育”或者“指点”平级同事应该怎么做。但是老板视角就非常清晰了，他需要对手下人的结果负责，所以会关注进度和进展，同时也十分容易做横向对比，可以说是可以十分清晰的看出一个人的水平。老板为了自己晋升，也会关注手下的晋升，所以也会去指出一些问题。这个体验给我了很多思考：

跟对老板比做对事情重要：好的老板愿意去培养下属，指出问题。有能力的老板才能给下属更高的成长空间。很幸运的是我有这样一个老板（元彦）。
不用试图耍心机或者邀功、抢功：这些伎俩只能欺骗你自己，老板视角看的一清二楚。
认真记下老板的建议，多多反思：几乎所有人接受到批评，第一反应都是去反驳。但在职场上，老板一般是不会害你的（因为有晋升等利益相关）。这可能就是老板比你更懂你的地方，他能从一个更有经验的外部视角来看你的方案你做的事情。
遇到“不公”先想想自己：机会是有限的，为什么老板会把晋升机会、好的工作机会给某个人而不是你？先不要抱怨不公，想想为什么。
抓住机会多跟老板交流：基本上每周周会上，我都会提出来一些手头上一些比较棘手的问题或者对团队未来新动向的疑问，来学习下老板是什么样的解决思路。

有些人可能会觉得老板比自己笨，但其实老板的老板并不是傻子，老板之所以成为你老板，肯定是有很多原因的，学习到了你老板的长处，有一天你才可能登上这个位置。
所以说做事情要多站在老板的视角去思考，听取老板的建议并时常反思。如果的确有问题，为什么有这个问题？怎么解决？如果没有这个问题，为什么会被老板误以为有这个问题？
戏剧性的淘宝海外业务交接有一天开了个需求评审会，结束之后一群运营就去了一个会议室。我以为还要继续开就跟进去了。进去之后才发现他们在通过一个商家录屏看 Lazada 的后台操作和有什么功能，算是一种竞品调研。我觉得这跟前端功能也有关系，就留下来一起看了下。
没想到过了几天，突然就从外面看到新闻，阿里巴巴收购了 Lazada。没想到又过了一段时间，老板就开始让我处理交接任务，将把这个业务转出去。同时我来负责新的达人平台和内容平台的前端。再后来就听说整个淘宝海外业务就解散了，一些开发去 Lazada 做开发了，有的运营去了天猫，有的去了其他业务。
其实阿里集团下包括 AliExpress 也是主打国际化，不过是偏欧美、俄罗斯的，Lazada 是偏东南亚地区。阿里巴巴高层分享国际化战略也强调过，不管做国际化的业务你叫什么名字，吃下来大部分，你就是阿里巴巴国际化代表。显然淘宝海外没有打败 Lazada，所以干脆用钱把 Lazada 买下来了。
换句话说，如果我们真的是创业公司，不管之前怎么努力，现在已经死了。
至此，亲身经历了三次重大变化，可以说是特别了解阿里“拥抱变化”的文化了。都说船大难掉头，其实感觉并不是这样。每年阿里都会调整业务归属，如果做不好可能就砍掉或者换一拨人来做。好处是快速试错持续前进，坏处就是一些研究和积累浪费了。我在淘宝海外主要研究了前端国际化的一些方案，还出去做了《基于 React 的国际化方案探索》的分享、写了《淘宝前端国际化方案探索》以及回答了一些国际化相关的问题（zh-cn 与 zh-hans 是什么关系、有什么区别？），但换了业务之后，这些知识就基本没有在后续业务中用到过了。
阿里文化与高管分享新入职同学会脱产有百阿（百年阿里）和百技（百年技术）培训，一个是价值观培训，一个是技术培训。在百阿大分享时，非常幸运，马总有空给我们这批新人做的分享。此外，HR 姐姐还会不时组织一些高管见面会帮助大家成长。这里可以简单分享一些我印象很深刻的点，在实际工作生活中也很必备：

诚信第一：阿里巴巴本身是商业公司，商业诚信第一，所以这是阿里巴巴的红线。小到虚假报打车发票，大到私下勾结商家，抓到必开然后加入黑名单，严重的送监狱。在阿里有句话，因为信任所以简单，所以权限放的比较开，要求必须有诚信。
公司里面薪资保密：薪资保密也是阿里的红线，公开讨论或者公布，会被开掉。这是源于最初马云创业时，筹集那 50 万初始资金那件事情。马总分享时说当时要求大家把自己闲钱拿出来，多少无所谓，不记名互相不能知道。时至今日马总也不知道究竟谁出了多少钱。因为人性是很脆弱的，一旦相互知道了，不可避免的就出现利益分配争端，也可能不再按照能力提拔。十八罗汉的关系可能很快就因为利益崩掉了。回归现实，影响一个人薪资的因素太多了，如果你知道你同事比你高，干活还比你少，你可能很难再正常工作。

有一次高管见面会，邀请了玄难给我们做分享，给了我很多启发。他先介绍了他的工作经验，可以说是非常丰富了，前后端都做过，这么高 P 的技术专家在分享中举例用的前端名词挺专业的。主要收获：

不要经常换工作，做一份工作通常 3-4 年才会有所沉淀，对这个领域非常了解。换工作的原因一定是追求更高的目标，而不是工作中遇到了困难想要逃避或者追求涨薪。越是遇到困难越要解决困难才可能有成长，逃避困难，换了工作仍然会遇到。技术的深度会跟薪资挂钩正比，即便是通过跳槽涨薪，没有技术实力压住泡沫还是会破。
在 IT 行业，工作和兴趣要尽可能贴合，可以发挥最大效果。假如工作内容是一条线，兴趣是是一条线，这两条线的夹角越小，干活又轻松成果又多。如果这两条线是直角，两边可能都很痛苦，建议调整。
牛逼的架构师一定是业务、前后端各种技术栈全部有很深的理解。不懂业务或者不懂前端只懂后端，都很难站在一个更高的视角来整体看问题和设计架构。因为系统是一个整体，有一部分不懂或者不关心，就可能成为系统的短板。

我也趁机问了两个我比较感兴趣的问题：

架构师日常工作是什么？答：一半时间四处听方案，评审架构方案可行性和合理性，并查看落地情况；一半时间用来制定目标管理人才以及招聘。
对你影响最大的一本书或者技术是什么？答：编译原理。

百阿培训时，一位讲师在讲关于抓住用户需求和关键点时也问了我们一个有趣的问题：如何用一句话让老板帮你晋升？有人说我工作努力，晋升后会更努力。有人说我的实力足够晋升了，不晋升我就跑路了。其实都不对，讲师的答案是“帮我晋升，老板你才能晋升”。其实老板也需要晋升，但是一个团队的结构通常需要一个金字塔形状的结构。比如老板是 P6 带领一堆 P5，今年很多 P5 晋升到了 P6 那么老板显而易见很快要升 P7 了，不然金字塔结构就不稳定了。但一个 P7 带领一堆 P5 而且 P5 没有晋升迹象，那么可以遇见未来两三年都很难升 P8。从这个方面也可以看到，老板才是最可能对你好的人，你的成绩也关乎他的成绩。
第一年总结到了 2016 年 4 月，第一财年结束了。在这一年，技术能力进步很多，从之前 jQuery 栈转到 KISSY 再到 React 并且具备了一定的 Debug 能力，结合之前阿里全网升级 HTTPS （当时作为临时工，升级了不少淘宝老系统代码）、淘宝交易和淘宝海外，阅读了很多很多代码学到了很多东西。也能快速学习调研一些技术问题并做了很多分享，不过大都写在了内部 ATA 上了，所以博客从此基本没怎么更新了，主要开始逛知乎回答一些相关问题。
拥抱了变化，知道了老板视角。也初步认识商业的残酷，也大概知道淘宝的业务流程，对业务有一定的关注。从各种高层、大神的分享中也学到了很多。
收获也颇丰，拿到了不错的绩效。
【web前端学习圈|我在淘宝做前端的这三年 — 第一年】此外，2015 年还有一个关于雾霾的纪录片发布出来。我也是第一次接触到了雾霾，我嗓子一直周期性的咽炎难受，原来发现可能是跟雾霾有关。之后，我的浏览器收藏夹多了一个“移民”目录。