回到超媒體系統:以 HTML 取代 JavaScript
現代的網頁開發領域長期被複雜的客戶端框架所主導,這些框架將瀏覽器視為應用程式執行環境,而非文件檢視器。然而,越來越多的運動主張回歸網路最初的目標:超媒體系統。透過優先使用 HTML 而非 JavaScript,開發者可以降低複雜度、提升初始載入速度,並與使網路在過去數十年得以擴展的架構模式保持一致。
HTML 為先開發的理由
從本質上來說,網路是一個超媒體系統。當我們拋棄龐大的 JavaScript 包,回歸伺服器端渲染(SSR)與原生 HTML 轉場時,我們重新體驗到那種在現代單頁應用(SPA)噪音中常被遺忘的「極速」效能與簡潔性。
使用後端(例如社群成員提到的 Go)來提供預先渲染的 HTML,讓瀏覽器發揮其最擅長的功能:解析與渲染文件。此做法消除了客戶端與伺服器之間複雜的狀態同步需求,因為伺服器仍是唯一的真實來源。
簡潔性與效能的平衡
雖然向 HTML 為先的開發轉變相當誘人,但它並非沒有代價。主要的矛盾在於伺服器驅動方式的簡潔性與客戶端互動所帶來的最佳使用者體驗之間的取捨。
網路往返問題
HTML 為先方法的主要批評之一是過度依賴網路請求。在傳統的 SPA 中,一小段 JavaScript 就能更新本地狀態變數,從而改變 UI 元素的大小或可見性,而不必與伺服器互動。而在嚴格的 HTML 驅動模型中,變更視圖狀態可能需要整頁重新載入或從伺服器取得片段更新。
正如一位開發者所指出的:
"隨著這項變更,我現在需要再一次的網路往返請求,才能取得當前頁面上相同內容的新尺寸,而這本可以只用幾百位元組的 JavaScript 就完成。"
替代的折衷方案
為了緩解這些問題,瀏覽器平台正持續演進。開發者正探索混合式方法,既保留 HTML 的簡潔性,又提供 JavaScript 驅動應用的流暢性。這些包括:
- CSS 變數: 僅使用 JavaScript 來切換控制版面或尺寸的 CSS 變數,避免完整的伺服器往返,同時保持清晰的關注點分離。
- Web Components(Web 元件): 利用原生瀏覽器元件封裝行為,無需沉重的框架。
- View Transitions API(視圖轉場 API): 結合 CSS 轉場與 View Transitions API 可彌合差距,使伺服器端導覽的體驗如同客戶端轉場般順暢,儘管瀏覽器支援(尤其是 Firefox)仍是限制因素。
超媒體系統的未來
網路平台正朝向更強韌的超媒體系統演進。除了簡單的 HTML,針對一般性嵌入(transclusion)以及其他架構改進的提案正持續開發,以使網路能在不依賴「JavaScript 萬能」範式的情況下,變得更具表現力。
最終目標並非完全淘汰 JavaScript,而是為不同需求選擇合適的工具。將 HTML 視為應用狀態的主要驅動,並以 JavaScript 作為漸進增強,開發者即可打造更具可及性、韌性且維護成本大幅降低的應用程式。