[[416777]]

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

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

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

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

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

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

隨著應用規模的上升，后端的提供數據的服務器和提供資源的 CDN 都會做分布式，通過部署在不同地區的多臺機器來保證效率和穩定。

這就是 web 應用運行的基本流程。

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

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

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

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

【編輯推薦】