最大的GWT陷阱?[关闭]


189

我处于我们选择使用GWT实施的项目的开始/中期。是否有人在使用GWT(和GWT-EXT)时遇到无法克服的重大陷阱?从性能角度来看如何?

我们已经看到/听到的几件事包括:

  • Google无法将内容编入索引
  • 一般而言,CSS和样式似乎有些不稳定

寻找关于这些项目的任何其他反馈。谢谢!


4
最近,我发现一些基于GWT的网站可以正确显示在我的Google搜索结果中,即使底层html不包含我要搜索的信息(examples.roughian.com也包含其中几种此类结果)。看来Google索引器必须进行一些智能的javascript渲染,以便找出所有内容加载后在页面上实际显示的内容。
StriplingWarrior

Answers:


231

首先,我是GWT的忠实拥护者,但是是的,有很多陷阱,但是大多数(即使不是全部)我们都能克服:

问题:编译时间长,随着项目的增长,编译所需的时间也会增加。我听说有20分钟的编译报告,但我的平均水平约为1分钟。

解决方案:将您的代码分成单独的模块,并告诉ant仅在更改时才构建它。同样,在开发过程中,仅通过构建一个浏览器就可以大大加快编译速度。您可以通过将其放入.gwt.xml文件中来实现此目的:

<set-property name="user.agent" value="gecko1_8" />

其中gecko1_8是Firefox 2+,即ie6是IE等。


问题:托管模式非常慢(至少在OS X上),并且与在编辑JSP或Rails页面之类的内容并在浏览器中刷新时获得的“实时”更改相差甚远。

解:您可以为托管模式提供更多的内存(我通常使用512M),但是它仍然很慢,我发现一旦您对GWT足够好就可以停止使用它。您进行了大量更改,然后仅针对一个浏览器进行编译(通常需要20秒钟的编译时间),然后在浏览器中单击刷新。

更新:对于GWT 2.0+,这不再是问题,因为您使用了新的“开发模式”。基本上,这意味着您可以直接在您选择的浏览器中运行代码,因此不会损失速度,而且您可以对它进行调试/检查等。

http://code.google.com/p/google-web-toolkit/wiki/UsingOOPHM


问题: GWT代码是Java,与布局HTML页面的思路不同,这使得采用HTML设计并将其变成GWT变得更加困难

解决方案:您再次习惯了这一点,但是不幸的是,将HTML设计转换为GWT设计总是比将HTML设计转换为JSP页面的速度慢。


问题: GWT需要花些时间来解决,它还不是主流。这意味着大多数加入您的团队或维护您的代码的开发人员将不得不从头开始学习它。

解决方案: GWT是否会起飞还有待观察,但是如果您是一家由谁来雇用的公司,那么您始终可以选择了解GWT或想要学习GWT的人员。


问题:与jQuery或纯JavaScript相比,GWT是一把大锤。要使其发生,需要花更多的时间进行设置,而不仅仅是添加一个JS文件。

解决方案:将jquery之类的库用于适合它们的较小,简单的任务。当您想在AJAX中构建真正复杂的东西,或者需要通过RPC机制来回传递数据时,请使用GWT。


问题:有时为了填充GWT页面,您需要在页面首次加载时进行服务器调用。用户在获取所需数据时坐在那里观看加载符号可能会很烦人。

解决方案:对于JSP页面,您的页面在变为HTML之前已经由服务器呈现,因此您实际上可以随后进行所有GWT调用,并将它们预加载到页面上以进行即时加载。详情请看这里:

通过预先序列化GWT调用来加快页面加载速度


我从来没有遇到过CSS样式外框,自定义样式或自定义样式的问题,所以我不知道这是陷阱是什么意思?

关于性能,我总是发现,一旦编译的GWT代码很快,并且AJAX调用几乎总是小于刷新整个页面,但这并不是GWT真正独特的,尽管如果使用JAVA后端非常紧凑。


1
我们遇到了几个问题,其中各种样式/定位命令似乎没有“占据”地位-样式应在其应有的位置未使用,或者元素的大小似乎忽略了将其设为100%的请求。与许多常规CSS挑战一样-可能会出现很多用户错误!
agartzke

@agartzke是的,这是适合您的CSS,它与GWT无关。这就是为什么我们聘请高技能的设计师为我们做这种事情的原因。在4种不同的浏览器中正确实现它绝非易事。
rustyshelf

1
今年晚些时候将推出许多新功能,这些功能将大大改善这些问题。进程外托管模式(OOPHM),CssResource(样式表混淆/最小化),UiBinder(又称为“声明性UI”)。
Mark Renouf

我非常期待2.0,但是我不得不不同意GWT是大锤。如果是这样的话,那么jQuery和JavaScript充其量就是最好的选择。我的观点是我无法重复使用,最终会复制粘贴很多东西(例如:4页的文本框在每个地方的行为都相同)。这并不是说您应该将所有旧应用程序扔掉。我几乎不会使用GWT向现有的html / js应用程序添加功能。CSS资源也在孵化器中,我喜欢它们:stackoverflow.com/questions/1066250/gwt-html-file-with-css/…
克里斯·鲁法洛

2
您可以像重用GWT一样重用JQuery,我认为这不是一个有效的参数。它们都支持继承,然后都可以打包以供重用(GWT的.jar文件,JQuery的.js文件)。我坚持我所说的GWT是一把大锤,您必须用Java编写代码,必须对其进行编译,还有很多需要管理的东西。如果您想打碎砖墙,请选择大锤。这不是关键,这是有道理的。适合正确工作的正确工具。
rustyshelf

54

我们已经与gwt合作了将近2年。我们吸取了很多教训。这是我们的想法:

  1. 不要使用第三方窗口小部件库,尤其是gwt-ext。它将破坏您的调试,开发和运行时性能。如果您对这种情况有疑问,请直接与我联系。

  2. 使用gwt仅填充应用程序的动态部分。因此,如果您与许多字段进行复杂的用户交互。但是,请勿使用其随附的面板。查看您现有的库存设计师提供的页面。找出包含应用程序控件的区域。将这些控件附加到onModuleLoad()中的页面。这样,您可以使用设计师的标准页面,也可以在gwt之外进行所有样式设置。

  3. 不要将整个应用程序构建为一个标准页面,然后再动态构建所有片段。如果您按照我在项目2中的建议进行操作,则无论如何都不会发生。如果您动态构建所有内容,则将破坏性能,并消耗大量内存用于中型或大型应用程序。另外,如果您按照我的建议进行,后退按钮将非常有用,搜索引擎索引编制也将如此。

其他评论者也提出了一些好的建议。我使用的经验法则是像创建标准网页一样创建页面。然后切出需要动态变化的部分。将其替换为具有ID的元素,然后用于RootPanel.get( id ).add( widget )填充这些区域。


我在stackoverflow.com/q/10025656/138585上提出了有关您答案的问题。如果您可以看看,我将不胜感激。
Elad 2012年

20

我们遇到的陷阱:

  • 虽然使用GWT EXT之类的东西可以使您受益匪浅,但是只要您在JavaScript库顶部使用这种薄胶合板,就会失去调试的能力。我不止一次地把头撞在桌子上,因为我无法检查(在IntelliJ调试器内部)GWT EXT表类中发生了什么……您所看到的只是它是一个JavaScriptObject。这使得很难找出出了什么问题...

  • 您的团队中没有知道CSS的人。从我的经验来看,该人不是专家也没关系...只要他具备一些良好的工作知识,并且在必要时知道适用于Google的正确术语就足够了。

  • 跨浏览器调试。密切注意进程外托管模式[ 1 ] [ 2 ] [ 3 ],希望它能进入GWT 1.6 ...现在,您只需要使用托管模式即可解决问题,然后使用“编译/浏览”按钮,您可以在其中使用其他浏览器。对我而言,在Windows上工作,这意味着我可以在FireFox中查看我的工作,并使用FireBug进行调整并改善性能。

  • IE6。令人惊讶的是,不同的IE 6将如何渲染事物。我采用了根据浏览器将样式应用于最外面的“视口”的方法,以便可以使用如下CSS规则:

    .my-style { /* stuff that works most everywhere */ }
    
    .msie6 .my-style { /* "override" so that styles work on IE 6 */ }

最后,请确保使用可以帮助您的编辑器。我使用IntelliJ-它有很多GWT智能设备。例如,如果我尝试使用JRE仿真未处理的类,它会告诉我;如果我为小部件指定了一种样式,而我尚未定义该样式,则代码会散乱地显示红色...或者,当查看CSS时,它将告诉我何时在单一规则。(我还没有尝试过,但是我知道版本8甚至提供了更好的GWT支持,例如使“本地”和“异步” RPC接口和实现保持同步。)


18

GWT 2.0有望在未来几个月内问世,它解决了许多讨论的问题。

  • 使用类似html / xml的语法创建布局
  • 动态脚本加载-最初仅下载必需的JS。其余的将根据需要下载
  • 浏览器内托管模式-这可以解决所讨论的托管模式速度问题以及其他好处
  • “编译器优化”-希望编译速度更快

Google I / O上的GWT 2.0预览视频


15

不是“无法克服”,而是一些基本的痛苦。

日期处理:

GWT使用不推荐使用的方法java.util.Date,在客户端处理日期时可能导致意外行为。java.util.CalendarGWT不支持。更多信息在这里

相关问题示例:


1
两年后,情况依然如此。在客户端执行日期数学仍然很烦人。
约瑟夫·拉斯特

问题是从java.util.CalendarJavaScript 的翻译(编译)。您还可以查看GWT的类CalendarUtil如何在GWT中使用java.util.Calendar如何在Java GWT中进行日历操作?如何在日期中增加天数?。干杯;)
olibre

10

我将在已经提到的几点上添加一些要点:

  • 数据绑定/验证。GWT没有开箱即用的数据绑定/验证支持,尽管该领域有一些项目开始出现。您会发现自己在写很多这样的东西:
TextField fname,faddress;
...
fname.setText(person.getName());
faddress.setText(person.getAddress());
...
  • 延迟加载。由于gwt在客户端,因此延迟加载实际上不是一种选择。您必须精心设计RPC和域对象,以便
    • 发送所有需要的对象数据
    • 避免急于获取您的所有数据
    • 您还必须确保不会发送代理/不可序列化的对象。hibernate4gwt可以帮助您解决这些问题。
  • UI设计。用Java(面板,按钮等)可视化UI比使用HTML更加困难。
  • 历史支持。GWT没有附带“历史记录”子系统,也没有附带任何用于提供精美url或全状态书签的子系统。您必须自己动手(尽管它支持历史记录令牌,这是一个开始)。所有AJAX工具包AFAIK都会发生这种情况。

恕我直言,GWT缺少针对该“线程”中提到的所有问题的开箱即用支持的框架。


GWT确实附带了历史记录系统,例如History.newItem(“ myItem”,false);。会将#myItem放在url中,以便于添加书签。要处理使用您的应用加载书签的人,只需使用History.addValueChangeHandler(myHandlerMethod);
Ztranger

它本身不是一个历史系统,它只是一种将令牌写入URL并处理令牌更改通知的机制。您仍然必须编写所有应用程序代码来处理历史记录更改。
Miguel Ping 2009年

9

我现在正在开发一个项目,该项目使用EXT GWT(GXT),不要与GWT EXT混淆。有所不同,EXT GWT是由ExtJS编写JavaScript库的公司实际生产的。GWT EXT是ExtJS库的GWT包装器。GXT是本地GWT。

无论如何,GXT仍然有些不成熟,缺乏我认为GWT EXT拥有的坚实社区。但是,未来将是GXT,因为它是本地的GWT,实际上是由制作ExtJS的公司开发的。由于在ExtJS库上更改了许可证,GWT EXT受到了一定程度的损害,从而减缓了GWT EXT的开发。

总的来说,我认为GWT / GXT是开发Web应用程序的不错的解决方案。实际上,我非常喜欢托管的开发模式,它使事情变得轻松快捷。您还将获得调试代码的好处。使用JUnit进行单元测试也相当可靠。我还没有看到一个很棒的JavaScript单元测试框架,我觉得它足够成熟,可以测试企业应用程序。

有关GWT EXT的更多信息,请访问:http : //gwt-ext.com/

有关EXT GWT(GXT)的更多信息,请访问:http : //extjs.com/products/gxt/


1
由于这个问题仍然很活跃并且正在获得投票,我想我将提供更新。我完全放弃了GXT(2009-2010),因为我不喜欢Sencha Inc的业务实践。然后我随后放弃了GWT。只要我讨厌它,我就讨厌使用JavaScript。也就是说,直到我真正理解它为止。现在,我几乎专门在Node.js / AngularJS中进行开发。在Bootstrap 3中折腾,您可以比GWT花费更少的时间创建一个很棒的网站。未来是JavaScript,越早拥抱它,您将成为更好的开发人员。
JP理查森

您对此有何看法?(只是好奇)谢谢。
Akos Lukacs

1
@AkosLukacs我仍然可以报告我正在使用JavaScript并喜欢它的每一点!就像我说的那样,我曾经讨厌JavaScript,因此为什么选择GWT。现实情况是,如果您要进行任何Web开发,那么您将无法避免使用JavaScript,因此您最好也接受它。我几乎已经适应了使用JavaScript进行所有操作(使用Go略走了弯路)。就我的堆栈而言,我使用Node.js / Express / React。我曾经是Angular的忠实拥护者,并且非常了解它,但是由于学习曲线太高,我不建议向JS入门的任何人推荐Angular1.x。
JP理查森(Richardson)

5

没有我无法轻松克服的重大陷阱。大量使用托管模式。当您使用GWT-ext时,您几乎不需要自己接触CSS,除非您想要调整现成的外观。

我的建议是在库中使用GWT的“本机”窗口小部件,这些窗口部件在功能上很接近。

重新搜索引擎索引编制:是的,站点通常不会具有可导航的URL(除非您仅将窗口小部件添加到常规网站的元素中)。您可以执行历史记录后退/转发功能。


4

不久前,我在一个项目中一起使用了GWT和GWT-ext。我发现随着Web开发的进行,这种体验相当流畅,但是我的建议是:

不要将GWT本机窗口小部件与EXT小部件混合使用。真是令人困惑,因为通常名称是相同的(GWT.Button或GWText.Button?)

我发生的一件事实际上使代码变得比我想要的复杂,这是我想要的面板是a)可动态更新的b)可级联的

GWT本机面板是动态的,Ext面板是可级联的。解?包裹GWTExt面板的GWT.VerticalPanel。:)

但是,它有效。;)


4

我第二次接受ykagano的评论,最大的缺点是失去了MVC中的V。尽管您可以将真正的ui类与其余的客户端代码分开,但是您不能轻易使用由图形/网页设计人员生成的HTML页面。这意味着您需要开发人员才能将HTML转换为Java。

获取所见即所得的ui编辑器,它将为您节省大量时间。我使用GWTDesigner。

GWT的最大优势在于能够忘记跨浏览器的问题。它不是100%,但是可以消除几乎所有的痛苦。结合托管模式调试的优势(相对于Firebug而言,Firebug出色但与Java调试器不同)使开发人员在生成复杂的Ajax应用程序方面具有巨大优势。

哦,它的运行速度很快,尤其是在使用gzip过滤器的情况下。


1
不知道gzip过滤器-感谢您的提示。
agartzke

4

稍微偏离主题,但是在您遇到持续问题的情况下,irc上的#gwt频道非常有帮助。


通道在哪个IRC网络上?
tovare

它在freenode(irc.freenode.net)上。它实际上是## gwt,但是如果您输入#gwt,您将被转发到它。
stian

4

GWT非常简单直观。

特别是随着UIBinder的发布,允许GWT小部件以XML进行布局,然后以Java进行后台编码。

因此,如果您使用了其他Ajax或Flash设计工具或Silverlight等,则GWT非常容易学习。

如果不是陷阱,最大的障碍就是GWT RPC。您之所以希望使用GWT,是因为GWT异步RPC。否则,为什么不仅仅依靠CSS来格式化页面呢?

GWT RPC是使您的服务器无需刷新页面即可刷新服务器上数据的元素。这是对诸如股票绩效监控(或美国当前的国家和公共债务或全球第二次流产的未出生婴儿的数量)之类页面的绝对要求。

GWT RPC需要花些力气来理解,但经过几个小时,它应该会变得很清楚。

除此之外,在努力学习GWT RPC之后,您最终发现您无法将JSP用作RPC的服务组件,除非...我的博客上有一个8部分(我认为)系列文章,介绍如何使用JSP。作为GWT RPC服务程序。但是,由于您只想问一些问题而不是寻求答案,所以我将停止发布我的博客。

所以。我非常相信,使用GWT的最困难的障碍/陷阱是找出如何正确部署GWT异步RPC以及如何使其能够使用JSP服务程序。


我想链接到您的博客文章;)
ms-tg 2012年

h2g2java.blessedgeek.com
Blessed Geek

3

我们很难将GWT代码库与从Web设计人员那里获得的HTML Web模板(用于GWT管理的具有特定div ID的静态HTML页面)相结合。至少在使用它时,我们无法使GWT与我们网站中未使用GWT编码的部分集成。我们最终使它工作了,但这是一个很大的漏洞。


3
  • 您必须为每个服务接口编写的Async接口看起来像是GWT编译器可能自动生成的。
  • 大型项目的编译时间变长

但是对于大型Javascript项目,这是最佳选择


3

GWT 2.4已修复了许多上述问题,并且一个很棒的小部件库刚刚从Beta(Ext GWT 3.0.4 aka GXT)中问世,它完全用GWT编写,而不是JS库的包装。

剩余的疼痛:

  • 缺少CSS3选择器支持,在某些情况下可以使用“ literal()”来解决。
  • 缺乏对CSS3和现代浏览器事件(例如transitionEnd)的支持
  • 缺少Java Calendar类支持(很多年后)。
  • 缺乏对JUnit4的支持(5年以上)。
  • Google GWT团队缺乏清晰的路线图和发布时间表。

2

关于GWT 2.4,在调试GWT时使用Firefox,它比使用chrome更快。而且,如果仅使用Firefox,请考虑将这一行放入project.gwt.xml文件中

<set-property name="user.agent" value="gecko1_8" />

另外,如果您使用的是eclipse,则在参数-> VM参数下添加以下内容:

-Xmx512m -XX:MaxPermSize = 1024m -XX:PermSize = 1024m

您可以划分服务器和客户端,并在参数->程序参数下使用以下内容: -codeServerPort 9997 -startupUrl http:// yourserver / project -noserver

另外,为防止每次更改时刷新服务器,请使用JRebel http://zeroturnaround.com/blog/how-to-rock-out-with-jrebel-and-google-web-toolkit-gwt/ ,这是一个实时演示 http://www.youtube.com/watch?feature=player_embedded&v=4JGGFCzspaY


1

一个主要的陷阱是,有时您需要为最终成为HTML元素的对象显式分配一个ID,以便能够使用某些CSS样式。例如:当给tabPanel的tabBar分配了一个ID并且您在那个elementId上指定了:hover时,GWT TabPanel只会将:hover悬停在tabBarItems上。

我在其他地方写了关于GWT的其他一些缺点,但是这些问题已经被rustyshelfs答案:)涵盖了。


通常,如果您打算使用Selenium进行测试,则分配ID并不是一件坏事。
Petteri Hietavirta

1

我最近在GWT上做了很多工作,这是我不得不说的:

  1. CSS样式有时仅是棘手的,使用IE中的IE开发人员工具和Firefox中的萤火虫来弄清楚到底发生了什么,您将清楚地知道需要更改哪些CSS。
  2. 您可以使用技巧来让Google将其编入索引。一个非常著名的网站是http://examples.roughian.com/,请在Google上查看其评级。一个不太知名的网站是www.salvin.in(无法拒绝提及),我将其优化为单词:salvin主页(在Google上搜索这三个单词)

我对GWT-EXT的了解不多,但是我也坚信没有必要包含第三方库。

祝您一切顺利:)


1

GWT执行浏览器嗅探而不是功能检测,并且您的应用程序将无法在某些浏览器(特别是新浏览器)上运行

以下是该问题的一些参考:

以下是有关特征检测的一些参考:

摘自JavaScript框架比较-维基百科


1

与去年发布的GWT 2.7相比,GWT团队进行了许多重大改进。GWT的一个主要缺点是,在GWT 2.6及更低版本中,编译需要花费大量时间。现在,GWT不再具有增量编译功能,它是超级快的,并且仅编译更改。

GWT 2.7现在具有(Source):

  • 增量构建现在只需几秒钟
  • 更紧凑,更准确的SourceMap
  • GSS支持
  • JSInterop
  • 出色的JavaScript性能
  • 较小的代码大小

1

获得可靠事实的最佳方法是通过gwt调查。。GWT的最大问题之一一直是编译时间长。幸运的是,它的改进非常快,因此在不久的将来不会成为一个重大问题。另一个陷阱是,GWT的复杂性大大提高,因为Java是一种更复杂的语言,可以在每一步中抵制不良编码。另外,编译会添加一层。例如,js interop需要一些样板。根本的问题是,GWT并非设计得很简单。它是专为极其复杂的Web应用程序而设计的,整个社区始终将优先级,性能,代码质量,体系结构等置于优先于简单编码的位置。
请记住,您可以随时在GWT中使用js,因此,如果您在GWT中苦苦挣扎,请考虑使用js。归根结底,GWT是js,因此您可以在GWT中做任何可以在js中进行的操作。实际上,大多数GWT项目都使用js。问题在于,GWT非常复杂。尽管如此,有时还是值得额外的复杂性。

值得注意的是,GWT 3.0将带来巨大的改进。


0

重用RPC服务对象。
它会导致比赛条件出现类似应用程序挂起的症状。


安东尼,您可以详细说明一下。我正在对服务器进行RPC调用,并且期望GUI能够响应,直到请求返回但它似乎挂起为止。
Brett Hannah

0

我遇到的陷阱1. superdev模式下的不同行为。例如,Someclass.class.getName()在Superdev模式下可以正常工作,并返回该类的完全限定名称。在生产模式下,此功能无效。

  1. addWidget(widget)将调用小部件的removefromparent()

0

GWT是一项技术杰作。它将客户端和服务器编程结合在一起,使其成为一个一致的应用程序-在“分层”之前编写软件的方式以及应编写的方式。它消除了不同的技能,团队成员之间的沟通不畅以及整个Web设计阶段:艺术和程序设计。它是您最接近移动设备(例如Android开发)的设备。实际上,GWT旨在生成不同的本机UI,而不仅仅是HTML。尽管要确保这种解耦需要大量的纪律,但要使您的内层与显示无关。

您应该避免的第一个错误是我使用了四年的时间才意识到,它使用的是EXT-GWT aka GXT和SmartGWT之类的第三方扩展。开始使用他们漂亮的桌面化小部件而不是投资自己的样式是非常诱人的,但是直到我最终受够了我才能告诉我SmartGWT有多少问题。简而言之,它将核心GWT功能集冻结在某个(相当过时的)级别上,然后在其之上进行构建。还请记住,当今精致的桌面外观看起来很愚蠢,更不用说性能低下,大量错误和兼容性功能-尤其是在移动设备上。您希望尽可能靠近本机浏览器控件,即下拉菜单显示为本机<select>元素,而不是某些自定义控件。

由于移动趋势的发展,整个UX变得越来越简单和扁平,因此您无需花太多时间来设计外观鲜明的应用程序。尽管如果您想获得“ 3D”外观,也可以使用渐变色。CSS3使一切变得容易,并且GWT以不同于原始CSS的优雅的面向对象方式包装了它。因此,不要因为在GWT Showcase中看到相当丑陋的准系统控件而灰心。GWT团队故意不提供任何样式,因为它是开发人员的工作。

剩下的就是强类型Java中带有精美简洁API的常规浏览器编程。但是,当然不要忘记您的代码在浏览器中运行,因此所有调用都是异步的,例如,您不能在循环中调用GWT-RPC方法(以填充某些列表),但是如果您需要这样做,则需要递归地链接它们情况。

有一些自称的“反模式”,例如不使用GWT-RPC。到目前为止,对我来说一直很好:十年来。简洁是关键。我什至不会为牺牲代码的优雅性和可维护性而牺牲一些性能。此外,在数据库中这不是瓶颈所在。当然,请注意您要发送给客户端多少数据。

而且,如果您找不到或设置现有小工具的样式-阅读丰富的HTML5元素集,则始终可以包装第三方小工具。我使用流行的jQuery FullCalendar做到了。根本不是火箭科学。诸如Google Maps和Google Charts之类的所有其他东西都有半官方的GWT包装器。

GWT非常完美。它没有得到足够的热爱的唯一原因是,仍然影响行业的早期互联网采用者并不是来自计算机科学和面向对象的语言来欣赏它们。他们具有艺术背景(Photoshop / WordPress)或网络背景(Perl / Python)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.