En 11 ans de développement SAP, j’ai suivi l’évolution de la vision de SAP pour son ERP, notamment avec l’arrivée de FIORI, marquant un tournant majeur vers une innovation centrée sur l’expérience utilisateur. Les développeurs ont également été pris en compte avec des outils comme UI5, BAS et plus récemment SAP BUILD Code. Je vais maintenant me concentrer sur l’introduction du TypeScript (TS) dans UI5, partageant mon expérience et les observations que j’ai faites lors du développement d’applications Fiori en TS pour un projet donné.

Le TypeScript

Qu’est ce que c’est ?

Permettez-moi de vous faire une brève description. Le TypeScript (TS) est un langage de programmation open-source développé par Microsoft, qui étend JavaScript (JS) avec des fonctionnalités telles que le typage statique, les interfaces et les classes, propres à la programmation orientée objet. Le TS est compilé en JavaScript avant l’exécution, cette compilation permet de détecter les erreurs de programmation lors du développement plutôt qu’à l’exécution, améliorant ainsi la qualité et la robustesse du code. 

Pour aller plus loin : 
TypeScript — Wikipédia (wikipedia.org)
TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

SAP & le TypeScript c’est nouveau ? 

Eh bien, pas vraiment. Leur histoire a commencé en 2021 dans le cadre d’une phase « expérimentale bêta », dans le but de permettre aux développeurs de se familiariser avec cette nouvelle option de développement pour la création d’applications. En 2023, lors de la UI5con 2023 (UI5con 2023: Part 1), SAP a officiellement annoncé le support de TypeScript pour UI5 à partir de la version 1.116.0.

Pour aller plus loin: 
TypeScript for UI5: “Yay, it’s official!” – and a … – SAP Community

Retour d’expérience

Aujourd’hui, je ne suis pas ici pour vous apprendre à coder en TypeScript (peut-être dans un autre blog 🙂), la vidéo de la SAP UI5con 2023 offre déjà un aperçu du développement avec TS. Non, ici je vais vous parler de mon expérience et, pourquoi pas, vous aider à franchir le pas si vous étiez frileux mais quand même curieux.

Les avantages

Typage statique

La première erreur que vous allez avoir en débutant le TS, c’est des erreurs de compilation car il manque les typages 😀 car oui, le grand point positif du TS c’est le typage statique. 

Exemple de typage statique, ici pour une structure

Cependant, une fois que vous avez pris le coup de main, cela devient automatique.

En spécifiant les types de données, le TypeScript peut détecter les erreurs de typage dès la phase de compilation. Au début de votre projet, vous risquez de voir beaucoup d’erreurs signalées en rouge, mais cela deviendra rapidement une partie naturelle du processus de développement.

Exemple d’erreur TS pour type manquant

Le typage statique rend le code plus explicite à la lecture et auto-documenté. Cela permet de corriger les erreurs avant l’exécution du code, réduisant ainsi les risques d’erreurs et améliorant la fiabilité du logiciel. Cela évite clairement des erreurs qui pourraient nécessiter un débogage fastidieux par la suite. Et gros point positif, ça facilite la compréhension du code surtout si on passe derrière un développeur peu généreux en commentaires 😅.

Cet investissement se révèle rentable à long terme pour la maintenance des applications, car il contribue à réduire les erreurs introduites lors de futures modifications. 

En d’autres termes, cela améliore la qualité du code sur tous les points.
Pour retrouver le bon type lors d’une utilisation de méthode, je me réfère au site API Reference – Demo Kit – SAPUI5 SDK sinon on peut utiliser BAS, si on laisse la souris sur la méthode, une pop-up apparaît et donne les types qu’on peut utiliser

Les types simples sont déjà connus du système comme : string, integer, number etc…

Interface et extension d’interface

Comme le TypeScript est fortement basé sur du langage OO, on retrouve la possibilité de créer des classes, interfaces et les héritages.

Les interfaces offrent une grande praticité car elles permettent de définir précisément la structure des objets, en spécifiant les propriétés nécessaires ainsi que leurs types de données associés.
C’est vraiment le “must have” elles garantissent la cohérence du code, le rendant plus facile à maintenir et à faire évoluer. De plus, la possibilité de réutiliser ces interfaces dans toute l’application contribue à une conception modulaire et efficace.

Les interfaces peuvent, bien évidemment, être étendues pour créer de nouvelles interfaces qui héritent des propriétés des interfaces existantes.

Fonctionnalités ES6

Un autre élément que j’ai particulièrement apprécié, ce sont les fonctionnalités de l’ES6. Bien que cela ne soit pas spécifique à TypeScript, c’est mon expérience avec ce langage qui m’a dirigé vers ces fonctionnalités. Elles permettent d’écrire un code plus élégant et plus clair, tout en garantissant une logique applicative avec moins de lignes, ce qui simplifie grandement la maintenance.

J’ai été vraiment enchanté par les options qui m’étaient offertes, en particulier l’utilisation de « ? » combiné à « : » pour gérer différentes possibilités sur une seule ligne. Cela m’a permis d’éviter les cascades de conditions « if », ce qui rend le code plus clair et plus gratifiant à écrire.

Les inconvénients

Bibliothèques

Le seul point noir que j’ai eu pendant mes conceptions d’applications c’est avec les bibliothèques que SAP met a disposition quand on utilise le TypeScript. 

Par exemple, j’ai eu besoin d’utiliser les bibliothèques « sap/ushell/Container » pour créer des extensions de projet et passer un xapp-state afin de filtrer une application lors de la navigation. Cependant, mon projet refusait de compiler car mon TypeScript ne connaissait pas « sap/ushell/Container ».

Bibliothèque manquante : `sap.ushell.Container` removed in 1.100? · Issue #347 · SAP/ui5-typescript · GitHub

J’ai dû trouver une solution de contournement mais ce qui est rassurant, c’est que SAP corrige ce genre de problème au fur et à mesure des mises à jour.

Conclusion

Bien qu’au début j’ai râlé en voyant que je devais abandonner mon bon vieux JS pour le TS (comme un bon Français 😅), j’ai finalement pris goût au TS et je ne reviendrais pour rien au monde en arrière. Je trouve avoir gagné en confort de développement, en maintenance et en lisibilité du code. J’ai confiance en SAP et je sais que les problèmes liés aux bibliothèques seront résolus lors des prochaines mises à jour.