- 前端架構:從入門到微前端
- 黃峰達
- 1972字
- 2019-09-21 00:53:48
2.2 技術準備期:探索技術架構
這個階段的業務與技術的優先級是,技術第一,業務第二。在這一個時期里,我們關注的三個點是:
◎ 架構設計,即設計系統的架構。
◎ 概念驗證,驗證先前設計的架構是否可行。
◎ 迭代0,搭建系統的基礎設施。
這三點都是與強技術相關的內容,需要花費大量的時間。
2.2.1 架構設計
當開始一個新的項目時,我們便要做大量的技術準備工作——搜索相關的技術資料,評估相關的技術方案等。這些在第1章中介紹了,這里不再贅述。
2.2.2 概念驗證:架構的原型證明
在完成架構的設計之后,我們需要從技術上證明它的可行性。這個可行性的階段,稱為概念驗證(PoC):
概念驗證(Proof of Concept,簡稱PoC)是對某些想法的一個較短而不完整的實現,以證明其可行性,示范其原理,其目的是驗證一些概念或理論。概念驗證,通常被認為是一個有里程碑意義的實現原理。[wiki_poc]
在這個概念驗證階段里,我們所實踐的是對架構理論的探索。比如我們選擇了微服務、微前端等新技術,又或者GraphQL等新框架,并且嘗試在這個項目中使用。那么我們就需要去驗證它,看看它是否能真正地被用上?
為此,我們需要使用這些新技術編寫一個簡單的“Hello, World! ”,將我們所設計的各個部分串聯到一起,構建一個完整的、基礎的系統。如果我們計劃使用微前端技術結合React+Angular框架開發的應用,那么第一步便是將空白的React和Angular應用結合到一起。從概念上證明它是可行的,下一步才是將現有的應用進行整合。
當我們預先設想的技術和架構不能應用時,我們應該采用原有的系統架構,還是重新設計一個合理的架構,這是一種考驗,在這個時候到底第一優先級是什么,是技術、業績還是業務?然而不可避免的是,我們又得花費大量的時間在一個新的概念驗證上。
因此,在嘗試新的架構和設計之前,請務必先在業余時間有所實踐,再拿到項目中使用,這也是筆者所推薦的模式。直接在項目中使用的弊端,便是在時間上的浪費。項目上每多一個人,這個浪費的成本就會擴大一些。筆者就曾經在項目上經歷過這樣的事件,我們花費了兩三周的時間來證明四種不同的技術方案的優缺點。由于架構未定,其他成員也不能編寫相應的業務代碼,只能嘗試練習相關的東西,搭建持續集成等,直到完成相應的架構證明。
在這個概念階段,我們并不會進行業務代碼的編寫,只給出簡單的架構相關示例。
2.2.3 迭代0:搭建完整環境
完成概念驗證之后,就開始了迭代0,以完成項目配套的技術準備工作。
迭代0(Sprint 0),又名為I0(Iteration 0),從名稱就可以發現它與敏捷軟件開發的關系。當我們開始一個項目的時候,進入的是迭代1的開發,那么迭代0呢?我們可以將其視為在所有迭代之前的準備工作。盡管我們從概念上將迭代0與概念驗證階段劃分開來,但是在這種定義之下,如果項目不復雜,那么概念驗證階段會被列入迭代0的工作范圍中。而對于復雜的項目而言,概念驗證階段則會獨立于迭代0。不過,在人力充足的情況下,會有一部分人進入與迭代0相關的工作。
在迭代0,我們所要做的基本事項有:
◎ 創建應用腳手架。
◎ 創建項目的代碼庫。
◎ 搭建持續集成、持續交付。
◎ 進行各種權限配置,如各種不同的環境賬號準備、開發人員的賬號配置等。
◎ 配置配套的工具,如代碼審查、自動化原生應用上傳等。
◎ 更細粒度的技術選型。
除了技術準備工作,迭代0還需要進行內部的技術培訓——只是簡單的技術培訓,用于介紹系統的架構,開發注意事項等。當然,即使已經有了相應的培訓,還需要準備基礎的架構方面的文檔,以及必要的一些規范。
此外,在概念驗證階段,我們編寫的是粒度較粗的代碼,并且為了追求效率和驗證,可能有大量的Code Smell(代碼壞味道),諸如注釋的代碼、未使用的代碼、不經測試的代碼,等等。我們還要進行部署的準備工作,嘗試進行第一次測試環境的部署。
這個階段結束的標志是:項目成員可以進行正常的項目開發,并且此時的開發方式和未來沒有太大的區別。
2.2.4 示例項目代碼:體現規范與原則
在大部分項目中,經驗豐富的開發人員往往只是少數,有些經驗豐富的開發人員會分配到重要的項目上,成為新團隊的技術負責人,或者某個團隊的骨干。因此,除了這些經驗豐富的開發人員,往往還存在一定數量的缺少編程經驗的程序員。對于這些“年輕”的程序員來說,需要有人能指點其編寫代碼,以提升團隊的平均技術水平,使之能按時完成任務。
為了有針對性地規范代碼,并幫助其他成員了解代碼,一個相應的舉措便是編寫相應的項目示例代碼。通過這些示例代碼,可以展現好的編程模式、范式,將它們融入項目中。有了這樣一個基本的雛形,哪怕是剛畢業的學生,也能照貓畫虎地編寫業務代碼。
例如,對于前端頁面來說,登錄的功能,便是一個相對比較完整的示例。它涉及一系列與前端相關的內容:狀態管理、網絡請求、數據模式、表單提交、UI交互等。其中每一個小部分,幾乎都是我們在第1章中提到的代碼級架構。在日常編碼中,對于這些基本的東西更要花費精力。稍有不慎,就會與我們最初設計的風格相去甚遠。