為什么要浪費(fèi)時(shí)間學(xué)習(xí)新的語(yǔ)言和框架，還冒著隨時(shí)可能被淘汰的風(fēng)險(xiǎn)？如果Java可以直接在瀏覽器中運(yùn)行呢？本文，高級(jí)全棧Java程序員Niels Gorisse介紹了VertxUI的優(yōu)勢(shì)。
就像大多數(shù)資深的Java程序員一樣，我在2000年之前寫了第一個(gè)JavaScript代碼行。如今，經(jīng)過(guò)十多年的瀏覽器革命，ECMAscript5已成為標(biāo)準(zhǔn)：超過(guò)97％的瀏覽器在使用中支持它。JavaScript雖有不足，但可以編寫一段可在任何地方工作的JavaScript代碼。 JavaScript正在成為一個(gè)體面的語(yǔ)言，包含類，異常，lambda表達(dá)式，工作線程，包裝，注釋，庫(kù)管理等等。
如今，JavaScript許多新穎的功能已經(jīng)添加到Java中了。在幾乎每一種情況下，這意味著它多年來(lái)已經(jīng)變得相當(dāng)穩(wěn)定和成熟了：
VertxUI和Fluent
VertxUI是一個(gè)100％的Java庫(kù)。由于純HTML和CSS足以構(gòu)建網(wǎng)頁(yè)，VertxUI除了普通訪問(wèn)瀏覽器外，還提供了一種稱為Fluent的輕量級(jí)流暢的API，它簡(jiǎn)化了僅使用代碼構(gòu)建HTML和CSS。Fluent使用與HTML標(biāo)簽對(duì)應(yīng)的方法名稱，這些方法的第一個(gè)參數(shù)總是一個(gè)CSS類。所以VertxUI沒(méi)有任何模板，都是代碼。使用HTML，我們定義一個(gè)Bootstrap菜單，如下所示：
變量主體是來(lái)自Fluent類的靜態(tài)導(dǎo)入。同樣，程序員也可以使用控制臺(tái)，文檔和窗口的方法。
實(shí)際上，Java源代碼的代碼數(shù)量略高于上面的HTML代碼片段。它還顯示了如何在單擊菜單項(xiàng)時(shí)調(diào)用Java代碼。在我們的示例中，控制器（controller :: someMethod）的一個(gè)實(shí)例負(fù)責(zé)處理事件。
雖然在前面的代碼片段中沒(méi)有顯示，但是還有一個(gè)類Store，維護(hù)一個(gè)類Model的列表。 這種傳統(tǒng)的MVC（模型 - 視圖 - 控制器）設(shè)置并不是必需的，但是在編寫JUnit測(cè)試時(shí)可能會(huì)很有用。
當(dāng)然，程序員也可以使用lambda表達(dá)式。例如，我們創(chuàng)建一個(gè)Bootstrap表單。方法.css（）和.att（）也用于顯示它們的工作原理。這基本上需要編寫HTML和CSS：
所需HTML代碼段：
使用Fluent收集一些代碼：
View on … model
當(dāng)程序員要更改DOM時(shí)，F(xiàn)luent的真正實(shí)力就顯示出來(lái)了。更改盡可能高效地更新，與ReactJS（來(lái)自Facebook）相當(dāng)，這確保當(dāng)一個(gè)在線狀態(tài)更改時(shí)，其他列表不會(huì)被完全重新呈現(xiàn)。
程序員可以使用.add（）方法創(chuàng)建一個(gè)ViewOn <Model>。這有兩個(gè)參數(shù)：一個(gè)初始模型（或一個(gè)模型的引用）和一個(gè)將該模型轉(zhuǎn)換為Fluent對(duì)象的方法。例如：
result
code：
你可能注意到了syncPerson（）方法。這將重繪所有具有指向Person實(shí)體鏈接的ViewOn對(duì)象。請(qǐng)注意，編寫復(fù)雜的用戶界面（如向?qū)В┓浅Ｈ菀?，因?yàn)橹皇锹暶餍缘貙懴耈I的外觀即可，甚至可以嵌套ViewOn對(duì)象。
所有代碼都是純Java，所以如果你喜歡流，那也沒(méi)有問(wèn)題。 tbody——就像許多其他容器（如標(biāo)簽）一樣，它需要一個(gè)CSS類和一個(gè)Fluent對(duì)象的列表或流。
View on … state
在以前的Bootstrap菜單示例中，當(dāng)程序員單擊它時(shí)，具有“active”類的CSS項(xiàng)目應(yīng)切換到所選項(xiàng)目。這就是我們稱之為'state'的方法，它可以方便地識(shí)別一個(gè)狀態(tài)，并將其視為一種不會(huì)被保存到數(shù)據(jù)庫(kù)中的實(shí)體，也可以使用ViewOn <>作為狀態(tài)：
JUnit - 單元測(cè)試
因?yàn)镕luent內(nèi)部有一個(gè)虛擬DOM，所以可以很容易地用于JUnit測(cè)試，而不必啟動(dòng)瀏覽器。這是非?？斓模?yàn)闆](méi)有對(duì)JavaScript進(jìn)行編譯，并且在后臺(tái)沒(méi)有啟動(dòng)和停止瀏覽器。
在下一個(gè)示例中，我們直接模擬Controller調(diào)用：
JUnit - 集成測(cè)試
隨著項(xiàng)目發(fā)展并開始使用外部JavaScript庫(kù)，集成測(cè)試越來(lái)越重要。在Fluent中，程序員可以在具有“register-and-run”構(gòu)造的瀏覽器中執(zhí)行雙語(yǔ)言測(cè)試。運(yùn)行時(shí)環(huán)境比對(duì)Selenium有更多的控制，因?yàn)榭梢栽谝粋€(gè)測(cè)試中輕松地運(yùn)行和組合JavaScript和Java。
一個(gè)Bootstrap菜單示例，我們通過(guò)直接調(diào)用controller.onMenuAbout（）來(lái)模擬一個(gè)菜單。讓我們看看前一個(gè)改變“active”類內(nèi)容的例子是否真的有效，Java到JavaScript的編譯正在發(fā)生：
請(qǐng)注意，此示例可能已被放入非DOM測(cè)試，運(yùn)行速度更快。
VertX
程序員可在任何后端軟件中運(yùn)行VertxUI，但是與VertX一起，它提供了幾個(gè)設(shè)施，如FigWheely和POJO traffic。VertxUI與VertX比簡(jiǎn)單易用：只需啟動(dòng)main（）并將瀏覽器指向http：// localhost。不必安裝任何IDE插件，也不必處理* .war或* .jar。
VertX是完全異步的，與回調(diào)類似，就像JavaScript一樣。最大的區(qū)別在于，由于Java是一種非常結(jié)構(gòu)化的語(yǔ)言，所以永遠(yuǎn)不會(huì)在JavaScript中遇到回調(diào)。當(dāng)異步發(fā)生異常時(shí)，可能會(huì)在另一個(gè)類中調(diào)用另一種方法。
VertX - FigWheely
FigWheely是VertxUI的運(yùn)行時(shí)幫助器。它通過(guò)瀏覽器保持WebSocket打開，并在服務(wù)器上更改文件時(shí)收到通知。如果已更改的文件恰好是.java文件，則圖片將重新編譯瀏覽器代碼并通知瀏覽器。
無(wú)需任何IDE插件就可以像VertxUI一樣工作，因?yàn)楫?dāng)啟動(dòng)（VertX）服務(wù)器和找到源代碼時(shí)，會(huì)發(fā)生JavaScript的編譯。在啟動(dòng)期間，也會(huì)生成一行index.html，但也可以將其關(guān)閉。
VertX - POJO
VertxUI便于服務(wù)器和瀏覽器之間的POJO流量用于ajax調(diào)用，WebSocket，sockJS和VertX事件總線。這意味著強(qiáng)類型的流量，即使在下面使用了JSON。讓客戶端和服務(wù)器使用相同的語(yǔ)言有一些不錯(cuò)的優(yōu)點(diǎn)：當(dāng)你想添加一列時(shí)，它可能只是在實(shí)體中添加一行代碼，在視圖中添加一行額外的“TD”。
無(wú)論客戶端和JavaScript語(yǔ)言將來(lái)發(fā)生什么情況，程序員都可以在非常成熟的語(yǔ)言中創(chuàng)建非常好的可測(cè)試單頁(yè)Web應(yīng)用程序，由完善的VertX服務(wù)器環(huán)境支持，使用任何很棒的CSS框架，如Bootstrap。
JavaScript和它的庫(kù)將會(huì)長(zhǎng)大，但這將需要數(shù)年時(shí)間。為什么不一次性選擇一個(gè)很好的框架，幫助編寫干凈整潔的代碼呢？VertxUI就是這么想的！
