Atlas -- Javascript老鳥的雞肋?

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”級的艱難抉擇。