几周前，我真的很兴奋被邀请谈论Web组件。在谈话中，大淘客网站，我提出了一些关于UI5框架和UI5 Web组件的问题，但我确实无法正确回答，因此我决定通过这篇博文与大家分享这些问题。

11年前，2009年，在SAP，我们开始开发一个名为Phoenix的框架，该框架已更名为SAPUI5。2013年，欧洲云服务器，SAPUI5框架的核心已经在apache2.0许可下开源为OpenUI5。自2017年以来，我们一直致力于创新我们的框架，以符合最新的网络标准和趋势。在博客文章中，我将使用术语UI5框架作为OpenUI5和SAPUI5的通用术语。

UI5框架是一个JavaScript UI框架，用于构建客户端、响应性和企业级web应用程序。企业就绪意味着web应用程序是全球化的、安全的、可访问的、可主题的和向后兼容的。UI5框架本身提供了一些概念，如组件（在其他框架中称为应用程序和/或重用复合组件）、构建应用程序的模型-视图-控制器模式、管理视图之间导航的路由、内置数据绑定等等。在UI5中，所谓的控件（分别是UI元素）被用来组成用户界面。UI5的一个主要优点是：它们提供了各种各样的基本功能、布局和复杂的控件来构建应用程序。今天，OpenUI5提供了300多个控件，SAPUI5在OpenUI5的基础上增加了350多个额外的UI5控件。在这里了解更多关于OpenUI5和SAPUI5的区别。

早在2009年，我们就研究了现在出现的几个UI框架。企业应用程序所需的大多数质量并没有被现有的开源框架所满足。尤其是在开发企业应用程序时，向后兼容性是非常重要的，因为我们需要为这些应用程序保证大约十年的框架支持。自从我们11年前开始开发以来，许多多年前构建的应用程序仍然使用较新版本的UI5运行。我们仍在使用主要版本1.

SAP Fiori是定义SAP企业应用程序用户体验的设计语言。sapfiori的设计理念基于五个核心原则。sapfiori用户体验是基于角色的、自适应的、简单的、连贯的、令人愉快的。UI5框架与SAP Fiori设计指南保持一致，因此使用UI5构建的web应用程序提供一致的用户体验。

UI5使用的是开源软件。UI5框架中包含了许多开源库。使用开源的最突出的例子是jQuery。早在2010年，我们就移除了专有的浏览器抽象层，取而代之的是现在的"开源"库：jQuery。其他例子有d3（图表）、datajs（OData库）或URI.js文件（URL处理）。有更多的开放源码库正在使用中，它们的完整列表可以在许可证.txt是和否。最密切的关系可能是角度。与Angular类似，使用UI5，您将获得构建web应用程序的完整框架。有些人还称之为一站式商店。您可以使用内置的概念（如组件、路由、MVC和数据绑定）完全在UI5中创建应用程序，而不需要额外的开源库。UI5框架的UI元素称为UI5控件。最佳匹配的角度是角度分量。最大的区别是，大数据是啥，作为OpenUI5或SAPUI5发布的UI5框架已经提供了大量的UI5控件，大数据收集，这些控件是在库中构造的，可以由应用程序开发人员开箱即用。

UI5控件是由其API（元数据，如属性、聚合、事件）组成的UI元素，行为（内部事件处理）、呈现器（标记创建）和CSS。UI5控件是UI5框架的内置产品，用于编写UI元素。一个特别的特性是开箱即用的数据绑定支持，允许轻松地将控件绑定到来自不同模型的数据。

UI5控件是专有的，从今天起与UI5框架紧密耦合。其他JavaScript框架如果不拉UI5框架就不能使用它们。随着Web组件的成熟，基于Web标准编写UI元素有了新的可能性。基本框架是内置的，没有占用空间。它在UI元素的使用和实现之间引入了一个清晰的接口。它还确保使用者在没有明确允许的情况下不会干扰行为和布局。所有这些都使Web组件非常有趣，我们决定将UI元素的开发转向Web组件。

UI5 Web组件基于Web组件周围的Web标准（因为它们是：自定义元素、影子DOM、ES模块和HTML模板）。它们是独立于框架的UI元素，根据sapfiori设计指南实现，并包含sapfiori设计（参见上文：什么是sapfiori？）。它们还确保静态网站和web应用程序的视觉和行为一致性。ui5web组件具有UI5熟悉的企业级特性，如稳定性、国际化、可访问性和主题化支持。

ui5web组件独立于UI5框架构建。与UI5控件相比，ui5web组件的占用空间要小得多，因为UI5控件嵌入在应用程序编程模型中，而ui5web组件不是。这正是ui5web组件与UI5控件的区别。它们使您能够将我们的UI元素与您选择的任何基于HTML的UI技术结合使用。