ABAP on the left, the app it produces on the right, and nothing in between
but the browser. No server, no SAP system, no backend of any kind — the
page you are looking at is a static file, and everything below happens in
this tab.
How it works
- The abap2UI5 sources are downported and translated to JavaScript at
build time, and bundled with the ABAP standard library into one module
this page loads.
- An in-memory SQLite, compiled to WebAssembly, takes the place of the
database abap2UI5 keeps its drafts in.
- abaplint parses the real framework sources so the editor can check
your class against them, and compiles only your classes when you press
Run — about twenty milliseconds. The
abap2UI5 linter
checks the view your builder chain produces against a UI5 release, which
is how an icon that does not exist gets reported at all.
- The abap2UI5 frontend runs in an iframe and talks to its backend over
a plain
fetch. The playground answers that one request from
the framework running in this page, so from the framework's point of
view nothing changed.
Where the apps come from
The Sample dropdown above carries a handful to start from. Three
sibling repositories carry the rest: Examples browses the
catalogues of the first two without leaving this page, every card on
their own pages has a button that opens the class right here, and what
needs a real system stays where the system is:
- Learn
— the path through abap2UI5 itself, one idea per sample: bindings,
events, popups, navigation, whole apps.
- Controls
— the UI5 demo kit rebuilt in ABAP, searchable by control, by library
and by the release a sample needs.
- Stack
— abap2UI5 with OData, RAP, WebSockets or the launchpad. Those are the
one set that will not run here: they need a real system, which
is the whole point of them.
Credits
The playground is mostly wiring. Kudos goes to the projects it is wired
out of — and they are worth a look on their own:
- abaplint transpiler
— ABAP to JavaScript. The playground exists because this does.
- abaplint
— the parser, the syntax check and the language server behind the
editor's diagnostics, hover, rename and pretty printer.
- open-abap-core
— the ABAP standard library, written in ABAP and transpiled with
everything else. Every
CL_ABAP_* and CX_* you
use comes from here.
- OpenUI5
— the frontend, built into this site rather than linked from a CDN, so
the playground carries its own and works when nothing else does.
- Monaco
— the editor from VS Code.
- sql.js
— SQLite as WebAssembly, standing in for the database.
Read their code, star them, open the issue you ran into, send the pull
request. That is the thanks that reaches an open source project. Thank you.
Where it stops
A few classes, not a package: no tables of your own, no message classes,
no CDS. Nothing reaches outside the browser — no RFC, no files. Only what
the transpiler implements, and only the UI5 libraries built in. Your code
is kept in this browser; the app's data is not.