Schneller zur Web-App

Mit TMS WEB Core for Visual Studio Code gibt es einen durchaus interessanten Ansatz, moderne Webanwendun­gen zu erstellen. Als Entwicklungsumgebung sind Visual Studio Code und ein Designer am Start. Programmiert wird mit Object Pascal, und etliche Komponenten beschleunigen die ­Arbeit.Über die Vorteile moderner Webapplikationen muss man nicht mehr viel ausführen. Man kann sie ohne Installation direkt im Browser starten, sie werden zentral auf dem Server gewartet und lassen sich auf allen gängigen Geräten und Betriebssystemen ausführen. Die Internetbrowser bieten heute umfassende Möglichkeiten, sodass man auch die Benutzeroberfläche und die User Experience nach eigenen Wünschen gestalten kann.Also alles paletti? Das kommt darauf an. Der Technologie-Stack bestehend aus HTML, CSS und JavaScript ist zwar eindeutig, der Weg von Entwicklung und Architektur dagegen eher weniger. Um lediglich mit den drei genannten „Elementen“ funktional umfangreiche und in Fragen des Designs ansprechende Applikationen zu gestalten, braucht man viel Zeit und Geduld. Unzählige Bibliotheken und Frameworks versprechen Abhilfe. Man kann diese fast nach Belieben miteinander kombinieren. Hinzu kommen Fragen der Aufteilung zwischen Client und Server. Auch hier gibt es zahllose Varianten mit jeweils spezifischen Vor- und Nachteilen.Viele Ansätze, zum Beispiel React oder Blazor, setzen auf eine komponentenbasierte Vorgehensweise und versprechen damit, den Entwicklungsvorgang durch ­eine konsequente Wiederverwendung zu vereinfachen. Ebenso wird JavaScript häufig gegen andere Programmiersprachen (TypeScript, C# et cetera) „getauscht“, um den Entwicklern beispielsweise mehr Typsicherheit oder einen größeren Komfort bei der Formulierung von Algorithmen und Businesslogik zu geben. Final erfolgt dann ein Übersetzen in JavaScript mittels eines Transpilers, denn die Browser verstehen nur diese Programmiersprache.Während der Einsatz grafischer Designer bei Desktop-Anwendungen die Regel ist, wird bei der Entwicklung der Benutzeroberflächen von Webanwendungen meist direkt im Quellcode gearbeitet. Kommt ein Designwerkzeug wie etwa Bootstrap Studio zum Einsatz, dann ist es meist nicht ­Bestandteil des vorgesehenen Toolings, daher ist eine nahtlose Integration mit den anderen Werkzeugen eher nicht gegeben.In die Lücke, die Webentwicklung zu beschleunigen, stößt das Framework TMS WEB Core for Visual Studio Code[1]. Dieser Artikel stellt den Ansatz, die Vorgehensweise, die Installation und das Tooling vor. Eines gleich vorweg: Es gibt einen grafischen Designer, der das Erstellen der Benutzeroberflächen von Webanwendungen maßgeblich beschleunigt. Nun aber der Reihe nach.

Der Technologie-Stack

Sehen wir uns zunächst an, auf welche Basis der Ansatz TMS WEB Core for Visual Studio aufsetzt. Das Ziel ist, die Entwicklung von Webanwendungen radikal zu vereinfachen und vor allem zu beschleunigen. Statt mit HTML, CSS und JavaScript erfolgt die Programmierung in Object Pascal. Diese Sprache gilt seit vielen Jahren als etablierte objektorientierte Programmiersprache, die insbesondere in der Entwicklungsumgebung Delphi zum Einsatz kommt. Eine Ausprägung von Object Pascal ist Free Pascal [2], das für unterschiedliche Betriebssysteme zur Verfügung steht.Mit TMS WEB Core wird die gesamte Applikation in Pascal-Syntax codiert. Auch wenn sich der Ansatz für Erweiterungen und Anpassungen grundsätzlich offen zeigt, ist eine Programmierung in JavaScript und ein Schreiben von HTML-Markup und CSS-Code zunächst nicht notwendig. Intern erfolgt eine Übersetzung des Pascal-Quellcodes nach Java­Script. Das erledigt ein Transpiler. Die entstehenden Web­applikationen basieren final jedoch nur auf HTML, CSS und JavaScript. Es gibt auch initial keine weiteren Abhängigkeiten zu externen Bibliotheken, sofern man diese nicht explizit hinzufügt. Im Ergebnis entstehen Single Page Web Applications (SPAs), das heißt, dass bei Anpassungen der Benutzeroberfläche die zu ändernden Bereiche der Webseite über das DOM (Document Object Model) aktualisiert werden.Zudem ist es möglich, das Electron-Framework [3] einzubinden und darüber die Webapplikationen auf allen gängigen Betriebssystemen als Desktop-Anwendungen (Cross-Plattform) auszuführen. Über den Ansatz der Progressive Web App (PWA) ist es möglich, die Webapplikationen mit einer Offline-Funktion auszustatten.Eine weitere Besonderheit ist der Einsatz von Komponenten. TMS WEB Core for Visual Studio verwendet eine Vielzahl visueller Komponenten, um das User Interface – im Fall einer Webapplikation die Webseiten – zu gestalten. Nicht­visuelle Komponenten kapseln dagegen typische Funktionen wie den Zugriff auf einen Webservice, die Interaktion mit einem Cloud-Dienst oder die Arbeit mit Datenbanken.

Das Tooling

Zunächst wurde TMS WEB Core ausschließlich als Erweiterung für die integrierte Entwicklungsumgebung (IDE) Delphi zur Verfügung gestellt. Hier erfolgen die komplette Entwicklung und das Erstellen der Webanwendung direkt in Delphi. Flexibler im Werkzeugeinsatz ist die Version TMS WEB Core for Visual Studio Code. Der Namenszusatz zeigt es bereits an: Als Entwicklungsumgebung dient hier Visual Studio Code [4]. Da der Editor selbst für die Betriebssysteme Windows, macOS und Linux zur Verfügung steht, hat der Entwickler die freie Wahl der Systemumgebung für die Programmierung. ­Visual Studio Code dürfte sich für die Entwicklung von Webapplikationen vertraut anfühlen, denn hier wird primär auf schlanke Editoren und eine Unabhängigkeit vom Betriebssystem gesetzt. Ebenso können Entwickler das gesamte Ökosystem rund um Visual Studio Code, zum Beispiel die zahlreichen Extensions, für eine Erweiterung beziehungsweise Anpassung des Editors nutzen.Ein besonderes Merkmal ist der bereits erwähnte grafische Designer. In der IDE Delphi hätte man diesen durchaus erwartet. TMS WEB Core for Visual Studio Code bietet einen solchen auch für Visual Studio Code.

Das Setup

Starten wir unter macOS. Alternativ sind auch Windows oder Linux als Betriebssysteme möglich. Installieren Sie zunächst Visual Studio Code beziehungsweise aktualisieren Sie den Editor, um mit der neuesten Version zu arbeiten. Die Installation erfolgt über eine Extension direkt aus Visual Studio Code heraus. Rufen Sie dazu die Erweiterungsseite im Editor auf und suchen Sie nach TMS WEB Core(Bild 1). Nach einem Neustart finden Sie einen weiteren Eintrag in der seitlichen Menüleiste. Hier können Sie unter anderem ein neues Projekt starten, Einstellungen vornehmen, die Lizenz aktivieren, die Applikation starten oder im Bereich Tools Erweiterungen installieren.

Klicken Sie auf den Eintrag Create New Project …, dann erhalten Sie eine Reihe von Projektvorlagen zum Erstellen einer TMS-WEB-Core-Applikation (Bild 2). Im Einzelnen handelt es sich um:

• TMS WEB Application: Eine klassische Webapplikation.
• TMS WEB Electron Application: Eine Webapplikation auf der Basis des Electron-Frameworks, um plattformübergreifende Desktop-Anwendungen zu erstellen.
• TMS WEB Miletus Application: Hierbei handelt es sich um einen neuen Projekttyp, der erst ab Version 1.8 verfügbar ist. Die Miletus-Technologie ist eine Eigenentwicklung des Herstellers, die es erlaubt, Desktop-Applikationen für Windows, macOS und Linux aus einer bestehenden Web­applikation zu erstellen. Im Unterschied zur Projektvorlage TMS WEB Electron Application kommt dabei das Framework Electron nicht zum Einsatz.
• TMS WEB PWA Application: Erstellt eine Webapplikation mit der Möglichkeit einer Offline-Nutzung.

Die weiteren Vorlagen generieren eine Konsolen-Applika­tion oder ein Package zum Einsatz in einer Webapplikation.

Projektstart

Das Projekt für das hier vorgestellte Beispiel erstellen Sie mit der Vorlage TMS WEB Application. Wählen Sie diesen Menüpunkt aus der Liste der Vorlagen und bestimmen Sie einen Speicherort. Visual Studio Code generiert auf der Basis dieser Vorlage ein Codegerüst. Die erzeugte Projektstruktur entspricht im Wesentlichen dem Aufbau einer Delphi-Applika­tion (Bild 3). Der Quellcode in der Programmiersprache Object Pascal wird in sogenannten Units organisiert. Units haben die Dateiendung *.pas. Eine Unit kann sowohl Quellcode für die Programmlogik als auch für die Oberfläche enthalten. Im Fall einer Webapplikation handelt es sich um eine Webseite. Im initialen Projekt, das auf der Basis der Vorlage generiert wurde, befindet sich zunächst nur eine Unit (Unit1.pas). Es handelt sich dabei um eine Seite (Dialogfeld, Fenster), daher ist dieser Unit ebenfalls die Datei Unit1.dfm zugeordnet. Dateien mit der Erweiterung *.dfm speichern die Einstellungen des integrierten Designers. Diese Datei wird nicht manuell editiert, sondern ausschließlich automatisch durch den De­signer gepflegt. Beide Dateien (*.pas und *.dfm) existieren auch in Desktop-Anwendungen für Delphi. TMS WEB Core ergänzt diese beiden Dateien um eine HTML-Datei (Unit1
.html), da TMS WEB Core aus dem Codegerüst eine Webapplikation generiert.

Zu einem Projekt gehören weiterhin die Projektdateien (.dpr, .dproj und .html). Diese werden ebenfalls vom System gepflegt und müssen im Normalfall nicht manuell geändert werden. Der Ordner .vscode enthält die üblichen Konfigurationsdateien für den Editor Visual Studio Code, um den Übersetzungs- und Build-Vorgang zu steuern.Mit der Installation von TMS WEB Core als Extension in Visual Studio Code wurden alle notwendigen Konfigurationsschritte für die Entwicklung vorgenommen. Visual Studio Code wurde um die Erweiterungen für die Programmiersprache Pascal und für das Framework Electron ergänzt. Ebenso wurde ein lokaler Webserver installiert und konfiguriert, um die Applikation direkt aus Visual Studio Code heraus starten zu können.Wechseln Sie nun direkt in den grafischen Designer. Nach Ausführen des Projektassistenten dürfte im Editor bereits die Datei Unit1.pas geöffnet sein. Falls nicht, öffnen Sie die ­Datei Unit1.pas im normalen Modus, was bedeutet, dass der Quellcode im Editor von Visual Studio Code angezeigt wird. Mithilfe der Tastenkombination [Control] + [F12] können Sie zwischen Quellcode- und Designer-Ansicht umschalten (Bild 4).

Das Formular für die Webseite ist zunächst noch vollständig leer. Untersuchen Sie die Elemente des grafischen Designers, der von TMS WEB Core in Visual Studio Code eingerichtet wurde:

• Strukturansicht: Hier erhält man eine hierarchische Übersicht über alle Elemente des Formulars.
• Tool-Palette: Angezeigt werden alle verfügbaren Komponenten, um eine TMS-WEB-Core-Applikation zu erstellen.
• Objekt Inspektor: Hier werden die Eigenschaften zu den Objekten eingestellt, die mithilfe des Designers auf dem Formular platziert wurden. Dies geschieht über die Registerkarte Properties. Über die Registerkarte Events können die Ereignisse zum betreffenden Objekt gebunden werden.
• Designer: Der Designer erlaubt ein Platzieren der Komponenten mittels Drag-and-drop. Man erhält bereits vor dem Ausführen der Applikation einen Eindruck über das spätere Aussehen. Er bietet Hilfsfunktionen zur Ausrichtung und gleichmäßigen Platzierung der Komponenten.
• Terminal: Am unteren Bildschirmrand werden die Meldungen des Compilers, mögliche Fehler sowie weitere Meldungen angezeigt.

Platzieren Sie testweise einige Elemente auf dem Formular. Beispielsweise kann man ein Eingabeformular für eine Artikelverwaltung zusammenstellen. Benötigt werden zunächst nur Basiskomponenten wie Bezeichnungsfelder (TWebLabel), Eingabefelder (TWebEdit) und Schaltflächen (TWebButton). Dazu wählt man die passenden Komponenten aus der Palette und platziert diese mittels Doppelklick auf dem Formular. Diese können dann in der Größe angepasst und ausgerichtet werden. Hinweis: Für einen ersten Versuch machen wir dies mit einer absoluten Positionierung. Da Webapplikationen auf den unterschiedlichsten Geräten ausgeführt werden können, sind für die Anordnung üblicherweise Layout-Container zu verwenden, das heißt, dass die platzierten Objekte dann gemäß einer relativen Positionierung angeordnet werden. Ebenso werden die Eigenschaften der Objekte über den Objektinspektor eingestellt (Bild 5).

Sie können die Applikation nun bereits starten. Das erledigt man direkt aus Visual Studio Code über den Menüpunkt Ausführen. Sie haben die Wahl zwischen Debugging starten und ohne Debugger ausführen. Der Compiler von TMS WEB Core verarbeitet den Quellcode (Object Pascal) und die generierten Formulardefinitionen des grafischen Designers. Beim ersten Start des Compilers wird der Entwickler nach einer Lizenz gefragt. Hier haben Sie die Möglichkeit, sich auf der Webseite des Herstellers für eine Trial-Lizenz zu registrieren. Diese erhalten Sie nach Eingabe einer E-Mail-Adresse und einer Rückbestätigung.In Visual Studio Code geben Sie dann die registrierte
E-Mail-Adresse und den vorläufigen Lizenzcode ein. Ist dies erledigt, kann es unmittelbar weitergehen, das heißt, die Webanwendung wird kompiliert und ausgeführt.Der lokale Webserver wird gestartet und die Webanwendung im Browser (Google Chrome) unter der Adresse http://localhost:8080/ angezeigt (Bild 6). Kurz zusammengefasst: Das komplette User Interface erstellen Sie im grafischen ­Designer. Diesen Komfort kennt man in der Regel nur aus integrierten Entwicklungsumgebungen für das Erstellen von Desktop-Applikationen und einigen Low-Code-Tools.

Komponenten

Basis für TMS-WEB-Core-Anwendungen sind Komponenten. Es wird zwischen zwei grundsätzlichen Arten von Komponenten differenziert:

• Visuelle Controls: Objekte dieser Komponenten kapseln die Elemente der Benutzeroberfläche. Im Fall einer Webanwendung sind es die typischen Controls, die man auf einer interaktiven Webseite üblicherweise findet. TMS WEB Core bietet eine reichhaltige Komponentenpalette. Bereits nach der Installation hat man eine umfassende Auswahl (Bild 7). Darunter sind Basiskomponenten wie Beschriftungen (TWebLabel), Texteingabefelder (TWebEdit) oder Schaltflächen (TWebButton). Darüber hinaus findet man Controls für typische Use Cases einer Webapplikation, wie zum Beispiel für das Einblenden einer Karte (TWebGoogleMaps).

• Nichtvisuelle Controls: Der zweite Bereich sind nichtvisuelle Steuerelemente. Diese kapseln eine bestimmte Funktionalität. Indem man ein Objekt einer solchen Komponente verwendet, das heißt mittels Designer aus der Komponentenpalette auf das Formular zieht, kann man auf die Funktionen und Methoden der betreffenden Komponente zugreifen. Ein Beispiel ist die Anbindung von Datendiensten. Diese sind im Abschnitt TMS Web Data Access gebündelt. Darunter findet sich beispielsweise die Komponente TWebFirestoreClientDataset für einen Zugriff auf den Cloud-Speicherdienst Firestore aus dem Hause Google (Bild 8).

Der Hersteller TMS bietet auf seiner Homepage weitere Komponenten an, beispielsweise die FNC-Komponenten (Framework Neutral Components), die man ebenfalls in TMS WEB Core for Visual Studio verwenden kann. Damit steht dem Entwickler eine sehr große Auswahl an Komponenten zur Verfügung, die einen Großteil der typischen Use Cases einer Business-Webapplikation abdeckt.

Interaktion

Webapplikationen nutzen auf Seiten des Clients JavaScript, um Dynamik und Nutzerinteraktion abzubilden. TMS Web Core übersetzt die in Object Pascal geschriebene Programmlogik in JavaScript. Die angewendete Vorgehensweise ist einfach und entspricht der Bindung von Events in klassischen Desktop-Applikationen. Wir demonstrieren das grundsätzliche Vorgehen an einem kurzen Beispiel. Platzieren Sie dazu einen Button (TWebButton) und ein Texteingabefeld (TWeb­Edit). Ein Klick auf den Button soll den Inhalt im Eingabefeld ändern.Dazu vergeben Sie für das Eingabefeld einen eindeutigen Namen beziehungsweise notieren sich den vorgegebenen Namen (Web­Edit1). Aus dem Quellcode können Sie mit­hilfe des Namens auf das Objekt und dessen Eigenschaften zugreifen. Objekte verfügen über unterschiedliche Events (Ereignisse), die durch Nutzerinteraktionen (zum Beispiel Tastenklick, Mausbewegung) oder durch System­reaktionen (zum Beispiel Aktivierung einer Seite, Entladen der Applikation) ausgelöst werden. Diese Ereignisse sind über den Ob­jekt­inspektor zugänglich und können auch über diesen gebunden werden.Das am häufigsten genutzte Ereignis eines Buttons ist der OnClick-Event, der bei einem Klick auf die Schaltfläche ausgelöst wird. Weitere Ereignisse, wie beispielsweise bei Tastendruck (OnKeyPress), oder spezifische Maus­reaktionen (OnMouseDown, OnMouseUp) sind ebenfalls verfügbar (Bild 9).

Mit einem Doppelklick auf das leere Feld neben dem Eintrag des Events, in diesem Fall OnClick, binden Sie das betreffende Ereignis im Quellcode, siehe Bild 10. Dabei handelt es sich in Object Pascal um eine Prozedur, die zunächst im interface-Abschnitt der Unit deklariert wird. Im Abschnitt implementation erfolgt dann die Codierung der Anwendungslogik. In diesem Fall ist es lediglich die Zuweisung eines Textes an das Eingabefeld, das heißt, Sie ändern die Text-Eigenschaft der Komponente WebEdit1. Diese Vorgehensweise ist vielen Entwicklern aus der Programmierung von Desktop-Anwendungen bestens vertraut.

Starten Sie die Webapplikation. Mit einem Klick auf den Button passiert genau das, was beabsichtigt war, das heißt, der Wert des Eingabefelds passt sich an. Noch ein Blick hinter die Kulissen, um die Vorgehensweise besser nachvollziehen zu können: Zur Ausführungszeit der Webapplikation kann der Browser lediglich JavaScript verarbeiten. Der Trans­piler übersetzt den Pascal-Code in Java­Script. Sie finden nun einen Ordner TMSWeb/Debug. Darin gibt es die generierte JavaScript-Datei. Der Dateiname entspricht dem Projektnamen und hat die Dateiendung .js. Suchen Sie in dieser Datei nach der Komponente WebEdit1. Dort finden Sie unter anderem den Java­Script-Code für das Ereignis WebButtonClick:

Dieser Code, den Sie auch in Bild 11 wiederfinden, wird vom Transpiler automatisch generiert und zur Laufzeit durch den Browser ausgeführt. Dieses einfache Beispiel zeigt, in welcher Form Ereignisse von Komponenten gebunden werden.

Die weiteren Features

Webapplikationen können auch auf den Desktop gebracht werden. Dazu dient das Framework Electron. Mit dessen Hilfe ist man in der Lage, eine Webanwendung so zu konfigurieren, dass sie auf den Desktop-Betriebssystemen Windows, Linux beziehungsweise macOS ausgeführt werden kann. Ein bekanntes Beispiel ist der Editor Visual Studio Code, der selbst eine Webapplikation ist. Die Konfigura­tion ist jedoch etwas kompliziert. Sie haben die Möglichkeit, ein neues Projekt als Electron-Webanwendung mithilfe einer Projektvorlage einzurichten. Für die Nutzung der besonderen Funktionen einer Desktop-Appli­kation stehen einige weitere Komponenten zur Verfügung. Beispielsweise für den Zugriff auf die Dateidialoge (TElect­ron­OpenDialog, TElectronSaveDialog), für die Gestaltung des Anwendungsmenüs (TElectronMainMenu), für das Einblenden von modalen Dialogfeldern (TElectronMessageBox, TElectronErrorBox) oder für den Zugriff auf Datenbanken (TElectronMySQLClientDataSet).Als einfaches Beispiel haben wir eine TErrorBox-Komponente und eine Schaltfläche auf dem Formular mithilfe des Designers platziert. Über den OnClick-Event des Buttons rufen wir die ErrorBox auf:

Zur Laufzeit wird über Electron eine Desktop-Applikation für das gewünschte Zielsystem erstellt. Das modale Dialogfeld wird angezeigt.Wie eingangs bereits erwähnt, gibt es ab Version 1.8 eine Alternative zu Electron. Verwenden Sie dazu die Vorlage TMS WEB Miletus Application. Der Vorteil: Das zusätzliche Framework Electron entfällt, und ebenso die dafür notwendigen Konfigurationen. Erstellen Sie einen solchen Applikationstyp, platzieren Sie einige Steuerelemente und starten Sie die Applikation. Es wird unmittelbar eine Desktop-Anwendung generiert und gestartet.In diesem Fall – siehe Bild 12 – handelt es sich um eine Anwendung für macOS. Ebenso können Sie auch Applikationen für Windows und Linux erstellen. Es gibt keine Abhängigkeiten zu weiteren Bibliotheken, auch nicht zu Electron.

In ähnlicher Art und Weise, wie man Desktop-Applikationen mittels Electron beziehungsweise Miletus erstellt, können Sie eine Webapplikation als Progressive Web Application (PWA) konfigurieren. Auch dafür gibt es – wie eingangs erwähnt – eine spezialisierte Vorlage, um das Projekt entsprechend einzurichten.

Fazit

Die Zielgruppe für TMS WEB Core for Visual Studio Code zum Erstellen von Webapplikationen sind klassische Anforderungen aus dem betrieblichen Umfeld. Dialogfelder kann man effizient mithilfe des grafischen Designers erstellen. Die Programmlogik wird mit Pascal codiert. Das dürfte schneller gehen, denn Pascal gilt als strukturierte Sprache mit leicht erlernbarer Syntax und überschaubarem Sprachumfang. Mit der Unterstützung von Visual Studio Code ist eine Entwicklung auf jeder beliebigen Zielplattform möglich. Ebenso stehen alle weiteren Vorzüge dieses Editors zur Verfügung.Gibt es schon Quellcode in Delphi beziehungsweise Pascal aus anderen Projekten, zum Beispiel einer Desktop-Applikation, dann kann TMS WEB Core for Visual Studio auch für ­eine Migrationsaufgabe eingesetzt werden.

Fussnoten

1. TMS WEB Core for Visual Studio Code, http://www.dotnetpro.de/SL2111WebCore1
2. Free Pascal, http://www.freepascal.org
3. Electron.js, http://www.electronjs.org
4. Visual Studio Code, https://code.visualstudio.com