15年雙11手淘前端技術巡演 - 前言

該文章來自阿裡技術協會（ata）優選文章。

15年雙11剛落下帷幕。今年衆所周知，是全面“無線化”的一年。資料上我就不說了，可以公開的資料我相信大家多多少少也從各方都了解到了。

在整個阿裡體系内，無論技術還是業務，都會把每年的雙11當作一個戰場，同時也是一個“煉金石”。不管是技術還是業務，不經過雙11的檢驗，似乎就沒有資格真正的在阿裡站得住腳。

此文作為今年雙11手淘前端技術巡演的前言，注定會是一篇技術幹貨含金量偏少的一個引子。筆者也就着第一次作為雙11手淘前端的pm的角色，聊一聊在今年雙11，在我們所謂“前端”這個職能上，我看到的一些事情和感想。也為接下來即将“撲面而來”的一篇篇各個技術方向的含金量極高的總結和幹貨做個“抛磚引玉”的作用。

或許很多同學會有些奇怪，為什麼筆者第一個話題會說這個。

沒錯，筆者在碼這些字的時候，想起了在雙11備戰期的某天晚飯時，筆者跟自己的老闆-大家熟知的@寒冬winter 無意閑聊，大緻的話題是說當今“前端”這個職能在阿裡體系内，在如今全面“無線化”，“app化”的時代，到底有多大的價值？

沒錯，前端圈子的确風風火火，各種熱鬧，各種走在技術變革的最前沿。但是你看，至少在阿裡，在手淘app内，我們一沒承載主交易鍊路，二是雙11壓力最大的流量，服務，qps抗壓也通常不是前端這個“職能”幹的。

沒錯，成熟的hybrid體系下web的開發模式的确是研發最快，成本最小的一種方式，今年雙11裡面大家從手淘手貓各種app通路到的90%以上的會場，活動，小遊戲，也确實都是“前端”同學們做出來的。但是，就憑着這些“上層建築”，就能完全判定前端的價值麼？

然後，winter笑嘻嘻的說，是呀，你可以去看看，曆年來在雙11的故障單裡面，有沒有“前端”造出來的p1以上的故障。

問題繼續下去似乎沒有什麼意義，我想說的是，有時候“你能出多大的漏子，可能也意味這你有多大的價值”。

當然，大家可以有心的說，我一個前端bug可以把淘寶首頁搞挂，我一個js錯誤可以把整個搜尋搞挂，這樣是不是也是巨大價值的展現？反過來說，如果在雙11這樣的完整的測試流程和釋出流程裡面，出這樣的前端故障絲毫不能展現你的重要，隻能暴露你就是個bug。

是以，在以往意義上的前端，不出故障僅僅隻是一個60分，甚至不到的标準。更談不上能出大故障是價值的展現。然而在今年雙11這個節點上，終于可以很冠冕堂皇，很自豪的說，“前端”這個職能完全可以承擔起一個差錯就可能引起p1以上故障的巨大價值展現。

先賣個關子，詳細待後面 @勾三股四 @阿裡子之 給大家詳述。

我們按知乎的常用提問模式來說這個話題。雙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無線前端技術巡演的引子，在最後一個部分最終會落到技術關鍵詞這個部分，後面緊接而來的各種幹貨将圍繞這些關鍵詞全面展開。

從app端側全面解決“頓”，“卡”，“慢”的問題。在今年雙11前夕提出了“521法則” 。

app記憶體節省50%

繪制幀率，滑動體驗提升20%

app全鍊路實作 1s 法則

強網（4g/wifi）實作1s首屏（包括圖檔）加載

3g 1s首包傳回

2g 1s建連，并且實作高複用 從底層到前端，我們做了哪些事情，最終拿到了什麼樣的結果，将為大家揭開神秘的面紗。

用web的開發模式，打造完全native的體驗，在reactnative之前全面實作三端同構打通，在今年雙11會場上大放異彩。我們有什麼樣的技術大殺器，靜待娓娓道來。

在babel的支援下，es6的盛宴提前展開，手淘無線前端在es6，甚至es7的優秀特性上深度實踐，有哪些值得一談，将和大家一一分享。

将為大家詳細闡述手淘無線前端團隊在不同業務上針對vue和react的深度實踐，怎麼完整的打通開發鍊路，創造面向團隊内的vue或者react的最佳開發實踐。

前端從純ui層面走到了強互動，富邏輯，再發展到前後端分層，而更進一步，手淘前端團隊到今天為止已經有了完整的全棧的能力，以前跟前端不沾邊的“叢集管理”，“qps”，“cdn回源政策”等詞彙，也都一一的成為了今年雙11前端團隊服務和系統的事實名額。在全棧這條路上，有太多話可以說。

此外，還有更多的“前端安全”，“ui測試和內建” 等關鍵詞五，關鍵詞六... 

在筆者這篇“抛磚引玉”的引言之後，将會一一展開和大家分享和讨論。

請大家拭目以待！