AJAX及介面設計遷流

AJAX及介面設計遷流

inshua@gmail.com轉載請註明出處

  AJAX 風潮迅速席捲 web 開發，遺老遺少很不理解，認為 AJAX 開發的東西不夠穩健，沒有導航等等。和舊 web 開發相比，AJAX 最重要的改進恐怕是在瀏覽器上可以和 CS 一樣，留有一份不被刷掉的記憶體資料。正因為有 AJAX，CS 傳統的介面開發模式 MVC 可以順利的轉移至 web。
 
 前文提出 DB2JS 開發方法，正是基於此。
 
 如何在瀏覽器實現 MVC，可能不少人聽到這個單詞就能悟出。
 
 M：javascript 對象搭建的資料模型。資料存放區在JS對象中。
 V：HTML 頁面
 C：呼叫 JS 對象的方法操縱 JS 對象的資料。JS 對象提供非同步方法呼叫提交回資料庫，按我的思路是呼叫資料庫預存程序。
 
 此模型的 JS 對象，其作用乃至實現方式都和 .net 的 Dataset + DataAdapter 搭配相仿。甚至可以共用同一套預存程序和前端體系。
 
 藉助 JS 語言的靈活性以及 DHTML 的豐富表現力，可以實現絢麗有趣的介面效果。
 
 XML 在該架構中可以扮演中介者，唯不能代替 JS 對象，這裡可以把 XML 當做RelationDB，其與 JS 對象的關係仍似 ORM 的傳統課題， 不過 JS 是動態語言，這種映射比在 JAVA裡要好做得多。
 
 以上話題仍是關於 DB2JS。
 
 回顧介面發展的流派，可以發現三個主要的分支在會合。
 
 一支是來自傳統印刷廣告設計，舊行業的雜誌編輯。其主要能力是圖文混排。HTML 網頁和 WORD 文檔、PDF文檔是其代表。從原理上，如果 WORD 文檔不走平台綁定路線，其豐富的文字表現力和渲染速度本應讓它在這個方面佔得鼇頭。既然WORD文檔甘守一隅，在本文中，圖文支派的代表自然為HTML。
 
 一支來自影片及照片加工，舊行業的美術攝影電影。其主要能力是繪畫和動畫。Flash，GIF和Photoshop，Illustrator是其代表。即使一個小小的GIF，也讓世界變得多麼美好。想想QQ傳輸圖片的GIF等待圖片，讓使用者在等待的時候還有一絲愉悅的美感。假如普通UI都具備Flash的無級縮放和Photoshop的繪製能力，其視覺效果恐怕只應遊戲有。
 
 第三支是IT業的發明：視窗。其主要能力是位置固定和工程師費盡心機打造的固有控制項。Windows、KDE是其代表。由於具有原生API支援，速度快。其實，如果細心想想，該支派的始祖可上溯為繪畫支派。兩個方面可以佐證：1、繪畫支派天生支援絕對位置，我們很容易把視窗上發生的一切當作影片裡的角色。2、繪畫支派也的確發展出自己的視窗系統，比如 Flash的控制項陳列庫。區分這兩者的準則是自繪/API，便如Swing之於AWT。
 
 可以發現一個趨勢，這三支在逐漸衝撞融合。
 
 在開天闢地之初，字元介面的陰影覆蓋著整個電腦世界。
 後來，視窗依靠鮮豔的表徵圖、豐富的UI元素奠定了UI世界的霸主地位。
 HTML的出現宣告另一個分支進入了UI戰場，需要注意的是網頁的舞台並不是具體的電腦，HTML狡猾的選擇了WWW作為舞台。在幾乎沒有任何競爭者的情況下，Internet 的UI天空變成了HTML的顏色。
 後來，HTML 加入了表單元素，將一些簡單的視窗功能引入，其圖文混排的“圖”字，多了一個控制項的含義。
 過了很久，Flash殺入介面戰場，它最初的訴求和GIF類似，在 HTML 上的“圖”裡分一杯羹。
 起初視窗支派圖謀藉助JavaApplet 和 ActiveX和HTML雜交，卻並沒有成功，其情節耐人尋味。我想一個主要的原因是擔任介面的人是美工，對需要理解一大堆API的視窗系統很難入戲。
 
 視窗支派在擠進HTML的努力失敗後，繼續一家獨大電腦UI的美夢，發明了半透明的視窗等等新元素。可能考慮到進行圖文混排的瀏覽器也是一個視窗，所以視窗支派以為圖文支派的命脈在自己掌握中，沒有屈尊主動和HTML雜交，沒有移入HTML的核心內容：圖文混排。想象視窗系統的按鈕，如果能改造為圖文混排，就可以複製介面上的文字，甚至整個視窗，到別處粘貼了。對使用者而言，這種UI至少對上網搜尋故障原因要方便得多。
 視窗系統的遲鈍和它努力想擠進HTML的失敗也許可以讓我們發覺，原來程式員的UI觀念和普通使用者的UI觀念有時是格格不入的。
 長期以來，作為程式員，我們皈依的是視窗支派。我們的第一份驚喜是CreateWindow，從那天開始，我們心裡就沒有<button></button>的位置了。如果要製作稍微複雜的UI，就不得不藉助大量的富有挑戰性的自繪來完成。例如在使用Delphi時，若客戶需要奇偶行異色的網格，就需要自己派生網格來實現。其實想想，這些東西在HTML裡多容易實現啊。是物件導向重要還是物件導向的目的重要，值得我們思考。
 
 天才們為HTML開發了一套指令碼系統，讓介面製作人員可以控制網頁上的元素。同時HTML又獲得了一種能力：CSS。
 前者讓HTML獲得了動態能力，使它可以類比視窗系統的響應。後者除了批量格式化顯示效果外，還意外的讓HTML獲得了層的能力，使其可以類比視窗——以及動畫支派的層。
 擁有這兩種能力後，HTML改名叫DHTML。
 由於網站UI開發人員的主體是美術人員，這些人彙集了人類對美的最佳理解，很容易便將圖文混排的UI表現推進到遠超過視窗支派。
 
 得到強援後，HTML支派變得躁動不安，妄圖革自己的命。也可能是發跡於視窗支派的程式員發現了該支派的潛力後，對它有了獨到的認識。HTML引入了XML+XSLT網頁。回顧這場XML革命，其背後的理念是資料與表現分離。鑒於這種理念和圖文混排的理念並不相同，恐怕難獲成功。
 
 同時，動畫支派也在蓬勃興起，該支派憑藉Flash及其 ActionScript完全將視窗支派納入自己囊中。按理說這個支派的潛力最大，但由於沒有本地API支援，其渲染速度與視窗支派始終有差距。另外，網站的商業追求將它推到令人厭惡的廣告王座上，成為眾矢之的，也湮沒了它應有的才華。
 
 回顧過去發生的這一切，以及對最近業界的觀察，未來的肇端已經隱約可見：
 
 圖文支派憑藉AJAX技術在瀏覽器這個舞台發揮出更大的威力，但它本身還沒有動畫派的繪製能力和向量能力。未來的方向可能是 SVG。
 
 繪畫支派的Flash過去在Macromedia的帶領下，早已從GIF的替代品脫胎換骨，甚至在伺服器端依靠RAI多方攻城略地。現在接管Flash的掌門人 ADOBE又提出將Flash作為案頭的宏偉構想。鑒於它已經可以囊括了視窗，只要引入圖文混排的標記語言能力，再進一步提高渲染速度，這種天生可以跨平台的UI，即使不利用Flex，憑藉天生不分平台的Web Server作為依託，也是一支非常可怕的力量。
 
 而視窗支派也已經覺悟，Vista的介面使用類似HTML的XAML來定義，全盤圖文混排化，複又引入播放的概念，使介面行為具備動畫的特徵。這個舉動也可以理解為，圖文混排獲得大捷，或者說，圖文混排支派變成了API層級的圖文混排了。考慮這種新的UI，只要換個CSS，以前夢寐以求的換膚功能即可實現。使用者甚至可以通過修改XAML，調整介面定義，重新布局菜單和按鈕。
 
 在和平和愛情的世界裡，沒有國界、沒有硝煙。再也不見純粹的HTML靜態頁面，也不見方方的視窗，融合終是大勢所趨，最終受益的終是使用者。