前言

前端架構(gòu)師， 聽(tīng)起來(lái)就是個(gè)很高大上的 Title， 每個(gè)初入行的前端工程師在面試時(shí)， 被問(wèn)到你未來(lái)的方向是什么？ 我們或許都會(huì)很順口的回答， “嗯， 朝著架構(gòu)方向走吧。..”， 那這個(gè)像是順口溜的答案背后， 從身體到思維， 我們究竟經(jīng)歷了什么樣的轉(zhuǎn)變呢？ 嗯。.， 讓我努力回憶下， 從頭開(kāi)始， 向各位分享這種奇妙的轉(zhuǎn)變過(guò)程。

當(dāng)我第一次看到架構(gòu)這個(gè)詞， 是在舊的翻了毛邊的編程書(shū)上， 而此時(shí)對(duì)于我來(lái)說(shuō)， 架構(gòu)僅僅是一個(gè)詞， 兩個(gè)漢字和一堆概念。 而第一次我自己說(shuō)出這個(gè)詞， 是在14年， 那時(shí)轉(zhuǎn)行寫(xiě)代碼剛滿1年， 對(duì)一個(gè)碼農(nóng)來(lái)說(shuō)， 1年經(jīng)驗(yàn)很淺， 無(wú)論是從思考還是手感， 都談不上有太多積累， 但是當(dāng)對(duì)面的面試官， 問(wèn)道： “ 你未來(lái)有什么發(fā)展方向？ ”， 我還是不假思索的說(shuō)出了 ： “朝架構(gòu)發(fā)展吧。.. ”， “你覺(jué)得什么是架構(gòu)？ ”， “ 。.. ”

這次的面試時(shí)間很長(zhǎng)， 長(zhǎng)到我已經(jīng)忘記了， 我是怎么回答， 什么是架構(gòu)這個(gè)問(wèn)題， 但是從我說(shuō)出架構(gòu)這個(gè)詞開(kāi)始， 對(duì)架構(gòu)的思索的種子， 就在我腦海中種下了， 每當(dāng)坐地鐵， 閑下來(lái)， 蹲坑的時(shí)候， 我都會(huì)想起這個(gè)問(wèn)題。 雖然我經(jīng)常思考， 但這個(gè)問(wèn)題在我腦海中依然是一堆問(wèn)號(hào)。 如果要給整個(gè)轉(zhuǎn)變劃分個(gè)階段的話， 我想這個(gè)階段可以稱(chēng)為 ［ 架構(gòu)思維的萌芽 ］

架構(gòu)思維的萌芽

每一種思維模式都會(huì)有一個(gè)思維的起點(diǎn)， 如果把架構(gòu)看成是一種思維模式運(yùn)作的結(jié)果， 那我們?cè)谒伎技軜?gòu)的時(shí)候， 其實(shí)是啟動(dòng)了一種思維模式， 通過(guò)在這種思維模式下不斷的思考， 我們的大腦會(huì)不斷建立起各種聯(lián)系， 這種聯(lián)系會(huì)將你所有的知識(shí)， 經(jīng)驗(yàn)串聯(lián)起來(lái)， 最終得到一種快速的思維通路， 你越思考， 理解得就越深刻， 架構(gòu)就逐漸在你腦海里清晰起來(lái)， 這一切自然有一個(gè)起點(diǎn)， 那就是架構(gòu)思維的萌芽

各種碎片時(shí)間下不斷對(duì)架構(gòu)的思考， 鞏固了架構(gòu)思維在我大腦中的地位， 促使我開(kāi)始從架構(gòu)的角度去看待問(wèn)題， 需求和代碼， 代碼的世界是一種依靠邏輯維護(hù)的奇妙世界， 隨著世界的膨脹， 各種邏輯變得難以維護(hù)， 最終整個(gè)世界崩塌， 但當(dāng)我加入一點(diǎn)架構(gòu)之后， 世界的結(jié)構(gòu)開(kāi)始清晰起來(lái)， 慢慢的我開(kāi)始看到邏輯背后的聯(lián)系， 代碼背后的那些隱藏的輪廓。 在這個(gè)世界里， 沒(méi)有完美的架構(gòu)， 自然也沒(méi)有銀彈， 不管如何調(diào)整， 維護(hù)， 設(shè)計(jì)和變更， 我們最終都會(huì)迎來(lái)這個(gè)世界的消亡， 但是一個(gè)有架構(gòu)的世界， 即便是消亡也是有序的。

第一次嘗試加入架構(gòu)， 是在那次面試失敗之后， 我手上有一個(gè) SPA 的項(xiàng)目， 那時(shí)候 angular1.0 還沒(méi)有發(fā)布， backbone 還在大行其道， 我依靠對(duì)架構(gòu)的一點(diǎn)理解， 嘗試自己去構(gòu)建一個(gè)有序的代碼世界， 結(jié)果顯而易見(jiàn)的失敗了， 因?yàn)槲业闹R(shí)和經(jīng)驗(yàn)儲(chǔ)備不足做出一個(gè)有效的架構(gòu)， 但是這一次嘗試讓我明白了架構(gòu)的重要性， 相對(duì)于 jQuery 時(shí)代的面條代碼， 將代碼合理分層顯然能讓這個(gè)世界顯得更有序些。 無(wú)論是 MVC， MVW， MVVM， MVP， 都是對(duì)開(kāi)發(fā) GUI 應(yīng)用如何更好的設(shè)計(jì)代碼的一種嘗試。

事實(shí)上， 在這個(gè)階段， 我對(duì)架構(gòu)的理解比起最初的時(shí)候更混亂了， 設(shè)計(jì)模式， 框架， 架構(gòu)， 這些詞在某一時(shí)刻互相混淆在一起， 傻傻分不清， 而有時(shí)候， 我會(huì)陷入究竟如何區(qū)分他們的困境中， 為了解決這個(gè)問(wèn)題， 我閱讀了一些書(shū)籍， 進(jìn)行了更深入的思考， 我發(fā)現(xiàn)光靠這三個(gè)概念， 是不夠的， 為了走出這個(gè)困境， 我發(fā)現(xiàn)必須引入新的工具， 這個(gè)工具叫上下文， 也叫語(yǔ)境。 而這個(gè)階段應(yīng)當(dāng)稱(chēng)為 ［ 架構(gòu)思維的混沌 ］

架構(gòu)思維的混沌

時(shí)間過(guò)得很快， 在15年的時(shí)候， 我進(jìn)入大廠工作， 在經(jīng)歷了各種信息的， 概念的輪番轟炸， 我對(duì)架構(gòu)的思考開(kāi)始引入上下文， 我發(fā)現(xiàn)有了上下文， 模式， 框架， 架構(gòu)就開(kāi)始變得不那么格格不入了， 在某一個(gè)上下文中， 它可以是模式， 在某一個(gè)上下文中， 它可以是框架， 模式， 框架， 架構(gòu)在上下文的組合下， 開(kāi)始能夠被靈活使用了， 它們成了我設(shè)計(jì)和思考架構(gòu)的工具箱中常用的工具。 同時(shí)期， 我開(kāi)始接觸 UML ， 另外還包括DDD， TDD 等一些概念， 還有常用的架構(gòu)模式， 像六邊形架構(gòu)等等， 以及多了一種新工具“邊界”， 但是很快我發(fā)現(xiàn)我陷入了另一種困境， 一些新的工具很難被應(yīng)用在以 JS 為基礎(chǔ)的前端領(lǐng)域， 而光依靠模式， 框架， 邊界， 上下文設(shè)計(jì)出來(lái)的架構(gòu)很難進(jìn)一步細(xì)化， 前端架構(gòu)成了空中樓閣， 無(wú)法落地。 我嘗試生硬的懟， 但最終是徒勞的， 看起來(lái)這一階段變得更痛苦了， 沒(méi)錯(cuò)， 就像一個(gè)埋頭走了三千里， 原本以為是終點(diǎn)， 但抬頭發(fā)現(xiàn)依然是一望無(wú)際的痛苦。 或許前端不存在“架構(gòu)”？ 不愿意接受這種答案的我， 開(kāi)始進(jìn)入下一階段， 我稱(chēng)為 ［ 架構(gòu)思維的成型 ］

架構(gòu)思維的成型

這里本沒(méi)有路， 走的人多了就成了路， 軟件工程從建筑領(lǐng)域搬來(lái)諸多概念， 例如架構(gòu)， 回顧歷史， 從四人幫整理出設(shè)計(jì)模式開(kāi)始， 軟件開(kāi)發(fā)經(jīng)歷了巨大的變革， 即便是 UML 都在持續(xù)發(fā)展， 但其實(shí)在這個(gè)領(lǐng)域內(nèi)一直有一塊沒(méi)有被覆蓋到的角落， 那就是前端， JavaScript 從一種玩具語(yǔ)言發(fā)展到如今的 Web 開(kāi)發(fā)中的“匯編語(yǔ)言”， 變化巨大， 但在架構(gòu)上的思考其實(shí)并不多， 從 Facebook 提出的 Flux 架構(gòu)， 前端開(kāi)始脫離歷史的影響， 我們發(fā)現(xiàn)， 不是前端沒(méi)有架構(gòu)， 而是還沒(méi)我們被創(chuàng)造出來(lái)。

大廠技術(shù)上的束縛， 迫使我離開(kāi)尋找新的平臺(tái)， 這個(gè)世界在快速變革， 但不是所有平臺(tái)都能適應(yīng)這種變革， 也不是所有平臺(tái)能發(fā)揮出每個(gè)人的能力， 作為工程師， 我們不光為錢(qián)， 也為一點(diǎn)點(diǎn)情懷， 改變世界， 即使一點(diǎn)點(diǎn)。

17年， 我離開(kāi)大廠， 加入一家準(zhǔn)上市公司負(fù)責(zé)前端架構(gòu)的工作， 翻了翻拉勾， 前端架構(gòu)師開(kāi)始進(jìn)入我們的視野， 雖然比起傳統(tǒng)意義上的架構(gòu)師， 崗位還很少， 但是欣慰的已經(jīng)不是那么鳳毛麟角， 前端規(guī)?；脑鲩L(zhǎng)， 對(duì)架構(gòu)師的需求開(kāi)始反推企業(yè)改善現(xiàn)有的團(tuán)隊(duì)架構(gòu)， 引入架構(gòu)師更好的解決問(wèn)題。 這個(gè)階段， 思考架構(gòu)開(kāi)始變得不這么磕磕碰碰， 充足的知識(shí)和經(jīng)驗(yàn)儲(chǔ)備， 讓我開(kāi)始建立起自己的架構(gòu)思維， 得益于對(duì) Flux 架構(gòu)的應(yīng)用， 我發(fā)現(xiàn)很多前端領(lǐng)域的問(wèn)題可以用一個(gè)環(huán)來(lái)解決， 我稱(chēng)之為“環(huán)形架構(gòu)”， 或者“流水線架構(gòu)”，把同一緯度的數(shù)據(jù)放在一個(gè)環(huán)中去處理， 前端復(fù)雜的數(shù)據(jù)流可以被很好的隔離和管理。

就如本文開(kāi)頭提到的， 我所看到的這個(gè)代碼的世界， 開(kāi)始有了層次， 有了架構(gòu)， 開(kāi)始有方法去解決混沌和無(wú)序， 而我想這其實(shí)也僅僅是架構(gòu)師生涯的開(kāi)始， 后面的階段應(yīng)該叫 ［ 架構(gòu)師思維的發(fā)展 ］了吧。