Web-Apps mit Object Pascal und Delphi
Komponentenbasiert ins Web
TMS WEB Core ist ein Framework zur Entwicklung moderner Webanwendungen mit Delphi. Es ermöglicht es, Object Pascal auch im Web einzusetzen, indem Delphi-Code in JavaScript für den Browser transpiliert wird. Dadurch können Delphi-Entwickler ihre bestehenden Kenntnisse und Komponenten wiederverwenden, um Single-Page-Applications (SPA) zu erstellen, die vollständig im Webbrowser laufen. Ebenso unterstützt TMS WEB Core auch eine Integration in Visual Studio Code, was plattformunabhängiges Arbeiten ermöglicht.
Seit seiner Einführung 2018 hat sich TMS WEB Core zu einer ausgereiften Plattform entwickelt. Die nahtlose Integration in Embarcadero Delphi/RAD Studio ist einer der größten Vorteile von TMS WEB Core. Entwickler können in der gewohnten Delphi-Umgebung ein neues TMS-WEB-Core-Projekt anlegen und Formulare sowie Steuerelemente ähnlich wie bei VCL-Anwendungen designen. Die RAD-Komponentenarchitektur bleibt erhalten – TMS WEB Core stellt eine breite Palette von UI-Komponenten bereit (z. B. TWebButton, TWebEdit, TWebGrid), die dem Delphi-Entwickler vertraut vorkommen. Diese Komponenten kapseln HTML5-Elemente und Browser-APIs, sodass man mit Delphi-Code die Weboberfläche steuern kann. Unter der Haube nutzt TMS WEB Core einen Pascal-zu-JavaScript-Transpiler (basierend auf pas2js), der den geschriebenen Object-Pascal-Code in performanten JavaScript-Code übersetzt (s. Abb. 1).
Laufzeitbibliotheken ermöglichen typische Delphi-Funktionalität, z. B. TDataset-basierte Datenbankanbindung im Browser. Da die generierte Anwendung letztlich nur aus HTML, JavaScript und CSS besteht, kann sie auf jedem Webserver bereitgestellt werden, d. h. das Deployment ist so einfach wie das Kopieren von Dateien. Zudem unterstützt TMS WEB Core bereits von Haus aus Progressive Web Apps (PWA), sodass Delphi-Webanwendungen offlinefähig und installierbar werden können. Für komplexere Anwendungsfälle kann auch eine Desktop-Variante mit TMS Miletus oder Electron erzeugt werden, um die Web-App als native Desktop-App auszuliefern.
Entwickler schätzen außerdem die Debugging-Möglichkeiten: Seit TMS WEB Core v2.3 ist es möglich, Webanwendungen direkt in der Delphi-IDE zu debuggen. Dabei wird der Chrome/Edge-Browser über das DevTools-Protokoll ferngesteuert, sodass Breakpoints im Object-Pascal-Code gesetzt und Variablen inspiziert werden können, ohne zur Browser-Konsole wechseln zu müssen. Insgesamt fügt sich TMS WEB Core nahtlos in Delphi ein und erlaubt es, Webentwicklung mit den vertrauten Werkzeugen und der Produktivität eines visuellen RAD-Designers anzugehen.
Webentwicklung mit VS Code
Während Delphi die traditionelle Entwicklungsumgebung für Object Pascal ist, bietet TMS WEB Core for Visual Studio Code eine Alternative für diejenigen, die plattformübergreifend oder ohne RAD Studio arbeiten möchten. Die VS-Code-Integration umfasst einen eigenen Formulardesigner, Code-Editor, Objektinspektor und Tool-Palette, ähnlich dem Delphi-Erlebnis. Entwickler können das TMS-WEB-Core-VS-Code-Plugin unter Windows, macOS oder Linux installieren und damit gleiche Projekte bearbeiten, die auch in Delphi erstellt wurden (und umgekehrt). Dies ermöglicht eine enorme Flexibilität – man ist nicht an Windows gebunden und kann beispielsweise auf einem Mac mit Object Pascal Web-Apps entwickeln, ohne eine VM für Delphi zu benötigen. Der VS-Code-Editor bietet eine Design-Ansicht, einen Objektinspektor und eine Komponentenpalette für visuelle Webentwicklung (s. Abb. 2).
In Visual Studio Code erfolgt das Coding ebenfalls in Object Pascal. Das Debuggen von Web-Core-Anwendungen wird durch eine in VS Code integrierte Laufzeitumgebung ermöglicht – man kann direkt im Pascal-Code Breakpoints setzen und die Web-App aus VS Code heraus starten. Im Hintergrund nutzt das Plugin ebenfalls den pas2js-Compiler und einen leichten Webserver zum Testen der App lokal. Bemerkenswert ist, dass TMS WEB Core für VS Code offen für Webtechnologien bleibt: Entwickler können HTML/CSS-Dateien im Projekt nutzen und bei Bedarf direkt bearbeiten. Auch die Einbindung von JavaScript-Bibliotheken oder Frameworks (z. B. via npm) ist möglich, was die Palette der verfügbaren Funktionen enorm erweitert. Die VS-Code-Edition senkt somit die Einstiegsbarriere, da kein kommerzielles Delphi benötigt wird, und öffnet TMS WEB Core einem breiteren Entwicklerkreis – ohne auf die Vorteile von Delphis Sprache und Komponentenmodell verzichten zu müssen.
UI-Design mit dem TMS WEB Core Designer
Ein zentrales Merkmal von TMS WEB Core ist der visuelle Form-Designer, der die UI-Entwicklung erheblich vereinfacht. Mit der aktuellen Version hat TMS einen echten WYSIWYG-Webform-Designer eingeführt. Dabei wird ein Browser-Fenster (Microsoft Edge WebView2) in die IDE eingebettet, in dem die Weboberfläche live gerendert wird. Der Entwickler sieht somit bereits zur Designzeit die originale HTML/CSS-Darstellung seiner Seite inklusive responsivem Verhalten – ändert man die Fenstergröße, passt sich das Layout an, als wäre man im echten Browser. Sogar die Verwendung von CSS-Frameworks wie Bootstrap oder das Einbinden eigener HTML-Templates spiegelt sich sofort im Designer wider. Die entworfene Weboberfläche wird direkt in der IDE gerendert. Ebenso sind der Strukturbaum und der Objektinspektor wie gewohnt verfügbar.
Im Designer kann man per Drag-and-Drop Webkomponenten auf das Formular ziehen, ihre Eigenschaften im Objektinspektor bearbeiten und Ereignisprozeduren wie üblich im Code hinterlegen. Diese Komponenten zeigen im Designer ihr echtes Aussehen und sind interaktiv, z. B. ein TWebButton sieht aus wie ein HTML-Button und kann schon im Designfenster geklickt werden. Für Datenbankanwendungen steht ein Datenmodell zur Verfügung, das an visuelle DB-Controls gebunden werden kann; Livedaten können auf Wunsch bereits im Design angezeigt werden, um z. B. eine gebundene Grid-Komponente mit Beispielinhalten zu füllen. Auch in Visual Studio Code bietet TMS WEB Core einen visuellen Designer mit ähnlicher Funktionalität. Dort öffnet sich eine Design-View innerhalb von VS Code, die ebenfalls Drag-and-drop, Eigenschaftenbearbeitung und eine Komponentenpalette ermöglicht. Somit ist konsistente UI-Entwicklung gewährleistet, egal ob man in Delphi oder VS Code arbeitet. Insgesamt beschleunigt der TMS WEB Core Designer die UI-Entwicklung drastisch, da Layout, Styling und Responsivität direkt sichtbar sind und weniger Trial-and-Error im Browser erforderlich ist. Er vereint die Schnelligkeit der Delphi-RAD-Entwicklung mit den Erfordernissen moderner Weboberflächen.
TMS WEB Core: Aktuelle Neuerungen
TMS WEB Core wird laufend weiterentwickelt. In den jüngsten Versionen, bis einschließlich v2.6, Stand Oktober 2024, wurden zahlreiche Verbesserungen für Entwickler eingeführt. Ein Überblick der wichtigsten Neuerungen:
- WYSIWYG-Formulardesigner: Wie beschrieben, können Formulare jetzt direkt als echte Webseiten im Designer bearbeitet werden. Dieses Feature beseitigt die Kluft zwischen Entwurf und Ergebnis und war ein Meilenstein in v2.6.
- StellarDS.io-Integration: TMS WEB Core bietet nun erstklassige Unterstützung für StellarDS.io, einen Cloud-Datendienst von TMS. Über eine spezielle Client-Dataset-Komponente kann man nahezu ohne Code auf cloudbasierte Daten zugreifen und diese an UI-Elemente binden. Dies beschleunigt die Entwicklung von datengetriebenen Webapps erheblich.
- Async/Await: Viele asynchrone Vorgänge, etwa HTTP-Aufrufe oder Datenbankabfragen, unterstützen jetzt Promises. Für Entwickler bedeutet das, dass sie mittels async/await-ähnlicher Strukturen sequenziellen Code schreiben können, anstatt mit Callbacks oder Events zu arbeiten – was den Code übersichtlicher macht.
- KI-Unterstützung im Designer: Ein ungewöhnliches neues Feature ist die Integration von KI für die UI-Erstellung. Über die Toolbar kann man eine Anbindung an ChatGPT nutzen, um z. B. HTML-Code für eine Seite generieren zu lassen. Dies kann als Inspiration oder Ausgangspunkt für das Layout dienen.
- Aktuelle Webstandards: TMS WEB Core hält Schritt mit modernen Web-Technologien. So werden nun WebP-Bilddateien als Ressourcen unterstützt (inklusive Deployment). Das populäre CSS-Framework Bootstrap wird in Version 5.3.x unterstützt und kann direkt im Projekt ausgewählt werden. Legt man im Designer neue Steuerelemente an, wird ein Bootstrap-Stylesheet automatisch eingebunden, um ansprechende Standardstile zu erhalten.
- Neue UI-Komponenten und Optionen: In v2.6 kamen Verbesserungen bei bestehenden Komponenten, etwa einstellbare Ausrichtung im TWebRatingPanel (Sternebewertung vertikal/horizontal) oder Mindest-/Maximaldatum im TWebDateTimePicker. Außerdem wurde die Kameraunterstützung für Miletus-Apps auf Raspberry Pi hinzugefügt, sodass Web-/Desktopapps auf dem Pi nun Kameras ansprechen können.
- TypeScript-Unterstützung (Beta): Ein aufregender Schritt ist die optionale Entwicklung in TypeScript. Seit Ende 2024 gibt es eine Beta-Version von TMS WEB Core, die es erlaubt, anstelle von Pascal auch in TypeScript zu programmieren. Damit öffnet sich das Framework für Webentwickler, die lieber TypeScript nutzen, und spiegelt den Ansatz von Delphi/C++Builder wider, zwei Sprachen parallel zu unterstützen. Die Visual-Development-Philosophie bleibt dabei erhalten – man kann also auch in TypeScript-Projekten den visuellen Designer verwenden. Diese Neuerung befindet sich noch in Entwicklung.
Zusammenfassend bieten die aktuellen Updates vor allem Verbesserungen in der Usability (Designzeit-Erlebnis, modernisierte Syntax) und Konnektivität (Clouddaten, neue Schnittstellen).
Erweiterung durch externe JavaScript- und CSS-Bibliotheken in TMS WEB Core
Ein wesentlicher Vorteil von TMS WEB Core liegt in seiner Offenheit gegenüber etablierten Webtechnologien. Obwohl Anwendungen in Object Pascal entwickelt werden, laufen sie vollständig im Browser und basieren technisch auf HTML, CSS und JavaScript. Dadurch ist es möglich, nahezu jede externe JavaScript- oder CSS-Bibliothek zu integrieren und damit den Funktionsumfang sowie das Design der Anwendung erheblich zu erweitern.
Bei den JavaScript-Bibliotheken eröffnen sich zahlreiche Einsatzmöglichkeiten: Interaktive Diagramme mit Chart.js, Kartenanwendungen, Rich-Text-Editoren oder sogar komplexe Frontend-Komponenten aus Frameworks wie Vue oder React lassen sich in TMS WEB Core einbinden. Der Entwickler hat so die Freiheit, auf bewährte Lösungen aus der Web-Community zurückzugreifen, ohne sich auf die mitgelieferten Komponenten beschränken zu müssen. Besonders spannend ist diese Option für Anwendungen mit hohem UI-Anspruch oder spezifischen Funktionen, die über das Standardrepertoire hinausgehen.
Für Entwickler bedeutet diese Offenheit vor allem eins: maximale gestalterische Freiheit.
Auch bei der Gestaltung des Benutzerinterfaces bieten sich vielfältige Möglichkeiten. Neben der integrierten Unterstützung für Bootstrap kann man etwa moderne CSS-Frameworks wie Tailwind CSS, Bulma oder Materialize verwenden. Diese Frameworks ermöglichen die Entwicklung responsiver, moderner und klar strukturierter Oberflächen mit minimalem Stylingaufwand. In Kombination mit den HTML-orientierten Komponenten von TMS WEB Core kann man so ein präzises Layout erstellen, das sich flexibel an verschiedene Bildschirmgrößen anpasst und modernen Designrichtlinien folgt.
Für Entwickler bedeutet diese Offenheit vor allem eins: maximale gestalterische Freiheit. Anstatt sich auf eine proprietäre Umgebung zu beschränken, kombiniert TMS WEB Core die strukturellen Vorteile von Object Pascal – etwa Typsicherheit und Komponentenmodell – mit den visuellen und funktionalen Möglichkeiten moderner Webentwicklung. Besonders bei datengetriebenen oder interaktiven Anwendungen erlaubt dies eine zukunftssichere, erweiterbare Architektur.
Offlinefähigkeit mit Progressive Web Apps (PWA) in TMS WEB Core – inkl. Miletus
Ein zentrales Anwendungsfeld moderner Webtechnologie ist die Fähigkeit, Anwendungen auch ohne permanente Internetverbindung nutzbar zu machen. TMS WEB Core bietet in diesem Kontext gleich zwei kraftvolle Ansätze: die Unterstützung von Progressive Web Apps (PWA) für browserbasierte Anwendungen sowie die Möglichkeit, Anwendungen mit TMS Miletus als plattformunabhängige Desktop-Apps bereitzustellen – ebenfalls mit Offlinefunktionalität.
Progressive Web Apps sind Webanwendungen, die sich wie native Apps verhalten: Sie lassen sich installieren, offline nutzen, und sie können sogar Push-Benachrichtigungen empfangen. In TMS WEB Core wird diese Funktionalität durch die automatische Generierung eines Service Workers realisiert. Der Service Worker übernimmt das Caching zentraler Ressourcen (HTML, JavaScript, CSS, Bilder) und sorgt dafür, dass die Anwendung auch dann läuft, wenn keine Internetverbindung verfügbar ist.
Entwickler können direkt im Projekt angeben, dass eine Anwendung als PWA bereitgestellt werden soll. Dadurch entstehen kaum zusätzliche Aufwände – TMS WEB Core übernimmt die technische Infrastruktur im Hintergrund. Es stehen zudem Optionen zur Verfügung, mit denen sich das Verhalten des Caches beeinflussen lässt, etwa durch manuelles Nachladen von Inhalten oder gezielte Invalidierung bei neuen Versionen. Für typische Geschäftsanwendungen, bei denen Daten offline erfasst und später synchronisiert werden sollen, lässt sich diese PWA-Struktur hervorragend mit IndexedDB oder LocalStorage kombinieren.
Neben PWAs bietet TMS mit Miletus ein weiteres Werkzeug zur Erstellung offlinefähiger Anwendungen – diesmal jedoch als vollwertige native Desktop-App. Miletus ist ein Hybrid-Framework, das Webtechnologie (HTML, CSS, JavaScript via pas2js) mit einer nativen Host-Anwendung kombiniert. Der große Vorteil: Miletus-Anwendungen benötigen keinen Browser und sind vollständig unabhängig vom Internet. Sie laufen lokal, können auf das Dateisystem zugreifen und lassen sich für Windows, macOS und Linux kompilieren (s. Abb. 3).
Für TMS-WEB-Core-Projekte bedeutet das: Mit nur wenigen Anpassungen lässt sich aus einer Webanwendung eine native App erzeugen, die offlinefähig und systemnah ist. Miletus unterstützt u. a. Dateizugriff, Kamera, serielle Schnittstellen oder sogar Datenbankverbindungen mit SQLite – also Funktionen, die im klassischen Browser aus Sicherheitsgründen eingeschränkt sind. Damit eignet sich Miletus besonders für Anwendungen, die zwar die visuelle Flexibilität von Webtechnologie benötigen, aber gleichzeitig auf systemnahe Ressourcen zugreifen müssen – z. B. in der Industrie, im Außendienst oder im Bildungsbereich.
Sowohl PWAs als auch Miletus-Anwendungen basieren auf demselben Code: Entwickler können ein einziges TMS-WEB-Core-Projekt pflegen und es je nach Zielplattform entweder als PWA oder als native Desktop-App ausliefern. Das fördert die Wiederverwendbarkeit, vereinfacht das Deployment und reduziert den Wartungsaufwand. Während PWAs besonders im mobilen und browserbasierten Umfeld punkten, eignet sich Miletus für Desktop-Anwendungen mit höherem Freiheitsgrad oder ohne Abhängigkeit von Browser-APIs.
Auf den IT-Tagen im Dezember hält Dr. Veikko Krypczyk einen Vortrag zum Thema
"Datenbankdesign intuitiv durchführen".
Die Konferenz findet vom 08. - 11.12.2025 in Frankfurt statt.
Fazit und Ausblick
TMS WEB Core hat sich als leistungsfähige Brücke zwischen der Delphi-Welt und der modernen Webentwicklung etabliert. Erfahrene Delphi-Entwickler können damit ohne Bruch in eine neue Plattform vordringen und Web-Apps mit vertrauten Konzepten erstellen. Die aktuelle Version beeindruckt durch den neuen WYSIWYG-Designer, der die Lücke zwischen Delphi-UI-Design und Web-Technologien schließt, sowie durch zahlreiche Detailverbesserungen. Auch für Entwickler, die nicht auf Windows angewiesen sein wollen, steht mit der VS-Code-Integration ein vollwertiges Entwicklungstool bereit.
Der Ausblick für TMS WEB Core bleibt spannend. Mit der Beta-Unterstützung für TypeScript öffnet sich das Tool einem noch größeren Entwicklerkreis und zeigt, dass die Evolution weitergeht.
