ZK 元件的關鍵特性之一就是採用了 AJAX 技術,所以要探討為何使用 ZK 前,就要先了解一下 AJAX 帶來什麼好處。

為何要用 AJAX

有時候當你輸入完網頁上的表單,按下送出時,你會發現畫面整個變空白,然後才出現後續的結果頁面。這就是標準的瀏覽器與網頁應用程式的互動方式,一個請求對應一個完整頁面:每次送出 HTTP 請求,應用程式就從伺服器送來下一個完整的頁面,我們可以稱它是「以頁為單位的(page-based)」溝通方式。而使用者必須等待完整頁面收到後才能繼續下一個動作,也就是使用者動作要跟 HTTP 請求同步 (synchronous)。

當你使用 google 查詢時,一輸入第一個字它就跳出一個下拉框列出推薦的相關詞,也許你會注意到畫面的其他部分並沒有變化,畫面也沒有變成空白,只有多了下拉框。若你繼續輸入第二、三個字,google 會根據你的輸入持續改變下拉框的推薦詞,你不用等待畫面的變化完成就可以輸入下一個字。這背後所使用的技術就是 AJAX。簡單來說就是透過 JavaScript 發出非同步的 HTTP 請求到伺服器去取得部份要更新的資料後,再由 JavaScript 去更動目前頁面的部分內容。這樣一來應用程式有幾個改變:

  • 加快網頁反應速度。 因為每次改動不需要重新載入整個頁面,只調整部分變動的頁面,使用者可以更快看到結果。
  • 降低傳輸量。 每次伺服器只傳送少量要改變部分頁面相關的的資料給瀏覽器,而不用傳送整個頁面的資料,因此可以降低傳輸量。

以上兩點改變整體來說就能「提升用戶體驗,讓人使用網頁應用程式時,能有類似於桌上應用程式的體驗」,這就是網站套用 AJAX 帶來的主要價值。

有人會稱這樣給人較豐富體驗的網站為 Rich Internet Application (RIA),或是所謂的 Single Page Application (SPA) 也是利用同樣技術打造而成。

採用 AJAX 的障礙

雖然 AJAX 能帶來美好的體驗,但採用 AJAX 要克服許多技術上的障礙,首先要懂 JavaScript,並且能用它來操作 DOM 去繪製出你想要的介面,這還加上瀏灠器相關的知識,若是你要畫面好看些,你還得要懂 CSS 。再來要設計一個跟伺服器溝通的模式與資料交換格式,而伺服器端也要實作相應的程式跟瀏覽器溝通。

這整個相關的技術其實很龐雜,所以近年有因應而生的「前端工程師」就是專注在此部分相關技術的人。對於目前業界大部份都採用後端技術 (JSP, ASP, PHP)的網頁工程師來說,要引用 AJAX 並達到提升用戶體驗的效果其實學習成本很高。ZK 的出現就降低了這個障礙。

為何要用 ZK

只懂 Java 就能享受 AJAX (WebSocket) 的優勢

採用 ZK 最大優點就是 using AJAX without JavaScript 。整個開發過程中,你都不需要了解瀏覽器跟伺服器間透過 AJAX 溝通的細節 (連接、重送等),只要遵照開發模式實作必要的 Java 控制器類別 (controller) 即可。

8.5 之後,你可以設定 ZK 底層採用 WebSocket 跟伺服器通訊,上層控制器類別則完全不需要改寫。

設計使用者介面就交給專業介面框架

在開發應用系統時,最主要專注的核心問題是客戶所需的業務邏輯,如果你花很多時間在處理怎麼繪製畫面這種次要的衍生性問題上,相對就減少你處理核心問題的時間,這對系統完成是很不利的。而且,大部份的工程師不擅長繪製畫面,ZK 元件除了已經有設計好的使用者介面邏輯外,也有設計師調整好的色彩配色、一致的主題式外觀,可以省去你處理這些問題的時間,讓你更專注在你本身的業務邏輯上。

以下是 24 個佈景主題的概觀:

豐富的元件

ZK 最能提升你生產力的主因之一就是上百個重用性高的 UI 元件。透過 XML 格式的 ZUL 語言,你可以快速、輕易地用元件打造出一個複雜的頁面,並且能夠以 Java 控制,完全不需要 javascript。元件的設計都是針對常見的應用程式介面需求,從簡單的下拉清單到複雜的樹狀結構都有,你可以針對需求選用適合的元件,無需自己重新設計,讓你專注在你的專案業務邏輯上。

使用 ZK 就可以輕易、快速地打造類似如下的複雜介面:

前後端整合的解決方案

如果你選用一個純後端的框架(e.g. Struts…),你無法很容易地實現一些前端效果。如果你選用一個前端框架 (Angular, React) 來實現前端效果的話,勢必會需要處理跟後端的溝通,包含資料傳輸格式與溝通的方式,這其實是個挺麻煩的問題,因為兩邊是異質性的平台/語言,採用 ZK 可以一次解決以上這些問題,你只需要專注在後端整合上,前端的繪製與溝通你都不需要操心。

成熟的企業級框架

ZK 從最初 1.0 釋出至今已經超過 10 年,全世界(主要是歐美)都有許多企業採用,因此是一個成熟的框架,多數企業所遇到的問題, ZK 都早已經有解法。

完善的技術支援

ZK 原廠有專門的技術支援團隊負責協助使用者解決各類 ZK 的整合性問題,也能針對各種應用情境給予適當的用法建議,一但遇到 bug也能提供臨時的解決方案。也提供將第三方 JavaScript 函式庫的整合成 ZK 元件的客製化服務。

台灣多數的專案開發廠商都是採用國外的免費框架 (spring, hibernate…),這些框架多半都沒有「專業技術支援」,若是專案開發工程師遇到技術問題,只能自己找 google 大神解決,但是專案時程急迫,通常不允許工程師花時間搜尋、學習進而找到適當的解法,可能只是找到一個一知半解暫時替代方案或 patch,這些補補貼貼的解法很容易變成日後系統運作的地雷。ZK 框架的技術支援可以在專案工程師遇到問題時,快速提供適當的 ZK 解法,大量節省自行搜尋的時間成本,可以更專注在系統核心功能的開發上。

保留整合前端技術的可能性

雖然 ZK 元件的前端 javascript widget 都已經設計好了,但是你仍可以透過繼承、覆寫 widget 來客製化前端的行為,或是透過 data attribute handler 來整合第三方 javascript 函式庫,將一些好用的功能套用到既有的元件上。甚至透過 client command binding 來整合第三方的 javascript 框架如 Angular, Reactjs 等。

Comments