One of the future trends of SAP UI5: Embrace TypeScript

This is Jerry's 3rd original article in 2022 and the 371st original article of this official account.

In recent years, the field of front-end development has developed rapidly, and various new technologies, new frameworks, new tools and new development concepts have emerged one after another. On the other hand, the rules and complexity of front-end applications are also greatly increased. Although JavaScript has become the most commonly used programming language for web front-end development, at the beginning of its birth, JavaScript was not designed to develop large-scale and complex front-end applications. As a dynamically typed programming language, JavaScript lacks type checking support, so that many code problems cannot be discovered until runtime, which reduces the efficiency of project development and makes it impossible to develop complex front-end applications.

Because of this, more and more modern front-end development frameworks, such as Angular, React and Vue, have introduced support for TypeScript.

TypeScript comes from a well-known family. It is a statically typed programming language launched by Microsoft in 2012. It is a superset of JavaScript and can be compiled into JavaScript for execution.

The biggest feature of TypeScript is static typing and native support for the ECMAScript 6 standard at the language level.

Front-end applications developed based on TypeScript can perform type and syntax checking at compile time, which improves the robustness and predictability of the code and reduces project maintenance costs. TypeScript's native support for modules, namespaces, and object orientation also helps reduce project organization and management costs for large and complex front-end applications.

What makes Web developers even more powerful is that modern popular Web development tools such as Visual Studio Code, WebStorm, Atom, etc., all provide very complete support for TypeScript.

A Success Story of TypeScript in SAP Product Development

Taking the work of Jerry's SAP e-commerce cloud Spartacus UI development team as an example, by January 2022, the latest version of Spartacus is 4.3.0:

https://github.com/SAP/spartacus

The total number of valid codes has exceeded 350,000 lines, and the number of ts and html files has exceeded 5,000.

The development language chosen by Spartacus is TypeScript. Thanks to the many advantages of TypeScript mentioned above, the development efficiency of our team has not been reduced by the complexity of the application itself.

As another enterprise-level front-end application development framework that has been born for more than ten years, SAP UI5 has also introduced support for TypeScript from 2021. Today, this support work is still in progress, and the latest progress can be obtained from the SAP official website:

https://sap.github.io/ui5-typescript/

This article introduces how SAP UI5 introduces support for TypeScript through an actual Hello World level SAP UI5 application.

Create a new empty folder ts-ui5. Because we need to use npm to install dependencies related to TypeScript development, first create an empty Node.js project using npm init. The command line generates a default package.json file.

Create a new src folder and place a Component.ts file in it. The code is as follows:

In this code, I create a new Component class (line 6) whose parent is the SAP UI5 standard UIComponent.

Here's our first taste of TypeScript's static type checking: Visual Studio Code complains that the module sap/ui/core/UIComponent and its type definitions cannot be found.

This is an expected error, because TypeScript itself cannot recognize the type definition of SAP UI5, so we need to manually import the complete type definition system of the SAP UI5 framework into our TypeScript project.

Import the type definitions provided by SAP UI5 for TypeScript using the following command line:

npm install --save-dev typescript @types/openui5@1.97.0

After installation, the above compilation error disappeared.

We installed the so-called DefinitelyTyped (external type definition) for SAP UI5 for TypeScript through the command line npm install. The SAP UI5 development team generated a set of external type definitions that TypeScript can recognize based on SAP UI5 JSDoc, so that TypeScript can rely on these type definitions, Perform compile-time static type checking.

The external type definitions made by the SAP UI5 development team for TypeScript are published in the following publicly accessible Github repository:

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openui5

After npm install, these type definition files, in the form of files in d.ts format, appear in the project's node_modules\@types\openui5 folder. These files are also the basis for TypeScript's syntax checking of SAP UI5 application code.

Because browsers cannot run TypeScript directly, we need to use the TypeScript compiler tsc to compile Component.ts into JavaScript code.

Create a configuration file tsconfig.json for the TypeScript compiler. The function of this file is to provide more detailed compilation options. For example, by maintaining the target field as es2015, it is specified that the compiled JavaScript file supports the syntax features of es2015, and the compiled input directory is src, and the output directory is dist.

ES2015 is the first version of ECMAScript 6, released in June 2015, officially named ECMAScript 2015 Standard, or ES2015 for short.

After the tsconfig.json file is maintained, execute the command line npx tsc to compile.

After successful compilation, a new Component.js file is generated in the folder dist, and its JavaScript syntax supports ES2015 features.

For many SAP UI5 developers, it may be more accustomed to use the traditional UIComponent.extend("ui5.typescript.helloworld.Component") method to define Component, rather than the ES2015-based extends syntax below.

On the other hand, not all browsers support ES2015, and we shouldn't force customers to upgrade their browsers to ES2015-capable versions:

Therefore, we can use the tool Babel to translate the ES2015 version of JavaScript code into a lower version of traditional JavaScript code (such as ES5).

Install the Babel transpiler dependencies using the command line:

• npm install --save-dev @babel/core @babel/cli @babel/preset-env
• npm install --save-dev @babel/preset-typescript babel-preset-transform-ui5

Also create a configuration file .babelrc.json for Babel, and tell it the specific details of the translation operation through the records in the presets array:

Execute the following command line to use Babel for the JavaScript translation operation, specifying the output folder as webapp:

npx babel src --out-dir webapp --extensions ".ts,.js"

After the translation is completed, a Component.js appears in the output folder webapp, and its source code is the traditional syntax of UIComponent.extend familiar to SAP UI5 developers.

The SAP UI5 development team has prepared a Github repository for learning in advance, which contains the source code of a SAP UI5 Hello World application developed with TypeScript:

https://github.com/SAP-samples/ui5-typescript-helloworld/blob/main/src

We copy the entire contents of the src folder of the repository to the local src folder.

The following figure is the App Controller code developed with TypeScript:

(1) Import the Controller class definition from the external type definition provided by sap.ui.core.d.ts

(2) Define a new App class that inherits from the SAP UI5 standard Controller class

(3) Overload the two public methods defined by the Controller class

Do you think TypeScript, a purely object-oriented way of writing code, is more readable than traditional ES5 JavaScript code?

Thanks to the external type definitions provided by the SAP UI5 team, we can now enjoy syntax checking and code in the local development environment such as Visual Studio Code, which can only be supported in online development environments such as SAP WebIDE and SAP Business Application Studio. Autocomplete prompts and other functions are now available:

After TypeScript development is complete, use the open source SAP UI5 Tools (@ui5/cli) tool to build and start locally.

To do this, first install the dependencies of SAP UI5 Tools:

npm install --save-dev @ui5/cli

Also we need to create a configuration file ui5.yaml for @ui5/cli with specific build options.

Use the following command line to translate the TypeScript code in the src folder into traditional JavaScript code through Babel and place it in the output folder webapp.

npx babel src --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files

Explanation of the two options in the above command line:

• source-maps true: Generate .map source map files so we can set breakpoints and step through the original TypeScript code directly in the Chrome DevTools. What the browser actually executes is the JavaScript code transpiled by babel. Through these .map mapping files, Chrome developer tools will automatically help us map the currently executed JavaScript code to the original TypeScript code.
• copy-files: For all files with a suffix other than .ts, copy directly from the src folder to the webapp folder, such as all the xml view files in this project.

The .map source mapping file generated by babel:

Finally start the SAP UI5 application locally via the command line:

npx ui5 serve -o index.html

It looks like this:

After opening the Sources tab of Chrome developer tools, what you see is the original TypeScript file, you can directly set breakpoints and single-step debugging:

For the latest progress of SAP UI5's support for TypeScript, please continue to pay attention to the SAP official website: https://sap.github.io/ui5-typescript/

Thanks for reading.

More Jerry's original articles, all in: "Wang Zixi":