The Rules of AJAX Web Application Design - Part 1

Because I'm a Taiwanese, So I'll try to keep my blog in two languages, English and Chinese.

After more two years working in ZK, I think I'm quite good at how to design an Web Application based on Java technology,  although I'm still not familiar with Javascript, He~ He~.

Using ZK to build a Website is very simple, you write a XUL-like xml file(with extension .zul) to describe page structure, then you add event-listening method in controller, sub-class java file or even in zul file as some kind of sever-side script. finally, Inside event-listening methid you operate widgets and trigger business logics do make something really happen.

But, it's simple doesn't means it's easy, to build an AJAX Web Application would never be easy if you don't have enough knowledge and experience of the differences from plan-old HTML.

About knowledge I GOT NOTHING to say, you JUST NEED TO KNOW the very detail of Markup Language, browser, HTTP, app server and the programming language that you choose. ZK in here is YET ANOTHER AJAX FRAMEWORK, so it won't help you to make them easy, nor GWT or JQuery. All of them will torturing and fool you around before you have solid base knowledge.

Role No 1: 1024 * 768 No longer to be the limitation.

In traditional page based dynamic web programming(like ASP, PHP, JSP), the most popular resolution that user had in there screen had limited(not complete yet...)



算是把這兩年來一些做開發的心得給整理一下吧？
可能的話，打算給個三部曲之類的東西。


心得一： 1024 * 768 不再是網頁大小的限制。
傳統的Page Base網頁，螢幕解析度是多少頁面元素就是多少，跟堆積木一樣，1024 * 758 的畫面就是塞不下面積和超過的元素。
但是在AJAX網頁裡面，透過動態Layout元件(layout, tree, group, listbox)的幫忙，畫面可以被Flip, Swap, Collapse, popup, 我們在單一頁面空間裡能塞進的元素、功能都爆增了。

• 透過 Collapsible，我們可以在需要的時候滑出特定Panel呈現功能介面。
• 透過頁籤，我們可以將多個Tab疊在同一個Panel裡，每個Tab放各自的東西。
• 透過Tree，具有Hierarchy特性的DataModel可以不佔空間的呈現其結構。
• 透過popup，我們可以隨時使用一個佔據整個畫面中間的Dialog呈現非特定的操作介面與訊息。

簡單的說，網頁從2D 變成了2.5D。


心得二：Browser Request's Response的資訊量管理比以往都更加重要。

在Page Base的時候，一個頁面能夠呈現的資訊量有限，而網站不同的操作介面會透過Hyperlinking切割到其他的Response的結果裡，所以單一Response裡server需要初始化的項目不多、一個畫面需要載入的元素也不多。

但是切到AJAX這個2.5D概念的世界之後：

1. 更多的Business Object, Service initialization需要被執行。
2. AJAX元件的overhead一定比陽春的HTML高。
   

想像一下一個有著超過15個Tab的頁簽，平均每個Tab需要啟動一個Service、包含 200個 Components的AJAX 網頁(也許是做ERP系統)，沒有使用任何Lazy-loading的技巧，也不透過Hyperlinking做切割，這個單一Response的資訊量會是驚人的。

期待一個Response要Provide的資訊量有多大，那麼Server-side要執行的運算量就有多大、

一個AJAX網頁做的越複雜，Browser的運算負擔也越增加。

(不要忘記HTTP就是HTTP，HTML就是HTML，而該死的IE6全球還是有超過40%的用戶。)

當Browser Request's Response的資訊量開始產生Responsiveness的問題時，如何在可接受的範圍內不損及Usability 將這個資訊量切割到不同的Response裡，就是開發者的責任。
客戶用的瀏覽器越爛、網路越慢、server等級越差，就越考較開發者架構設計上的資訊量管理能力。
以下是一些常見的技巧：

• Lazy-loading：將特定區塊的UI 元素以AJAX Request延遲載入到畫面上，這可以降低Browser Request latency。
  
• Paging：對於Collection Component的呈現筆數進行限制是必須的，想要一次把10000個AJAX Component load到頁面上並不聰明。
• Hyperlinking：不要AJAX過頭，有些開發者一開始AJAX之後就覺得用Hyperlink有罪惡感。HTML就是HTML，Hyperlink在阻隔不當操作、區分狀態、降低單一頁面Controller的複雜度、支援SEO是非常管用的。
• Remove Unused Elements: 元素加得上去也可以拔得掉，可能已經不用的AJAX元素可不可以先拔掉，以後要用到再接回來呢？