2020年Web Apps用户界面发展趋势：组件统治一切 _App

今天我在谈论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.jsVue.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)
ReactReact是一个著名的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应用程序开发的时间已经结束。
AngularAngular在将其编程语言从JavaScript迁移到TypeScript时经历了巨大的修改。Angular拥有非常清晰的介绍过程，其中包含所有必需的工具。如果您不想自己选择所有工具，那么Angular可能是全面开发Web应用程序的最佳选择。但是，如果您只需要在当前网页中添加简单的扩展名，Angular可能不适合您。但是，我们如何在Angular中开发UI？
作为Java开发人员，我觉得Angular UI开发与google的所有基于Java的UI框架非常相似，例如：Android和GWT 。Angular还使用诸如依赖注入，服务模式和模拟测试之类的已知设计模式。
在Angular中，您还可以构建由属性，行为和模板组成的组件，就像在Vue.js和React中一样。此外，您还有"服务"，其中包含可以从应用程序其他部分获得的数据。在Heroes示例中，您可以看到如何构建Heroes组件。