using JSX in UI5
A while ago I stumbled over a post on BlueSky by John Patterson in which he spoke about JSX and its usage in UI5.
This made me do a double-take, essentially questioning (?) the usage of JSX, as I was not familiar with it in UI5. Following that, John shared a link to a - random - implementation file from Fiori Elements. Turns out I wasn't aware of that yet and I hadn't poked into FE code that deep yet myself.
For those not familiar with Fiori Elements, it is basically a framework built on top of UI5 that enables the generation of applications with the SAP UX in mind. Everything that is required to generate the application comes from OData APIs and a huge amount of metadata with it. That is a very rough gist of it.
Back to the topic, JSX, remember? Some time after the BlueSky post, a friend of mine, Dimitar, released a proof of concept on GitHub in which he was poking around and trying to make JSX in UI5 work. To do so, he used babel, more specifically @babel/preset-react and implemented a rudimentary jsx-runtime which he used for the transformation of the JSX code.
I saw this and jumped in to let him know that there might be something bigger to have a look at (thanks again, John). Following this quick exchange, he poked around a bit and created an experimental branch in which some inspiration was taken from SAPs implementation & usage of JSX in Fiori Elements. We had a call in which he showed me around what he did and how he did it. Turns out, you can have a look at the entire JSX implementation of SAP by simply opening up any FE related UI5 demokit application. Doing that you simply open up the sources tab using your Dev-Tools and navigate to /resources/sap/fe/base/.
Big Disclaimer
Fiori Elements is not open source software and, therefore also the entire JSX implementation is closed source and under strict licensing and ownership of SAP.
The JSX implementation not being open source and publicly available also becomes obvious when you look into the code, where you can find funny names like clazz instead of class (I like it :P).
The cool part of it all is that Dimitar was already very close to the Babel approach and SAP is apparently not doing it any differently. Though to be fair, much more enterprise ready and filled to the brim with features. In his experimental branch, Dimitar took the time to also fiddle with the config files and get to a working order of presets and plugins.
What do we take away from this? Well, for one thing, you can just do things. I'm also very happy to have met and gotten to know Dimitar (this guy does cool stuff all the time) and, thanks to the UI5 Community, I've had so many opportunities and learnings the past few years, it's been great. And even more important, to conclude this post: JSX in UI5 isn't just "available", it's already powering production SAP applications used by millions of users worldwide through Fiori Elements. It isn't rocket science. SAP isn't doing any magic here, they too, when possible, make use of already existing tools and try to make them work for them. You do not have to reinvent the wheel!
We can only hope that JSX becomes GA in OpenUI5/SAPUI5 applications on the consumption side. So that also freestyle applications built in TypeScript can benefit from it.
References/Links