2009-11-17

轉換不完全—為甚麼 GWT 不會是網頁開發的未來呢?

原文網址:http://www.cforcoding.com/2009/10/lost-in-translation-or-why-gwt-isnt.html

最近我看到「GWT 是網頁開發的未來嗎?」這篇文章,裡頭假設 GWT(Google Web Toolkit)會是未來的趨勢,因為它引入了 type safety、會吸引既有的 Java 程式設計師,也提供一些 widget。

Google 最近有很多 widget 都是用 GWT,尤其是 Google Wave。對抗 Google 或是 Lars Rasmussen 這檔子事情,我當然會猶豫啦,但是我卻是抱持這種立場 \囧/。

Type Safety 跟 Static Typing
在 90 年代,type safety 跟 static typeing 的主宰地位幾乎沒被挑戰過,首先是 C 然後是 C++ 跟 Java(我知道還有這之前還有 Pascal、Algol-68 以及一卡車的語言)。Perl 是留鬍子、自信的系統管理者的名片。


相較於不夠力的硬體(當然是以今天的標準),越來越複雜的軟體以及效能問題,促使這種潮流。變數不用定義或是可變型態的想法,就像世界末日。

在 JavaScript、PHP、Python、Perl、Ruby 以及過去十年的其他語言(還有一些遠早於這些的語言)已經清楚地證明了,鬆散、動態的型態並不是世界末日。

吸引 Java 程式設計師
這裡論上聽起來不賴,但是我提出另一個觀點:如果你寫德語教科書的時候,你會用德文寫?還是先用英文寫然後再用個工具轉成德文?

任何人研究或是懂得第二語言都知道「有些事就是不能翻譯」。程式語言也一樣。JavaScript 有一堆內容是 Java 沒有的:first class functionclosureextendsion methods、意思差很多的「this」、anonymous object、dynamic typing 等等。

當你在寫「cross-compiler」會遇到的問題:
  1. 最終產出的弱點與侷限性,會包含兩個語言的弱點(用數學的講法就是「A 聯集 B」,A、B 分別是兩種語言)
  2. 最終產出的優點,會是兩個語言共同的優點(「A 交集 B」)
  3. 慣用語不同
  4. Abstractions are leaky(中文:抽象滲漏法則),Jeff Atwood 稱之為「所有的 Abstraction 都是失敗的 Abstraction
這也是 ORM(例如 Hibernate)的根本性問題:Object-relational impedance mismatch。常常你花了半天的時間去調整正確 property、annotation、XML、VM 參數的組合,只是為了產生一個 query,但是兩行 SQL 就可以解決了。

另一個 GWT 的問題是:它誤導那些只會寫 Java 的程式設計師,讓他們以為可以不用學 JavaScript。

我的立場可以總結如下:GWT 把 JavaScript 當成一個需要解決的 Bug

Widget 與成熟度
我曾經用 GWT 寫程式。widget 的選擇性實在讓人感到悲傷。GWT 標準的 widget 看起來十分嚇人、甚至可以說是糟糕透了。是有一些第三方的選擇,但是 ExtGWT 是一個非糟糕的 library、SmartGWT 看起來是一個比較好的選擇(實際上是一個社群的成果,而不是某個根本不懂 Java 泛型的人做的 GPL/commercial 授權的大雜燴)。除此之外,也沒有太多選擇。

JavaScript 有許多選擇:YUIExtJS(跟 ExtGWT 完全沒關係)、DojojQuery UISmartClient 等等。不只選擇更多、而且也更成熟。

最重要的是開發速度
GWT 需要花上幾分鐘在組建(build)跟佈署(deploy)。因為某些因素,你無法「hot-deploy」class 跟 JSP。對於 PHP 跟 JavaScript 的開發者而言,組建跟部屬通常只是替換儲存的檔案,然後要 browser 重新 reload。

GWT 的 compile 過程是很粗暴的,所以在 1.6+ 跟 2.0 版對這部份做了重大的改進。draft compile、平行處理 compile 過程、optimized vs unoptimized Javascript、選擇輸出的 browser,這些在開發階段會有些幫助,但是每個部份卻又會增加 compile 的時間。

雖然只有在更改 service interface 才需要 compile 。純粹 client 端的改變可以在 hosted browser(GWT 2.0+ 可以在實際 browser)重新 reload 之後測試。技術上來說,在不改變 interface 的情況下,Server 端的改變應該不需要使 GWT 重新 compile,但是實做上卻可能是個問題(無論是用 Ant 或是 Maven)

為甚麼很長的 compile 時間會是個問題?

或是看看〈The Joel Test: 12 Steps to Better Code〉(中文:〈約耳測試:邁向高品質的12個步驟〉)的說法:
我們都知道知識工作者進入「狀況」(flow,也被稱作in the zone)時工作效果最佳,這時候他們會完全與環境脫離,全心專注在工作上。他們忘記時間並透過絕對專注產出極佳成果。他們所有豐富的產出也都是在這個時候完成的。作家,程式人員,科學家,甚至籃球球員都會告訴你進入「狀況」的情形。
問題是要進入「狀況」不是那麼容易。如果你有試著計時,平均大概要15分鐘才能開始全速工作。有時如果你累了或是那一天已經有很多創造性的成果,會根本無法進入「狀況」,然後看看網頁玩玩俄羅斯方塊打混過完一天。
還有一個問題就是很容易脫離「狀況」。噪音、電話、同事的中斷(特別是這一點)都會讓你脫離「狀況」。假設有個同事問了一個問題讓你中斷了1分鐘,實際上卻會讓你完全脫離「狀況」,得再等半個小時才能回復生產力,結果你的整體產能都出問題了。如果你身在一個喧鬧的BULLPEN環境中(像那些一窩蜂(caffeinated)網路公司最愛營造的典型),行銷部門在程式人員旁對著電話大喊,你的產能就像一直被中斷的知識工作者一樣顛簸,永遠無法進入「狀況」。
即使是一分鐘的 compile 也會讓你脫離「狀況」。即使像 Jeff Atwood 這種毫無道理卻死命堅持厭惡 PHP 的人,也有如看到曙光、自命為「徹底的 Scripter」。

不是每個應用程式都像 GMail
我認為 Web 應用程式某些部份跟 GMail 一樣。它的特色是(幾乎)只有一頁、常常模仿一般應用程式。傳統的網頁需要使用越來越多的 JavaScript,但是 HTML 頁面間仍然需要倚賴標準的 HTTP 傳輸。

GWT 是一個針對 Web 應用程式的技術。載入的時間很久(因為 JavaScript 動輒超過 1MB),但是這沒啥關係,因為在整個過程當中,你只載入一個頁面一次而已。在載入時間這點,傳統網頁是更常見的,對 GWT 而言不是問題。

即使你把討論範圍縮小至 Web 應用程式,在我的經驗當中,就算最大的 Web 應用程式還是可以用 JavaScript library 來管理。

現在的程式碼的規模都很巨大,我也許可以瞭解 GWT—至少算是 type check—的價值。不過,我寧願用 JavaScript 處理 dynamic loading 而不是用 GWT 2.0+ code splitting。相較之下,YUI 3 dymanic loading 有精練 JavaScript 語法以及 first class function。

Layers 與 Value Objects
Java 程式設計師喜歡 layer 不是什麼秘密。你才弄了一個 Presentation Layer、Controller Layer、Repository Layer 接著有人又建議你需要有 Database Abstraction Layer、Service Layer、Web Service Layer 以及 Messageing Layer。

當然,你在這些 layer 之間傳遞資料時,無法使用某些 value object,所以你便寫了一堆照本宣科的東西:
public class TranslationUtils {
 public static CustomerVO translate(Customer customer) {
  CustomerVO ret = new CustomerVO();
  ret.setName(customer.getName());
  ret.setDateOfBirth(customer.getDateOfBirth());
  //...
  return ret;
 }
}
或是你使用一些 reflection(甚至是 XML)的 property 複製機制。顯然的,類似的事情被認為是一個好的作法(至少是普遍的作法)。理所當然會出現的問題是, interface 會用到的 class 是有相依關係的。

更多的 Java 程式設計師有一個偏好,擔心從來沒有發生事情:抽換 layer 或是分別在不同的地方實做。

我堅信這些程式碼是害蟲。這種東西越少越好。因此,我認為透過可以依需要動態變更的方式傳遞 object,比寫一堆死板複製 property 來的好;因為單純跟單調的事情是容易出錯的,偏偏自動化工具沒辦法(至少無法完全)處理這些細微差異。

在 JavaScript,你可以直接對 class(所有 instance 或是你覺得適合的 instance)掛上 property 跟 method。Java 沒有支援這個功能,就讓 GWT 出現一個問題:你怎麼用你的 presentation object?像 ExtGWT 的 library 就乾脆把所有東西(包含 JSON)經過一些轉換之後都變成 Map(那還有 type safety 嗎?)

關於語言特性
管理者跟員工常常太重視你(應徵程式設計師)使用的語言及 framework。好的程式設計師可以馬上學會新的東西,程式語言也是同樣的道理。基礎的控制結構在一般的操作是相同的(至少在兩個語法與功能相近的語言上)。

語言特性就比較難。很多寫 Java、C++ 或 C# 的人,當他們用像 PHP 之類的語言時,會試著重新作一些在他們「母語」裡頭的行為。這幾乎總是會出錯。

OOP 是最常誤用的語言特性。PHP 不是 OO(比較好的描述方法是「object capable」);另一個是討厭全域變數。在 PHP 裡頭沒有多少東西是 global,而HTTP request 大多數時候是純粹是 procedural。就像 Joel 在〈How Microsoft Lost the API War〉(中文:〈微軟如何輸掉 API 戰爭〉)所說:
我們很多人都認為1990年代最大的戰爭就是程序化程式設計與物件導向程式設計間的戰爭,而且我們認為物件導向程式設計能讓程式師的生產力大幅提升,我當時也是其中之一,而有些人到現在也還是這麼認為。不過結果我們錯了,物件導向程式師設計是很方便的好東西,不過並不能像它承諾地大幅提升生產力。真正讓程式師大幅提升生產力的,其實是那些會替你自動管理記憶體的程式語言。
重點是 Java 跟 JavaScript 分別有非常不同的特性。設計良好的 JavaScript 程式跟設計良好的 Java 程式所作的事情是相當不一樣的,所以在把 Java 轉換到 JavaScript 時,會失去一些東西,因為語言特性是沒辦法自動轉換的。

結論
Script 會是未來的趨勢。一堆的組建跟部屬步驟,無論是以行業趨勢或是最佳產能的角度,都已經是過時了。這樣的趨勢已經發展許多年了。

一次性 compile 的語言(像 C/C++,Java 跟 C# 是 compile 成一個中介的格式所以不算)佔了軟體開發的大多數,包含我們現在使用的網頁 browser、OS、Database、Web Server、VM 等等。現在他們被「semi-compile」管理平台(主要是 Java 跟 .Net)取代。這些語言會有適合它們的領域,但是會被以 script 為基礎的語言所取代。

GWT 用電報這方法,試圖找出最好的方法來實做大規模、高效率的全球訊息交換系統,但是其他人已經改用 Email 了。

========
譯註:大多數電腦領域的名詞都不翻譯,build 跟 deploy 則是為了中文語意而亂翻 XD。原文引用「Joel on Software」的部份,中文翻譯是直接引用中文版的對應段落。

說實在的... 這篇看起來筆調很輕鬆活潑
但是我寧願翻譯學術論文... 實在翻譯的好痛苦阿阿阿阿 <囧>

2009-11-06

GWT 是網頁開發的未來嗎?

原文網址:http://blog.balfes.net/?p=869

有非常多的人看過、玩過、或聽過 GMail 以及其他像 Google Wave 的應用程式。是否曾經納悶這些應用程式是怎麼做出來的?那你應該去看一下 Google Web Toolkit(GWT)。我從上個禮拜開始瘋狂地寫 GWT,我必須承認它非常有趣,應該會有很多支持它的理由。當你在開發 web 應用程式時,可以用到 Eclipse 這個 IDE 的所有好處,而且你寫的語言卻是 Java,你就會認同我了。最棒的是,你可以重頭到尾都在寫 Java,但是最後 compile 的結果卻是一個以 JavaScript 做出來美妙 web 2.0 應用程式。GWT 的 compiler 支援絕大多數 Java 語言的內容。

你可以看一下 GWT API Reference 導覽,實際感受一下 UI 可以好到什麼樣子。基礎的 widget library 也可以馬上讓你用用看;如果基礎的 widget 沒辦法滿足你,你也自己弄一些 custom widget。我覺得做的實在很棒的是 i18n 的技術(雖然我並沒有處理過很多 i18n 的東西)。講到 debug 那更是不得了,你現在可以輕鬆在 Eclipse 用正統的 debugger 來開發、debug 你的 JavaScript 應用程式。GWT Compiler 只產生一些 JavaScript 跟 HTML 檔,與其他公開的 resource(例如 CSS、圖檔)分開。在 deploy 時,你需要做的就是把這些東西放到你的 web server 上。

為甚麼 GWT 可以這麼酷咧?我想關鍵點在於它會吸引 Java 開發者,而且在轉成 JavaScript 的時候還會幫你作最佳化。你會得到一堆混淆過後的 JavaScript 檔案,且已經針對主要的 browser 作最佳化—這些常常是你得先知道怎麼作,然後常常還得自己手工處理的煩人事。你還可以把你做的東西掛進 GWT SDK 當中。為自己的產品及開發人員,建立自己的 service、UI 元件。還有還有,GWT 是 open source 的,你可以在 Apache 2.0 license 的規範下使用 & 修改它

我相信我們會聽到更多 GWT 的東東,我也希望聽到關於這個 Web 2.0 開發方式的不同意見。

========
原文下面還有一堆 comment,就懶得翻譯了 XD
作者後來又 po 了一篇補刀的文章,也可以順便看看

2009-10-12

「讓 AJAX 網頁可以被網路爬蟲讀取」的建議書

原文網址: http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

今天,我們很興奮地提出「讓以 AJAX 為基礎的網站可以被網路爬蟲讀取」的規格建議書。這將有益於網站管理者和使用者在製作豐富、互動的 AJAX 網站時,可以讓所有的搜尋引擎讀取到想要被搜尋到的部份。我們相信,這類的內容如果可以被網路爬蟲讀取以及被索引,將會讓網路有長足的進步。

當 AJAX 網站受到使用者歡迎的同時,搜尋引擎並無法讀取這些網站的內容。我們的最新調查顯示:有 70% 的網站在 form 或是其他地方使用了 JavaScript。當然,大部分的 JavaScript 並不是 AJAX,但是如果搜尋引擎可以處理、索引 AJAX 的內容,開發者就可以在他們的網站上做出更多豐富的內容,而搜尋引擎依然找得到。

下面是這份建議書希望達到的目標:

  • 當網站成長時,所需要的變動是最小的
  • 使用者跟搜尋引擎看到的是相同的內容(無須 cloaking)
  • 搜尋引擎可以直接讓使用者導向到 AJAX 的 URL(而不一個靜態複製網頁)
  • 網站擁有者有方法可以驗證他們的 AJAX 網站顯示正常,也因此網路爬蟲可以讀取所有的內容。

下面是我們初步建議書當中,搜尋引擎處理、索引 AJAX 內容的方式:

  • 把 stateful 的 AJAX 頁面的 URL fragment 稍作修改:
    無論何時,直接讀取 stateful 的 AJAX 頁面都會顯示一樣內容。這些頁面可以變成搜尋結果。我們想把像這樣的 URL「http://example.com/page?query#state」 加上一個 token 成這樣「http://example.com/page?query#[FRAGMENTTOKEN]state」以作識別。在檢視網路上的 URL 之後,我們建議使用驚嘆號「!」。在搜尋結果當中顯示的 URL 會像這樣「http://example.com/page?query#!state」。
  • 使用 headless 瀏覽器,讓你的 web server 有一個 HTML 的 snapshot。
    headless 瀏覽器用來讀取 AJAX 頁面,然後最終瀏覽器的結果產生 HTML。只有特別標記的 URL 才傳給 headless 瀏覽器處理。在 server 端作這件事情時,網站擁有者可以控制 HTML  的產生,也就可以輕鬆地驗證所有的 JavaScript 是否正常執行。HtmlUnit —open source、沒有 GUI 的 Java 程式—就是一個 headless 瀏覽器的例子。
  • 允許搜尋引擎的爬蟲去讀取有對 state 作 escape 的 URL
    URL fragment 並不會隨著 request 送到 server 去,所以需要稍微變動 URL 以讀取該頁面。同時,這也會讓 server 啟用 headless 瀏覽器去產生 HTML 而不是傳回有 JavaScript 的頁面。此外,既有的 URL—使用者看到的那些—則會用平常的方式處理,不會啟用 headless 瀏覽器。我們建議 escape state 資訊,然後把它加到 query parameter 當中,變成一個 token。用上頭的例子,URL 可能會長這樣:「http://example.com/page?query&[QUERYTOKEN]=state」。依照我們對現在網路上 URL 的分析結果,我們建議用「_escaped_fragment_」來作為 token。建議的 URL 會變成:「http://example.com/page?query&_escaped_fragment_=state」
  • 在搜尋結果當中,顯示原來的 URL
    為了改善使用者經驗,這會讓使用者直接連回 AJAX 頁面。搜尋結果當中顯示原始的 URL(如前面的例子:http://example.com/page?query#!state)就可以做到。搜尋引擎可以檢查被 Googlebot 索引的文字,是否跟使用者看到的一樣(或是子集)。



總結來說,如果一個 stateful 的 URL,例如:「http://example.com/dictionary.html#AJAX」,同時給使用者或網路爬蟲使用的 URL 會變成「http://example.com/dictionary.html#!AJAX」,而可以被爬蟲爬的 URL 會變成「http://example.com/dictionary.html?_escaped_fragment_=AJAX」,但使用者存取還是用「http://example.com/dictionary.html#!AJAX」

2009-10-07

GWT Animation 再探

在〈GWT Animation 初探〉當中,程式已經能讓畫面看起來有動畫的效果,「表面上」要怎麼使用 Animation 是沒有問題了;不過這樣子有些無趣,還是要殺進去 Animation 來瞭解這一切背後的內幕(?)。

起點當然是 Animation.run(),沒有呼叫這個 method,是不會有什麼反應的。run() 有兩個,run(int duration, double startTime) 的 duration 是 Animation 預計持續作用的時間;startTime 是預計執行的時間。為甚麼用 startTime 的 data type 是 double 呢?這點在 Animation 不算是有用到的 Duration.elapsedMillis() 可以找到答案:
Returns the same result as System#currentTimeMillis(), but as a double. Because emulated long math is significantly slower than doubles in web mode, this method is to be preferred.
因為在瀏覽器上頭,使用 double 處理起來比模擬 long 還要快得多(btw... 為甚麼 Animation 只用了 Duration.currentTimeMillis() 取得時間,而沒有用 Duration.elapsedMillis() 去計算時間差,這我一直想不透 XD)。另一個 run(int duration) 其實還是呼叫 run(int, double),只是自動以當下時間傳給 startTime。

回到 run(int, double) 的內容,關鍵點在於下面這段
if (animations == null) {
   animations = new ArrayList();  //point-A
   animationTimer = new Timer() {
    @Override
    public void run() {
     updateAnimations();
    }
   };
  }
  animations.add(this);
這邊要回頭看一下 Animation 的資料結構。講起來有點饒舌。大致上來說,Animation 有一些 static 的 field 跟 method,目的是統一處理系統當中所有的 Animation object(程式碼 point-A)。這裡也可以看到,其實 Animation 裡頭是用 Timer 來實做的。Timer 的細節得先跳過,這裡只要知道看到 animationTime.schedule(int delayMillis) 就表示隔了 delayMillis 個 ms 就會執行 updateAnimations() 的內容,而 updateAnimations() 會呼叫 update()。那麼,勢必有需要好好看一下 update() 的內容:
private boolean update(double curTime) {
  boolean finished = curTime >= startTime + duration;
  if (started && !finished) {
   // Animation is in progress.
   double progress = (curTime - startTime) / duration;
   onUpdate(interpolate(progress));
   return false;
  }
  if (!started && curTime >= startTime) {
   // Start the animation.
   started = true;
   onStart();
   // Intentional fall through to possibly end the animation.
  }
  if (finished) {
   // Animation is complete.
   onComplete();
   started = false;
   running = false;
   return true;
  }
  return false;
 }
裡頭依照不同的狀況,呼叫了 onUpdate(), onStart()onComplete()。嗯?為甚麼只有 onUpdate() 是 abstract 的呢?因為這兩個到最後還是去呼叫 onUpdate(),progress 的值給 0 表示剛開始、給 1 表示結束。接下來就是最詭異的部份啦,傳給 onUpdate() 的數值,居然還要經過 interpolate() 的計算,這又是為甚麼呢?根據 javadoc 的說法:
Interpolate the linear progress into a more natural easing function.
看個對照圖可能比較好懂:

在開始跟結束的部份比較緩和,或許這樣比較符合人類視覺觀點?總之,這是為甚麼 Animation 的 javadoc 會說「at a non-fixed frame rate」了。(順帶提一點,相同的 duration,呼叫 onUpdate() 的次數應該會一樣,但是 progress 值會有差異。這應該是 Timer 先天上無法很精準的缺陷?)

看到這邊,Animation 應該可以說沒有秘密了。剩下來就是如何運用的問題了...... [遠目]

2009-10-05

GWT Animation 初探

Animation 是 GWT 內的一個 class,名字取的很美妙,實際上是在做什麼的呢? GWT 的 showcase 給了一個示範,不過裡頭的程式碼實在有點古怪,姑且直接來看 1.6 版的 API doc 怎麼說。
An Animation is a continuous event that updates progressively over time at a non-fixed frame rate.
哈哈... 根本就是騙人的,哪來什麼動畫 [笑]。簡單地說「Animation 是一個會持續要求 update 動作的物件。而間隔的時間是不固定的。」阿?這什麼鬼?還是用程式碼來說明好了...

import com.google.gwt.animation.client.Animation;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Label;

public class HelloAnimation extends AbsolutePanel{
 private Label hello = new Label("Hello Animation");
 private final int WIDTH = 800;
 private final int HEIGHT = 200;
 
 public HelloAnimation(){
  this.setPixelSize(WIDTH, HEIGHT);
  this.add(hello); //要先加上去,才有辦法移動
  Player player = new Player(this);
  player.run(5*1000); //point-A
 }
 
 public void playOneFrame(double progress){
  this.setWidgetPosition(hello, (int)(WIDTH*progress), HEIGHT/2);
 }
}

class Player extends Animation{
 HelloAnimation target;
 
 public Player(HelloAnimation t){
  target = t;
 }
 
 @Override
 protected void onUpdate(double progress) {
  target.playOneFrame(progress);
 }
}

只要 new 一個 HelloAnimation,然後加到 RootPanel 上頭去,就會看「Hello Animation」從畫面左邊跑到右邊。(至於最後「Hello Animation」突然換行的狀況,先跳過... XD)

裡頭兩個 class 分別負責兩件事情。HelloAnimation 負責畫面顯示的部份,直接 extends AbsolutePanel,搭配 AbsolutePanel.setWidgetPosition() 就可以很快速地設定 widget 的位置,這樣在上頭的東西「動」起來就相對方便。playOneFrame() 這個 method 就是在處理這件事情,至於 progress 這個參數的作用,就必須回到 Animation(也就是範例程式裡頭的 Player才能說明。

Player 這個 class 其實很簡單,extends Animation 之後,只有一個 method 必須實作,就是 onUpdate()。這個 method 就是 API 提到的效果,當 Player 起作用的時候,onUpdate() 就會持續地被呼叫、並且給予不同的參數 progress 值,值域介於 0~1 之間,會隨著時間會越來越大,乘上 100 就是完成度啦,因為實際負責「動」的物件是 HelloAnimation,所以在呼叫 HelloAnimation.playOneFrame() 時候就原封不動地傳進去。這個參數在製作像動畫這種東西時,就很方便,因為 Animation 幫你算好 progress,不用自己動手。像這個例子當中,「Hello Animation」要在指定的時間內橫越指定的寬度,但是在撰寫 playOneFrame() 時完全不用理會「指定的時間」有多長,只要把寬度乘上 progress 就解決了。現在動畫的長度是五秒鐘(程式碼 point-A),要改成兩倍慢 or 兩倍快,就只要在 player.run() 時給 10 秒 or 2.5 秒就可以了。

看到這裡,是不是覺得 GWT 設計的很好、使用起來很簡單呢? [奸笑]

至於 Animation 的細節,我們下次再談(初探嘛...)