Von reaktiven Webapplikationen(Reactive Web Apps) haben Sie vermutlich bereits gehört. Reactive Web ermöglicht höchst leistungsfähige und skalierbare Apps sowie ein deutlich verbessertes Entwicklungserlebnis für Web und Mobile. Wahrscheinlich haben Sie die hochmoderne Web-Architektur und die einheitliche Entwicklung sogar schon einmal selbst erlebt.

Doch was genau sind die Vorteile von Reactive Web Apps? Und wenn Sie ein bestehendes Portfolio haben: Können Sie Ihre traditionellen Webapplikationen zu reaktiven Web-Apps umstellen? (Spoiler: Die Antwort ist Ja. Mehr zu diesem Thema erfahren Sie auch in diesem Tech Talk.) In diesem Post werde ich diese und weitere häufig gestellte Fragen zum Upgrade der Web- und Mobile-Entwicklung beantworten.

Die Zukunft der Webentwicklung

Reactive Web bietet eine Reihe von Vorteilen gegenüber dem, was wir als „traditionelles Web“ bezeichnen können. Sie ermöglichen eine verbesserte Leistung und erlauben es, Apps innerhalb kürzerer Zeit zu optimieren.

 

Traditionelle vs. reaktive Web Apps
Was sich vom traditionellen Web zum reaktiven Web verändert hat.

 

Vereinfacht ausgedrückt gibt es drei Hauptmerkmale: server- und clientseitige Logik, asynchrones Abrufen von Daten und reaktives clientseitiges Rendering.

Was Sie auf Anhieb erkennen können, ist die verbesserte Performance. Da alle UI-Elemente in Reactive Web Apps sofort aktualisiert werden ist Ajax Refresh nicht mehr erforderlich. Die Apps verstehen automatisch, welche Widgets aktualisiert werden müssen, wenn sich Daten ändern.

 

Verhältnis von Erlebnis und Zeit
Die Geschwindigkeit sorgt bei Usern für Freude.

 

Und da sich die gesamte clientseitige Logik visuell modellieren lässt, müssen Sie sich nicht mehr mit schwer instandhaltbarem JavaScript beschäftigen. Optimiertes JavaScript wird automatisch für Sie erstellt. OutSystems generiert und sichert hinter den Kulissen auch REST-APIs zur Unterstützung der Kommunikation zwischen Browser und Server, wobei die für die Datenübertragung erforderliche Mindestnetzwerkbandbreite genutzt wird.

Darüber hinaus sind Ihre Apps reaktionsfähiger und skalierbarer. Das bedeutet, dass sie weiterhin ausgeführt werden und auf Benutzereingaben im Browser reagieren, wenn eine serverseitige Aktion ausgeführt wird. Außerdem erhalten Sie eine Warnung, wenn Sie versehentlich Muster erstellen, die nicht skalierbar sind. So können Sie alles sofort korrigieren und verbessern.

Modernste Web-Architektur

Wir haben bereits die moderne Laufzeitarchitektur erwähnt, die von reaktiven Webapplikationen verwendet wird. Nun wollen wir uns anschauen, was das genau bedeutet.

 

Reaktive Web-App-Architektur
Eine zukunftssichere Architektur.

 

Bei der neuen Architektur werden der meiste Code und die meisten Ressourcen im Browser zwischengespeichert. Dadurch entfällt der Kommunikationsaufwand für die meisten Benutzerinteraktionen. Die Benutzeroberfläche (UI) wird auf clientseitig gerendert, und alle Bildschirme, Blöcke und Widgets werden als wiederverwendbare React-Komponenten generiert.

Mit Reactive Web haben wir auch einige bedeutende Änderungen an unseren UI-Frameworks umgesetzt. OutSystems UI Mobile wurde in OutSystems UI umbenannt und ist zum einzigen UI-Framework geworden, das die Entwicklung aller reaktiven Web- und mobilen Applikationen unterstützt. Weitere Informationen über das neue Framework finden Sie auf unserer OutSystems UI Website.

Was ist noch neu in Reactive Web?

Neben den Merkmalen, die wir bereits erwähnt haben und die meist direkt neben Definitionen von Reactive Web auftauchen, gibt es noch viele weitere Verbesserungen, die nicht weniger wichtig sind.

Der Datenabruf ist jetzt in mobilen und reaktiven Webapplikationen einfacher zu verwenden, da Bildschirm-Aggregate und Datenaktionen jetzt im Bereich anderer Bildschirm-Aggregate und Datenaktionen verfügbar sind. Die Fetch-Eigenschaft wurde mit den Optionen „At Start“ und „On Demand“ hinzugefügt, sodass Sie komplexere Muster mit weniger Code implementieren können.

 

 Bildschirm-Aggregate in Reactive Web
Bildschirm-Aggregate sind jetzt leistungsstärker und können kombiniert werden.

 

Das Abrufen vom Server kann auf ein Minimum beschränkt werden, indem Client-Variablen erstellt werden, um den Schnittstellenstatus wie ein Filter zu speichern oder um Benutzerinformationen zwischenzuspeichern.

Weitere Verbesserungen

Hinsichtlich Utility-Upgrades können Sie Schaltflächen-Widgets mit der Eigenschaft Is Form Default erwarten, die auf Yes gesetzt werden kann, damit die Applikation die Daten aus dem zugehörigen Formular übermittelt, wenn der Endbenutzer die Eingabetaste drückt. Zusätzlich wurde ein neues Tabellen-Widget zusammen mit einem Accelerator hinzugefügt. Auf diese Weise können Sie eine Entität darauf ziehen, um eine Tabelle mit Sortierung und Paginierung zu erstellen.

 

Überschriftenzelle
Ein neues Tabellen-Widget mit Sortierung und Paginierung

 

Das Dropdown-Widget hat ebenfalls eine neue Eigenschaft namens Options Content, die Sie auf „Text Only“ oder „Custom“ einstellen können. Die erste Option verleiht den Dropdown-Listen in Ihren reaktiven und mobilen Apps ein natives Look and Feel. Die zweite wird verwendet, um ein Dropdown mit einer Liste von Bildern oder anderen Widgets zu erstellen.

Sie können Ihre Logik auch mit dem Logikknoten Download Tool verbessern. Dieser kann zu Ihrem Flow hinzugefügt werden, um einen Knoten zu erstellen, der bei der Ausführung eine Datei zum Herunterladen an den Endbenutzer sendet.

Schnellstart für die Erstellung Ihrer Reactive Apps

Beginnen Sie großartige Applikationen zu erstellen, die von Anfang an eine robuste Architektur haben. Profitieren Sie vom neuen Bibliotheksmodul, das Sie durch den Prozess der Festlegung der Bausteine Ihrer Applikationen führt. Bibliotheken können sowohl in reaktiven als auch in mobilen Apps verwendet werden.

 

Bibliotheken
Bibliotheken können in reaktiven und mobilen Apps verwendet werden.

 

Wenn es darum geht, Bildschirme Ihrer Applikation zu erstellen, gibt es gute Nachrichten: Mit Scaffolding in Reactive Web können Sie eine Entität einfach in jeden beliebigen UI-Fluss ziehen. Dann werden zwei neue Bildschirme hinzugefügt, mit Arbeitsaktionen und Validierungen. Und alles ist bereit zur Veröffentlichung. Außerdem können Sie jetzt ganz einfach Menüs befüllen, indem Sie Ihre Bildschirme auf den Menüblock ziehen.

Auch in Forge finden Sie einen reaktiven Komponententyp. Reaktive Komponenten ähneln mobilen Komponenten, und wenn Sie eine mobile Komponente finden, die Sie in Ihren Apps verwenden möchten und die keine nativen Fähigkeiten erfordert, können Sie sie mit einer einfachen Menüoption schnell in eine reaktive Komponente umwandeln.

 

Reaktive Forge-Komponenten
Reaktive Forgekomponenten können kanalübergreifend gemeinsam genutzt werden.

 

Reaktive Blöcke, Themes und Skripte können von mobilen und reaktiven Apps geteilt werden. Das bedeutet deutlich weniger Arbeit, wenn Sie konsistente Benutzererlebnisse über verschiedene Kanäle hinweg schaffen wollen.

Wenn Sie eine bestehende traditionelle OutSystems Web-Applikation haben, können Sie deren Entitäten und Serveraktionen wiederverwenden. Ihre gesamte Backend-Logik, -Daten und -Dienste können über alle Kanäle hinweg genutzt werden.

Die Schnittstellenarchitektur ist jedoch so unterschiedlich, dass Sie nicht alles automatisch konvertieren können. In diesem Tech Talk erfahren Sie mehr zur Umstellung Ihres bestehenden Portfolios auf Reactive Web. Alternativ können Sie auch dem Guide ntroduction Into Migrating Traditional Web to Reactive Web Apps aus unserer Dokumentation folgen. .

Schaffen Sie herausragende Erlebnisse für Ihre Anwender

Letztlich dreht sich alles um die Frage, was Sie für Ihre Anwender tun können. Sie müssen die neue Art der Applikationsentwicklung selbst erleben, um zu verstehen, wie sehr die reibungslosen Übergänge und schnellen Reaktionszeiten Anwender begeistern. All dies erreichen Sie mit einfach anpassbarem visuellem Low-Code.

Reactive Web verändert in revolutionärer Weise, wie Sie Ihre Apps bereitstellen, und unsere Pläne im Bereich Reactive Web sind noch lange nicht erschöpft. Ihr Feedback liefert uns dabei wichtige Einsichten – hier können Sie es teilen.