今天我在談?wù)揥eb應(yīng)用程序UI開發(fā)。正如我們?cè)赨I框架開發(fā)歷史中所看到的那樣，我們已經(jīng)從服務(wù)器端UI開發(fā)轉(zhuǎn)移到了客戶端或?yàn)g覽器端UI開發(fā)。顯然，Web瀏覽器代表了當(dāng)今許多臺(tái)式機(jī)的本機(jī)應(yīng)用程序。使用ElectronJS，您可以將任何可用操作系統(tǒng)的Web應(yīng)用程序交付到桌面。Web應(yīng)用程序ElectronJS應(yīng)用程序獨(dú)立于平臺(tái)。這就是我所謂的Web瀏覽器平臺(tái)（WbaaP）。但是，到2020年，我們?nèi)绾卧诒緳C(jī)Web瀏覽器應(yīng)用程序中進(jìn)行開發(fā)？

Web應(yīng)用程序設(shè)計(jì)趨勢(shì)

下列Web框架在2020年大受歡迎：Vue.js，React和Angular。所有基于瀏覽器的應(yīng)用程序均使用JAVAScript作為其編程語言。在Web瀏覽器世界中，JavaScript仍然是主要的功能，因?yàn)閃eb API是基于JavaScript的。盡管今天我們有了所謂的編譯器，它們可以將一個(gè)源代碼（例如Java）轉(zhuǎn)換為另一源代碼（例如JavaScript）。可以在此處找到JavaScript的編譯器的完整列表。

Vue.js

Vue.js在2020年備受青睞，因?yàn)樗鼞?yīng)該是輕量級(jí)的。您可以在當(dāng)前的Web應(yīng)用程序中輕松使用Vue.js，并隨需添加增量功能。向您的Web應(yīng)用程序中添加一個(gè)小的漸進(jìn)式升級(jí)非常容易，但是如果要使用Vue.js編寫整個(gè)Web應(yīng)用程序，則需要了解基本知識(shí)。模塊化和組件化是您之前需要學(xué)習(xí)的一些概念。您如何在Vue.js版本3中設(shè)計(jì)Web應(yīng)用程序？您仍將構(gòu)建html文件作為主UI文件。如果您需要一個(gè)漂亮的UI，則還需要一個(gè)css文件。然后，您可以使用JavaScript構(gòu)建具有屬性/數(shù)據(jù)，行為/方法和事件的組件。可以將組件插入HTML文件中以構(gòu)建完整的Web應(yīng)用程序。在下面，您看到組件插入了兩次到index.html文件中。

> HTML, JavaScript and Preview in the Browser

通過這種機(jī)制，您可以構(gòu)建可以包裝其他組件的復(fù)合/嵌套組件。

如果您來自SwiftUI開發(fā)，您將問自己為什么只為了構(gòu)建一個(gè)簡(jiǎn)單的Web應(yīng)用程序UI就需要三個(gè)文件（用于主屏幕的HTML，用于UI設(shè)計(jì)的CSS和用于組件的JS）。為了簡(jiǎn)化起見，Vue.js具有以下原則：

在組件內(nèi)部，其模板，邏輯和樣式固有地耦合在一起，并且將它們搭配在一起實(shí)際上使組件更具凝聚力和可維護(hù)性-Vue.js關(guān)注點(diǎn)分離。

進(jìn)一步的步驟是所謂的單一文件組件（SFC）。在這種情況下，可以在一個(gè).vue文件中定義組件。在SFC中，您可以將模板的Look＆Feel范圍限制為僅將此組件以及該組件的屬性/行為限制在一個(gè).vue文件中，就像我們從面向?qū)ο蟮腢I設(shè)計(jì)中已經(jīng)知道的那樣。

> Vue.js SFC: Hello.vue (Source: Vue.js Doc)

React

React是一個(gè)著名的UI框架，不僅適用于Facebook的Web應(yīng)用程序。實(shí)際上，React的想法與Vue.js非常相似，因?yàn)槟€構(gòu)建了能夠構(gòu)建Web應(yīng)用程序的組件。React具有JSX（Java腳本擴(kuò)展）的特色，描述了UI的外觀。這是一個(gè)使用JSX的簡(jiǎn)單React組件。元素id hello-example只是主HTML文件中的一個(gè)簡(jiǎn)單<div id =" hello-example"> </ div>，因此HelloMessage組件將通過上述簡(jiǎn)單div注入到主HTML文件中。

> HelloMessage React Component with JSX (Source: React Doc)

無需詳細(xì)說明，具有聲明性UI，組件/組合和單個(gè)文件組件的React概念與Vue.js非常相似。可以在此處找到Vue.js和React之間的全面比較。您需要意識(shí)到的一件事：像React with JSX這樣的JavaScript UI框架在開發(fā)期間需要構(gòu)建工具，編譯器，生成器和服務(wù)器進(jìn)程。因此，僅編輯JS文件并重新加載瀏覽器以進(jìn)行Web應(yīng)用程序開發(fā)的時(shí)間已經(jīng)結(jié)束。

Angular

Angular在將其編程語言從JavaScript遷移到TypeScript時(shí)經(jīng)歷了巨大的修改。Angular擁有非常清晰的介紹過程，其中包含所有必需的工具。如果您不想自己選擇所有工具，那么Angular可能是全面開發(fā)Web應(yīng)用程序的最佳選擇。但是，如果您只需要在當(dāng)前網(wǎng)頁中添加簡(jiǎn)單的擴(kuò)展名，Angular可能不適合您。但是，我們?nèi)绾卧贏ngular中開發(fā)UI？

作為Java開發(fā)人員，我覺得Angular UI開發(fā)與google的所有基于Java的UI框架非常相似，例如：Android和GWT。Angular還使用諸如依賴注入，服務(wù)模式和模擬測(cè)試之類的已知設(shè)計(jì)模式。

在Angular中，您還可以構(gòu)建由屬性，行為和模板組成的組件，就像在Vue.js和React中一樣。此外，您還有"服務(wù)"，其中包含可以從應(yīng)用程序其他部分獲得的數(shù)據(jù)。在Heroes示例中，您可以看到如何構(gòu)建Heroes組件。

> Heroes Web App with Angular (Source: Stackblitz)

可以在此處閱讀對(duì)這三個(gè)UI框架的全面綜合比較。在這里可以找到有關(guān)Angular和React組件的很好的并排說明。

下一站：Java Web"瀏覽器"應(yīng)用程序

看完這三個(gè)框架：Vue.js，React和Angular之后，我們可以總結(jié)以下幾點(diǎn)：

· Web應(yīng)用程序開發(fā)的工具鏈：Web瀏覽器的UI開發(fā)已從無工具鏈轉(zhuǎn)變?yōu)閺?fù)雜的工具鏈。您需要運(yùn)行時(shí)進(jìn)程（Node.js），構(gòu)建/包管理器（npm），編譯器（JSX，TypeScript，babel），webpack等，才能為瀏覽器開發(fā)簡(jiǎn)單但合理的應(yīng)用程序。

· 聲明式和基于組件的UI開發(fā)：我們?nèi)詫TML和CSS用于UI設(shè)計(jì)，對(duì)此沒有任何更改。React，Angular和Vue.js使用聲明式而不是命令式渲染。此外，它們都支持組件/組合開發(fā)，因此您可以在Web應(yīng)用程序中重用這些組件。趨勢(shì)還在于能夠?qū)⒔M件的屬性/屬性，邏輯/方法/行為/事件，數(shù)據(jù)和模板放在單個(gè)單元（JavaScript文件）中。在面向?qū)ο笾校@稱為封裝。

· 編程語言：所有框架都支持TypeScript，但是在所有示例中，只有Angular專門使用TypeScript。

· 基于UI的DSL（特定域語言）和基于文本的GUI設(shè)計(jì)器：基于UI的DSL開發(fā)僅由React with JSX使用。Angular和Vue.js使用HTML作為標(biāo)準(zhǔn)，UI沒有DSL。如果基于GUI設(shè)計(jì)器的開發(fā)，則所有框架都將使用文本。

· 數(shù)據(jù)綁定的兩種方法：ngModel的Angular和v模型的Vue.js直接提供兩種數(shù)據(jù)綁定，因此數(shù)據(jù)字段中的更新將同步到綁定到該字段的所有UI組件，反之亦然。React沒有直接提供此功能。

· UI外觀：Web應(yīng)用程序的L＆F仍使用CSS來實(shí)現(xiàn)。與具有Apple L＆F的SwiftUI或具有Material Design L＆F的Android設(shè)備相比，您無需擔(dān)心L＆F，因?yàn)樗苯蛹傻娇蚣苤小Ｄ梢远x自己的L＆F或使用Web主題，例如Bootstrap或Material Design。

在下一篇文章中，我將介紹如何使用GWT / J2CL用Java開發(fā)Web應(yīng)用程序UI。2020年/ 2021年的情況如何？它與我們?cè)诒疚闹锌吹降娜齻€(gè)框架具有可比性嗎？敬請(qǐng)關(guān)注！

迄今為止，我最好的組件和UI開發(fā)經(jīng)驗(yàn)是使用Borland（現(xiàn)為Embarcadero）Delphi和VCL（可視組件庫）。為什么？?jī)牲c(diǎn)：

（1）一切都是可視的：所有組件都是可視的。不管是邏輯組件還是數(shù)據(jù)庫組件，它們都是可視組件。作為組件的用戶，您始終可以直觀地對(duì)其進(jìn)行配置。

（2）可以在開發(fā)/設(shè)計(jì)時(shí)激活組件：可以在開發(fā)時(shí)激活組件，有時(shí)可以使用模擬數(shù)據(jù)激活。這意味著您作為組件的用戶，無需編譯整個(gè)應(yīng)用程序并運(yùn)行它，只需查看組件在運(yùn)行時(shí)的工作方式即可。您現(xiàn)在可以在SwiftUI和Android Jetpack Compose中找到這種機(jī)制。

(本文由聞數(shù)起舞翻譯自Aakash Garg的文章《Web Apps UI Development Trend in 2020: Components to Rule Them All》，轉(zhuǎn)載請(qǐng)注明出處，原文鏈接：https://medium.com/swlh/web-apps-ui-development-trend-in-2020-components-to-rule-them-all-a9e2cb32d27)