当前位置: 代码迷 >> Web前端 >> MVP For GWT 系列文件转载十三:GWT 2.0 介铰
  详细解决方案

MVP For GWT 系列文件转载十三:GWT 2.0 介铰

热度:491   发布时间:2012-11-05 09:35:12.0
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 指定的 browserdevelopment 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 ChromeOS X 上的 Safari Firefox 执行你的 application,还可以 debug。重点是你可以在任何你喜欢的平台上头开发,然后在每一个使用者可能使用的 browser/OS 组合上头测试。
  • 虽然 development mode 会大幅度地减少 compile 的必要,但如果你还是常常需要 compile JavaScript,你可以使用 GWT compiler 的新 flagdraftCompile」,这会省略最佳化的过程而加快 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 completionred 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 splittingcompiler 还做了一些重要的改进,来增强产出?JavaScript 的能力。每个 GWT 版本释出时,我们会改善 compiler 的最佳化技术,让 JavaScript 更小也更快。当你已经有一堆 GWT project,这就很棒啦,因为你可以很简单的升级、重新 compile 然后嘿嘿,你的 application 就会启动的更快、跑的更顺。GWT 2.0 包含了一些强力效果的最佳化作法,我们也看到产出的 JavaScript 缩小了 320%

用 ClientBundle 来最佳化 resource

  • GWT 1.4 ImageBundle 这个 resource-bunding 功能,ClientBundle 继承这个 pattern 并且延伸出去。只要宣告一个简单的 interface,就可以在 compile 阶段把 resource 直接嵌入到最终的 JavaScript 还附带最佳化。举例来说,bunding 图片可以让你省去一堆 HTTP 沟通过程。ClientBundle 支援更多样的 resource 种类,包含图片、文字、甚至 CSS
  • CSS?没~错!CssResource 是一个新的 framework 让你可以有效管理 styleIt 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」就懒得翻了 []
  相关解决方案