當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

vaadin_Vaadin Flow –奇妙的鹿

發(fā)布時(shí)間：2023/12/3 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 vaadin_Vaadin Flow –奇妙的鹿小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

vaadin

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

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

最近發(fā)布了此Web UI開(kāi)發(fā)框架的新版本– Vaadin 10。

創(chuàng)作者稱Vaadin Flow為現(xiàn)代Web應(yīng)用程序和網(wǎng)站開(kāi)發(fā)的新Java Web框架（我在這里不太相信它們）。它是Vaadin平臺(tái)的一部分，該平臺(tái)替代了另一個(gè)產(chǎn)品– Vaadin Framework，它可以使用Java上的Web組件標(biāo)準(zhǔn)來(lái)開(kāi)發(fā)Web應(yīng)用程序（更準(zhǔn)確地說(shuō)是Web UI）。

在這一點(diǎn)上，所有這些東西，包括Vaadin Bla Bla，框架，平臺(tái)等等，都必須混在讀者的腦海中。這是怎么回事？

我們已經(jīng)將Vaadin用作UI Back-office系統(tǒng)的CUBA平臺(tái)的一部分，并且在此期間已經(jīng)積累了很多工作經(jīng)驗(yàn)，這就是為什么我們不禁擔(dān)心其命運(yùn)的原因。在下面，您會(huì)發(fā)現(xiàn)我對(duì)Vaadin 10的推測(cè)。

Vaadin框架

Vaadin是一家芬蘭公司，創(chuàng)建UI開(kāi)發(fā)工具和庫(kù)。同樣，他們創(chuàng)建了一個(gè)同名的Java Web開(kāi)發(fā)框架。

Vaadin Framework是具有服務(wù)器端編程模型的UI框架，其中所有UI邏輯及其狀態(tài)都存在于服務(wù)器上，并且Web瀏覽器僅執(zhí)行UI小部件的代碼。實(shí)際上，這是一種瘦客戶端技術(shù)，其中瀏覽器僅反映服務(wù)器命令的內(nèi)容，所有事件都發(fā)送到服務(wù)器。

服務(wù)器端方法使我們忘記了開(kāi)發(fā)是針對(duì)Web設(shè)計(jì)的，而是將UI開(kāi)發(fā)為可直接訪問(wèn)服務(wù)器上的數(shù)據(jù)和服務(wù)的桌面Java應(yīng)用程序。同時(shí)，Vaadin將同時(shí)處理瀏覽器中的UI反射和瀏覽器與服務(wù)器之間的AJAX交互。 Vaadin引擎在瀏覽器中提供應(yīng)用程序服務(wù)器端用戶界面呈現(xiàn)，并封裝客戶端和服務(wù)器之間交換的所有詳細(xì)信息。

這種方法有很多優(yōu)點(diǎn)：

Java代碼更易于編寫和調(diào)試
您可以使用眾所周知的Java庫(kù)和工具（IDE，編譯器，測(cè)試）
不必開(kāi)發(fā)和公開(kāi)Web服務(wù)
解決方案更安全

缺點(diǎn)：

UI表示需要服務(wù)器上的大量?jī)?nèi)存
擴(kuò)展解決方案比較困難
開(kāi)發(fā)小部件時(shí)，您需要開(kāi)發(fā)Java API

由于這些優(yōu)點(diǎn)和缺點(diǎn)，Vaadin FW牢固地固定在可預(yù)測(cè)負(fù)載的企業(yè)開(kāi)發(fā)中，并且開(kāi)發(fā)速度和簡(jiǎn)便性比硬件和內(nèi)存的成本更為重要。

Google Web Toolkit發(fā)生了什么

在Vaadin一直為廣大受眾所熟悉的時(shí)候，Vaadin FW的客戶端始終與另一種著名產(chǎn)品Google Web Toolkit（GWT）緊密相連。通過(guò)這種串聯(lián)，用戶可以使用相同的語(yǔ)言-Java，來(lái)為它們編寫UI組件和服務(wù)器API。

過(guò)去幾年，Google Web Toolkit并沒(méi)有發(fā)展壯大，自2015年以來(lái)，我們一直在等待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

在這個(gè)停滯時(shí)期（2015-2017年），發(fā)生了一個(gè)重要事件：新的Web組件規(guī)范和Google – Polymer的另一個(gè)Web框架出現(xiàn)了。顯然，這是GWT終結(jié)的開(kāi)始。

應(yīng)該提到的是，GWT 3是作為內(nèi)部Google框架開(kāi)發(fā)的，其開(kāi)發(fā)仍保留在公司內(nèi)部。因此，社區(qū)無(wú)法以任何方式影響該過(guò)程，或者至少看不到該過(guò)程正在進(jìn)行。

提到這種停滯，Vaadin團(tuán)隊(duì)做出了一個(gè)艱難的決定，即完全放棄GWT的開(kāi)發(fā)，并重寫其框架的客戶端。這些變化不會(huì)被忽視，并且使已經(jīng)在Vaadin上發(fā)展的每個(gè)人都感到恐懼。

Web組件

Web組件是一組標(biāo)準(zhǔn)。它是由Google提供并積極推廣的，但該計(jì)劃已在Mozilla中得到支持。實(shí)際上，這些是用于創(chuàng)建Web UI組件的技術(shù)，以便它們可以支持行為和表示形式封裝。主要優(yōu)勢(shì)是可重用性。

參見(jiàn)https://www.webcomponents.org

基本概念：

自定義元素–用于創(chuàng)建自己HTML元素的API
Shadow DOM – HTML組件封裝的工具，其可視化表示與全局CSS規(guī)則隔離。一言以蔽之，您可以制作一個(gè)組件，例如訂單表單，并且不必?fù)?dān)心表單樣式會(huì)因?yàn)轫?yè)面的全局CSS規(guī)則而被破壞。
HTML模板–在HTML文檔中放置包含DOM草稿元素的被動(dòng)塊的機(jī)會(huì)。此類塊由瀏覽器解析，但不呈現(xiàn)，也不執(zhí)行其代碼。建議將它們用作數(shù)據(jù)渲染的模板。
HTML導(dǎo)入–一種特殊語(yǔ)法，用于將所有HTML文檔作為具有其所有布局，樣式和JavaScript代碼的模塊導(dǎo)入。

例如，如果我們查看YouTube DOM樹(shù)，就會(huì)注意到“自定義元素”和“影子DOM”的用法：

所有這些使您能夠編寫現(xiàn)代的Web UI組件。

在這里，我應(yīng)該承認(rèn)，瀏覽器的支持還遠(yuǎn)遠(yuǎn)不夠完美，例如，您仍然需要使用polyfills來(lái)處理Edge。

聚合物

Polymer是一個(gè)超出Web組件標(biāo)準(zhǔn)的很小的庫(kù)，旨在簡(jiǎn)化其用法。例：

// 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>`;} }

參見(jiàn)https://www.polymer-project.org/

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

Vaadin成分

讓我們回到Vaadin。一段時(shí)間以來(lái)，Vaadin公司一直在開(kāi)發(fā)一種名為Vaadin Components的產(chǎn)品-用于前端開(kāi)發(fā)人員的UI組件，可以將其集成到任何JS應(yīng)用程序中。

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

正如我們現(xiàn)在所看到的，這是Vaadin Framework的備份計(jì)劃，該計(jì)劃幫助放棄了Google Web Toolkit，并開(kāi)發(fā)了一個(gè)沒(méi)有任何組件的新框架。解決了雞肉和雞蛋的問(wèn)題，Vaadin組件成為即將到來(lái)的Vaadin 10的前端。

Vaadin流

Vaadin 8包括UI狀態(tài)同步機(jī)制和雙向RPC協(xié)議（遠(yuǎn)程過(guò)程調(diào)用）支持。只能由于GWT才有可能，因?yàn)榉?wù)器和客戶端類的共享接口是用Java編寫的。

通過(guò)放棄GWT，有必要實(shí)現(xiàn)一種新的機(jī)制，該機(jī)制將能夠與JS前端和Java后端透明地集成。 Vaadin Flow發(fā)揮了這種機(jī)制的作用（很長(zhǎng)一段時(shí)間以來(lái)，該名稱也被稱為Vaadin 10）。

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

其要點(diǎn)是：

支持服務(wù)器到客戶端的UI狀態(tài)同步
服務(wù)器端可以訂閱UI組件事件，并執(zhí)行該AJAX查詢
業(yè)務(wù)邏輯在服務(wù)器上執(zhí)行，Web瀏覽器僅加載UI中反映的數(shù)據(jù)
服務(wù)器端使用Java
客戶端可以使用HTML，CSS，JS和Polymer模板

對(duì)我來(lái)說(shuō)，這意味著Vaadin將擁有更多的前端技術(shù)，而Java遠(yuǎn)遠(yuǎn)不夠（對(duì)于Vaadin 8，您只需要Java，而HTML / CSS則不是必需的）。另一方面，現(xiàn)在可以進(jìn)行簡(jiǎn)單的JS代碼集成。

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

Vaadin平臺(tái)

Vaadin 10的每個(gè)組件都是按照J(rèn)S世界的最佳傳統(tǒng)分別開(kāi)發(fā)的-微型模塊，彼此之間具有最大的獨(dú)立性。同時(shí)，組件的客戶端部分以WebJARs格式打包在JAR中。

這有點(diǎn)令人恐懼，尤其是當(dāng)您查看最小的項(xiàng)目關(guān)系時(shí)：

2為了以某種方式管理這種混亂，出現(xiàn)了BOM表（物料清單）項(xiàng)目，稱為Vaadin平臺(tái) 。

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

它通過(guò)以下方式連接到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的遷移選項(xiàng)：

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

這里有個(gè)壞消息：如果您在Vaadin 8上編寫了一個(gè)大型項(xiàng)目，則必須在轉(zhuǎn)換為Vaadin 10的過(guò)程中完全重寫它。根本沒(méi)有遷移路徑！

Vaadin 10和Vaadin 8在幾個(gè)方面相似：

服務(wù)器端方法
用于UI邏輯開(kāi)發(fā)的Java
相同的數(shù)據(jù)綁定方法

底線是： Vaadin 10是從頭開(kāi)始制作的新框架。

正如Vaadin開(kāi)發(fā)人員所承諾的那樣，Vaadin 8將在2022年之前得到支持，可能會(huì)出現(xiàn)新的遷移方法。

結(jié)論

我認(rèn)為重要的事實(shí)是，新的Vaadin網(wǎng)站是在Vaadin Flow上創(chuàng)建的。以前，編程語(yǔ)言的成熟度被定義為其編譯器是否使用相同的語(yǔ)言編碼。現(xiàn)在，事實(shí)上已成為前端技術(shù)的標(biāo)準(zhǔn)。

我希望您現(xiàn)在能對(duì)Vaadin 10有所把握。總的來(lái)說(shuō)，它是一個(gè)足夠好的框架，并且為未來(lái)奠定了良好的基礎(chǔ)。對(duì)我來(lái)說(shuō)，這是一個(gè)用于UI構(gòu)想的新思想和方法的絕佳實(shí)驗(yàn)空間。

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