在2020年，似乎UI開發(fā)的主要參與者同意我們(開發(fā)人員)如何設(shè)計應(yīng)用或Web應(yīng)用的UI(用戶界面)。在本文中，我將向您展示2020年具有不同框架和環(huán)境的當(dāng)前UI開發(fā)趨勢，并對其進(jìn)行總結(jié)。稍后，我將研究Java / GWT / J2CL中的UI開發(fā)趨勢。

UI中的設(shè)計趨勢

1. SwiftUI

SwiftUI對Apple世界中的整個UI開發(fā)進(jìn)行了革新。在所有Apple平臺上都是本機(jī)，具有所有這些出色的設(shè)計工具，為UI開發(fā)樹立了很高的標(biāo)準(zhǔn)。還可以從命令式UIKit / AppKit / WatchKit轉(zhuǎn)到聲明式設(shè)計，以使UI開發(fā)更加輕松直接。那么，您今天如何實現(xiàn)UI?您可以通過文字描述用戶界面。如果您需要狀態(tài)，則可以使用@State標(biāo)記變量，然后使用它向其中寫入內(nèi)容，例如$ name。要讀取內(nèi)容，我們只需要使用(name)。這就是我們所說的"兩種方式綁定"。因此，每次我們將某些內(nèi)容寫入TextField時，變量名稱都會更新，并且使用該變量的Text也會自動更新。

> SwiftUI with Two Ways Binding "name"

2. Android Jetpack Compose

通過將Android Jetpack Compose添加到Android的UI開發(fā)區(qū)域，Android UI開發(fā)遵循SwiftUI的方式。由于Kotlin優(yōu)于Java，Jetpack Compose僅使用Kotlin(無Java實現(xiàn))?我不同意我們只能在Kotlin中進(jìn)行此類UI開發(fā)，但是Google似乎希望在Android開發(fā)中將Kotlin推向Java之上，并且不會為Java開發(fā)人員實現(xiàn)相同的功能。

> Android Jetpack Compose UI Development with Kotlin (Source: https://bit.ly/3gJUiPJ)

如果我們看一下Jetpack Compose中的代碼結(jié)構(gòu)，它看起來確實類似于SwiftUI。您有不同的語法，但總體而言，其結(jié)構(gòu)和實現(xiàn)方式非常相似。使用@Model批注也可以簡單地實現(xiàn)數(shù)據(jù)綁定的兩種方式。

3. Flutter

Flutter的概述很不錯，可以告訴我們命令式和聲明式UI開發(fā)之間的區(qū)別是什么。

> Flutter Declarative UI and Structure (Source: https://bit.ly/3ndrt0E)

Flutter使用Dart作為編程語言，并且它具有用于開發(fā)UI的良好結(jié)構(gòu)。同樣，該結(jié)構(gòu)與之前的其他兩個框架非常相似。正如在本Flutter示例中所看到的，與SwiftUI相比，F(xiàn)lutter僅以"兩種數(shù)據(jù)綁定"方式不那么容易使用。

下一站：Web應(yīng)用程序

看到以下三個框架：SwiftUI，Android Jetpack Compose和Flutter之后，我們可以總結(jié)以下幾點：

• 聲明式而非命令式：UI開發(fā)正在從命令式變?yōu)槁暶魇?。如何?zhí)行(命令性)并不重要，但目標(biāo)狀態(tài)是什么(聲明性)并不重要。
• DSL(特定于域的語言)用于UI和基于文本的語言，而不是基于GUI設(shè)計器的語言：UI開發(fā)從拖放環(huán)境轉(zhuǎn)移到UI的文本描述。似乎我們使用編程語言和DSL而不是XML來描述我們的UI。
• 兩種方式的數(shù)據(jù)綁定：通常有兩種方式的數(shù)據(jù)綁定，因此數(shù)據(jù)字段中的更新將同步到綁定到該字段的所有UI組件，反之亦然。