The OpenUI5 tutorials, now on GitHub and in both TypeScript and JavaScript

[pmuessig]

The classic OpenUI5 tutorials (Walkthrough, Data Binding and friends) have moved out of the Demo Kit and into their own GitHub repository: UI5/tutorials, with a rendered site at ui5.github.io/tutorials. Five tutorials are there today, and every code sample comes in both TypeScript and JavaScript.

What moved

Five tutorials are live in the new repo:

• Quickstart, a first app from scratch
• Walkthrough, the classic end-to-end tour through the major development paradigms
• Data Binding, the fundamental binding concepts built up on a list of invoices
• Navigation and Routing, adding routes and navigation to the app
• OData V4, working against an OData V4 service

Each tutorial is a series of steps, and every step under packages/*/steps/* is a self-contained app you can run on its own. So you can start at any step, run just that one, and compare it to the next.

TypeScript and JavaScript, side by side

This is the part we care about most. The tutorials are authored in TypeScript, and every code block on the site has a TypeScript / JavaScript toggle. Flip it and the whole page switches: the snippets, the file extensions, the imports. You can also link straight to a language with ?lang=js or ?lang=ts.

So whether your team writes UI5 in TypeScript or in classic JavaScript, the same tutorial follows you either way, no separate site and no mental translation.

Why we moved them

The tutorials used to ship as part of the Demo Kit, which tied their lifecycle to OpenUI5 and SAPUI5 releases. A typo fix or a new step had to wait for the next framework release train.

Pulling them into their own repository decouples that lifecycle. Now a fix or an extension is a normal pull request that goes live on the GitHub Pages site on its own schedule, independent of the framework version. Faster turnaround for bug fixes, and a lower bar for adding or improving content.

The repo is an npm workspaces monorepo. A build step renders each tutorial's markdown into the pages you see on the site, with working Live Preview links, and produces the standalone apps and ZIP downloads per step. If you want to run it locally:

npm install     # install every step
npm run build   # build all steps into dist/
npm start       # serve the rendered pages with local Live Preview links

Then open http://localhost:1337/packages/walkthrough/ (or any other tutorial's packages/<name>/). To run a single step directly, use its workspace name, for example npm start -w ui5.tutorial.walkthrough.step15.

Where to start

👉 Tutorials site: https://ui5.github.io/tutorials/

👉 Source and steps: https://github.com/UI5/tutorials

Open the Walkthrough, flip the language toggle to whichever one your team uses, and work through it. If you spot something off or want a step improved, the repo's issues are open. Same tutorials you know, now easier to keep current and available in the language you actually write.