今晚稍早，令人興奮的 Campfire One 結束了，在這個聚會上，我們宣佈 GWT 2.0 正式發佈。除了 GWT SDK 與 Google Eclipse Plugin 的重大改進外，GWT 2.0 包含了給 Chrome 使用的全新效率分析工具，名為 Speed Tracer。
Speed Tracer 介紹
我們已經在前幾個禮拜中提到過，現在真的可以用啦。Speed Tracer 是在 Chrome 上頭的強力效能分析工具，前所未有地讓你切入到「任何」的 web application（不再只是用 GWT 寫的）。想知道為甚麼你的 web application 感覺這麼遲鈍嗎？Speed Tracer 可以幫你找到答案。
看 Speed Tracer 運作是十分有趣的，下面是一個快速介紹的影片：
更快的開發速度、更快的 application
這裡是另外一個快速導覽的影片，展示 GWT 2.0 當中一些很酷的功能：
現在，讓我們更進一步看看 GWT SDK 跟 Google Eclipse Plugin 多了哪些新東西：
新的 development mode 跟 draft compile 加快「編輯」與「重新整理」的速度
- GWT 2.0 引進了「development mode」這個 debug 的新方法，大幅改進了「編輯」→「重新整理」的週期。這可以讓你在自己選擇的 browser 上頭 debug，不再是用 GWT 指定的 browser。development mode 需要名為「GWT Developer Plugin」的 browser plugin，掛上這個 plugin 的 browser 就會跟你的 Java project 建立起 debug bridge。先撇開技術細節，這種 debug 的方法真的感覺不賴。
- development mode 把 debug 過程直接轉移到 browser 上，這讓你可以使用每個 browser 特有的 development tool、必且能和 GWT 的工具結合在一起。是的，你現在可以在 Firefox 上頭抓 Java 程式碼的錯誤，同時使用像 Firebug 這種超強工具來看 DOM 結構、測試 CSS。
- 新的 Google Eclipse Plugin 優化了啟動、控制 development mode 的支援，包含了一個新的（Eclipse 中的）view ，可以直接看到 development mode 的 log 訊息。不在 Eclipse 裡頭啟動，而是利用 Swing 寫成的使用者介面（包含其他 IDE）來手工啟動 development mode 也是可以的。
- development mode 也支援同時在多個 browser 作 debug。這表示你可以在同一個 debug 階段連接一個以上的 browser。這個接口相當有用，可以讓 development mode 的 session 持續運作一長段時間，卻讓你只需要簡單地 refresh browser 就可以看到 Java 程式碼改變的結果。這可以讓你快速地確認 project 可以在多數主要的 browser 正常運作，而不用重新啟動 Java debugger。
- 還有還有，development mode 可以跨網路運作啦。這有什麼厲害的咧？因為你可以輕鬆地在你 coding 以外的平台上對 browser 作測試。舉例來說，假設你在 Linux 上頭的 IDE 寫程式，你可以在同一個 debug session 透過網路用 Windows 上的 IE 或 Chrome、OS X 上的 Safari 或 Firefox 執行你的 application，還可以 debug。重點是你可以在任何你喜歡的平台上頭開發，然後在每一個使用者可能使用的 browser/OS 組合上頭測試。
- 雖然 development mode 會大幅度地減少 compile 的必要，但如果你還是常常需要 compile 成 JavaScript，你可以使用 GWT compiler 的新 flag「draftCompile」，這會省略最佳化的過程而加快 compile 的速度。你必須清楚瞭解，用這個方法產生的 JavaScript 不應該 deploy 出去，但是它在非成品輸出的不斷 build 階段，是節省時間的好東西。
用 UiBinder 來描繪 UI
- GWT 2.0 引進一個建立 UI 新方法「UiBinder」，可以大幅提昇產能。UiBinder 的機制讓 UI 的外觀可以輕易地跟 application 的邏輯分離。在一個 UiBinder 的 XML template（*.ui.xml） 檔案裡頭宣告 HTML 跟 widget 就可以建構你的 UI 畫面。至於 application 的邏輯就放在相關的 .java 檔裡頭。
- UiBinder 讓網頁設計師更容易直接切入開發流程中。舉例來說，開發人員可以複製貼上網頁設計師提供的 HTML mock。我們也看到，網頁設計師會喜歡直接修改 UiBinder XML template 然後在 development mode 當中快速的測試 UI 設計結果。用可互動的 widget 來設計，一定會比被動地用 HTML mock 來的有趣的多。
- 這並不是說，你在用 UiBinder 時只能用內建的 widget。結合你自己的 widget 到 UiBinder template 跟使用任何 built-in widget 一樣。（譯註：感謝 tkcn 協助指正）
- UiBinder 也可以協助預防微小的 bug，像是 ID 打錯，因為在 compile 的時候會交叉比對驗證 .ui.xml 跟 .java。
- Google Eclipse Plugin 現在提供 UiBinder 方面的建置精靈、code completion、red squiggly（譯註：spell check？）以及 refactoring，讓你用 UiBinder 更有效率。
Layout Panel 讓你有完美的視覺效果
- 精準地弄出你想要的 look and fell 的 UI，向來是 HTML 跟 CSS 的一個棘手問題。在 GWT 2.0 之前，連 GWT 的 widget 也無法完整 abstract 出來，這導致某些 layout 很難做出來。不過，GWT 2.0 引入了「Layout Panel」機制，讓你可以精確地做出你想要的 layout。GWT SDK 裡頭那個 Mail 的範例已經改成這個方法，你可以從這裡看出它怎麼運作的。
- Layout Panel 在標準的 CSS 上建立一個可預料、constraint-base 的 layout system。因為它跟 CSS 並存而不是不理會 CSS，Layout Panel 持續如預期顯示你需要載入的自訂 CSS。又因為 CSS-base 的 layout 實質上是由 browser 的 rendering engine 處理的，因此並不需要任何 JavaScript。所以，layout 非常快速而且流暢，你可以在調整 browser 視窗大小的時候感受特別深刻。
- 正如你所預期的，Layout Panel 用 UiBinder 來操作特別順。只要幾行 XML，你就可以弄出非常精緻複雜的 layout，包括 animated transition、splitter...... 等等。
改進 Compiler
- GWT 2.0 一個很關鍵的新功能是「developer-guided code splitting」。舉個簡單的比喻：你該不會希望在 YouTube 看影片的時候，是整部片下載完才能看吧？你會希望影片馬上開始，其他的部份繼續下載—web application 也是同樣道理。啟動 web application 不應該讓你感覺像是在「安裝」東西，而是當你按下 hyperlink 的時候就馬上開始。Code splitting 是非常有力的工具讓你實現這個想法。
- 這聽起來很複雜，但是實際上 code splitting 相當簡單。只要找到你的 project 當中想要切出一些程式碼的點，然後用 GWT.runAsync() 這個新的神奇 method 來建立一個 split point。藉由胡亂增加 split point，你可以輕鬆且安全地切割你的 application，以確保一開始下載的部份是啟動程式的最低所需。Compiler 會安排其他的程式碼片段在稍後才下載。不像手動分割 JavaScript 檔，GWT compiler 把繁雜的工作都包好啦，會確保所有相依的部份會自動按照正確順序下載。GWT SDK 當中的 Showcase 範例已經更新成使用 code splitting，你可以去看看成效。
- 除了 code splitting，compiler 還做了一些重要的改進，來增強產出 JavaScript 的能力。每個 GWT 版本釋出時，我們會改善 compiler 的最佳化技術，讓 JavaScript 更小也更快。當你已經有一堆 GWT project，這就很棒啦，因為你可以很簡單的升級、重新 compile 然後—嘿嘿，你的 application 就會啟動的更快、跑的更順。GWT 2.0 包含了一些強力效果的最佳化作法，我們也看到產出的 JavaScript 縮小了 3～20%。
用 ClientBundle 來最佳化 resource
- GWT 1.4 有 ImageBundle 這個 resource-bunding 功能，ClientBundle 繼承這個 pattern 並且延伸出去。只要宣告一個簡單的 interface，就可以在 compile 階段把 resource 直接嵌入到最終的 JavaScript 還附帶最佳化。舉例來說，bunding 圖片可以讓你省去一堆 HTTP 溝通過程。ClientBundle 支援更多樣的 resource 種類，包含圖片、文字、甚至 CSS。
- CSS？沒～錯！CssResource 是一個新的 framework 讓你可以有效管理 style。It supports a new extended CSS syntax for defining sprites, named constants, scopes, conditional selectors, and more. t also aggressively optimizes your CSS by stripping comments and whitespace and by obfuscating class names.（譯註：CSS 不熟，實在不知道怎麼翻 Orz）
- ClientBundle 是可以擴充的。你可以創造自己的 resource 種類，然後 hook 進 ClientBundle framework，使得你找得到你要用的 resource 卻又能保持 interface 一致與簡潔。
（痞子：最後兩段「Special Thanks」跟「Getting Start」就懶得翻了 [茶]）
沒有留言:
張貼留言