用 React 结合 SAP UI5 Web Components 来开发 SAP Fiori 应用

已于 2024-10-12 15:39:36 修改
阅读量511 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： SAP UI5 百科全书 文章标签： 前端 javascript SAP UI5 SAP ui5
于 2022-07-21 22:01:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/125921920

在 Fiori Fundamentals 和 SAP UI5 Web Component 诞生之前，SAP UI5 是开发SAP Fiori应用唯一可供选择的前端框架。

很显然SAP对前端领域蓬勃发展的Vue，Angular，React这三驾马车并未熟视无睹，这才有了Fiori Fundamentals和SAP UI5 Web Component的问世。

什么是 Web Components?

Web Components 是浏览器内置的 UI 元素框架。 它具有 0kB 的占用空间，并且截至今天在所有主要浏览器中都可用。 Web 组件通过封装内容 (HTML)、表示 (CSS) 和行为 (JS) 的自定义 HTML 标记来增强浏览器的标准词汇。 Web 组件构建在以下 Web 平台 API 之上：自定义元素、Shadow DOM、ES 模块和 HTML 模板。 由于 Web 组件依赖于所有现代浏览器的 Web 标准支持，它们的好处是可以与大多数开箱即用的基于 HTML 的 Web UI 框架一起工作, 当然也就包括了 SAP UI5.

什么是 SAP UI5 Web Components?

UI5 网页组件
UI5 Web Components 在原生 API 之上添加了 enterprise-flavored sugar

了解本专栏 订阅专栏 解锁全文
关于 SAP UI5 Web Components
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-20 428
UI5 Web Components 是 UI5 的新产品，提供基本的和选定的高级 UI 元素作为 Web 组件。与 UI5 控件相比，UI5 Web 组件的占用空间要小得多，因为 UI5 控件嵌入在应用程序编程模型中，而 UI5 Web 组件不是。最后，Web 组件的优点在于它们可以与任何使用 HTML 标记的 Web 框架一起工作。SAP UI5 Web Components 是 UI5 Evolution 项目的关键支柱，以实现 UI5 的 UI 元素的轻量级和独立消费。
使用SAP UI5 Web Components开发React应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-06 526
(1) 命令行 npx create-react-app my-app --template @ui5/cra-template-webcomponents-react 创建名为my-app的react应用，并安装对应的依赖。 成功执行后，会看到Success! Created my-app at XXXX的提示信息： 进入my-app项目的src文件夹里，新建MyApp.jsx: impo...
ui5-webcomponents：UI5 Web组件-在本机API之上的企业风味糖！ 使用您选择的技术构建SAP Fiori用户界面
02-06
UI5 Web组件 什么是？ 由轻量级框架（压缩约20K）驱动的一组丰富的企业级可重用UI元素。 适用于构建从静态网站到复杂Web应用程序的所有内容。 可用于任何当前或将来的Web开发框架（React，Angular，Vue等）。 实施并遵循以实现一致的用户体验。 作为产品系列的一部分创建和维护。 为什么要使用网络组件？ 面向未来：作为Web标准，它们与任何Web开发框架的任何版本兼容。 封装：可保护影子DOM中HTML / CSS不受网页干扰，反之亦然，从而使其在任何环境中均稳定，不仅适用于应用程序，还适用于库和微前端。 优雅：作为自定义HTML元素，它们将实现复杂性隐藏在单
[React]利用Webcomponent封装React组件
SCUhzs
07-19 1595
[React]利用Webcomponent封装React组件
react-web-component:使用React创建Web组件
05-23
React Web组件 使用React创建Web组件 安装 React Web组件可作为npm上的react-web-component软件包使用。 yarn add react-web-component 基本用法 要创建带有react-web-component ，只需将React组件作为第一个参数传递给ReactWebComponent.create ，并将您要创建的Web组件的名称作为第二个参数。 import React from 'react' ; import ReactWebComponent from 'react-web-component' ; class App extends React . Component { render ( ) { return < div> Hello World! < / div > ; } } ReactW
1. SAP Fiori 和 SAP UI5 的区别和联系
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-13 1567
之所以很多朋友容易把 SAP Fiori 和 SAP UI5 混为一谈，是因为 SAP S/4HANA 这个旗舰级产品，里面包含的 Fiori App(Application 的缩写，中文意思即应用)，全部采用 SAP UI5 这个工具开发而成。SAP UI5 在 Fiori 应用开发技术领域固然占据了统治地位，但我们绝不能将这两个概念混为一谈。
SAP UI5 Freestyle 开发和 Fiori Elements 开发技术各自的优势和劣势
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-01 506
在选择使用 SAP UI5 Freestyle 还是 Fiori Elements 时，开发团队需要权衡其优势和缺陷，并根据具体的业务需求，项目情况，以及开发团队人员的技术水平来进行决策。
把 Web Components 纳入 SAP UI5 的正统：解读 namespace sap.ui.core.webc
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-29 10
是下的一个命名空间，用于把任何现成或自研的 Web Component 包装成 UI5 控件。它规定了如何在metadata里声明目标 web component 的tag，以及如何把该组件的属性、插槽和事件与 UI5 控件的属性、聚合、事件进行一一对应，从而获得 UI5 生命周期与数据绑定等能力。
把原生 Web Components 带入 SAP UI5 编程模型：class sap.ui.core.webc.WebComponent 详解
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
08-29 13
在 UI5 世界里，是一个桥梁型的基础类：它让任何标准的 Web Components 自定义元素，能够以 UI5 Control 的方式无缝融入到 SAP UI5 的生命周期、数据绑定和事件系统中。更具体地说，这个类承担了两件关键工作：一是把自定义元素的属性、事件、插槽和方法，映射到 UI5 的metadata体系；二是把 UI5 的聚合内容渲染到 Web Component 的命名插槽中，并与 UI5 的渲染与数据绑定框架协同工作。官方类型定义文件里，对这类职责有极为明确的说明，并给出了。
SAP UI5 Web Component 实战指南
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-09 632
例子：我的SAP UI5 Web Component开发而成的React应用上，显示了这个加号图标： 在React Component里引入加号图标： 在此处给ShellBarItem的icon属性赋以add按钮： 运行时效果如下： 我们再回过头看看在代码里导入的add.js的内容： pathData里包含的值，其实就是基于SVG绘制而成的加号图标在浏览器里对应的g标签的d属性，如下图所...
国内 SAP UI5 使用者关于性能优化和UI5 Web Component的讨论
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-28 557
有朋友提问：有UI5性能优化或者代码压缩的文章吗？UI5什么都好就是第一次加载太慢 答：如果是UI5库文件的加载性能，我觉得应用开发人员没有啥可以做的。这是框架开发人员的任务 问: 那UI5 Web Components React能解决加载问题吗 对UI5 Web Components不太理解它是否还是基于ui5的库还是react的库？ 答：我的个人理解，比如UI5 for React component, 是SAP自己制作的一个精简版的react library. 开发方式和原生React没有区
Web Components与框架集成：Vue & React案例分析
天涯学馆
05-29 1730
一直以来，都梦想着打造一个完全自定义、可复用且跨框架的UI组件库，让我的项目开发变得更加高效。在一次偶然的机会下，我接触到了Web Components，一种原生的Web API，它允许我们创建自定义的HTML标签，实现组件化开发。于是，我决定在我的最新项目中，尝试将Web Components与流行的前端框架——React和Vue进行集成，看看这样的结合能带来怎样的火花。在项目初期，我被Web Components的强大功能所吸引。
用React开发SAP Fiori应用
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-08 765
Jerry曾经写过两篇文章： SAP Fiori + Vue = ？ - 2018年12月18日 Fiori Fundamentals和SAP UI5 Web Components - 2019年2月19日 介绍了SAP Fiori是如何一步步走向开放的。在Fiori Fundamentals和SAP UI5 Web Component诞生之前，SAP UI5是开发SAP Fiori应用唯一可...
探索UI5 Web Components：构建未来企业级Web应用的利器
gitblog_00016的博客
05-14 421
探索UI5 Web Components：构建未来企业级Web应用的利器 项目简介 UI5 Web Components是一个由SAP维护的开源项目，提供了一系列遵循SAP Fiori设计原则的高质量可重用UI元素。这个轻量级框架（压缩后约20KB）不仅适用于复杂的Web应用程序开发，也适合构建静态网站。最令人兴奋的是，它完全兼容任何当前或未来的Web开发框架，如React、Angular和Vu...
webcomponents-fiori
a8590455的博客
04-24 327
https://www.npmjs.com/package/@ui5/webcomponents-fiori Web Component Tag name Module import Bar ui5-bar import "@ui5/webcomponents-fiori/dist/Bar.js"; Barcode Scanner Dialog ui5-barcode-scanner-dialog import "@ui5/webcomponents-fior.
UI5和React比较
Unplugged
03-08 435
通过React来实现类似UI5中element binding的效果 UI5整体采用了MVC的设计，提供了单向的、双向的，各种数据绑定，有属性绑定，有列表绑定，还有element binding。 现在流行的技术框架和语言都采用”声明式“的开发方式，比如Google的Flutter, Apple的Swift UI,还有Facebook的React。 下面我来用React来实现和之前类似的效果，上面...
如何在 React 中使用 Web Components
趣谈前端
12-06 1361
趣谈前端, 让前端,更有趣!在之前的教程中，通过上下两篇实战教程，我们从 0 ~ 1 实现了一个 Web Components 下拉组件。也通过 Webpack & npm 将我们的 Web Components 下拉组件打包发布了。那在本教程中，你将学习如何在 React 应用中使用 Web Components 。如果在此之前你也想先构建一个自己的 Web Components 组件，...
推荐开源项目：UI5 Web Components for React —— 融合Fiori设计的React实现
gitblog_00058的博客
05-23 477
推荐开源项目：UI5 Web Components for React —— 融合Fiori设计的React实现 1、项目简介 UI5 Web Components for React是一个由SAP开发并维护的开源项目，它提供了一套基于React的Fiori 3组件库，利用了UI5 Web Components的强大功能。这个库旨在帮助开发者轻松构建符合Fiori设计规范的应用程序，同时保持Rea...
一步步教你React SAP开发与项目工程化
calidan-x
04-07 394
大声道 function sss(){ }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值