【转载】15年双11手淘前端技术巡演 - 前言

本文开启了2015年双11手淘前端团队技术分享旅程，这是整个系列的第一篇，由手淘前端团队总架@岑安写的前言，如果您想知道双11手淘前端团队使用哪些技术，如果您想了解手淘更多相关技术，欢迎持续关注相关更新。

15年双11刚落下帷幕。今年众所周知，是全面“无线化”的一年。数据上我就不说了，可以公开的数据我相信大家多多少少也从各方都了解到了。

在整个阿里体系内，无论技术还是业务，都会把每年的双11当作一个战场，同时也是一个“炼金石”。不管是技术还是业务，不经过双11的检验，似乎就没有资格真正的在阿里站得住脚。

此文作为今年双11手淘前端技术巡演的前言，注定会是一篇技术干货含金量偏少的一个引子。笔者也就着第一次作为双11手淘前端的PM的角色，聊一聊在今年双11，在我们所谓“前端”这个职能上，我看到的一些事情和感想。也为接下来即将“扑面而来”的一篇篇各个技术方向的含金量极高的总结和干货做个“抛砖引玉”的作用。

“前端”造的出P1以上的故障么？

或许很多同学会有些奇怪，为什么笔者第一个话题会说这个。

没错，笔者在码这些字的时候，想起了在双11备战期的某天晚饭时，笔者跟自己的老板-大家熟知的@寒冬winter 无意闲聊，大致的话题是说当今“前端”这个职能在阿里体系内，在如今全面“无线化”，“App化”的时代，到底有多大的价值？

没错，前端圈子的确风风火火，各种热闹，各种走在技术变革的最前沿。但是你看，至少在阿里，在手淘App内，我们一没承载主交易链路，二是双11压力最大的流量，服务，QPS抗压也通常不是前端这个“职能”干的。

没错，成熟的Hybrid体系下Web的开发模式的确是研发最快，成本最小的一种方式，今年双11里面大家从手淘手猫各种App访问到的90%以上的会场，活动，小游戏，也确实都是“前端”同学们做出来的。但是，就凭着这些“上层建筑”，就能完全判定前端的价值么？

然后，@Winter笑嘻嘻的说，是呀，你可以去看看，历年来在双11的故障单里面，有没有“前端”造出来的P1以上的故障。

问题继续下去似乎没有什么意义，我想说的是，有时候“你能出多大的漏子，可能也意味这你有多大的价值”。

当然，大家可以有心的说，我一个前端bug可以把淘宝首页搞挂，我一个js错误可以把整个搜索搞挂，这样是不是也是巨大价值的体现？反过来说，如果在双11这样的完整的测试流程和发布流程里面，出这样的前端故障丝毫不能体现你的重要，只能暴露你就是个bug。

所以，在以往意义上的前端，不出故障仅仅只是一个60分，甚至不到的标准。更谈不上能出大故障是价值的体现。然而在今年双11这个节点上，终于可以很冠冕堂皇，很自豪的说，“前端”这个职能完全可以承担起一个差错就可能引起P1以上故障的巨大价值体现。

先卖个关子，详细待后面 @勾三股四、 @阿里子之 给大家详述。

双11前端团队的PM角色是什么样的体验？

我们按知乎的常用提问模式来说这个话题。双11前端团队的PM这个角色，笔者今年第一次做，TA更偏向于资源和风险的管理，而不是项目的管理，我们单个的项目有对应的单项的技术PM，单个项目的PM可以来源于任何技术职能团队。而在这前端个团队资源PM的角色里，TA的主要的职责有以下几个：

• 前端资源池的全局管理和分配，横向对接双11每个单项项目组
• 应对双11随时可能突发的新的需求和紧急项目
• 风险的把控，团队内资源的阶段性调配
• 在资源调配和风控之外，还需要对于部分项目的技术方案进行讨论和决策

就以上几个职责，有几个关键性的事情，

• 首先需要全局的了解双11相关的所有和前端团队相关的需求和项目，双11的业务基线在哪？需求层面，来源于产品，营销，互动，技术基础的项目各自有哪些？分别的工作量大概是怎么样？是否依赖客户端的双11新增功能或者版本？想要了解这些问题，意味着在双11需求搜集阶段，可能就会很忙碌，几乎要尽可能参加所有和前端资源相关的需求评审和方案确定。因为你必须要知道有多少事情之后，才有可能知道在这些事情下，在团队这么多资源的情况下，怎么去合理的分配。在资源极其紧张的情况下，前期漏掉一个都可能在后面的研发阶段引起极大的风险。
• 在有了全局的项目和需求梳理之后，一定还必须对团队的同学们的能力和擅长的方向有明确的认知和把握。因地制宜，合适的同学放到合适的位置。有同学适合做互动类的小游戏，有同学适合模块化的分工，做会场，也有同学适合做技术基础铺垫，横向的推动。对于同学们的技能点了解不算是难事，但是不是合适的人刚刚好就能完全对应上所有的事情的。互动和会场每年一定是需求量和工作量最大的两件事，如果匹配的资源不够，人的调配将会是一个头疼的问题。
• 当你好不容易紧紧巴巴把人挨个排到了对应的事情之后，一定记得回过头来看看，整个资源池子里，还有buffer和backup么... 在双11这样的事情上面，永远没有所谓的“意外”这一说。哪怕到了中后期，老板或者集团层面的一个决策随时可能催发新的重要的项目。如果没有提前把这件事情考虑进去，当问题来临的时候，才不至于束手无策。你自己也可以是一个buffer，但是一定不能仅仅是你自己一个。
• 以上还是前端团队内部的资源协调，对于手淘，手猫的版本控制，功能集成，发版规划是什么样的同样需要有明确的了解和认知。必须得知道在什么时间会发布什么版本，集成什么功能，有没有依赖这个功能上线的项目。强依赖Native新集成功能的项目和H5独立能承载的项目需要分为两个类别的来考虑，这跟项目时间上的优先级有直接关系，这种分阶段的调配对于一个同学需要支持多个项目的时候尤为重要。
• 当前期一切安排部署妥当之后，按部就班走到研发阶段的时候，PM的职责会略微转变，更多要从一个“班长”的角色变为一个“生活委员”和“劳动委员”。尤其是当你自己没有进入具体项目研发的时候，这个阶段你的精力会稍微多一些，服务好辛苦的，各种加班的同学，会是研发期间非常非常重要的事情。你必须要让大家知道大家的辛苦都是被你看在眼里的，同时在服务大家的时候，也能更好的监察各个项目的进度，发掘项目里优秀和大压力的同学。“适时和合理的激励”非常重要。
• 当整个研发阶段进入到中后期，你要着重关注的方向又会发生一些变化。需求变更和新增的需求一定是不可能杜绝的，尤其是在双11这样事情上。但是中后期的新增需求和变更往往又是风险最大的。尤其是是随着双11时间的临近，大家的关注度越来越升高，经常会冒出新的项目，而且都是默认自带“老板”属性的。这时候必须要亮起火眼金睛，“老板”属性的的需求也是有优先级的，而且是真是假是要通过一些原则来走的。就算是马总，逍遥子下来的需求，一线执行层也有权利一定到看到亲自的邮件批复或者签字才动工的 。这是对于项目和事情的谨慎和尊重。

所以总结下来，针对双11的前端团队的PM角色，是这样的体验：

• 前期为了概览全局，需要参加各种评审会议和方案讨论，感觉被全世界需要。
• 核心研发阶段是一个优秀的生活委员的体验，PM并不是指挥官。
• 中后期是一个不断和人打交道，辩驳和确认紧急需求的体验，懂得有原则，有纪律的拒绝与接受。

以上，是笔者今年双11手淘前端团队PM的体验，大多数时候，这并不是一个技术活，却必须要担起让众多技术活顺利往前走的责任。

今年双11，手淘前端在技术层面有哪些关键词

本文作为今年双11无线前端技术巡演的引子，在最后一个部分最终会落到技术关键词这个部分，后面紧接而来的各种干货将围绕这些关键词全面展开。

关键词一：性能

从App端侧全面解决“顿”，“卡”，“慢”的问题。在今年双11前夕提出了“521法则” 。

• App内存节省50%
• 绘制帧率，滑动体验提升20%
• App全链路实现 1S 法则
  • 强网（4G/Wifi）实现1S首屏（包括图片）加载
  • 3G 1S首包返回
  • 2G 1S建连，并且实现高复用 从底层到前端，我们做了哪些事情，最终拿到了什么样的结果，将为大家揭开神秘的面纱。

关键词二： Native化

用Web的开发模式，打造完全Native的体验，在ReactNative之前全面实现三端同构打通，在今年双11会场上大放异彩。我们有什么样的技术大杀器，静待娓娓道来。

关键词三：ES6， 面向未来

在babel的支持下，ES6的盛宴提前展开，手淘无线前端在ES6，甚至ES7的优秀特性上深度实践，有哪些值得一谈，将和大家一一分享。

关键词四：面向社区，Vue & React

将为大家详细阐述手淘无线前端团队在不同业务上针对Vue和React的深度实践，怎么完整的打通开发链路，创造面向团队内的Vue或者React的最佳开发实践。

关键词五：全栈

前端从纯UI层面走到了强交互，富逻辑，再发展到前后端分层，而更进一步，手淘前端团队到今天为止已经有了完整的全栈的能力，以前跟前端不沾边的“集群管理”，“QPS”，“CDN回源策略”等词汇，也都一一的成为了今年双11前端团队服务和系统的事实指标。在全栈这条路上，有太多话可以说。

此外，还有更多的“前端安全”，“UI测试和集成” 等关键词五，关键词六... 在笔者这篇“抛砖引玉”的引言之后，将会一一展开和大家分享和讨论。

请大家拭目以待！

有关于更多手淘前端更多的技术分享，欢迎关注手淘前端团队博客：

如需转载，烦请注明出处：https://github.com/amfe/article/issues/11Air Jordan IV 4 Running Shoes