寫在前面的話：

對(duì)于文中涉及“脫敏”的內(nèi)容，鏈接經(jīng)常一環(huán)套一環(huán)，無法輸出，很抱歉…
懷著一個(gè)醞釀了蠻長(zhǎng)時(shí)間的念頭，打開電腦，想對(duì)一些思考做一點(diǎn)記錄。關(guān)于標(biāo)題，關(guān)于“前端”，關(guān)于“架構(gòu)” 。
其實(shí)是有蠻多話想說的，但是前面這幾個(gè)字卻打上去了又刪掉。想為下面的內(nèi)容找一個(gè)合適的開始。但是似乎總是不那么如意。
回到這個(gè)話題，或許應(yīng)該從以前的認(rèn)知慢慢說起。

過往的認(rèn)知

不可否認(rèn)的說，曾經(jīng)很長(zhǎng)的一段時(shí)間，當(dāng)我大部分時(shí)間還集中在業(yè)務(wù)上的時(shí)候，對(duì)“架構(gòu)”這個(gè)詞有點(diǎn)嗤之以鼻。尤其是“前端架構(gòu)”。覺得說“前端”這個(gè)軟件工程化都相對(duì)薄弱，還在拼死拼活的往成熟的語(yǔ)言領(lǐng)域，往已有的軟件工程慢慢靠近的的方向，真的需要所謂的“架構(gòu)”么。

[[147693]]

總覺得在這個(gè)階段，

• 所謂的前端架構(gòu)更多的是在紙上談兵，拿以往的軟件工程的思想和概念硬往自己身上套。

• 所謂的做架構(gòu)的同學(xué)更多的是在炫耀自己的技術(shù)深度和視野，看到前沿的技術(shù)不管合不合適就拿來做方案，硬往業(yè)務(wù)上推，來成全自己的KPI

• 總覺的所謂的“技術(shù)架構(gòu)”無非就是一些個(gè)人主觀化的思路和概念，形成一些看起來成體系的代碼組織方式，以便完成業(yè)務(wù)后可以說：看，基于我的架構(gòu)有多好的通用性，擴(kuò)展性，代碼看起來多優(yōu)雅…

回到我現(xiàn)在的立場(chǎng)，我看到的當(dāng)前團(tuán)隊(duì)中不同的同學(xué)對(duì)于“架構(gòu)”這個(gè)詞的認(rèn)識(shí)和看法，無非有兩種：

• 要么和之前的我一樣，嗤之以鼻，做架構(gòu)的有什么了不起，無非是老板給你安排個(gè)“輕松點(diǎn)的活”，做做方案，不用受業(yè)務(wù)的壓迫。還得逼著一線每天認(rèn)真辛苦的碼代碼的同學(xué)接受你一時(shí)想出來的Idea。

• 要么是另一個(gè)極端，覺得做架構(gòu)的同學(xué)就NB，覺得比做業(yè)務(wù)的同學(xué)從概念上就高一個(gè)等級(jí)。然后死命的想要往“架構(gòu)”這個(gè)方向靠。

可是當(dāng)有一天我自己需要站在團(tuán)隊(duì)的角度去思考基礎(chǔ)建設(shè)的缺失，思考怎么才能幫助到團(tuán)隊(duì)的時(shí)候。才發(fā)現(xiàn)“架構(gòu)”這個(gè)詞既沒有想象中那么“不堪”，當(dāng)然也沒有想象中那么“容易”。同時(shí)，也沒有別人眼里那么NB，高人一等。
反而是越來越多的謙卑甚至恐慌，當(dāng)沉下心來想想，確實(shí)，我們可能誤會(huì)“架構(gòu)”本身了。我們自己往他身上加了很多的主管臆想。

我理解的架構(gòu)：是團(tuán)隊(duì)的，不是架構(gòu)師的

第一條我就想說這個(gè)，因?yàn)門A的確應(yīng)該是大前提，如果做架構(gòu)的同學(xué)不是站在團(tuán)隊(duì)的角度來思考問題，思考解決方案，而是以自己過往的經(jīng)驗(yàn)，自我的判斷說應(yīng)該怎么怎么樣。那必然是會(huì)淪落到被人嗤之以鼻，甚至拖業(yè)務(wù)和效率的后腿。

• 架構(gòu)一定不應(yīng)該成為只是你想要的樣子，也不能只是老板想要的樣子，一定應(yīng)該是團(tuán)隊(duì)想要的樣子。

在我正式接下為團(tuán)隊(duì)基礎(chǔ)建設(shè)方向做規(guī)劃和思考這件事情之前。去年在團(tuán)隊(duì)內(nèi)做了一段時(shí)間的“SWAT”，也就是真正意義的上的“靈活資源”，做團(tuán)隊(duì)任 意方向的支持。在做“團(tuán)隊(duì)支持”這個(gè)期間，參與了不同形態(tài)的業(yè)務(wù)項(xiàng)目，產(chǎn)品化的，運(yùn)營(yíng)化的，長(zhǎng)線的，短線的，消費(fèi)者端的，商家端的，前臺(tái)重視內(nèi)容和體驗(yàn) 的，后臺(tái)重視效率和結(jié)構(gòu)化的，等等一系列不同的項(xiàng)目，包括一些不直接透明到業(yè)務(wù)的專項(xiàng)。當(dāng)前參與程度深淺不一，但總體這個(gè)過程讓我感受到了一件事情：

• 不能憑想象和自我經(jīng)驗(yàn)判斷說團(tuán)隊(duì)需要什么？你要的答案一定要去和團(tuán)隊(duì)對(duì)話，和團(tuán)隊(duì)成員對(duì)話，或者參與到不同形態(tài)的“他們”當(dāng)中去，去發(fā)掘他們想要什么。

收集信息和問題是做決策和方案的第一步，這個(gè)觀點(diǎn)說出來大家都知道，但是實(shí)際做的過程中可能不一定能想得到了。舉個(gè)例子：

• 你要做工具，做給新人的，就要站在新人的角度來使用它，發(fā)現(xiàn)它是不是真的有用。做給流程規(guī)范的就必須站在項(xiàng)目實(shí)踐的角度去實(shí)踐TA，而且不是你自己覺得好用就樂呵呵，因?yàn)槟阕约翰⒉皇?ldquo;架構(gòu)”這個(gè)方向的真正用戶

• 更典型的例子，前端的自動(dòng)化測(cè)試。做之前第一件事情是弄清楚在當(dāng)前時(shí)間節(jié)點(diǎn)下，當(dāng)前團(tuán)隊(duì)狀況下，團(tuán)隊(duì)是否需要TA。進(jìn)而才是怎么在團(tuán)隊(duì)的層面上去落地這件事情。而不是自己想當(dāng)然的做一套方案。當(dāng)前的團(tuán)隊(duì)并不需要這個(gè)東西，那么方案再完善又有什么用？

“架構(gòu)是屬于團(tuán)隊(duì)的”，這個(gè)觀點(diǎn)一個(gè)方面是上面所說的，TA的需求和解決方案應(yīng)該來源于當(dāng)前團(tuán)隊(duì)。另一個(gè)方面是架構(gòu)的進(jìn)展和設(shè)計(jì)一定也是對(duì)團(tuán)隊(duì)透明和公開的。

如果進(jìn)展和方案不能隨時(shí)保持對(duì)于團(tuán)隊(duì)的公開和透明，也很難保證當(dāng)?shù)搅俗罱K產(chǎn)出的時(shí)候，還能保持最開始的方向一致性。

今年上半年開始，我們的周會(huì)內(nèi)容有了小小的變動(dòng)，把以往的單純的團(tuán)隊(duì)內(nèi)分享的例會(huì)轉(zhuǎn)變?yōu)橐粋€(gè)始終圍繞團(tuán)隊(duì)基礎(chǔ)建設(shè)，團(tuán)隊(duì)發(fā)展，和個(gè)人發(fā)展的交流會(huì)。植入了一個(gè)每周固定的環(huán)節(jié)，就是“基礎(chǔ)建設(shè)進(jìn)展和問題一周匯總”。
保持公開和透明，也可以隨時(shí)就問題進(jìn)行討論。給自己和團(tuán)隊(duì)一個(gè)面對(duì)面的機(jī)會(huì)。
確保是大家想要的，同時(shí)也希望能潛移默化的形成大家對(duì)于團(tuán)隊(duì)建設(shè)的方向感和全局觀。

我理解的架構(gòu)：是橫向全局的

這應(yīng)該是做“架構(gòu)”最基礎(chǔ)的要求。也就是需要對(duì)整個(gè)團(tuán)隊(duì)，結(jié)合整個(gè)行業(yè)的發(fā)展保持全局的觀望和了解。并且可以在此基礎(chǔ)上基于團(tuán)隊(duì)現(xiàn)狀做出對(duì)未來的基本判斷。

“做出判斷”這件事情，說簡(jiǎn)單也簡(jiǎn)單，說難也難。簡(jiǎn)單的是無非就是做幾個(gè)選擇題，選出今年，或者近期內(nèi)要做的事情。難得是怎么來保證你的選擇在當(dāng)前的團(tuán)隊(duì)來看，是正確的。什么階段做什么事情。

我記得今年上半年開始，我開始嘗試擔(dān)起前端團(tuán)隊(duì)的基礎(chǔ)建設(shè)收斂相關(guān)的事情的時(shí)候。結(jié)合去年和今年的現(xiàn)狀，整理過一個(gè)簡(jiǎn)單的框架圖。在 “手淘前端在工程化道路上的“匍匐”” 文章里面有Po過。后來有過一些更新和小調(diào)整。大致如下：

歸結(jié)起來是

• 兩個(gè)中心 （端和效率）

• 八個(gè)方向

  • 基礎(chǔ)庫(kù)+功能組件+UI框架 （對(duì)應(yīng)“效率”）

  • “端”的延伸 （對(duì)應(yīng)“端”）

  • 規(guī)范和工程流程

  • 工具鏈路

  • 數(shù)據(jù)和性能

  • 自動(dòng)化測(cè)試+持續(xù)集成

  • 前端安全

  • 服務(wù)和周邊

八個(gè)方向中，落實(shí)到兩個(gè)中心的必然是今年的重點(diǎn)。工具和性能是去年的重點(diǎn)，今年在已有基礎(chǔ)上升級(jí)。其他的子方向在今年會(huì)開始探索。

這其中由于團(tuán)隊(duì)歷史和現(xiàn)狀的原因，其實(shí)有一些點(diǎn)是大家都在火熱在抓的，但在我們團(tuán)隊(duì)中并沒有放到今年的重點(diǎn)。比如

• 前后端分離

也有在當(dāng)前團(tuán)隊(duì)現(xiàn)狀還不到時(shí)候做的（并不緊迫）的事情，比如

• 前端基礎(chǔ)服務(wù)（包括構(gòu)建和工程的服務(wù)化，新人系統(tǒng)，內(nèi)部項(xiàng)目域名和服務(wù)資源申請(qǐng)和部署自動(dòng)化.. 等等）

以上的信息可以理解為“架構(gòu)是橫向全局” 這個(gè)觀點(diǎn)的一個(gè)表現(xiàn)。

個(gè)人覺得做出判斷的前提確實(shí)是需要了解別的優(yōu)秀的團(tuán)隊(duì)在做什么，行業(yè)在做什么。再結(jié)合團(tuán)隊(duì)的現(xiàn)狀才有可能知道我們需要做什么。
然而，了解別人的過程，其實(shí)反而也是讓人“謙卑”的過程。

有時(shí)候知道的越多，會(huì)讓人覺得越渺小。

你覺得自己在某方面做的還不錯(cuò)了，但是一定有人有團(tuán)隊(duì)有更優(yōu)秀的方案和實(shí)踐。

所以，“全局”，不僅是對(duì)于自己團(tuán)隊(duì)現(xiàn)狀的全局認(rèn)知和判斷，也是在其他團(tuán)隊(duì)放到一起的“全局”評(píng)估。

• 全局意味著 – 清楚的知道團(tuán)隊(duì)在當(dāng)前階段應(yīng)該做什么事情

• 全局意味著 – 清楚的知道團(tuán)隊(duì)的現(xiàn)狀，優(yōu)勢(shì)和問題

  • 不至于高傲的迷失了方向

  • 也不至于卑微的找不到出路

我理解的架構(gòu)：也是垂直深入的

在我的理解里，所謂“做架構(gòu)”的同學(xué)們，不應(yīng)該只是單純的有“全局觀”。同時(shí)也需要對(duì)每個(gè)垂直的領(lǐng)域保持一定的“絕對(duì)深度”。

就拿上面關(guān)于“全局”的幾個(gè)子方向來說，我希望在當(dāng)前定下的細(xì)分領(lǐng)域，想要做“架構(gòu)”的同學(xué)在任何一個(gè)細(xì)分領(lǐng)域上都能保持一定的絕對(duì)深度。可能對(duì)于一個(gè)人的精力和資源會(huì)有一些挑戰(zhàn)，但是我覺得在一定程度上是應(yīng)該的。

在精力允許的范圍內(nèi)，每一個(gè)子領(lǐng)域里應(yīng)該都需要盡可能的參與方案的探討，制定，代碼的實(shí)現(xiàn)，團(tuán)隊(duì)的落地整個(gè)過程。

拿我們自己團(tuán)隊(duì)的情況來說，至少應(yīng)該知道：

• 基礎(chǔ)庫(kù)和組件庫(kù)，UI框架

  • 未來形態(tài)的發(fā)展應(yīng)該是什么樣？

  • CommonJS模塊范式的遷移的自動(dòng)化實(shí)現(xiàn)方案是什么？代碼實(shí)現(xiàn)思路是什么？

  • 模塊依賴關(guān)系弱關(guān)系到強(qiáng)關(guān)系的包裝需要做哪些事情？

  • 控件的規(guī)范是否需要遷移到WebComponents？

  • 如果遷移，規(guī)范是什么，怎么定最小Feature的polyfill集合？

  • polyfill代碼應(yīng)該怎么來實(shí)現(xiàn)？

  • UI部分的組件復(fù)用應(yīng)該怎么來做？可視化還是命令化？

  • UI庫(kù)的mixin部分的style-lib和組件層面的view-lib怎么更好的管理？

  • …

• 端的部分

  • ReactNative的現(xiàn)狀和痛點(diǎn)是什么？解決方案是什么？代碼實(shí)現(xiàn)的難點(diǎn)在哪里？

  • RN的組件庫(kù)怎么來組織構(gòu)建？一個(gè)RN的組件應(yīng)該怎么來寫？

  • RN在性能和穩(wěn)定性上的解法有哪些？現(xiàn)狀是什么？

  • 業(yè)務(wù)層面的數(shù)據(jù)上報(bào)方案是什么？代碼上的思路該怎么做？

  • 是否能明晰的判斷未來，知道什么時(shí)候該堅(jiān)持？什么時(shí)候該尋找別的出路？

  • GDOS的目標(biāo)和意義是什么？為什么要做GDOS？

  • 對(duì)接通用算法和選品的難點(diǎn)是什么？怎么樣定商品化的json schema?

  • 甚至java的部分，hsf的對(duì)接是否也能夠參與？

  • …

以上舉例，提出每個(gè)子方向細(xì)化的問題，在心里對(duì)重要的細(xì)節(jié)有認(rèn)知，有答案，也是我認(rèn)為做“架構(gòu)”的同學(xué)所必須要明白的事情。

同理，工具層面，規(guī)范層面，工程流程，性能，單元測(cè)試，前端安全等等，期望盡可能深的參與到具體的實(shí)踐和落地上去。(包括代碼的具體實(shí)現(xiàn)…)

做架構(gòu)不是只有idea，然后全部推動(dòng)別人去做，更重要的是自己需要深度的參與，才能保持清醒的認(rèn)知。

這是我個(gè)人的認(rèn)知，不一定對(duì)，當(dāng)然

• “在保持廣度的情況下還要保持一定的深度”

也會(huì)對(duì)于個(gè)人的時(shí)間精力有一定的挑戰(zhàn)。

反過來說，如果“架構(gòu)”已經(jīng)大到需要5個(gè)人以上的團(tuán)隊(duì)才能支撐，那時(shí)再做合理的分工也不遲。

我理解的架構(gòu)：是海納百川，是透明開放的

在之前的表述中，提到“架構(gòu)”至少是需要對(duì)團(tuán)隊(duì)透明的，來源于團(tuán)隊(duì)，尊重團(tuán)隊(duì)，也服務(wù)于團(tuán)隊(duì)。而這里說的海納百川，開放透明更是側(cè)指我們以公司單位，那么理應(yīng)在公司內(nèi)也是透明和開放的。

• 對(duì)外不用多說，公司自有公司的壁壘，但至少對(duì)內(nèi)，我們應(yīng)該共享一片藍(lán)天。

[[147695]]

當(dāng)你不關(guān)注，不聞不問的時(shí)候，或許還不覺得，但是當(dāng)有心想去了解一些事情的時(shí)候，卻發(fā)現(xiàn)似乎并沒有想象中那么透明。

我在 上周的周報(bào):不聊技術(shù)，聊感受 中其實(shí)提到了一些關(guān)于“技術(shù)棧”和“技術(shù)棧”之前的壁壘問題，也包含“前端”本身團(tuán)隊(duì)壁壘的問題。

我的觀點(diǎn)是：

• 團(tuán)隊(duì)技術(shù)壁壘不是問題，畢竟每個(gè)團(tuán)隊(duì)的業(yè)務(wù)形態(tài)，抓的方向并不一致。但是不透明是問題，想發(fā)掘其他團(tuán)隊(duì)的好東西卻要費(fèi)點(diǎn)功夫。

其實(shí)回過頭來想想，集團(tuán)內(nèi)其實(shí)有不少的方式似乎想解決這個(gè)問題，比如淘寶的“懶懶”，支付寶的“芝士會(huì)” 等等，從定期主題分享的方式嘗試抹平BU間不透明的問題。也有屬于集團(tuán)層面的技術(shù)博 ATA， 包括前端也有自己的 委員會(huì)，本質(zhì)上也是希望打通BU間的信息。

我們看起來有這些途徑，理應(yīng)可以解決不少壁壘不透明的問題才對(duì)，可是到我真實(shí)的感受卻是還有好多有價(jià)值的信息，方案，項(xiàng)目等，我從上面的渠道獲取不到的。

可能是“粒度”的問題，可能是“傳達(dá)”的問題。咋們暫時(shí)先不去細(xì)究。說實(shí)話，我個(gè)人覺得比較直接打破我覺得有壁壘的苦惱的事情是 @拔赤 公開的周報(bào)。

我近期了解到很多航旅有價(jià)值的信息，他們近期著重發(fā)力的方向，不可置否的說，基本都是從 @拔赤 每周的周報(bào)中覓得的。當(dāng)然，這和他向來高質(zhì)量的周報(bào)內(nèi)容有直接關(guān)系。

所以，我做的第一件事也是把無線前端從今年上半年開始的每周基礎(chǔ)建設(shè)，架構(gòu)的方向和進(jìn)展以周報(bào)的形式公開來。一方面從我們自己開始做到“透明化”，同時(shí)也愿意以謙卑的心態(tài)和大家進(jìn)行討論和交流。

阿里內(nèi)外的周報(bào)系統(tǒng)我覺得是個(gè)好的開始。既然有選擇“公開”的選項(xiàng)，我覺得也應(yīng)該加上“周報(bào)關(guān)注”的功能，只要我關(guān)注的人某一周的周報(bào)內(nèi)容是“公開”的，不管他的周報(bào)有沒有直接抄送我，我都可以收到。

話題有點(diǎn)扯遠(yuǎn)了，我要表達(dá)的意思是，我期望尋得一種途徑，可以讓我短平快，高效的知道優(yōu)秀的大家們都在做什么事情。

最近在團(tuán)隊(duì)內(nèi)開始推動(dòng)一個(gè)叫做 “取經(jīng)之路” 的計(jì)劃，其實(shí)也就是希望團(tuán)隊(duì)的同學(xué)都能保持有心思去發(fā)掘其他團(tuán)隊(duì)的優(yōu)秀的東西，以取經(jīng)的形式主動(dòng)去了解，再帶回來傳道授業(yè)解惑。
希望團(tuán)隊(duì)本身能從中開拓視野和思路，同時(shí)對(duì)于做“唐僧”的同學(xué)來說，本身也是一種成長(zhǎng)。

我理解的架構(gòu)：關(guān)鍵詞不是“高精尖”，而是“合適”

最近越發(fā)的覺得“合適”這個(gè)詞的精妙與深意。站在外人的角度，去評(píng)判一件事情的好壞，一個(gè)技術(shù)方案的優(yōu)劣，不應(yīng)該從你的角度去看，連行業(yè)的普適標(biāo)準(zhǔn)甚至都不一定受用。因?yàn)榭赡茉谀憧磥碛惺H的方案在他的團(tuán)隊(duì)的當(dāng)下就是“合適”的。

換句話說：

• 在我看來，技術(shù)方案優(yōu)和劣或許沒有絕對(duì)之分，只是因?yàn)閳F(tuán)隊(duì)的歷史原因，團(tuán)隊(duì)現(xiàn)狀，發(fā)展出了不同的樣子。只要它對(duì)于當(dāng)前的團(tuán)隊(duì)是合適的，我就認(rèn)為它是好的。

說到這里，我不免又想到了“戀愛”這件事。如果這么說來的話，不覺得和“戀愛”的情況略像么。通俗點(diǎn)說：

• 愛美之心，人皆有之；漂亮的女孩子，誰(shuí)都喜歡，你費(fèi)勁心思去追一個(gè)大家公認(rèn)的女神，這件事情能不能成，最終是變成“金童玉女”的千古流傳段子還是 變成“癩蛤蟆想吃天鵝肉”的惡俗劇情，前提是要認(rèn)清自己。當(dāng)前的自己如果如果就是配不上女神，那何必自討苦吃，還不如努力錘煉自己，到有一天走上人生巔峰 再去贏取白富美也不遲不是么。

比方不一定恰當(dāng)，但是道理是通的。我想說的是，技術(shù)的方案和設(shè)計(jì)是不是好的，對(duì)的，不是看你用的技術(shù)，選的方案是不是夠高精尖，夠前沿。而是看TA是不是適合你當(dāng)前的團(tuán)隊(duì)現(xiàn)狀。

舉個(gè)例子：

• ES6 當(dāng)下被好多團(tuán)隊(duì)在實(shí)踐，吵得火熱。可以理解為ES6的產(chǎn)品化，包括周邊polyfill的完善，以及一整套方案的打通，在當(dāng)下看起來是靠前沿的，面向未來 的，高精尖的。 如果我們的團(tuán)隊(duì)就那么幾個(gè)人，如果團(tuán)隊(duì)負(fù)責(zé)的業(yè)務(wù)就那么兩三個(gè)，形態(tài)也相對(duì)單一，那么我覺得快速的擁抱ES6，嘗鮮，玩新技術(shù)沒有任何問題。而反過來，如 果當(dāng)前團(tuán)隊(duì)的體量，現(xiàn)狀，團(tuán)隊(duì)組成不允許一個(gè)步子邁這么大，那么這件事如果硬按“拔苗助長(zhǎng)”的方式推進(jìn)，有可能會(huì)產(chǎn)生很大的副作用，開發(fā)效率，質(zhì)量保障可 能都會(huì)收到影響。

所以，架構(gòu)和方向不應(yīng)該朝著“高精尖”的方向走，那不應(yīng)該是目標(biāo)，“合適”的，才是最好的。

在適當(dāng)?shù)臅r(shí)候，用適當(dāng)?shù)姆桨溉プ鰧?duì)應(yīng)適當(dāng)?shù)氖虑椋秃帽龋谶m當(dāng)?shù)臅r(shí)候，遇上對(duì)的人。