2/23聽了一場MS關於Atlas Framework的介紹,它算是MS面對AJAX熱潮所交出的成績單。有鑑於AJAX已成為當代Web設計的顯學,搞網站的人不可不知,這裡做個簡短的摘要:
(呃… 講師的投影片與教材還沒Release出來,所以我引用的文獻以Internet上的Resource為主,當然裡面也摻差了不少個人的見解,大家姑且看之)

AJAX(Asynchronous JavaScript and XML)是什麼?
它其實不是什麼新的發明,而泛指運用Javascript、XML、HTML DOM等這些老技術,大幅減少網頁Postbask(指User在網頁上按按點點->Browser送出Request->ASP/ASPX等在伺服器端即時運算->傳回HTML->重新顯示網頁的過程)發生,大幅提高User的互動感受,縮小與Web Page與Window Form在互動親和度上的差距。

說來好笑,從ASP.NET推出了Web Control的概念,強調寫Web Page跟寫Window Form愈來愈像,在Button上點兩下就可帶出Click事件開始寫Code。看似方便,但這種Server Side Event都得付出大量Postback的代價。於是我們不時看到ASPX程式師”輕輕鬆鬆”地寫出了地址輸入UI,使用時卻發現,每次下拉換個縣巿,IE卻得閃一下(頻寬不足或網頁複雜時可不只閃一下,是暈過去一陣子),然後第二個下拉選單才會Show出該縣巿的鄉鎮巿區清單…

當然,User肯定不會喜歡這種”爽到你,甘苦到我”的UI風格,體驗過Google Maps(http://maps.google.com/),Google Suggest(http://www.google.com/webhp?complete=1&hl=en )後,可怕的流暢性與互動感,直逼Window Form程式,絕對會讓大量引用Postback的傳統網頁設計頓時失色。[參考文件1]

要實作AJAX,選擇不只一種,例如: [參考文件2]


  1. 完全手工自己打造 AJAX:缺點是對大多數人而言太困難也太耗時,同時對 AJAX 知識也非常欠缺。
  2. 使用 Callback 方式:缺點是只支援 ASP.NET 2.0,且功能仍不夠完整。
  3. 使用現成的 AJAX Library:但 Library 畢竟只是 Library,和 Framework 比起來稍微遜色了點,但優點是可免費取得,同時適用 ASP.NET 1.0 與 2.0,不失為一個好途徑。
  4. 微軟 Atlas Framework:優點是定位在 Framework 層級,初步的規劃與設計 Scope 較為完整,同時兼顧與考量 Client 端與 Server 端,遺憾是只支援 ASP.NET 2.0。

由這些選項,可以清楚看出Atlas的定位,它是專屬於ASP.NET 2.0的解決方案。

我將今天看到Atlas的一些特色做了整理:
  1. 對Javascript做了強化,可以模仿命名空間、繼承、介面、類別、抽象/虛擬方法、列舉等,使其更接近C#。(但畢竟只是模仿,語法細節上有些出入,加上目前無法做到Intellisense自動帶出Property、Method的效果,與寫C#的感覺還是有一大段差距)
  2. Atlas可以簡單做到的效果:
    * Drag and Drop (連Label、TextBox等Web Control也可以)
    * Tooltip (Mouse停在上面時Show Message)
    * Auto-Completion (類似Google Suggest的自動完成效果)
    * Mouseover時觸發動作
    * 建立Web Service的Proxy, 用AsmxName.Method的就等同於呼叫了Web Service的特定Method,簡化許多
    * Data-Bining,例如: 某個Textbox內容Bind到Span
    * 跨瀏覽器,IE、Mozilla、Firefox等主流Browser均適用
    * Validators(跟ASP.NET的Validator一樣)
    * Timer(不過跟setTimeout、setInterval差不多,沒太大吸引力)
  3. 可以使用純XML語法夾在HTML Source中,就可做出不少基本功能,不用寫半行程式。但是XML Tag的做法雖然比較簡潔,在邏輯概念的傳達上,似乎不如Coding有系統。所幸Developer可以自由選擇用Coding的或是寫XML Tag,除非IDE有方便設定工具輔助,我想我還是會選擇寫Code吧!
    以下是一個用下拉選單改變DIV Style的範例:

    HTML Element:
    <div id=”panel” /><select
    id=”colorPicker”>…</select>


    Coding:
    var g_panel,g_colorPicker;
    function pageLoad() {
      g_panel=new Web.UI.Control($(‘panel’));
    //==>document.getElementById(“panel”)
      g_panel.initialize();
      g_panel.set_cssClass(‘normal’);
      g_colorPicker=new Web.UI.Select($(‘colorPicker’));
      g_colorPicker.initialize();
      g_selColor.seletionChanged.add(onSelectColor);
    }
    function onSelectColor(sender, args) { //==>連Event都仿得挺像的
      g_panel.set_cssClass(g_colorPicker.get_selectedValue());
    }


    如果用Tag的寫法(效果與以上Code完全相同)
    <components>
    <control targetElement=”panel” cssClass=”normal”>
    <bindings><binding id=”setCss” dataContext=”colorPicker”
    dataPath=”selectedValue” property=”cssClass” /></bindings>
    </control>
    <select targetElement=”colorSelect”>
    <selectionChanged><invokeMethod target=”setCss” method=”evaluateln”
    /></selectionChanged>
    </select>
    </components>


結論:
Atlas對Javascript下的功夫,讓它與C#或.NET中的語法相似度更高,而且的確將不少複雜的程序給封裝起來,頗有Do More With Less的味道,但是要留意:
  1. 如果你不是用ASP.NET 2.0, 呃… Sorry
  2. Atlas把複雜的東西簡化了… 但是用的是自己發明的一套做法;Atlas特意仿效C#,讓使用者能沿用一致的Coding經驗,但仍存在不可忽視的差別。學習曲線不可小覷!
  3. 承襲上點,如果你已經很熟稔傳統Javascript Coding,甚至已經為AJAX學過或寫過一些共用的js,要不要重新學一套將會是”to be or not to be”級的艱難抉擇。


Comments

Be the first to post a comment

Post a comment


44 - 11 =