Throughout 11 years of SAP development, I've seen the evolution of SAP's vision for its ERP, particularly with the introduction of FIORI, marking a significant shift towards user-experience-centered innovation. Developers have also been considered with tools like UI5, BAS, and more recently SAP BUILD Code. Now, I will focus on the introduction of TypeScript (TS) into SAPUI5, sharing my experience and observations while developing Fiori applications in TS for a specific project.
Understanding TypeScript: A Brief Introduction
TypeScript (TS), developed by Microsoft, extends JavaScript (JS) by incorporating features like static typing, interfaces, and classes: commonly found in object-oriented programming. The compilation of TypeScript into JavaScript before execution enables the detection of programming errors during development, fostering code quality and robustness.
If you'd like to delve deeper:
TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)
SAP & TypeScript: A Not-So-New Collaboration
SAP's journey with TypeScript began in 2021 as part of a "beta experimental" phase, paving the way for developers to explore this new avenue in application development. In 2023, during UI5con, SAP officially announced TypeScript support for UI5 starting from version 1.116.0.
For further details:
TypeScript for UI5: “Yay, it’s official!” – and a ... - SAP Community
Feedback and Experience Sharing
Today, rather than a tutorial on TypeScript development (perhaps in another blog 🙂), I aim to share my personal experience and insights, motivating those who are curious yet hesitant to take the plunge.
Advantages of TypeScript Integration
Static Typing:
The first error you'll encounter when starting with TypeScript is compilation errors due to missing typings! However, this very aspect underscores one of TypeScript's greatest strengths…
example of static typing for a structure
By explicitly specifying data types, TypeScript detects typing errors during compilation, fostering code reliability and reducing the risk of runtime errors. At the beginning of your project, you might see a lot of errors flagged in red, but it will quickly become a natural part of the development process.
It prevents errors that might otherwise require tedious debugging later on. And a big plus, it makes understanding the code easier, especially when dealing with a developer who isn't generous with comments 😅. This investment proves to be profitable in the long term for application maintenance, as it helps reduce errors introduced during future modifications.
To find the correct type when using a method, I refer to the API Reference - Demo Kit - SAPUI5 SDK website. Alternatively, we can use BAS; if we hover the mouse over the method, a pop-up appears and provides the types that can be used.
Interfaces and Inheritance:
Drawing from object-oriented principles, TypeScript empowers developers with the creation of classes, interfaces, and inheritances. Interfaces offer great convenience as they allow us to precisely define the structure of objects, specifying the necessary properties along with their associated data types. They are truly a "must-have" as they ensure code consistency, making it easier to maintain and evolve. Moreover, the ability to reuse these interfaces throughout the application contributes to a modular and efficient design.
ES6 Features:
Another aspect I particularly appreciated was the ES6 features. Although not specific to TypeScript, it was my experience with this language that led me to these features. They allow for writing more elegant and clear code, while ensuring application logic with fewer lines, greatly simplifying maintenance.
Challenges Faced and Overcome
Library Integration:
Despite its advantages, integrating TypeScript with SAP libraries sometimes presented challenges. For example, I needed to use the "sap/ushell/Container" libraries into a project extension: my project refused to compile because TypeScript didn't know "sap/ushell/Container".
Issue raised on GitHub :
`sap.ushell.Container` removed in 1.100? · Issue #347 · SAP/ui5-typescript · GitHub
So developers may encounter issues such as missing typings or compatibility issues, requiring workarounds until resolved by SAP through updates.
Learning Curve:
Transitioning from JavaScript to TypeScript may involve a learning curve for developers unfamiliar with static typing and TypeScript-specific syntax. While the initial investment in learning TypeScript pays off in the long run, it may temporarily impact development velocity.
Conclusion
While at first I complained about having to give up my good old JavaScript for TypeScript (like a good Frenchman 😅), I finally got the taste for TypeScript and wouldn't go back for anything in the world. From enhanced development comfort to improved code maintenance and readability, TypeScript has become an indispensable tool in my SAPUI5 arsenal.
With trust in SAP's commitment to resolving library-related issues, my journey with TypeScript continues to evolve, promising a future of enriched development experiences!
- SAP Managed Tags:
1 Comment
