UI5 Advanced Programming Model - Overview (UI5con 2019)

[WouterLemaire]

This blog series is based on my presentation at UI5con 2019 in Walldorf. In case you want to view the full session, you can find it on youtube:



The UI5 Advanced Programming Model is not a library or a framework, it’s a way of developing UI5 apps. This is not something I just came up with, it’s something that has grown over time and many projects. I’m developing UI5 apps already for a long time, before UI5 I did ABAP. Coming from an ABAP background and learning JavaScript is not easy:

let isHard = ABAP && learn(JS);

From my first project until now, I learned a lot from developing UI5 apps. In each project I’ve tried different approaches and concepts to improve my way of developing apps. Today, I reuse and combine the different approaches and concepts from previous projects together and call it the UI5 Advanced Programming model.

Why?

Before I’m going to explain how it works, I’m going to explain the why. First of all, it depends on the requirements of your business. Most of the time, it starts with small and simple requirements. For this, you could go with Fiori Elements which will give you a great app in no time. Unfortunately, this is almost never the case. Only a few apps start simple and stay simple. Most of the time, you receive requirements which ask for more complex logic that are not always possible with Fiori elements. You could start with extending the Fiori Element app and make some kind of a hybrid app with Smart Controls and custom code. This will probably do the job, at least if you’re lucky ? . I have experienced that the smart controls do a good job until the app requires some complexity. Even with the combination of custom code, it could become a show stopper. Because of that, I ended up with a complete freestyle app most of the time:



When going freestyle, I face the limitations of the serverside OData model. Don’t get me wrong, the OData model does a great job with integrated paging, filtering, sorting and so on… . As soon as you want to implement some logic on the client side, you will probably need a client side JSON model. Using the OData model and JSON model together in a complex freestyle app can result in a mess of code fast.

Another problem of the OData model, it’s not using promises… Look at the read function of the API and you’ll notice that it’s using callback functions for success and error:



The biggest problem of all? The “createEntry” function of the OData model does not support deep creates! This is one of the main reasons that we need to use a JSON model in combination with the “create” function of the OData model.



The UI5 Programming model provides a way of developing complex freestyle apps that combines the serverside Odata model wrapped into promises and clienside JSON model in a logical structure that everyone understands. This should also avoid of having big files with more almost 3000 lines of code like in this app:



(I found this in one of the standard SAP Fiori apps ? )

How?

In the UI5 Programming model I divide the app in different layers, but not too many?. First of all, I put everything that’s responsible for the communication with the API in a service layer. This layer will also have a reference to the OData model which will be used for all the OData operations.

On top of that, I add a layer that keeps the model on the client side in the same structure as provided by the API. The model layer contains a state that handles all the communication between the controller and the service layer. The state puts the data in the same structure, as the API provides it, on the client side by putting it in different objects to have separation of concerns.

The high-level architecture of the app looks like this when we put everything together.



I’m going to dive deeper into each layer in the next blogs starting from the template in the SAP Web IDE:

- Implement the Service layer that handles all communication with the OData service: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-service-layer-ui5con-2019

- Implement the Model layer containing a client-side representation of the OData model: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-model-layer-ui5con-2019

- Show the benefits with the implementation of a “Create” functionality: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-create-ui5con-2019

- Finish the app by using reactive programming: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-make-it-reactive-ui5con-2019

 

You can find the full demo project on GitHub:

https://github.com/lemaiwo/UI5Con2019

Recap

With the UI5 Programming model, you make your app future proof and open to implement any fancy feature request!

You keep your code clean by dividing everything in separate objects that make logical sense, separation of concerns.

Going all the way with promises by starting at the bottom, the OData model functions.

Last but not least, you used reactive programming!