为什么要浪费时间学习新的语言和框架,随时冒着被淘汰的危险?如果可以直接在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菜单示例,我们通过直接调用con()来模拟一个菜单。让我们看看前一个改变“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就是这么想的!

相关推荐