Learning Route Guide for SAP Fiori

The following is the Fiori learning route guide I summed up based on my experience accumulated in my work in SAP Chengdu Research Institute for 15 years. It is purely personal opinion and does not represent SAP.

1. What is SAP Fiori, what is SAP UI5, and what is the relationship between the two. The evolution of Fiori 1.0, 2.0 and 3.0: Introduce the differences and connections between SAP Fiori and SAP UI5, two confusing concepts for beginners, and introduce the development history of Fiori and UI5, past and present.
2. Get started with SAP UI5 with a Hello World application: Take a look at the components of a Hello World-level SAP UI5 application.
3. Analysis of the loading and bootstrapping process of SAP UI5 application: paste the url of the previous unit Hello World UI5 application into the browser address bar and press Enter, what happened behind the scenes?
4. SAP UI5 control learning: SAP UI5 includes a huge control library suitable for enterprise-level front-end applications. Learn the components and application scenarios of SAP UI5 controls through a simple example.
5. SAP UI5 XML View Learning: SAP UI5 supports JavaScript views and XML views. However, almost all SAP standard products choose the XML view instead of the JavaScript view. What is the reason behind this?
6. SAP UI5 Controller Learning: In-depth learning of C-Controller in SAP UI5 MVC framework.
7. SAP UI5 Module learning: Many programming languages and technical frameworks have the concept of Module. SAP UI5 is no exception. What are the domain problems that need to be solved by referring to Module?
8. SAP UI5 JSON model learning: SAP UI5 applications support three data models: JSON, Resource and OData. Let's start with the simpler and easier-to-understand JSON model.
9. SAP UI5 Multilingual Support (internationalization): Learn the principles of its support for internationalization from the SAP UI5 Resource model.
10. SAP UI5 Component learning: To configure the SAP UI5 application into Fiori Launchpad as a tile, and be accessed in the same way as the SAP standard product UI, Component is essential.
11. What is SAP UI5 Application Descriptor: Another integral component to configure SAP UI5 application to Fiori Launchpad.
12. CSS processing in SAP UI5: SAP UI5 standard and custom CSS processing mechanism learning.
13. Embedded Views, Dialogs and Fragments for SAP UI5: A powerful tool for reusability of SAP UI5 view layers.
14. Data binding of SAP UI5 (1): Data binding is the highlight of the front-end framework, and it is also the focus and difficulty for developers to learn.
15. SAP UI5 data binding (2): Some advanced content of SAP UI5 data binding, binding mode, composite binding, binding expressions and other concepts.
16. Formatter, filter, Sort and Group operations for SAP UI5
17. SAP UI5 OData model: UI5 + OData is the standard discussion of front-end development in SAP's flagship product including S/4HANA. The importance of the OData model is self-evident.
18. Cross-domain problem in SAP UI5 development: Cross-domain problem is a problem that front-end developers can never avoid. This unit describes what solutions SAP UI5 offers to solve cross-domain problems.
19. Mock server of SAP UI5 - a powerful tool for local development, which can isolate the dependency with the real OData service on the backend.
20. QUnit and OPA for SAP UI5 - Introduction to SAP's official UI5 unit testing and integration testing tools.
21. SAP UI5 Routing Design (1) - Routing is another important knowledge point in the front-end development framework.
22. SAP UI5 routing design (2)
23. SAP UI5 Custom Control Development - One of the powerful Extensibility manifestations of SAP UI5 is the support for custom controls.
24. How to deploy SAP UI5 to the ABAP server - The Fiori application in S/4HANA is essentially the deployment of SAP UI5 on the ABAP server. This unit learns how to deploy a locally developed SAP UI5 application to an ABAP server.
25. How to deploy SAP UI5 to SAP BTP platform - close contact between SAP UI5 and SAP cloud platform.
26. Troubleshooting SAP UI5 applications (Chrome Developer Tools + UI5 inspector) - If you want to do a good job, you must first have a sharp tool. Explore the power of Chrome's developer tools natively.
27. Troubleshooting of SAP UI5 applications (diagnostics tool that comes with SAP UI5) - Learn the problem diagnosis tool that comes with SAP UI5.
28. Native Builds of SAP UI5 Apps - Demystifying component-preload.js.
29. How to use SAP UI5 to call native camera for barcode scanning - A practical example of SAP UI5 calling native hardware using JavaScript.
30. Building SAP UI5 Apps into Cordova Hybrid Apps - A First Look at SAP UI5 Mobile Development.
31. Development of SAP UI5 Local Launchpad - How to locally develop a Fiori Launchpad that imitates S/4HANA.
32. Implementation of SAP UI5 Input Validation Mechanism - Learning of Standard Validation Mechanism and Custom Validation Mechanism.
33. to be continued

You can learn these contents step by step from Jerry's tutorial.

A set of step-by-step learning tutorials for SAP UI5 developers