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

flashcloud

浏览: 189280 次
性别:
来自: 成都

最近访客更多访客>>

hellolove

随意而生

SeeWhy

springnet

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

GWT CSS Eclipse JavaScript Chrome

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」就懒得翻了 [茶]）