Skip to Content
Technical Articles

How to improve Fiori/UI5 code quality with Typescript, not using Typescript

I know, you read this blog’s title and asked yourself “what has this guy been drinking?“. Let me tell you a story…

You’re developing your new Fiori/UI5 app. The app gets the values from 2 fields, adds them and sets the result into a third field. If the result is > 50, the third field must have a blue border. If not, the border should be red. You’re using sap.ui.core.ValueState to achieve it.

You check the code and there’s nothing wrong, no errors. You press RUN on SAP Web IDE, go to the newly opened tab, go grab a coffee, return and test it manually (like a caveman). The test result is 1000, there are no errors in the browser’s console. However, for your surprise the border colour hasn’t changed. You try different numbers and none works, the colour remains the same and you see no errors  😞

Fiori/UI5 app code: all good, right?  👍

Fiori/UI5 app result: not good  👎

 

You check and recheck your code over and over again… Until you find out you had misspelled ValueState.Information and ValueState.Error. You fix, retest and it works. Happy days!

On the following day, you mention the episode to a colleague. You remember the good old days and say “ABAP was much better! It would tell me I had such a silly mistake on my code. Also, it would have autocomplete, I wouldn’t need to type all methods and attributes which is error-prone“. He agrees and tells you about something called Typescript, a super type of Javascript (think of it as Javascript meets Java) which could give you the same development experience. He explains all the benefits of a strongly typed language, code completion, IntelliSense, how you can use all new Javascript features, even the ones not supported by the browser in your customers and so on. You are hooked!

He takes you to see some examples. You look at the code and the first thought is: “Uh? This isn’t Javascript whatsoever! It’s another whole new language!“. He explains you cannot run Typescript in the browser, you need to convert the code to Javascript. Transpile TypeScript into JavaScript, he says. He shows you all the configuration and steps for it. You ask whether you can use it with ui5-tooling and he replies: “Yeah, nah… Not out of the box. You would need to write an ui5-builder extension, perhaps use Babel or Webpack, blablabla“. You lay down on the floor and start crying…  😭

A week later, after having more issues like the one described above and putting some thoughts on that TypeScript idea, you ask that colleague: “Can I have some of the benefits without all the hassle of learning and developing this whole new thing?“. He replies: “Yes, you can! All you need to do is…“.

You decide to try, then you open the very same code as before, now on MS Visual Code, no errors either.

 

You install the dependency: $ npm install @openui5/ts-types

//package.json
{
  "name": "ui5-typescript-jsdoc",
  "version": "0.0.1",
  "description": "How to improve Fiori/UI5 code quality with Typescript",
  "private": true,
  "devDependencies": {
    "@openui5/ts-types": "^1.60.3"
  }
}

 

And create the tsconfig.json file at the root folder.

//tsconfig.json
{
  "compilerOptions": {
      "module": "none",
      "target": "es2018",
      "noEmit": true,
      "checkJs": true,
      "allowJs": true,
      "types": ["@openui5/ts-types"]
  }
}

 

You add the JSDoc annotation to the code.

//Main.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/ValueState"
],
/**
 * Module dependencies
 *
 * @param {typeof sap.ui.core.mvc.Controller} Controller
 * @param {typeof sap.ui.core.ValueState} ValueState
 */
function(Controller, ValueState) {
	//The rest of the code here...
});

 

Now you check the same code after basic config for TypeScript + JSDoc annotation: a wild error appears! Easy to detect and fix! You also have Intelligent code completion available now  \o/

 

This was a ridiculously over simplified scenario, but enough to demonstrate how helpful TypeScript can be. Especially for new comers which are still learning UI5. But don’t think it wouldn’t help you UI5 experts.

IMO, it’s a great improvement in code quality for a minimum effort and near zero learning curve. If you’re not ready to take the leap to a full blown TypeScript app yet (or if you just don’t want to), you can at least leverage on some benefits just using a very basic configuration (which is always the same) and few JSDoc annotations. NPM package @openui5/ts-types is maintained by SAP, it’s still in beta and evolving.

This simple approach can save time and avoid heaps of smalls bugs, so why not give it a shot? Also, no need to rely on Hungarian notation anymore. Who doesn’t like cleaner and more readable code? What do you think? Let me know your thoughts…

8 Comments
You must be Logged on to comment or reply to a post.