const and let declarations in UI5

Question

I would like to know if it's secure to use let and const keywords while working with UI5. I don't know if returning a let, const, or even creating for instance a sap.m.Table with let would have adverse effects.

Maybe someone has some previous experience with this?

Answer 1

UI5 1.116+

UI5 now officially allows use of ES6 syntax if the target UI5 version is 1.116 or higher. The "restriction" from the topic Browser and Platform Support has been updated accordingly:

⚠ Restriction

With OpenUI5 1.116, the framework leverages features of modern ECMAScript up to and including ECMAScript 2022 Language Specification. Certain restrictions do apply, however. For more information, see ECMAScript Support.

The below "Note" section still applies.

UI5 1.115 or lower (previous answer)

The documentation still warns about the possible incompatibility with UI5:

⚠ Restriction

We currently do not guarantee that newer ECMAScript standards, such as ES6/ES2015, work with OpenUI5.

On the other hand, I've been using ES6+ features (including const and let) with UI5 without any issues so far.

Note

• In order to support building the application with ES6+ syntax in the application code with ...
  • UI5 Tooling: upgrade the npm dependency @ui5/cli at least to the 3.0 version. See "ECMAScript Support" in UI5 Tooling for more information.
  • SAP Web IDE: if your project still depends on the legacy @sap/grunt-sapui5-bestpractice-build, ensure its version is at least 1.3.65 or newer e.g. 1.4.0.

• Reporting the code coverage with the legacy blanket.js library version lower than 1.2.0 fails if ES6+ syntax is used for the target project. Even if no ES6+ syntax is used, the UI5 bootstrap config sap-ui-async has to be disabled in order to allow the code coverage report with blanket.js. Subscribe to OpenUI5 issue #3540 to get notified about the latest development regarding the code coverage report feature in UI5 projects.

Answer 2

I would assume that you are afraid of browser incompatibilities? let and const are constructs for declaring variables; they do not affect object lifetimes. let declares a block scope variable whilst const declares a read-only variable. The objects contained in these variables have a completely different life cycle.

This is not really a UI5 issue, but a general JavaScript issue. Regardless of the libraries that you are using, the compatibility of your app will be determined by two factors:

• The compatibility matrix of each of the library that you are using.
• The compatibility of the code that you are writing.

As you can't really control the compatibility matrix of UI5 (which should cover the compatibility matrix for ES6), it all boils down to two major questions that you have to ask yourself:

• What browsers do I support?
• Can I use something to transpile my code to support older browsers?

For the first question, if you only care for browsers which can support natively ES6 (not IE), then you can definitely use it. Otherwise, the second question might make more sense. If you have a decent C.I. pipeline in place for your app, then you could use something like babel to transform your shiny ES6 code into the verbose spaghetti that IE loves so much.

---

Later edit:

As per the comments, I would point out that ES6 is not a supported in an all-or-nothing fashion. Feature sub-sets (like support for const and let) may be available for some browsers (IE) even if ES6 in its entirety is not. Concretely, based on https://caniuse.com/#feat=let and https://caniuse.com/#feat=const, it seems that let and const are available in IE11 (but not in older versions). Other features like ES6 class definitions are not supported.

Answer 3

SAP WebIDE can deploy ES6 let/const syntax as long as you use a newer version of the build module.

Just use: "@sap/grunt-sapui5-bestpractice-build": "1.3.65"