Last few weeks I’ve been posting blog posts in combination with video tutorials on different aspects of how I develop my apps by using TypeScript in UI5. In the end all parts are connected to each other with each its own responsibility. It will enable you to make a UI5 freestyle app well structured and easily maintained in TypeScript. Not only because of TypeScript but because of separating everything into parts. You won’t have files with an insane number of lines with code that is not maintainable! It will also make it easier to find things back.
Maybe you recognize this setup, I presented something similar at UI5con in 2019. Same setup but not yet in TypeScript:
https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-overview-ui5con-2019/
In this blog post I want to summarize all parts of the last few weeks.
Starting with a general intro about TypeScript in UI5: https://blogs.sap.com/2021/11/19/my-first-experience-with-typescript-in-ui5-introduction/
Followed by generating a UI5 project in TypeScript:https://blogs.sap.com/2021/11/23/my-first-experience-with-typescript-in-ui5-prepare-ts-project/
Adding a TypeScript BaseController: https://blogs.sap.com/2021/11/25/my-first-experience-with-typescript-in-ui5-basecontroller/
After that I added layers that build up each other to setup a good skeleton to build a freestyle UI5 app that allows you to do anything and still keep it simple. A Service layer that works with promises using the initially created OData model.
A state/model manager that consumes this service to feed an internal model with instances of classes stored in a JSON model.
An Overview on how it is all connected:
The details on the service layer that explain how the service wrapper works and how to consume it: https://blogs.sap.com/2021/11/30/my-first-experience-with-typescript-in-ui5-odatamodel-service-wrapp...
The state/model manager explained in combination with its classes: https://blogs.sap.com/2021/12/07/my-first-experience-with-typescript-in-ui5-classes-and-state-model-...
The final part that shows already a small benefit of this setup. The bigger it becomes the more you’ll benefit from it: https://blogs.sap.com/2021/12/08/my-first-experience-with-typescript-in-ui5-final/
It all comes with two GitHub repos, one with the full example:
https://github.com/lemaiwo/UI5TypeScriptDemoApp
Another one that only shows the service layer in case you are only interested in this part:
https://github.com/lemaiwo/TypeScriptServiceDemoApp
I also created a playlist for all videos in the blog posts:
https://www.youtube.com/playlist?list=PLq7ASaJc50zztCrR1uDbITcXYYrC1Sy8i
It’s not because I developed apps like this before the same way that I wanted to the exact same thing with TypeScript. I just tried and wanted to get the most out of TypeScript. It seemed logical that this way TypeScript is fully used with the types in the OData wrapper and the classes in in the model layer.
Nevertheless, I would be happy to receive feedback on how you develop in UI5 with TypeScript. Or if you have ideas on how to improve this! Any feedback is welcome!
Maybe you recognize this setup, I presented something similar at UI5con in 2019. Same setup but not yet in TypeScript:
https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-overview-ui5con-2019/
In this blog post I want to summarize all parts of the last few weeks.
Starting with a general intro about TypeScript in UI5: https://blogs.sap.com/2021/11/19/my-first-experience-with-typescript-in-ui5-introduction/
Followed by generating a UI5 project in TypeScript:https://blogs.sap.com/2021/11/23/my-first-experience-with-typescript-in-ui5-prepare-ts-project/
Adding a TypeScript BaseController: https://blogs.sap.com/2021/11/25/my-first-experience-with-typescript-in-ui5-basecontroller/
After that I added layers that build up each other to setup a good skeleton to build a freestyle UI5 app that allows you to do anything and still keep it simple. A Service layer that works with promises using the initially created OData model.
A state/model manager that consumes this service to feed an internal model with instances of classes stored in a JSON model.
An Overview on how it is all connected:
- The NorthwindService that uses the ODataModel for sending HTTP requests and wraps it in promises
- NorthwindState uses the NorthwindService to get the data, wraps it in instances of classes and stores it in an internal JSON model
- The components creates an instance of the NorthwindService with the ODataModel as an argument and the NorthwindState with the instance of the NorthwindService as an argument
- The controller or component sets the model of the NorthwindState on the component or view so it can be used for bindings
The details on the service layer that explain how the service wrapper works and how to consume it: https://blogs.sap.com/2021/11/30/my-first-experience-with-typescript-in-ui5-odatamodel-service-wrapp...
The state/model manager explained in combination with its classes: https://blogs.sap.com/2021/12/07/my-first-experience-with-typescript-in-ui5-classes-and-state-model-...
The final part that shows already a small benefit of this setup. The bigger it becomes the more you’ll benefit from it: https://blogs.sap.com/2021/12/08/my-first-experience-with-typescript-in-ui5-final/
It all comes with two GitHub repos, one with the full example:
https://github.com/lemaiwo/UI5TypeScriptDemoApp
Another one that only shows the service layer in case you are only interested in this part:
https://github.com/lemaiwo/TypeScriptServiceDemoApp
I also created a playlist for all videos in the blog posts:
https://www.youtube.com/playlist?list=PLq7ASaJc50zztCrR1uDbITcXYYrC1Sy8i
It’s not because I developed apps like this before the same way that I wanted to the exact same thing with TypeScript. I just tried and wanted to get the most out of TypeScript. It seemed logical that this way TypeScript is fully used with the types in the OData wrapper and the classes in in the model layer.
Nevertheless, I would be happy to receive feedback on how you develop in UI5 with TypeScript. Or if you have ideas on how to improve this! Any feedback is welcome!
- SAP Managed Tags:
1 Comment
