楔子
Web 生而具有極其靈活的動態化基礎能力，諸如：
-
動態插入
script標籤執行任意指令碼邏輯 -
動態插入
style標籤引入任何 CSS 樣式規則 -
通過
iframe標籤嵌入整站 -
以上標籤均可直接載入網路資源
-
承載這些內容的 Web 頁面部署在遠端伺服器，可隨時動態更新，並且能立即生效
一直以來的探索和實踐似乎只是在不斷地發掘動態化能力的工程價值，為其尋找更合適的應用場景，比如早期的frameset，如今的微前端/微應用
而移動端正好相反，生而具有許多靈活性限制：
-
原生不支援動態執行邏輯程式碼
-
構成移動應用程式的關鍵資源大都要打入安裝包中（動態庫例外）
-
應用程式安裝在使用者裝置上，安裝包更新需經應用商店稽核，使用者重新安裝才能生效
移動業務的發展不斷地對動態化能力提出更高的要求，但苦於缺少動態化的基礎能力，所以一直在探索更靈活的技術方案，像早期的熱修復/熱更新，到如今的小程式
實際上，二者在動態化技術能力上所要解決的工程問題是一致的，比如動態載入依賴庫、檢視元件、甚至整個應用。所以不妨開個腦洞，假定 Web 不支援動態化，以 Native 的業務訴求來推演 Web 動態化技術的發展軌跡
伊始：原生 WebAssembly
0061 736d 0100 0000 0187 8080 8000 0160 027f 7f01 7f03 8280 8080 0001 0004 8480 8080 0001 7000 0005 8380 8080 0001 0001 0681 8080 8000 0007 9080 8080 0002 066d 656d 6f72 7902 0003 6763 6400 000a ab80 8080 0001 a580 8080 0001 017f 0240 2000 450d 0003 4020 0120 0022 026f 2100 2002 2101 2000 0d00 0b20 020f 0b20 010b
從前，Web 應用程式只能被打包成這種wasm的二進位制格式，釋出到各大瀏覽器應用商店。期間，不僅要等待數天的稽核，通過之後還要等使用者主動安裝更新，等到新版本真正“生效”（覆蓋大多數使用者），可能已經是數月之後了
版本更迭慢，無論是戰略性的重要功能還是十萬火急的問題修復，都無法及時觸達使用者。即便線上著火了，最快速的救火方案也要幾天甚至幾周之後才能起到作用
為了能夠更快地修復問題、降低風險，熱修復方案的探索就此展開
浪花：為熱修復引入指令碼語言 JavaScript
熱修復意味著要載入並執行（安裝包之外的）邏輯程式碼，所以有人直接從 WebAssembly 模組載入機制入手，研究出了一些 Hook 方案，能夠動態地換掉某些模組/檔案
也有人沿著這個方向走得更遠，權衡時效性、效能、相容性與穩定性，通過編譯插樁、工程配套設施、執行時框架等手段解決了模組依賴、版本管理、差量更新等問題，將應用程式的各個功能模組外掛化
還有人另闢蹊徑，引入輕量級的指令碼語言執行時（如 JavaScript 引擎），並在瀏覽器原生 WebAssembly 與 JavaScript 世界之間架起一座橋樑，允許通過 JavaScript 呼叫原生的系統平臺能力，從而擴充套件出了動態化的基礎能力
動態化漾起了一道波紋，緊接著是呼嘯而來的動態更新浪潮
海嘯：基於 JavaScript 的動態更新
往動態化方向邁出第一步之後，離全面動態化的大好前景也就一步之遙了：
Any application that can be written in JavaScript, will eventually be written in JavaScript. —— Jeff Atwood
（摘自The Principle of Least Power）
全面動態化意味著要：
-
將應用程式中所有能夠動態化的部分全都遷由 JavaScript 實現
-
將龐大的 JavaScript 程式碼按功能模組組織起來，並管理好功能模組之間的依賴關係
從而實現以功能模組為單位的快速迭代，相當於將熱修復技術應用到問題修復之外的需求迭代上，既不用發版，免去了稽核週期，也不需要等待使用者主動安裝，新功能得以動態釋出並迅速覆蓋到活躍使用者
堤壩：容器概念形成
隨著動態化程度的不斷提升，JavaScript 在應用程式中的佔比越來越高，最終僅剩餘無法動態化（或沒有必要動態化）的部分仍由 WebAssembly 實現，包括：
-
系統平臺能力橋接
-
基礎 UI 控制元件、互動能力
-
檢視層框架（歷史棧管理、生命週期支援等）
-
特定業務領域能力（例如多媒體內容生產、IM SDK 等）
-
通訊機制（廣播、狀態共享等）
這些部分形成了容器（原生外殼），相當於執行在瀏覽器中的一個動態化執行時，在容器圈定的能力範圍內，業務能夠充分利用動態優勢，實現快速修復、快速釋出、快速觸達、快速迭代
但隨容器概念一同出現的，除了賦能業務跑得更快之外，還有動態業務與容器之間的依賴問題：
-
如何解除二者之間的強耦合，如路由、混合檢視容器等場景？
-
如何識別出二者之間的依賴關係？
-
如何保障依賴關係是可控的，比如禁止將依賴新能力的動態業務釋出到舊容器中？
通過工程配套設施將依賴管束起來之後，接下來的首要問題是想辦法保證動態業務所依賴的底層容器的可靠性
邊界：HTML、JavaScript、CSS 構成容器標準
隔離變化的慣用手段是加一層抽象，將變化的部分置於抽象層之下：
-
BOM API：對系統平臺、檢視層框架能力以及通訊機制的抽象
-
Native Module API：對特定業務領域能力的抽象
-
DOM API：對基礎檢視渲染能力的抽象
-
JS API：對 JavaScript 執行時的抽象
-
CSS：對樣式、佈局能力的抽象
-
HTML：對基礎 UI 控制元件、互動能力的抽象
抽象出的這些標準確立了穩固的容器邊界，邊界之內，動態業務能夠肆意發揮，邊界之下，容器同樣能夠不斷精進、豐富容器能力，將邊界拓寬。同時，具有標準定義的 API 能夠以結構化的形式維護起來，對於開發體驗大有裨益
雲海：瀏覽器支援載入網路資源
另一方面，在標準化的過程中，一些動態化業務實踐也沉澱到了容器之中，例如：
-
動態指令碼：
script支援載入網路資源 -
動態樣式：
style支援載入網路資源 -
動態路由：瀏覽器支援直接通過 URL 載入、或通過
iframe嵌入網路應用程式
雖然從熱修復開始就能夠從CDN拉取 JS 檔案，執行時動態解釋執行了，但容器標準不僅對這種方式提供了便捷支援，還將動態化的基礎能力從邏輯擴大到了檢視、樣式、靜態資源等等
至此，動態化最關鍵的基礎能力已經完備了。遷至 JavaScript 的功能模組甚至能夠進一步部署到雲端，實現離線整合、線上託管兩種模式的靈活切換
一色：同步、非同步模式切換自如
完備的動態化基礎能力解鎖了許多新玩法，例如：
將業務模組（bundle）進一步拆分成功能模組（chunk），並將非核心模組非同步出去，實現動態按需載入，例如第三方 JS SDK、jQuery 外掛、以及分享/評論/城市選擇等重磅元件
對於內容呈現的偏靜態場景，還可以通過 SSR 在服務端完成（大部分）頁面渲染工作，加快首屏內容展現
另一方面，Hydration、lazy 元件、Suspense 等執行時特性使得線上的動態部分能夠與離線的非動態部分充分融合，實現更細粒度的業務動態化，讓線上託管真正成為一種部署選項
與此同時，動態業務自身的元件化程度也在不斷加深，前端開發的核心工作從頁面、模組開發轉向了元件、編排邏輯開發
流雲：資料驅動的前端應用程式
元件體系趨向成熟之後，一個由來已久的概念終於徹底浮出水面——資料驅動
從前後端分層的資料協議，逐漸演變成資料驅動，這裡的資料包括 3 部分：
-
後端業務域資料
-
前端狀態資料
-
（基於後端業務域資料的）前端衍生資料
將這些資料填入業務元件，即可渲染出完整的功能模組（無論是在客戶端還是服務端），再將其放置到檢視容器中合適的坑位裡，就完成了一次元件級的“釋出”過程
這種模式涉及 5 個重要環節：
-
業務資料（包括後端業務域資料和前端衍生資料）的生產
-
業務元件（包括前端狀態資料）的生產和維護
-
元件的渲染（
業務資料 + 業務元件 = 功能模組） -
坑位的生產
-
功能模組的投放
其中，業務元件、坑位是進一步動態化的關鍵，可分為 4 個階段：
-
一個蘿蔔一個坑：靜態業務元件 + 靜態坑位
-
一個蘿蔔到處扔：靜態業務元件 + 動態坑位
-
多個蘿蔔輪番扔：動態業務元件 + 靜態坑位
-
多個蘿蔔到處扔：動態業務元件 + 動態坑位
要達到多個蘿蔔到處扔的元件級動態化終極目標，就要求能夠動態釋出業務元件、動態釋出坑位
交融：動態業務元件 + 動態坑位
從端和雲的視角來看，業務元件也可以看作資料（雲）的一部分，相比之下坑位與端的關聯更為緊密，而動態化的唯一手段就是將端側的東西搬到雲上去，所以要解決的關鍵問題是如何實現坑位的動態化
有 2 個思路：
-
幹掉坑位的概念：將坑位的概念從元件級擴充套件到頁面級，一個頁面容器（一個 URL）即一個坑位
-
將坑位元件化：提供標準的坑位元件，就像
iframe
頁面是一種天然的動態坑位，可開啟一個新的頁面容器載入任意 URL
對於除頁面之外的其它佈局容器，如對話方塊、訊息條、Banner 位、腰封等等，可以將坑位標準化成容器元件，與業務元件一併動態釋出，將坑位的租賃關係維護在服務端，作為資料驅動的資料之一
至此，前後端分層的界限幾經重新定義，終於迎來了 JSP/PHP 融合資料與模板的黃金年代……