Skip to Content
Technical Articles
Author's profile photo Aydin Ozcan

Svelte in Workzone and Launchpad

Devtoberfest this year has been really interesting, with a variety of engaging topics. One of the sessions that caught my attention was about “Using UI5 Web Components with Svelte”. I was pleasantly surprised to find content related to Svelte.
It spurred me to develop a solution for those who want to use Svelte but are hesitant about launchpad or workzone integration.

You may already know that you can use any UI library you want with SAP BTP for development. The CAP team, for instance, prefers Vue if you can’t use Fiori Elements.
There are also ways to serve applications developed with other UI Frameworks in SAP NetWeaver . However, seamless integration with Fiori Launchpad or SAP Workzone can pose challenges.

This is where this approach comes in handy. It ensures that your non-UI5 application behaves like a standard UI5 app when the language and theme in a launchpad change. It achieves this by using basic UI5 App as a host, loading the minimum UI5 necessities, and then rendering hosted app. While I prepared POC code for Svelte, this approach can also be applied to Vue, React and other frameworks.

A Closer Look at Svelte

Svelte is unique because it operates differently from other UI frameworks like React, Vue, etc.. Instead of doing most of its work in the browser at runtime, Svelte moves that work into a compile step that occurs when you build your app. This results in pure JavaScript code that manipulates the DOM directly. On the other hand, React maintains a copy of the DOM (virtual DOM) and manipulates this VDOM at runtime, finding differences between the VDOM and the DOM, and updating the DOM accordingly.
This lead to larger bundle sizes and slower performance.
Svelte has much smaller bundle sizes (no library to load) and more efficient JavaScript code, making it more performant than other virtual DOM-based UI libraries . Also if you are not an expert React developer with lots of time on hand to optimize, your application probably rerenders many times unnecessarily.

Wasn’t the status quo with React ?

React is broken and the entirety of its ecosystem is an attempt to repair it. Despite the suggestion of its name, it wasn’t as reactive as one might assume, or perhaps it was reactive enough for just Facebook’s use case. To develop a web application, a variety of additional functionalities are required. Developers began to address these issues, leading to the emergence of the extensive ecosystem we see today. It’s estimated that there are over 20 state packages to choose from within the React ecosystem. In contrast, Svelte doesn’t need a multitude of libraries to function effectively, as the existing tools coming with the library already perform well.
And I’ve always questioned the need for a virtual DOM.

But why did it become so popular? There must be something it excels at and that’s the power of ‘components’, React’s popularity soared, partly because many of us don’t like Angular’s rigid coding structure. Angular imposed a monolithic Spring Boot-like approach.

React offered a liberating component-based architecture, a breath of fresh air. Its syntax evolved positively, providing developers with a more intuitive experience. You might wonder, why not web components then ? Some argue it lacked standard browser support, needing polyfills at that time, or its API wasn’t intuitive enough.
Unfortunately, web components never gained the traction they deserved, which is a shame from my perspective.
But computer history is a series of corrections for past mistakes, so I believe the time for web components will come eventually.

Personal preferences always play a big role in these framework choices. For me, I wasn’t a fan of the Spring Boot-like approach for UI and I wasn’t a fan of dependency injection either. Patterns like MVC, MVVM, MVP are good but can also become impractical or unnecessary in a small to midsize project where the customer is your product manager.
A development team should have the freedom to choose. ‘One size fits all’ has never worked in software development.
No development pattern should become bureaucracy.
For ERP I prefer a domain-based structure with a functional approach, offering more agility and meaningful division based on the domain.

React addressed this issue with a component-based approach, giving you the freedom to organize your code as you see fit without enforcing any specific structure. Despite its inherent flaws, React became popular.

UI5 V2 and Beyond

The UI5 next major version, Version 2, is on its way. So far, the only certainty is that there will be breaking changes. This is perfectly normal for a framework that has been around for over 10 years. I hope one of these changes will offer developers more freedom in their workflow.

Once again, things are changing. React has found ways to address some of its problems by advising people not to use React directly, but instead, integrate it with metaframeworks like Next.js. On the other hand, Svelte, Qwik, SolidJS (No VDOM), Vue, Lit  and htmx are gaining traction every day for the right reasons. And we are excitedly waiting for UI5 V2 to come!

If you have time to explore something new and want to dive into Svelte,
I’ve created a GitHub repository with SAP standard TODO web component sample Svelte application. In this repository, I’ve made several modifications to incorporate the latest version of Svelte, Vite and other related packages.

Additionally, there’s a special souce to embed the Svelte TODO application within a UI5 application. This allows for seamless integration with on-premises launchpad or BTP Workzone, and you can use UI5 tooling for deployment.

When you observe the `package.json` file, you’ll find a series of scripts. You can develop and use Svelte on its own. When you want to see the embedded version in local test launchpad, you can use the command:

 npm run ui5:run:start:lp

Exploring and experimenting with new technologies is essential for development growth. It might not change your day-to-day practices, but then again, you never know!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo August Engkilde
      August Engkilde

      Hi Aydin Ozcan,
      Great article!
      Did you also try integrating a Svelte app with a destination you have setup in CloudFoundry connecting to an OData services?

      Author's profile photo Aydin Ozcan
      Aydin Ozcan
      Blog Post Author

      Thank you August Engkilde .

      BTP Destinations are meant to be accessed by server-side code rather than from the frontend. In this context, your UI5 application is not accessing them directly either. Your UI code could access your server backend, written in, let's say, CAP, and CAP utilizes the destinations under the hood.

      Don't be misled by the fact that the approuter utilizes destinations. The approuter is again server-side code. And it can act as a proxy for your UI code.



      Author's profile photo August Engkilde
      August Engkilde

      Hi Aydin,
      I am totally aware of what you write.
      We always connect to CAP node as middle layer from our Frontend.
      What I was trying to ask was more how does Svelte handle Odata? I assume there is no such thing as direct binding?

      Since you ask about CAP Node. How does Svelte Handle login and forward the SAML assertion to the CAP App for SSO into the backend?


      Author's profile photo Aydin Ozcan
      Aydin Ozcan
      Blog Post Author

      Hi August ,

      Sorry for misunderstanding your question. Very good points indeed.

      For OData you are on your own . And this may sound not good at beginning but it may give you another very good opportunity to use library developed by SAP community member Hubert Drecker. Mental model of that lib is very modern. And you can use CDS models also as a frontend typescript objects. So, if you are using CAP, you can create a holistic approach between the backend and frontend with the same data model. 

      For login my repo hides Svelte inside of UI5 so you threat it as a normal Ui5 app if you are using it in Workzone but if it is stand alone we can handle it by approuter. But in that case we also don't need to hide Svelte inside of Ui5 . 

      For SAML part if we have to make those calls from Ui , maybe we can relay on approuter in the beginning but there will be manuel job inside of the Svelte for Headers and in Workzone with managed approuter i am not sure if it would be possible.

      Author's profile photo August Engkilde
      August Engkilde

      Thank you Aydin for the fast answer!

      I will study the odata2ts that sounds very interesting:-)