Vaadin和DukeScript中的Hello World

从表面上看， Vaadin和GWT通常与DukeScript有很多共同点。两者都致力于为Java开发人员提供面向浏览器的解决方案，并且由于其对Maven的原生支持而与IDE集成良好。但是，这些方面实际上是它们共有的全部。从编程模型到框架如何处理代码，再到应用程序如何部署，Vaadin和DukeScript完全不同。

为了真正理解这些观点，让我们开始研究Vaadin和DukeScript的编程模型。尽管您使用Java编程的方式明显不同，但是每个人都有一个非常好的动机，这对适用的目标开发人员群体来说是非常有意义的。从这个意义上讲，在这个故事中没有“更好”或“更糟”，只有两种不同的方法使Java开发人员能够访问各种设备上基于浏览器的平台。

在Vaadin中，对于开发人员群体而言，主要的人群是Java Swing开发人员，他们希望将其Java桌面业务应用程序移至Web和移动设备。因此，Vaadin提供了与Swing相当的组件模型。提供了一系列的GUI组件，例如“标签”和“按钮”，以及许多更复杂的组件，包括各种图形和其他令人印象深刻的与UI相关的功能，以及“布局”和“事件”，再次让人想起Swing。

这就是Vaadin中典型的“ Hello World”场景。注意GUI组件，“ VerticalLayout”和“ ClickEvent”：

瓦丁的Hello World

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;@Theme("mytheme")
@Widgetset("org.hw.vaadin.MyAppWidgetset")
public class MyUI extends UI {@Overrideprotected void init(VaadinRequest vaadinRequest) {final VerticalLayout layout = new VerticalLayout();layout.setMargin(true);setContent(layout);Button button = new Button("Click Me");button.addClickListener(new Button.ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {layout.addComponent(new Label("Thank you for clicking"));}});layout.addComponent(button);}@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)public static class MyUIServlet extends VaadinServlet {}
}

在上面，还请注意用于与浏览器相关的功能（即主题和窗口小部件集）的注释，以及与Servlet容器集成的Java EE相关的注释，指出Vaadin是与客户端/服务器相关的框架。

与Vaadin专注于类似Swing的开发模型相反，DukeScript具有KnockoutJS开发模型，DukeScript团队认为该模型是更先进和现代的方法。 KnockoutJS开发模型将视图与逻辑完全分开。可以在甚至创建视图之前开发和测试逻辑，如此处所述。尽管Vaadin应用程序也可以进行单元测试，但使用Vaadin可以测试视图（例如，“ clickButton”），而使用DukeScript可以测试逻辑（例如，“ addUser”）。使用DukeScript，开发人员不再负责应用程序的布局和可用性方面，而专家可以代替。

就像Swing知识对使用Vaadin有所帮助（虽然不是必需的）一样，KnockoutJS知识对DukeScript的使用尽管不是必需的也是有用的。但是，由于Java开发人员可能比KnockoutJS更熟悉Swing，因此Java开发人员可能需要花更多的时间来熟悉KnockoutJS，然后再开始使用DukeScript。

另一方面，DukeScript编程模型使得可以将应用程序前端的开发委派给特定于前端的编码器，即委托给使用KnockoutJS进行前端开发的开发人员。为了证明这一点，请阅读 DukeScript团队的Anton Epple 撰写的有关JavaCodeGeeks的最新文章。另一方面，在这种完全分离的场景中，可以将绑定本身视为Java编程任务的一部分，即Java开发人员会将这些绑定添加到从提出了该观点的前端开发人员那里获得的标记中。一起。

现在，让我们转到DukeScript中的典型“ Hello World”场景。如上所述，视图和业务逻辑被拆分为单独的文件，一个使用HTML，另一个使用Java。这是HTML端，与KnockoutJS.com的“ Hello World”场景相同：

DukeScript中的“ Hello World”视图

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

这是提供上述属性的双向数据绑定的业务逻辑，通常使用KnockoutJS开发模型中JavaScript，但由于DukeScript，它是用Java表示的：

DukeScript中“ Hello World”的业务逻辑

import net.java.html.json.ComputedProperty;
import net.java.html.json.Model;
import net.java.html.json.Property;@Model(className = "Data", targetId = "", properties = {@Property(name = "firstName", type = String.class),@Property(name = "lastName", type = String.class)
})
final class DataModel {@ComputedPropertystatic String fullName(String firstName, String lastName) {return firstName + " " + lastName;}private static Data ui;static void onPageLoad() throws Exception {ui = new Data();ui.setFirstName("Planet");ui.setLastName("Earth");ui.applyBindings();}
}

与Vaadin一样，DukeScript“ Hello World”场景也使用了注释。每当在开发过程中保存Java源文件时，这些批注就会生成带有上面引用的所有getter和setter的POJO。

这两个“ Hello World”场景都针对浏览器。他们如何做到这一点，即如何处理上面的代码并使之可在浏览器中使用，是本系列下一篇文章的主题。但是，目前，通过阅读本文，您应该对这两个框架的编程模型的差异有一个很好的了解。

通过使用Vaadin，您可以访问一系列用Java表示的GUI组件，这些GUI组件排列在与Swing相类似的组件树中。使用DukeScript，您可以完全访问JavaScript生态系统为业务逻辑提供的前端和整个Java生态系统所提供的所有功能，并且特别关注KnockoutJS的双向数据绑定功能，以将视图连接到业务逻辑。

感谢Vaadin的Matti Tahvonen和DukeScript的Anton Epple对本文进行了评论并做出了贡献。