Fiori Fundamental-React based web application development for beginners

Introduction

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

 

Development Environment and IDE setup

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

VS code studio Project Folder and files structure

React project folder contains some initial files and folder which is as mentioned below.

• node_modules – >>>> This folder contains all the npm node and react libraries and dependencies which you are going to install to support project development.
• src  – this folder going to contain main project files for code writing and content of web application.
• src/App.css – project css file.
• src/app.js    –   application component where we will write down UI rendering code.
• src/index.js – this file contains the root node for DOM rendering and DOM renderer react libraries and app.js component will be imported here and will be placed at the root node of DOM.

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.

npm install fundamental-react

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

Benefits of using the react-fundamental library for UI development

Performance –  

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.

Custom Control easy to develop –

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.

 Build Tools –

React and Angular2 takes advantage of Open Source tools which provide a wide range of verities and options, unlike OpenUI5.

• npm: React and Angular2 packages are published to npm repository making it easy to install and update packages. On the other side, OpenUI5 is not published to npm repository. The only way to install OpenUI5 packages is through bower.
• Webpack: It is easy to use Webpack as a module bundler with React and Angular2 and there are comprehensive guides for the different configurations and options.
• You have the freedom of using any transpiler you prefer. You can use TypeScript, ES5, Dart, and ES6 … etc.

The limitation with the react-fundamental library-

No Rich Responsive Controls  –

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.

No in-built Localization and Internationalization support (i18n) –

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

Accessibility Issue:

SAPUI5 controls are accessible by default and provide the following accessibility features:

• Keyboard handling
• Screen Reader Support to aid people with visual impairments
• High-Contrast Black (HCB) Theme that supports people with visual impairments.

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.

Security Issue:

SAPUI5, React and Angular2 all provide excellent support for security like XSS protection. However, SAPUI5 provide additional security features:

• Clickjacking protection (need to be configured, as needed, by the application)
• Cross-site request forgery (CSRF) protection for the data sent to the server by SAPUI5 with OData model.
• URL Whitelist Filtering API

Also, Angular2 provide additional security features:

• CSRF protection helpers
• Cross-site script inclusion (XSSI): Angular HTTP library automatically strips the string “)]}’,\n” from all responses before further parsing.

Less Development efficiency compares to Fiori elements:

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.

No routing support:

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.

 

Conclusion

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