您可能知道，Vaadin是Java上最受歡迎的Web框架之一：

• https://zeroturnaround.com/rebellabs/java-web-frameworks-index-by-rebellabs/
• https://javapipe.com/hosting/blog/best-java-web-frameworks/

最近發布了該Web UI開發框架的新版本– Vaadin 10。

創作者稱Vaadin Flow為現代Web應用程序和網站開發的新Java Web框架（我在這里不太相信它們）。 它是Vaadin平臺的一部分，該平臺替代了另一種產品– Vaadin Framework，它使您可以使用Java上的Web組件標準來開發Web應用程序（更準確地說是Web UI）。

在這一點上，所有這些東西，包括Vaadin Bla Bla，框架，平臺等等，都必須在讀者的腦海中融合在一起。 這是怎么回事？

我們已經將Vaadin用作UI Back-office系統的CUBA平臺的一部分，并且在此期間已經積累了很多工作經驗，這就是為什么我們不禁擔心其命運的原因。 以下是我對Vaadin 10的推測。

Vaadin框架

Vaadin是一家芬蘭公司，創建UI開發工具和庫。 此外，他們還創建了一個同名的Java Web開發框架。

Vaadin Framework是具有服務器端編程模型的UI框架，其中所有UI邏輯及其狀態都存在于服務器上，并且Web瀏覽器僅執行UI小部件的代碼。 實際上，這是一種瘦客戶端技術，其中的瀏覽器僅反映服務器的命令，所有事件都發送到服務器。

服務器端方法使我們忘記了開發是針對Web設計的，而是將UI開發為可直接訪問服務器上的數據和服務的桌面Java應用程序。 同時，Vaadin將同時處理瀏覽器中的UI反射和瀏覽器與服務器之間的AJAX交互。 Vaadin引擎在瀏覽器中提供應用程序服務器端用戶界面呈現，并封裝客戶端和服務器之間交換的所有詳細信息。

這種方法有很多優點：

• Java代碼更易于編寫和調試
• 您可以使用眾所周知的Java庫和工具（IDE，編譯器，測試）
• 不必開發和公開Web服務
• 解決方案更安全

缺點：

• 需要大量服務器上的內存才能進行UI表示
• 擴展解決方案比較困難
• 開發小部件時，需要開發Java API

由于這些優點和缺點，Vaadin FW牢固地固定在企業開發中，在這種情況下，負載是可以預測的，并且開發速度和簡便性比硬件和內存的成本更為重要。

Google Web Toolkit發生了什么

在Vaadin一直為廣大讀者所熟悉的時候，Vaadin FW的客戶端始終與另一種著名產品Google Web Toolkit（GWT）緊密相連。 通過這種串聯，用戶可以使用相同的語言-Java，來為它們編寫UI組件和服務器API。

過去幾年Google Web Toolkit并沒有發展壯大，自2015年以來，我們一直在等待GWT發布的GWT 3.0 / J2CL.Create 2015：

• https://www.youtube.com/watch?v=XJYNCohpxU0
• https://groups.google.com/forum/#!topic/google-web-toolkit-contributors/s_kX17Xs1S4
• https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/9Zi4-C5gpxQ

在這個停滯時期（2015-2017年），發生了一個重要事件：新的Web組件規范和Google – Polymer的另一個Web框架出現了。 顯然，這是GWT終結的開始。

應該提到的是，GWT 3是作為內部Google框架開發的，并且其開發保留在公司內部。 因此，社區無法以任何方式影響該過程或至少看不到該過程正在進行。

提到這種停滯，Vaadin團隊做出了一個艱難的決定 ，即完全放棄GWT的開發，并重寫其框架的客戶端。 這些變化不能不引起人們的注意，并使已經在Vaadin上進行開發的每個人感到恐懼。

Web組件

Web組件是一組標準。 它是由Google提供并積極推廣的，但該計劃已在Mozilla中得到支持。 實際上，這些是用于創建Web UI組件的技術，以便它們可以支持行為和表示形式封裝。 主要優勢是可重用性。

參見https://www.webcomponents.org

基本概念：

• 自定義元素–用于創建自己HTML元素的API
• Shadow DOM – HTML組件封裝的工具，其可視化表示與全局CSS規則隔離。 一言以蔽之，您可以制作一個組件，例如訂單表單，并且不必擔心表單樣式會由于頁面的全局CSS規則而被破壞。
• HTML模板–在HTML文檔中放置包含DOM草稿元素的被動塊的機會。 這樣的塊由瀏覽器解析，但是不呈現并且不執行其代碼。 建議將它們用作數據渲染的模板。
• HTML導入–一種特殊語法，用于將任何HTML文檔作為具有其所有布局，樣式和JavaScript代碼的模塊導入。

例如，如果我們查看YouTube DOM樹，則會注意到“自定義元素”和“影子DOM”的用法：

所有這些使您能夠編寫現代的Web UI組件。

在這里，我應該承認，瀏覽器的支持還遠遠不夠完美，例如，對于Edge，您仍然需要polyfills 。

聚合物

Polymer是一個超出Web組件標準的很小的庫，旨在簡化其用法。 例：

// Import corresponding components import '@polymer/paper-checkbox/paper-checkbox.js'; import {PolymerElement, html} from '@polymer/polymer';// Determine new class class LikeableElement extends PolymerElement {// Here will be the component’s public featuresstatic get properties() { return { liked: Boolean }}// That’s how the DOM tree will look inside, CSS influences only the component itselfstatic get template() {return html`<style>.response { margin-top: 10px; } </style><paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox><div hidden$="[[!liked]]" class="response">Web components like you, too.</div>`;} }

參見https://www.polymer-project.org/

實際上，Polymer可以完成以前由GWT完成的所有工作，但與此同時，它可以與任何JS組件以及其他框架（如React和Angular）兼容。

Vaadin成分

讓我們回到Vaadin。 一段時間以來，Vaadin公司一直在開發一種名為Vaadin Components的產品-用于前端開發人員的UI組件，可以將其集成到任何JS應用程序中。

這些組件基于Web組件和Polymer！

正如我們現在所看到的，這是Vaadin框架的備份計劃，該計劃幫助放棄了Google Web Toolkit，并開發了一個沒有任何組件的新框架。 解決了雞肉和雞蛋的問題，Vaadin組件成為即將到來的Vaadin 10的前端。

Vaadin流

Vaadin 8包括UI狀態同步機制和雙向RPC協議（遠程過程調用）支持。 只有由于GWT才有可能，因為服務器和客戶端類的共享接口是用Java編寫的。

通過放棄GWT，有必要實現一種新的機制，該機制將能夠與JS前端和Java后端透明地集成。 Vaadin Flow發揮了這種機制的作用（很長一段時間以來，該名稱也被稱為Vaadin 10）。

Flow的文檔中有以下方案： https : //vaadin.com/docs/v10/flow/introduction/introduction-overview.html

其要點是：

• 支持從服務器到客戶端的UI狀態同步
• 服務器端可以訂閱UI組件事件，并執行該AJAX查詢
• 在服務器上執行業務邏輯，僅使用UI中反映的數據加載Web瀏覽器
• 服務器端使用Java
• 客戶端可以使用HTML，CSS，JS和Polymer模板

對我而言，這意味著Vaadin將擁有更多的前端技術，而Java遠遠不夠（對于Vaadin 8，您僅需要Java，而HTML / CSS則不是必需的）。 另一方面，現在可以進行簡單的JS代碼集成。

請參閱文檔中的完整功能列表： https : //vaadin.com/docs/v10/flow/Overview.html

Vaadin平臺

Vaadin 10的每個組件都是按照JS世界的最佳傳統分別開發的-微型模塊，彼此之間具有最大的獨立性。 同時，組件的客戶端部分以WebJARs格式打包在JAR中。

這有點令人恐懼，尤其是當您查看最小的項目關系時：

2為了以某種方式管理這種混亂，出現了BOM表（物料清單）項目，稱為Vaadin平臺 。

這不是一個自包含的產品，而只是以Maven BOM格式制作的一系列兼容組件和工具版本：
https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html

它通過以下方式連接到Maven： https : //vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.html

<dependencyManagement><dependencies><dependency><groupId>com.vaadin</groupId><artifactId>vaadin-bom</artifactId><version>${vaadin.platform.version}</version><type>pom</type><scope>import</scope></dependency></dependencies> </dependencyManagement>

從Vaadin FW 8遷移

該文檔介紹了Vaadin 8的遷移選項：

https://vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

在這里，我有個壞消息：如果您在Vaadin 8上編寫了一個大型項目，則必須在轉換為Vaadin 10的過程中完全重寫它。根本沒有遷移路徑！

Vaadin 10和Vaadin 8在幾個方面相似：

• 服務器端方法
• 用于UI邏輯開發的Java
• 相同的數據綁定方法

底線是： Vaadin 10是從頭開始制作的新框架。

正如Vaadin開發人員承諾的那樣 ，Vaadin 8將在2022年之前得到支持，可能會出現新的遷移方法。

結論

我認為重要的事實是，新的Vaadin網站是在Vaadin Flow上創建的。 以前，編程語言的成熟度被定義為其編譯器是否使用相同的語言編碼。 現在，事實上已成為前端技術的標準。

我希望現在您可以決定對Vaadin 10的總體看法。總體而言，這是一個足夠好的框架，并且是未來的重要基礎。 對我來說，這是一個用于UI構想的新思想和方法的絕佳實驗空間。

翻譯自: https://www.javacodegeeks.com/2018/07/vaadin-flow-marvelous-deer.html

總結

以上是生活随笔為你收集整理的Vaadin Flow –奇妙的鹿的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。