SPA mit ASP.NET Core und Angular

Was ist eine Single-Page-Application?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Single-Page-Applications ermöglichen die Entwicklung von Web-Anwendungen, die sich ähnlich komfortabel bedienen lassen wie klassische Desktop-Anwendungen. Was eine Single-Page-Anwendung darüber hinaus ausmacht, erfahren Sie in diesem Film.
05:49

Transkript

Single-Page-Applications sind heutzutage in aller Munde. Die Frage ist aber, was ist wirklich so eine Single-Page-Application und was macht sie aus? Eher wir diese Frage beantworten können, sollten wir erst einmal kurz ein Blick darauf werfen, wie früher Internetanwendungen funktioniert haben. Von der Grundidee her sah das ungefähr wie folgt aus: Ein Client, der hat eine Anfrage an einen Server gesendet. Zum Beispiel, hat jemand seinen Browser geöffnet und ist dann auf www.firma.de gegangen. Der Server, der hat dann die Verarbeitung übernommen. Das bedeutet, dass eventuell dynamische Scripte auf dem Server gelaufen sind, aus denen dann HTML gerendert worden ist. Vielleicht wurde auch auf eine Datenbank zugegriffen. Auf jeden Fall hat der Client am Ende eine vollständige Antwort in Form eines HTML-Dokumentes erhalten, und dieses konnte er dann darstellen. Wenn der Anwender danach die nächste Aktion durchgeführt hat, zum Beispiel, hat er das Kontaktformular ausgefüllt und dann das Ganze wieder abgeschickt, dann sind wieder die Daten komplett an den Server gesendet worden. Der Server hat alles verarbeitet. Der hat dann vielleicht diese Daten aus dem Kontaktformular in die Datenbank eingetragen, der hat ein paar E-Mails verschickt und hat das Ganze dann später in einer HTML-Antwort wieder zurückgerendert, und das wurde dann im Browser wieder dargestellt. Wir können also sagen, der Browser, der dient eigentlich nur zur Datenvisualisierung und zur einfachen Eingabe. Jedes Mal, wenn ich eine Aktion ausgeführt habe, dann hatte ich einen Sichtbaren Seitenwechsel. So habe ich hier mit diesen weißen Zwischenstrichen versucht zu visualisieren. Bedeutet also, jedes Mal, wenn der Server etwas gemacht hat, bis die neue Antwort kam, dann war die Seite zwischenzeitlich leer. Das führte dazu, dass dem Benutzer ganz genau bewusst war, dass Teile der Anwendung nicht bei ihm laufen, sondern auf einem entfernten System. Denn er sah, ich drücke etwas, dann muss ich warten, die Seite ist weiß und irgendwann kommt eine Antwort zurück. Etwas eleganter wurde das Ganze dann mit der Einführung von AJAX. Den Begriff AJAX, der steht für asynchrones JavaScript und XML. Der wurde 2005 geprägt. Die Technologie dahinter, die gabs allerdings schon ein wenig länger, nämlich die erste Implementierung, die geschah 1998 für Outlook Web Access durch Microsoft. So wirklich populär wurde das Ganze aber erst 2005, als dieses [unverständlich] an Technologien einen Namen erhielt. Wie funktioniert das Ganze hier? Der Start ist wieder der gleiche. Ich gehe auf eine Webseite, der Server, der lässt irgendwelche Skripte im Hintergrund laufen, und dann schickt er mir eine Antwort. Jetzt führe ich eine Aktion aus, und zwar, möchte ich jetzt wieder das Kontaktformular ausfüllen, und dieses Mal werden die Daten asynchron an den Server gesendet. Der Server, der verarbeitet die Daten jetzt Aich wieder, und er schickt mir gar keine volle HTML-Seite mehr zurück, sondern vielleicht nur ein Teil vorgerendertes Dokuments. Oder eben auch nur Daten, und auf meiner Seite pflege ich diese Daten dann sofort ein. Wenn wir uns das jetzt hier mal anschauen, dann sehen Sie, dass jetzt hier keine Lücke mehr zwischen Aktionen und Darstellung mehr ist. Und das ist kein Fehler in meiner Darstellung, sondern das soll Ihnen Symbolisieren, dass für den Benutzer, also die Grenze zwischen Webseite und Applikation ein wenig aufgeweicht wird, denn er macht eine Aktion auf seiner Seite, und die Antwort, die sieht er direkt auf derselben Seite, ohne dass irgendetwas neu geladen werden muss. Immer dann, wenn ich jedoch in einen komplett anderen Bereich gehe, zum Beispiel, vom Kontaktformular auf den Produktkatalog, dann habe ich aber auch bei einer ganz klassischen AJAX-Anwendung wieder diesen Sichtbaren Seitenwechsel. Eine Weiterentwicklung des Ganzen, das sind die sogenannten Single-Page-Applications. Bei der Single-Page-Applikation ist die Idee wie folgt: Ich mache meine Anfrage, der Server arbeitet, ich kriege ein UI zurück, und dann bleibe ich immer auf derselben Seite. Bedeutet, selbst wenn ich dann hier nach dieser Aktion, die wir hier sehen, eine neue UI-Darstellung bekomme und dann auf einen ganz anderen Bereich meiner Seite wechsele, ich werde nie wieder diesen weißen Zwischenbereich hier haben, sondern ich habe immer nur eine Seite, auf der ich bleibe. Das bedeutet, dass aus Sicht des Benutzers ich eigentlich das Gefühl habe, dass ich immer auf einer Seite bin und dass das System bei mir läuft, weil alles sofort passiert. Also bei einer Single-Page-Anwendung sind wir sehr nah an dem, was der Anwender von Desktop-Anwendungen gewöhnt ist. Ermöglicht worden sind Single-Page-Anwendungen durch ein Zusammenspiel von modernem JavaScript, und zwar durch Ecmascript 5 und höher, durch HTML 5 und durch CSS 3. Wir können also zusammenfassen, bei einer Single-Page -Application bleibt der Benutzer immer auf derselben Seite. Initial wird eine Seite geladen, und diese Seite, die wird nie komplett neu geladen. Stattdessen werden immer nur Teile der Seite ausgetauscht. Der Benutzer hat also immer den Eindruck, dass er sich wie in einer Desktop-Anwendung gerade bewegt, gerade, weil eben die Interaktion so ähnlich ist. Bedeutet, es friert nichts mehr ein, wenn ich irgendwo draufdrücke. Ich muss nicht warten, ich kann sogar ganz typische Interaktionsmuster für Desktop-Anwendungen benutzen, wie, zum Beispiel, Drag&Drop oder aber auch das dynamische Rendern von Oberflächenelementen. Ich kann Multi Media einbinden, und ich kann meine Anwendung sogar offline-fähig machen. Bedeutet, meine Anwendung kann ohne einen laufenden Server im Hintergrund funktionieren. Somit verschwindet die Grenze zwischen Webseite und Applikationen aus Sicht des Benutzers vollkommen. Der hat also keine Idee mehr, dass er gerade eine Webseite bedient.

SPA mit ASP.NET Core und Angular

Lernen Sie die Bestandteile von modernen Webanwendungen kennen und nutzen.

5 Std. 21 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:25.09.2017
Laufzeit:5 Std. 21 min (36 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!