2021
01
05

Basecamp發布網頁前端開發框架Hotwire,可減少JavaScript使用並加速頁面載入[轉載於iThome]

關鍵字:Basecamp Hotwire

Hotwire是一個建置現代網頁應用程式的替代方案,不需要使用大量的JavaScript,透過傳送HTML(HTML-Over-The-Wire),達到快速載入網頁的效果。不用大量JavaScript,而是傳送HTML的方式,不只可以實現快速載入首次頁面的目的,還能夠將模板渲染交給伺服器,並在不犧牲傳統單頁應用程式的速度與回應性的情況下,讓開發者使用各種程式語言開發網頁程式,有效提升生產力。

網頁應用程式透過傳送HTML來呈現客戶端頁面,並非全新的方法,只是近幾年JavaScript技術蓬勃發展,吸引了多數開發者的目光。由Ruby on Rails的創始人DHH所創辦的Basecamp,在2020年開發了全新電子郵件網頁應用Hey,這是一個功能齊全的子郵件用戶端,但是僅使用很少的JavaScript,提供順暢的操作體驗,因而使得傳送HTML來呈現客戶端畫面的發展,再次受到一些矚目。

Basecamp把用來打造Hey前端的堆疊與技術打包,發布成為Hotwire設計框架,其中主要包含了Hotwire的核心Turbo框架,以及為HTML設計的JavaScript框架Stimulus。Turbo提供了一些補充技術,來大幅減少應用程式需要撰寫的JavaScript,像是Turbo Drive讓網頁更新不需要重新載入整個頁面,加快了連結與表單提交的速度,而Turbo Frames可以將頁面解構成為獨立的內容,透過定義瀏覽的範圍,並進行延遲載入。

Turbo Streams則可以利用WebSocket傳遞頁面更新,或是使用HTML和類CRUD操作,以回應表單提交,還有Turbo Native,可以讓應用程式原生支援iOS和Android,無縫切換網頁以及原生程式的區塊。這些元件都以發送HTML運作,而當Turbo無法滿足開發者的需求時,則可以使用Stimulus框架來解決剩下的問題。

Stimulus是一個JavaScript框架,但不像是其他前端框架,Stimulus不會接管前端,其目的僅是使用簡單註解,將JavaScript物件連接到頁面元素,來強化靜態或是伺服器渲染HTML。這些JavaScript物件稱為Controller,Stimulus會持續監控頁面,直到HTML資料Controller屬性出現。

開發者也可以使用自己選用的工具,來達成HTML-Over-The-Wire的目的,只不過Hotwire包含完整的開發工具,並且提供跨平臺解決方案,可供開發者方便使用。

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.