今天我在谈论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）。可以在此处找到JavaScript的编译器的完整列表。

Vue.js

Vue.js在2020年备受青睐，因为它应该是轻量级的。您可以在当前的Web应用程序中轻松使用Vue.js，并随需添加增量功能。向您的Web应用程序中添加一个小的渐进式升级非常容易，但是如果要使用Vue.js编写整个Web应用程序，则需要了解基本知识。模块化和组件化是您之前需要学习的一些概念。您如何在Vue.js版本3中设计Web应用程序？您仍将构建html文件作为主UI文件。如果您需要一个漂亮的UI，则还需要一个css文件。然后，您可以使用JavaScript构建具有属性/数据，行为/方法和事件的组件。可以将组件插入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非常相似。可以在此处找到Vue.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)