We all know Fiori representative SAP new generation UI User interface style , and UI5 yes Fiori UX(User Experience, User experience ) Specific implementation technology . From the following figure Journalism Can see ,SAP It was decided that Fiori Same as specific UI Realize technical decoupling , For what reason ？

as everyone knows , The development speed of front-end technology is very fast , New concept , A new term , New tools emerge in endlessly , Many front-end developers often lament " I can't learn ", that , If only bound to a specific UI implementation technique ,Fiori UX Will lack enough flexibility , It is difficult to make full use of the latest technology in the industry to better serve end users .

meanwhile , This move also fully reflects SAP Really listening to the voice of developers in their own ecosystem , This decoupling allows SAP Developers according to the actual project needs , Flexible choice of the best UI Framework to develop Fiori application .

Fiori UX Same as the bottom layer UI The key to realizing framework decoupling is SAP Fiori Fundamentals, A lightweight presentation layer implementation . Technically ,SAP Fiori Fundamentals It's not new UI Technology or framework , But a series of stylesheets and HTML A collection of tags , To make SAP In the ecosystem UI Developers use their favorite UI frame , such as Angular,React,Vue Wait for development , At the same time, it automatically ensures that the developed application still has Fiori Style and user experience .

SAP Fundamentals It's a use HTML and CSS Lightweight presentation layer , With the help of Fundamentals Style sheets and HTML Tag library , Developers can be based on Web Build a consistent SAP Applications .

Use SAP Fundamentals It can bring the following benefits to developers and enterprises ：

• Fundamentals Library Styles It can be applied to any Web Frames and Libraries （ Include Web Components）
• Support the most popular front-end development framework , Including but not limited to Angular、React and Vue
• Enterprise customers and partners can easily adopt
• It's easy to do UI Coordination and theme —— Especially applicable to newly acquired companies or legacy solutions (Legacy Solutions)

today ,Fiori Fundamentals Library has been widely used in SAP Ecosystem products and business lines , for example SAP Commerce Cloud、Kyma、Luigi、SAP C/4HANA cockpit、SAP Concur、SAP Customer Data Cloud（ also called Gigya）、SAP Service Cloud （ also called Coresystems）、SAP Fieldglass、SAP Ariba and SAPDataHub etc. .

SAP Fiori Fundamentals Appearance , That doesn't mean it will replace UI5, actually ,SAP about UI5 The maintenance and function enhancement of has not stopped .

Fiori Fundamentals Same as UI5 Web Components The relationship between

UI5 Web A component is a set of components based on Web Standard packaging 、 Reusable and lightweight UI Elements. They merge SAP Fiori 3 Design , Allows developers to create and SAP Fiori Design guidelines consistent user experience across applications , It has nothing to do with the specific front-end development framework .

UI5 Web Components have OpenUI5/SAPUI5 Familiar enterprise level features in the framework , For example, stability 、 internationalization 、 Accessibility and topic support , And in UI A clear interface is introduced between the use and implementation of elements .

UI5 Product line UI5 Web The core project of component area is as OpenUI5/SAPUI5 The framework was created as an important part of the evolution to modularity and common toolbox , The purpose is to provide a separate set of modules , Thus making Web Developers can easily add it to development projects , To build an enterprise class Web Applications .

Talk is cheap. Show me the code. Let's deepen our understanding of SAP Fiori Fundamentals The understanding of the .

Because the team where I work carries out prototype development , Most colleagues in the group like to use Vue, So let's try SAP Fiori Fundamentals + Vue This pair .

First of all, we have to have a working Vue application , Then on this basis, process .

Readers can read in my article SAP Blog I found a Hello World Of Vue application , adopt webpack Run after packaging , You can see the displayed in the browser Hello World：

This Hello world Of Vue application , The project structure is as follows ：

Let's process on the basis of it .

1. Install... Under the project folder fundamental-vue. This is for SAP Fiori Fundamentals Realize a lightweight Vue Set of components .

npm install --save fundamental-vue

After installation package.json You can see it in the library fundamental-vue still beta edition ,

2. The following link Listed SAP Fiori Fundamentals I'm in support of Vue Components , It also introduces how to customize a new Vue Components .

Here is a Table The runtime effect of the component , It's not hard to find this Table The appearance is the same as we used before UI5 The development is very similar .

Click on Show Code, It will show this Table Component's Vue Implement the source code , Like us UI5 Toolkit The controls displayed in UI5 XML View The source code in , The truth is interlinked .
Paste this pile of code into our Vue application src Under folder index.vue in ：

Also in index.vue in , stay module.exports Realize as Button Event handler addCurrentEntry, And hard coding some test data ：

stay main.js Add two lines to :

import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);

The last step , stay index.html The introduction is located in CDN Upper Fiori Fundamentals Of css file . Of course github It is also mentioned that you can also use npm install --save fiori-fundamentals Install it locally for use .

At this point, the processing is over . use webpack After packaging , function npm run dev start-up wepack-dev-server, You can go to localhost See the following effect in ：

Enter the name of the new counselor , Click on Add Entry The button can then be entered into the table .

This use Vue Developed from components with Fiori UX Style application runtime effect , Check on the mobile phone, as shown in the figure below ：

summary

This paper first introduces the driver SAP Fiori UX The design language is the same as SAP UI5 Market reasons for framework decoupling , So that leads to Fiori Fundamental The concept of , Then choose Vue This front-end framework , Explained how to use Fiori Fundamentals add Vue This pair , Implement a simple with Fiori UX Front end applications .