MVP For GWT 系列资料转载十三：GWT 2.0 介紹

 

原文转自：https://txt.appspot.com/pt2club.blogspot.com/2009/12/gwt-20.html

 

GWT 2.0 介紹

原文网址：http://googlewebtoolkit.blogspot.com/2009/12/introducing-google-web-toolkit-20-now.html

今晚稍早，令人兴奋的 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」就懒得翻了 [茶]）