[[416777]]

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

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

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

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

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

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

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

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

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

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

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

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

【編輯推薦】