为什么要浪费时间学习新的语言和框架，还冒着随时可能被淘汰的风险？如果Java可以直接在浏览器中运行呢？本文，高级全栈Java程序员Niels Gorisse介绍了VertxUI的优势。

       就像大多数资深的Java程序员一样，我在2000年之前写了第一个JavaScript代码行。如今，经过十多年的浏览器革命，ECMAscript5已成为标准：超过97％的浏览器在使用中支持它。JavaScript虽有不足，但可以编写一段可在任何地方工作的JavaScript代码。 JavaScript正在成为一个体面的语言，包含类，异常，lambda表达式，工作线程，包装，注释，库管理等等。

       如今，JavaScript许多新颖的功能已经添加到Java中了。在几乎每一种情况下，这意味着它多年来已经变得相当稳定和成熟了：

VertxUI和Fluent

       VertxUI是一个100％的Java库。由于纯HTML和CSS足以构建网页，VertxUI除了普通访问浏览器外，还提供了一种称为Fluent的轻量级流畅的API，它简化了仅使用代码构建HTML和CSS。Fluent使用与HTML标签对应的方法名称，这些方法的第一个参数总是一个CSS类。所以VertxUI没有任何模板，都是代码。使用HTML，我们定义一个Bootstrap菜单，如下所示：

       变量主体是来自Fluent类的静态导入。同样，程序员也可以使用控制台，文档和窗口的方法。

       实际上，Java源代码的代码数量略高于上面的HTML代码片段。它还显示了如何在单击菜单项时调用Java代码。在我们的示例中，控制器（controller :: someMethod）的一个实例负责处理事件。

       虽然在前面的代码片段中没有显示，但是还有一个类Store，维护一个类Model的列表。 这种传统的MVC（模型 - 视图 - 控制器）设置并不是必需的，但是在编写JUnit测试时可能会很有用。

       当然，程序员也可以使用lambda表达式。例如，我们创建一个Bootstrap表单。方法.css（）和.att（）也用于显示它们的工作原理。这基本上需要编写HTML和CSS：

所需HTML代码段：

使用Fluent收集一些代码：

View on … model

       当程序员要更改DOM时，Fluent的真正实力就显示出来了。更改尽可能高效地更新，与ReactJS（来自Facebook）相当，这确保当一个在线状态更改时，其他列表不会被完全重新呈现。

       程序员可以使用.add（）方法创建一个ViewOn <Model>。这有两个参数：一个初始模型（或一个模型的引用）和一个将该模型转换为Fluent对象的方法。例如：

result

code：

       你可能注意到了syncPerson（）方法。这将重绘所有具有指向Person实体链接的ViewOn对象。请注意，编写复杂的用户界面（如向导）非常容易，因为只是声明性地写下UI的外观即可，甚至可以嵌套ViewOn对象。

       所有代码都是纯Java，所以如果你喜欢流，那也没有问题。 tbody——就像许多其他容器（如标签）一样，它需要一个CSS类和一个Fluent对象的列表或流。

View on … state

       在以前的Bootstrap菜单示例中，当程序员单击它时，具有“active”类的CSS项目应切换到所选项目。这就是我们称之为'state'的方法，它可以方便地识别一个状态，并将其视为一种不会被保存到数据库中的实体，也可以使用ViewOn <>作为状态：

JUnit - 单元测试

       因为Fluent内部有一个虚拟DOM，所以可以很容易地用于JUnit测试，而不必启动浏览器。这是非常快的，因为没有对JavaScript进行编译，并且在后台没有启动和停止浏览器。

       在下一个示例中，我们直接模拟Controller调用：

JUnit - 集成测试

       随着项目发展并开始使用外部JavaScript库，集成测试越来越重要。在Fluent中，程序员可以在具有“register-and-run”构造的浏览器中执行双语言测试。运行时环境比对Selenium有更多的控制，因为可以在一个测试中轻松地运行和组合JavaScript和Java。

       一个Bootstrap菜单示例，我们通过直接调用controller.onMenuAbout（）来模拟一个菜单。让我们看看前一个改变“active”类内容的例子是否真的有效，Java到JavaScript的编译正在发生：

请注意，此示例可能已被放入非DOM测试，运行速度更快。

VertX

       程序员可在任何后端软件中运行VertxUI，但是与VertX一起，它提供了几个设施，如FigWheely和POJO traffic。VertxUI与VertX比简单易用：只需启动main（）并将浏览器指向http：// localhost。不必安装任何IDE插件，也不必处理* .war或* .jar。

       VertX是完全异步的，与回调类似，就像JavaScript一样。最大的区别在于，由于Java是一种非常结构化的语言，所以永远不会在JavaScript中遇到回调。当异步发生异常时，可能会在另一个类中调用另一种方法。

VertX - FigWheely

       FigWheely是VertxUI的运行时帮助器。它通过浏览器保持WebSocket打开，并在服务器上更改文件时收到通知。如果已更改的文件恰好是.java文件，则图片将重新编译浏览器代码并通知浏览器。

       无需任何IDE插件就可以像VertxUI一样工作，因为当启动（VertX）服务器和找到源代码时，会发生JavaScript的编译。在启动期间，也会生成一行index.html，但也可以将其关闭。

VertX - POJO

       VertxUI便于服务器和浏览器之间的POJO流量用于ajax调用，WebSocket，sockJS和VertX事件总线。这意味着强类型的流量，即使在下面使用了JSON。让客户端和服务器使用相同的语言有一些不错的优点：当你想添加一列时，它可能只是在实体中添加一行代码，在视图中添加一行额外的“TD”。

       无论客户端和JavaScript语言将来发生什么情况，程序员都可以在非常成熟的语言中创建非常好的可测试单页Web应用程序，由完善的VertX服务器环境支持，使用任何很棒的CSS框架，如Bootstrap。

       JavaScript和它的库将会长大，但这将需要数年时间。为什么不一次性选择一个很好的框架，帮助编写干净整洁的代码呢？VertxUI就是这么想的！