[[416777]]

前端、客戶(hù)端主要是負(fù)責(zé)構(gòu)建和用戶(hù)打交道的界面，也就是 UI(user interface)，而構(gòu)建 UI 需要在不同的位置顯示文字、圖片、視頻等等，要分成不同的區(qū)塊和頁(yè)面，為了簡(jiǎn)化構(gòu)建 UI 的過(guò)程，前端、客戶(hù)端都提供了相應(yīng)的布局方案，甚至還提供了 DSL 來(lái)簡(jiǎn)化布局的描述，比如前端的 html、css，安卓的 xml 都是用來(lái)簡(jiǎn)化 UI 描述的 DSL。

基于這些布局方案，我們可以快速構(gòu)建出應(yīng)用的界面，但是有的時(shí)候這些布局方案不適用，就需要自己繪制，這時(shí)候就要通過(guò) canvas、webgl 的方式來(lái)繪制更靈活的 2d、3d 視圖。安卓、ios等也提供了 canvas 的 api。

繪制界面整體上就分為這兩種，一種是基于各平臺(tái)的布局方案的，一種是自己繪制，前者常用來(lái)做應(yīng)用開(kāi)發(fā)，后者常用來(lái)做游戲開(kāi)發(fā)和一些可視化。這兩種構(gòu)建UI 的方式區(qū)別還是挺大的，應(yīng)用開(kāi)發(fā)、游戲(可視化)開(kāi)發(fā)是兩條不同的路。

基于瀏覽器的 dom 和 css 的布局方案的，也就是基于 dom 的，可以使用一系列 dom api 來(lái)操作 dom，然后重新布局和繪制，通過(guò)這種方式來(lái)做各種交互。

而不基于 dom 的繪制方案，也會(huì)維護(hù)一套對(duì)象體系，比如 stage、sprite 等，然后在修改了對(duì)象的屬性之后，重新繪制到 canvas。

繪制時(shí)需要各種資源還有數(shù)據(jù)，而提供這些資源和數(shù)據(jù)的就是后端，后端通過(guò) http、websocket 等方式來(lái)傳輸繪制需要的資源和數(shù)據(jù)，資源存在靜態(tài)服務(wù)器，托管在 CDN，數(shù)據(jù)都存在數(shù)據(jù)庫(kù)里，根據(jù)不同的請(qǐng)求參數(shù)來(lái)進(jìn)行資源的 CDN 的查找和數(shù)據(jù)的 CRUD，然后提供給前端。

隨著應(yīng)用規(guī)模的上升，后端的提供數(shù)據(jù)的服務(wù)器和提供資源的 CDN 都會(huì)做分布式，通過(guò)部署在不同地區(qū)的多臺(tái)機(jī)器來(lái)保證效率和穩(wěn)定。

這就是 web 應(yīng)用運(yùn)行的基本流程。

從開(kāi)發(fā)到部署運(yùn)行是有個(gè)過(guò)程的，這個(gè)過(guò)程就是軟件工程的生命周期，從一次開(kāi)發(fā)完所有功能的瀑布，到快速迭代的敏捷，從手動(dòng)執(zhí)行構(gòu)建和部署，到完全自動(dòng)化的 devops，工程效率是越來(lái)越高的，這是一個(gè)必然的趨勢(shì)。

作為 web 應(yīng)用的開(kāi)發(fā)者，要掌握前端的兩種繪制界面的方式，掌握后端的數(shù)據(jù)庫(kù)和 CRUD 以及提供接口給前端，掌握 CDN 的部署、后端服務(wù)的部署，如果應(yīng)用規(guī)模大了以后還要掌握各種中間件和分布式的技術(shù)。此外，還要掌握 devops 的自動(dòng)化的工具鏈。這些技能掌握之后，就是一個(gè)全棧開(kāi)發(fā)者了。

在完成功能的基礎(chǔ)上，對(duì)于比較復(fù)雜的場(chǎng)景，需要做代碼的設(shè)計(jì)，也就是架構(gòu)，保證隨著迭代代碼復(fù)雜度不會(huì)失控。相對(duì)來(lái)說(shuō)，后端的復(fù)雜場(chǎng)景多一些，前端相對(duì)較少，所以后端談架構(gòu)比較多，但前端也有一些復(fù)雜場(chǎng)景需要架構(gòu)設(shè)計(jì)，比如微前端，比如 vscode 的 ioc、service、多進(jìn)程劃分等。

從能夠完成基本功能的全棧開(kāi)發(fā)，到能處理復(fù)雜場(chǎng)景的技術(shù)架構(gòu)，就是web開(kāi)發(fā)程序員的成長(zhǎng)路徑了。

【編輯推薦】