今天我在談論Web應用程序UI開發。正如我們在UI框架開發歷史中所看到的那樣，我們已經從服務器端UI開發轉移到了客戶端或瀏覽器端UI開發。顯然，Web瀏覽器代表了當今許多臺式機的本機應用程序。使用ElectronJS，您可以將任何可用操作系統的Web應用程序交付到桌面。Web應用程序ElectronJS應用程序獨立于平臺。這就是我所謂的Web瀏覽器平臺（WbaaP）。但是，到2020年，我們如何在本機Web瀏覽器應用程序中進行開發？
Web應用程序設計趨勢
下列Web框架在2020年大受歡迎：Vue.js，React和Angular。所有基于瀏覽器的應用程序均使用JAVAScript作為其編程語言。在Web瀏覽器世界中，JavaScript仍然是主要的功能，因為Web API是基于JavaScript的。盡管今天我們有了所謂的編譯器，它們可以將一個源代碼（例如Java）轉換為另一源代碼（例如JavaScript）?？梢栽诖颂幷业絁avaScript的編譯器的完整列表。
Vue.js
Vue.js在2020年備受青睞，因為它應該是輕量級的。您可以在當前的Web應用程序中輕松使用Vue.js，并隨需添加增量功能。向您的Web應用程序中添加一個小的漸進式升級非常容易，但是如果要使用Vue.js編寫整個Web應用程序，則需要了解基本知識。模塊化和組件化是您之前需要學習的一些概念。您如何在Vue.js版本3中設計Web應用程序？您仍將構建html文件作為主UI文件。如果您需要一個漂亮的UI，則還需要一個css文件。然后，您可以使用JavaScript構建具有屬性/數據，行為/方法和事件的組件?？梢詫⒔M件插入HTML文件中以構建完整的Web應用程序。在下面，您看到組件插入了兩次到index.html文件中。
> HTML, JavaScript and Preview in the Browser
通過這種機制，您可以構建可以包裝其他組件的復合/嵌套組件。
如果您來自SwiftUI開發，您將問自己為什么只為了構建一個簡單的Web應用程序UI就需要三個文件（用于主屏幕的HTML，用于UI設計的CSS和用于組件的JS）。為了簡化起見，Vue.js具有以下原則：
在組件內部，其模板，邏輯和樣式固有地耦合在一起，并且將它們搭配在一起實際上使組件更具凝聚力和可維護性-Vue.js關注點分離。
進一步的步驟是所謂的單一文件組件（SFC）。在這種情況下，可以在一個.vue文件中定義組件。在SFC中，您可以將模板的Look＆Feel范圍限制為僅將此組件以及該組件的屬性/行為限制在一個.vue文件中，就像我們從面向對象的UI設計中已經知道的那樣。
> Vue.js SFC: Hello.vue (Source: Vue.js Doc)
React
React是一個著名的UI框架，不僅適用于Facebook的Web應用程序。實際上，React的想法與Vue.js非常相似，因為您還構建了能夠構建Web應用程序的組件。React具有JSX（Java腳本擴展）的特色，描述了UI的外觀。這是一個使用JSX的簡單React組件。元素id hello-example只是主HTML文件中的一個簡單<div id =" hello-example"> </ div>，因此HelloMessage組件將通過上述簡單div注入到主HTML文件中。
> HelloMessage React Component with JSX (Source: React Doc)
無需詳細說明，具有聲明性UI，組件/組合和單個文件組件的React概念與Vue.js非常相似?？梢栽诖颂幷业絍ue.js和React之間的全面比較。您需要意識到的一件事：像React with JSX這樣的JavaScript UI框架在開發期間需要構建工具，編譯器，生成器和服務器進程。因此，僅編輯JS文件并重新加載瀏覽器以進行Web應用程序開發的時間已經結束。
Angular
Angular在將其編程語言從JavaScript遷移到TypeScript時經歷了巨大的修改。Angular擁有非常清晰的介紹過程，其中包含所有必需的工具。如果您不想自己選擇所有工具，那么Angular可能是全面開發Web應用程序的最佳選擇。但是，如果您只需要在當前網頁中添加簡單的擴展名，Angular可能不適合您。但是，我們如何在Angular中開發UI？
作為Java開發人員，我覺得Angular UI開發與google的所有基于Java的UI框架非常相似，例如：Android和GWT。Angular還使用諸如依賴注入，服務模式和模擬測試之類的已知設計模式。
在Angular中，您還可以構建由屬性，行為和模板組成的組件，就像在Vue.js和React中一樣。此外，您還有"服務"，其中包含可以從應用程序其他部分獲得的數據。在Heroes示例中，您可以看到如何構建Heroes組件。
> Heroes Web App with Angular (Source: Stackblitz)
可以在此處閱讀對這三個UI框架的全面綜合比較。在這里可以找到有關Angular和React組件的很好的并排說明。
下一站：Java Web"瀏覽器"應用程序
看完這三個框架：Vue.js，React和Angular之后，我們可以總結以下幾點：
· Web應用程序開發的工具鏈：Web瀏覽器的UI開發已從無工具鏈轉變為復雜的工具鏈。您需要運行時進程（Node.js），構建/包管理器（npm），編譯器（JSX，TypeScript，babel），webpack等，才能為瀏覽器開發簡單但合理的應用程序。
· 聲明式和基于組件的UI開發：我們仍將HTML和CSS用于UI設計，對此沒有任何更改。React，Angular和Vue.js使用聲明式而不是命令式渲染。此外，它們都支持組件/組合開發，因此您可以在Web應用程序中重用這些組件。趨勢還在于能夠將組件的屬性/屬性，邏輯/方法/行為/事件，數據和模板放在單個單元（JavaScript文件）中。在面向對象中，這稱為封裝。
· 編程語言：所有框架都支持TypeScript，但是在所有示例中，只有Angular專門使用TypeScript。
· 基于UI的DSL（特定域語言）和基于文本的GUI設計器：基于UI的DSL開發僅由React with JSX使用。Angular和Vue.js使用HTML作為標準，UI沒有DSL。如果基于GUI設計器的開發，則所有框架都將使用文本。
· 數據綁定的兩種方法：ngModel的Angular和v模型的Vue.js直接提供兩種數據綁定，因此數據字段中的更新將同步到綁定到該字段的所有UI組件，反之亦然。React沒有直接提供此功能。
· UI外觀：Web應用程序的L＆F仍使用CSS來實現。與具有Apple L＆F的SwiftUI或具有Material Design L＆F的Android設備相比，您無需擔心L＆F，因為它直接集成到框架中。您可以定義自己的L＆F或使用Web主題，例如Bootstrap或Material Design。
在下一篇文章中，我將介紹如何使用GWT / J2CL用Java開發Web應用程序UI。2020年/ 2021年的情況如何？它與我們在本文中看到的三個框架具有可比性嗎？敬請關注！
迄今為止，我最好的組件和UI開發經驗是使用Borland（現為Embarcadero）Delphi和VCL（可視組件庫）。為什么？兩點：
（1）一切都是可視的：所有組件都是可視的。不管是邏輯組件還是數據庫組件，它們都是可視組件。作為組件的用戶，您始終可以直觀地對其進行配置。
（2）可以在開發/設計時激活組件：可以在開發時激活組件，有時可以使用模擬數據激活。這意味著您作為組件的用戶，無需編譯整個應用程序并運行它，只需查看組件在運行時的工作方式即可。您現在可以在SwiftUI和Android Jetpack Compose中找到這種機制。
(本文由聞數起舞翻譯自Aakash Garg的文章《Web Apps UI Development Trend in 2020: Components to Rule Them All》，轉載請注明出處，原文鏈接：https://medium.com/swlh/web-apps-ui-development-trend-in-2020-components-to-rule-them-all-a9e2cb32d27)
