SAPUI5 Meets TypeScript: A Smooth Migration Journey with Joule

[martinhaeuser]

As announced in March in this blog post by @OliverGraeff, the UI5 team has taken its first glance into the world of generative AI as a contribution to Joule in SAP Build Code. This blog post is dedicated to providing insights into the latest feature that offers AI-driven migration of UI5 applications to TypeScript.

TypeScript and UI5 – how can I use it ?

Since 2023, UI5 applications can officially be implemented in TypeScript by generating projects configured for transpiling of TypeScript or by migrating the project structure as described in this blog post by @AndreasKunz.

In addition to converting the JavaScript code to TypeScript, migrating UI5 projects to use TypeScript requires installing the required dependencies to the project and to enhance the build and server configuration with the ‘ui5-tooling-transpile-task’ and ‘ui5-tooling-transpile-middleware’.

Joule now provides AI-driven convenience functionality to migrate existing UI5 applications according to the latest recommendations on how to enable TypeScript.

Let’s migrate to TypeScript with Joule!

When using Joule in SAP Business Application Studio, there is now an additional /ui5 prefixed slash command /ui5-typescript for UI5 applications available.

While the standard /ui5 command can be used for general queries regarding UI5 development, /ui5-typescript will specifically provide options meant to migrate existing JavaScript-based UI5 applications to TypeScript. As soon as the command is selected, a list of suggestions will appear.

Migrating the project setup

If you  begin to write controller code in TypeScript, you need to migrate the existing project first to enable the required tooling.

 

What’s happening here? After sending the prompt, Joule will recognize the project structure of the application and adjust the dependencies in the package.json and configuration in the ui5.yaml. A click on the files displayed in the list will show the changes made by Joule and AI, here, for example, the changes made for package.json:

In addition to using AI, Joule will check the npm registry to retrieve the latest stable releases for the required dependencies, therefore the responses are a hybrid of AI and tooling-driven migration. The results should nevertheless always be double-checked before accepting them. For example, as shown in this screenshot, AI recommends doing a major upgrade of the UI5 CLI, which should be evaluated and tested.

The “Accept” button in the file list can be used to accept all file changes at once. This will also include necessary files, such as the newly added tsconfig.json, to configure your migrated UI5 project.

Migrating controller files

After successfully migrating the project, we recommend to migrate smaller batches of controllers to TypeScript. Again, select the /ui5-typescript command in Joule – the suggestions will provide the currently selected controller file in your project that will be migrated to TypeScript. The results can again be checked by clicking on the resulting files to view the differences.

As soon as the “Accept” button is pressed, the previous *.controller.js file will be deleted and replaced with the accepted *.controller.ts file.

You can also directly use /ui5-typescript and specifically ask for certain JavaScript files to be migrated. The recommendation is to migrate files in your application step by step to get the best possible results.

Still eager to learn more about UI5 and AI? These blog posts might be interesting for you!

• Now AI Helps You Developing SAPUI5 Applications
• SAP Fiori tools 2403 introduces Gen AI capability and more 
• UI5 freestyle development in SAP Build Code with Joule