Skip to content

Web App Development Frameworks

NameAngularReactVue.jsOpenUI5 / SAPUI5
VendorGoogleFacebookEvan YouSAP
LicenseMITMITMITApache 2.0 / Commercial
GitHub Stars
TypeMVC Framework (TS)Virtual DOM Library (JS)Virtual DOM Library (JS)MVC Enterprise Toolkit (JS)
SizeLargeSmallSmallerLarge vs. Self-contained build
BenefitsLarge Apps, Object OrientedFlexibility, PerformanceLightweight Apps, PerformanceEnterprise Apps, Rich UI Library
BindingTwo-Way Data BindingOne-Way Data FlowBothAll + Two-Way OData Binding
cds2types (CAP)
OData Model
v2 & v4
User ExperienceUI5 Web Components
Fundamental Library Styles
SAP Fiori UX Control Library, Flexibility, P13n, Theming
Enterprise Features---Accessibility, I18n, L10n, Security, Value Help
SupportLTS 1 year--LTM 1.108 (2211) Q4/2028

Svelte - Cybernetically enhanced web apps

SveltjeSvelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Sveltje is not part of the above matrix, because it is (currently) not widely used by the SAP community.

Anyhow, you can give it a try and there is also an example available, how to integrate UI5 Web Components with Svelte

Example: Web Components Sample ToDo App

SAP Fiori Design System


SAP Fiori is a design system that provides a consistent user experience for SAP software across platforms and devices. It is at the core of SAP’s product experience and design strategy.

With SAP Fiori we offer design solutions that are usable, robust, scalable, and of enterprise-grade quality – implemented in several reference technologies.


Components of the SAP Fiori Design System

UI5 Web Components

UI5 Web Components are framework-independent UI elements incorporating the SAP Fiori design. UI5 Web Components share the fundamental enterprise-grade features of UI5 such as stability, accessibility and theming support. The UI5 Web Components project aims to achieve easier consumption of UI5 controls, lower entry barrier to UI5 controls use for own applications and less complexity of the UI5 rendering-stack by making the utilization of the full-stack UI5 optional. UI5 Web Components target web developers who want to have more flexibility to use just HTML tags or arbitrary JS frameworks.

Fundamental Library Styles

Fundamental Library Styles is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fundamental Library Styles, library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology.

Luigi - The Enterprise-Ready Micro Frontend Framework

LuigiLuigi is not really a Web App Development Frameworks, but instead an open source JavaScript framework for micro frontends.

Micro frontends can be used to divide big frontend monoliths into smaller, simpler, independent chunks.


This makes it possible to be technology-agnostic and integrate different Web App technologies into one frontend. If you want to follow the SAP Fiori Design System, all micro frontends have to use the SAP Fiori for Web language leveraging Fundamental Library Styles or UI5 Web Components, to offer a consistent SAP Fiori user experience.

All Web App Development Frameworks mentioned on this site can be integrated into Luigi and there are also reference examples available.

What is Luigi?

Luigi helps you to build modularizable, extensible, scalable and consistent UIs and Web Apps. Create a unified user experience around your complex functionality in a distributed development environment.


Luigi Main features

Luigi consists of two main parts:

Luigi Corerefers to the "main app", in which your micro frontends (a.k.a. views) will be embedded. It offers some of the following configurable features:
  • Navigation - consistent user navigation created using specific Luigi parameters.
  • Authorization - integration with an authentication provider, allowing users to log in.
  • Localization - displaying an application in multiple languages.
  • General settings - other settings that can be configured in Luigi, such as HTML attributes, third-party cookie configuration and more.
  • API - functions to help with almost every part of your app: navigation, authorization, adding a search box, configuring a light/dark theme and others.
Luigi Clientrefers to Luigi options related to micro frontends:
  • API - diverse API functions which can be used on the micro frontend side.
  • Communication - sending messages between the micro frontend and the main application (Luigi Core module).

Learn about the basic architecture and terminology of the Luigi micro-frontend framework, and learn what you will build.
SAP Tutorial: Introduction to Luigi