SAP Fundamentals allows you to make Fiori applications using the desired UI framework (React, Vue, Angular) technology.
With this solution, SAP provides developers to build Fiori applications using web-based technology using open source NPM libraries. This allows developers to have a more flexible structure and get the benefits of various libraries.
Fundamentals will not replace instead of UI5 framework technology. Fiori Developers will not be dependent on a single technology and will have the chance to choose their technology freely.
In this document, we will specifically focus on the fundamentals-react approach to develop UI web applications.
To explore more about fundamental frameworks please visit below links.
https://sap.github.io/fundamental-styles/
https://sap.github.io/fundamental-react/home
We will be using Visual code studio for web application development which is a light-weight source code editor which we will be installing on desktop and will set up our fundamental-react project.
Download visual studio from the mentioned link - https://code.visualstudio.com/
React.js and Fundamental-react will be using npm based libraries hence you will be requiring node framework in your system to support npm library download and installation. Please download Node from below mentioned link.
https://nodejs.org/en/download/
now you have node and visual studio code setup installed and ready to use.
Moving on we have to create a react project and basic set up files to start our development.
Open cmd in your pc and go to the folder where you want to create your web project.
Follow the below-mentioned steps in the screenshot and try to run the initial setup project of the web app on the browser.
Source of above steps - https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
After the above steps, you will have a project folder created and ready to import to visual studio code. Just open visual studio and open folder from there and start editing your code from VS.
You can run the web app from the visual studio in chrome you need to enter command – “npm start” from VS code terminal.
Sometimes you might get an error while executing npm start command on the above steps please check the NPM react library sometime default react library might cause issue always to install latest one and follow below steps.
npm install react-scripts@2.1.8 npm start
React project folder contains some initial files and folder which is as mentioned below.
Index.js will be the starting point of application and it will call all the initial root component which is app.js in this case and default also in basic project templates.
React web application will be a combination of multiple components and will form a good structured UI.
Component is nothing just a react class which render a UI from its function renderer. Component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
React components implement a render () method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render () via this.Props.
For Basic and Advance concept of react.JS please Navigate to below- mentioned official react documentation.
https://reactjs.org/docs/hello-world.html
Moving on Install fundamental-react npm library from your cmd or VS code terminal with the following command.
for more info refer this blog - >>>>>https://sap.github.io/fundamental-react/home
Now your project folder contains fundamental-react libraries and you will be able to import all the relevant UI components in your UI.
Suppose you want to import Action bar in your web page then you just have to import action bar component and refer it to your js file and write XML syntax of code same like UI5.
Please refer the screenshot for understanding.
Here Action bar is just a component and you have to create an application just to combine relevant components get together and refer to the root node of DOM.
In your App.js file, you can create any number of component and arrange a hierarchy of controls as per their Parent-child relationships and put the final component inside the DOM root node of application.
You basic component should look like as below code.
class DemoComponent extends React.Component{
state = { //state block
}
render() {
return ( //write your html code here )
} // render func end
}; // Component ends
function App() {
return ( );
}
export default App;
In the above code, we have created a very basic component, or you can say we just created a UI Custom control with help of HTML you can create more complex controls either in fundamental-react ready to use components or if require just create in HTML. React gives us lots of freedom in this domain.
Every component has it render function to render the UI inside the DOM and then we also have State of each component which will help to change data state of control and refresh or re-render the controls based on the change of state.
Finally, we can put the main component to the Root node of application.
Please find below the project folder GitHub link of the dashboard app a react fundamental application which has a more complex use case in which we are using Northwind OData service to bind the fundamental-react component with real data.
https://github.com/hmchnd/sap-fiori-fundamental-react.git
React and Angular2 have better performance than SAP UI5 both in initial loading and rendering. Both have much smaller dependencies file size which affects the initial loading of the application. In addition, React rendering performance is much faster due to its Virtual DOM. The Virtual DOM in React is an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects.
As mentioned above, SAP UI5 comes with many UI controls ready to be used. However, sometimes you need to develop your own custom control. Developing custom controls in SAP UI5 is really painful and more difficult since there is no support for templates. This means you need to mix the output html with the JavaScript as follows:
renderer : function (oRM, oControl) {
oRM.write("");
oRM.renderControl(oControl.getAggregation("_rating")); oRM.renderControl(oControl.getAggregation("_label")); oRM.renderControl(oControl.getAggregation("_button"));
oRM.write("");
}
React uses its own syntax JSX. JSX is a preprocessor step that adds XML syntax to JavaScript. For example:
render() { return (
// write your html code here
); }
In the above example you can see developer can develop custom control with HTML and JS knowledge only they don’t require any extra understanding of framework level processing like UI5.
React and Angular2 takes advantage of Open Source tools which provide a wide range of verities and options, unlike OpenUI5.
SAP UI5 includes more than 200 UI controls ranging from basic elements to complex UI patterns. You can use them straight out of the box or extend and tweak them to meet your requirements.
On the other hand, No UI control is included as part of React or Angular2.
Both SAPUI5 and Angular2 support localization. However, one advantage of SAPUI5 is that you include translated text in Resource Bundle files and you ship these files as part of your application. However, with Angular2, You build and deploy a separate version of the application for each supported language.
On the other hand, React doesn’t provide any help to localize your application. If you want to localize your application, you can use third-party helper libraries like react-intl
SAPUI5 controls are accessible by default and provide the following accessibility features:
With React and Angular2 applications, the developer of the UI control needs to take care of the accessibility features of the application. This is also true if you want to build custom UI control in SAPUI5.
SAPUI5, React and Angular2 all provide excellent support for security like XSS protection. However, SAPUI5 provide additional security features:
Also, Angular2 provide additional security features:
With SAP Fiori Elements you can use smart templates to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding. An app based on smart templates uses predefined template views and controllers that are provided centrally, so no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and uses the corresponding views for the SAP Fiori app at startup.
SAPUI5 and Angular2 have built-in support for routing making it easy to build single page application without any external dependency. On the other hand, React is a library to build user interfaces without any additional features like routing. However, you can add routing support and build a single page application with external/community library React Router.
SAP UI5, React and Angular2 all are great UI frameworks that get the job done. Whatever framework of choice, it always comes into either personal preference or it suits your use case better.building applications on top of SAP infrastructure/systems, it makes more sense to use SAPUI5. On the other hand, if my application requires a lot of custom controls that don’t exist in SAPUI5, I would consider React
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
13 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 | |
2 |