Zunächst einmal sind Sie höchstwahrscheinlich bereits ein regelmäßiger Benutzer von Single Page Applications (SPAs).
Single Page-Anwendungen sind ein großartiges Werkzeug für unglaublich ansprechende und einzigartige Erfahrungen für Ihre Nutzer.
Einige einseitige Anwendungsbeispiele sind wie Google Mail, Google Maps, AirBNB, Netflix, Pinterest, Paypal und viele mehr verwenden SPAs, um eine flüssige, skalierbare Erfahrung zu erstellen.,
In der Vergangenheit haben wir Vermarkter jedoch im Dunkeln gelassen, wenn es um die Verwaltung von Inhalten geht. Glücklicherweise ist es jetzt möglich, Ihr SPA mit dem richtigen CMS zu koppeln, um sowohl Entwicklern als auch Vermarktern die Kontrolle zu geben, die sie benötigen.
Was ist Single-Seite Anwendung?
Single page application (SPA) ist eine einzelne Seite (daher der name), wo eine Menge der information bleibt die gleiche, und nur ein paar Stücke, müssen aktualisiert werden zu einer Zeit.,
Zum Beispiel, wenn Sie durch Ihre E-Mail durchsuchen werden Sie feststellen, dass nicht viel ändert sich während der Navigation – die Seitenleiste und Kopfzeile bleiben unberührt, wie Sie durch Ihren Posteingang gehen.
Das SPA sendet nur, was Sie mit jedem Klick benötigen, und Ihr Browser macht diese Informationen. Dies unterscheidet sich von einem herkömmlichen Seitenladen, bei dem der Server bei jedem Klick eine ganze Seite neu rendert und an Ihren Browser sendet.
Diese clientseitige Methode macht die Ladezeit für Benutzer Stück für Stück viel schneller und macht die Menge an Informationen, die ein Server senden muss, viel weniger und viel kostengünstiger., Eine win-win-Situation.
Was ist Single Page Application Architecture? Wie funktioniert es?
Die Single Page-Anwendung ist eine Webanwendung oder Website, die mit dem Benutzer interagiert, indem sie die aktuelle Seite dynamisch umschreibt, anstatt ganze neue Seiten vom Server zu laden.
Dieser Ansatz macht eine Unterbrechung der Benutzererfahrung zwischen aufeinanderfolgenden Seiten ungültig, sodass sich die Anwendung eher wie eine Desktop-Anwendung verhält.
Auf den meisten websites gibt es viele sich wiederholende Inhalte.,
Einige davon bleiben gleich, egal wohin der Benutzer geht (Kopf-und Fußzeilen, Logos, Navigationsleiste usw.), einige davon sind nur in einem bestimmten Bereich konstant (Filterleisten, Banner) und es gibt viele sich wiederholende Layouts und Vorlagen (Blogs, Self-Service, das oben erwähnte Google Mail-Setup).
Einseitige Anwendungen nutzen diese Wiederholung.
Nehmen wir an, Ihre Ansicht der Website ist ein Gemälde eines Hauses und eines Baumes. Traditionelle, mehrseitige Websites malen das gesamte Bild für Sie auf dem Server und senden es an Ihren Browser.,
Wir geben Ihnen die Paint-by-Numbers-Anleitungen für die Site, einschließlich der sich wiederholenden Anleitungen, die Sie wahrscheinlich verwenden werden, und wählen dann die richtige Farbe (Daten und Inhalt) aus, um die Vorlage auszufüllen.
So oder so sehen Sie den gleichen Baum, aber die Geschwindigkeit des SPA kommt, wenn Sie neue Inhalte anfordern-wie das Klicken auf „Weiter“, das Filtern von Ergebnissen, das Öffnen einer Mail oder – in dieser kleinen Metapher – das Bitten um einen anderen Baum.
Bei einer herkömmlichen Website würde Ihre Anfrage nach einem neuen Baum dazu führen, dass der Server das gesamte Bild neu malt und zurücksendet.,
Mit einer einseitigen Anwendung sagt der Server „Hey, ich habe einen neuen Baum für dich, aber du hast bereits das Haus, also lass das einfach gleich“ und sendet dir dann aktualisierte Anweisungen für einen neuen Baum und die Farbe, um es zu machen.
Durch die Übertragung der Malerei Arbeit (Seite Rendering) vom Server auf den Client (Sie) kann die Seite dynamisch neu geschrieben werden, anstatt durch eine ganze neuladen.
Das macht die Dinge viel schneller.,
Einseitige Anwendungsvorteile
SPA-Lösungen bieten viele Vorteile, z. B. verbesserte Anwendungsleistung und-konsistenz sowie reduzierte Entwicklungszeit und Infrastrukturkosten.
Durch die Trennung der Präsentation von Inhalt und Daten können Entwicklungsteams mit unterschiedlichen Geschwindigkeiten arbeiten und gleichzeitig für die Gesamtlösung integriert werden. SPA ist gut für responsive Design für mobile, Desktop und Tablet zu machen.,
Einziges Mal in der Datei, Laden von HTML -, CSS -, JS
Single-Page-Anwendung, nachdem die erste Seite zu laden, wird der server sendet nicht mehr HTML – Sie laden Sie es alle am Anfang.
Der Server sendet Ihnen eine Shell-Seite und Ihr Browser rendert die Benutzeroberfläche (UI).
Wenn Sie dann herumklicken, sendet das SPA Anforderungen an Daten und Markups zurück, der Server schießt die benötigten Rohstoffe zurück und Ihr Browser nimmt sie und rendert eine aktualisierte Benutzeroberfläche – austauschbare Teile, ohne jemals die gesamte Seite aktualisieren zu müssen.,
Diese schnelle Austauschbarkeit macht SPAs unglaublich nützlich auf Seiten, die stark navigiert sind und sich wiederholende Vorlagen verwenden.
Keine zusätzlichen Abfragen an Server
Da der Server keine Zeit aufwenden muss & Um die vollständige Zeichnung durchzuführen, verringern Sie die Auswirkungen auf Ihre Server insgesamt – was bedeutet, dass Sie Geld sparen können, indem Sie weniger Server für den gleichen Datenverkehr verwenden.
Schnelles und reaktionsschnelles Frontend Erstellt
Zusammen mit der oben erläuterten schnelleren Leistungszeit können Entwickler das Frontend auch viel schneller erstellen.,
Dies ist aufgrund der entkoppelten Architektur von SPAs, oder eine Trennung von Back-End-Dienste und Front-End-Display.
Viele geschäftskritische Funktionen ändern am Backend nicht viel.
Während, wie Ihre Kunden Log-in, registrieren, Bestellungen kaufen und verfolgen kann es „Aussehen“ oder Präsentation von Zeit zu Zeit ändern, die Logik und Daten Orchestrierung dahinter ist ziemlich konstant – und Sie wollen nicht riskieren, es durcheinander.
In ähnlicher Weise bleiben Ihre Rohinhalte und Daten möglicherweise gleich, aber wie Sie sie anzeigen möchten, unterscheidet sich.,
Durch die Entkopplung, dass Back-End-Logik & Daten aus, wie es präsentiert wird verwandeln Sie es in einen“ Service“, und Entwickler können viele verschiedene Front-End-Möglichkeiten zu zeigen und zu nutzen, dass Service.
Mit einem entkoppelten Setup können Entwickler das Frontend völlig unabhängig von der zugrunde liegenden Backend-Technologie erstellen, bereitstellen und experimentieren.
Sie entwerfen, wie die Benutzererfahrung aussehen und sich anfühlen soll, und ziehen dann den Inhalt, die Daten und die Funktionalität über diese Dienste ein.,
Dies geschieht mit APIs, die ein Standard-Satz von Regeln zwischen Anwendungen sind, wie sie strukturieren, auszutauschen und wieder zusammenzusetzen Daten.
Mit diesem API-Setup können Entwickler schnell und ohne Risiko für geschäftskritische Backend-Technologien an der Benutzeroberfläche arbeiten.
Enhanced User Experiences
Da immer mehr Funktionen als modulare Dienste (eine Microservice-Architektur) erstellt werden, die unabhängig aktualisiert werden können, wird es einfacher, mit der Anzeige und Verwendung zu experimentieren.,
SPAs-Frameworks eignen sich hervorragend zum Herumspielen mit diesen Diensten, um ansprechende, dynamische und sogar animierte Benutzererlebnisse zu schaffen.
Außerdem entwickeln viele Leute einfach gerne in einer bestimmten Programmiersprache (viele SPA-Frameworks verwenden Javascript), und dank APIs können die SPAs, die Sie in einer Sprache erstellen, glücklich mit Back-End-Diensten arbeiten entwickelt in verschiedenen Sprachen.
Einseitige Anwendung mit Angular vs React vs Ember vs Vue?,
Angular und React (und viele andere wie Ember und Vue) sind Frameworks, mit denen Entwickler SPAs effizient und eloquent erstellen.
Einfach ausgedrückt sind diese Frameworks eine Sammlung wiederverwendbarer Komponenten, zu denen viele Entwickler beigetragen haben und die einem definierten Satz von Gebäuderegeln folgen.
Wenn Sie daran denken, wie ein Haus zu bauen, könnten Sie den Ton mischen, trocknen Sie die Ziegel, Mine und formen Sie den Stahl selbst – oder Sie könnten die Ziegel und Rohre verwenden, die andere Leute bereits entworfen haben, und konzentrieren Sie Ihre Zeit auf das, was Ihr Haus einzigartig macht.,
Was die Unterschiede zwischen allen angeht, bin ich kein Experte (aber dieser Typ scheint es zu sein), aber eine großartige Sache an SPAs und den Frameworks, die sie unterstützen, ist, dass Sie dank APIs mit den richtigen Integrationen das Framework verwenden können, das Sie mit Ihren anderen API-fähigen Technologien bevorzugen.
Warum Single Page-Anwendungen und CMSs historisch eine schwierige Paarung waren
Bei der Verwendung von SPAs denken Entwickler vielleicht an die Erfahrung als „App“, aber der Besucher wird es immer noch als Webseite betrachten, und wo es eine Webseite gibt, gibt es ein Marketingteam, das daran arbeitet, sie zu optimieren.,
Da es Apps gibt, die Entwicklungsarbeit erfordern, um an der Anzeige zu basteln & Bereitstellung der Erfahrung müssen Vermarkter in die digitale Steinzeit (auch bekannt als die 90er Jahre) zurückkehren und bei jeder Optimierung um Entwicklungshilfe bitten-was zu unvermeidlichen Engpässen führt.
Entfernt die Editing-Tools Vermarkter verwendet werden, um
Die CMS-Editing-Funktionen Marketing-Teams verlassen sich auf (Live-Vorschau, Drag-and-Drop, WYSIWYG-Bearbeitung, etc) sind in der Regel auf die Lieferung Tier im CMS gebunden.,
Bei SPAs wird die Lieferung durch das SPA bestimmt und der Inhalt wird einfach im CMS gespeichert, so dass die APIs lesen können. Da das SPA auf dem Front-End gerendert wird, hat das Back-End-CMS keine Ahnung, wie es aussehen soll und kann daher keine Vorschau hochfahren.
So CMS-Nutzer am Ende immer mit einem sehr veralteten Ansatz stecken – füllen Sie ein Formular aus, drücken Sie die Daumen, drücken veröffentlichen, und gehen Sie sehen, wie es live aussieht.
Um zu unserem Paint-by-numbers-Beispiel zurückzukehren, speichert das CMS den Rohinhalt (die Farbe) und das SPA hat die Paint-by-Numbers-Anleitung, wie dieser Inhalt aussehen soll., Die Vorschau enthält diese Anleitung nicht und kann daher nicht herausfinden, wie der Inhalt aussehen soll.
Dies ist eine reine“ headless „Lieferung von inhalten (aka, es hat nicht die CMS lieferung tier als“kopf“). Es ist großartig für die schnelle Entwicklung, aber ein bisschen rau für Vermarkter, die die Website selbst ändern möchten, ohne codieren zu müssen.
Daneben sind Vermarkter es gewohnt, über Dinge in „Seiten“ nachzudenken, aber weil ein SPA eine einzelne Seite ist, sind die Seitenaufbau-und Bearbeitungsfunktionen, die Vermarkter benötigen, nicht verfügbar.,
Wenn sie eine neue „Seite“ (eine „Route“ in einem SPA) wollen, oder wollen die Ansicht anders aussehen, müssen sie einen Entwickler fragen.
Machte es schwierig, Inhalte wiederzuverwenden
Dieses Problem hat zwei Hauptgründe, einen mit veralteten CMSs und den anderen aus SPA design.
Erstens gibt es bestimmte CMSs, bei denen es einfach keine De-Kopplung gibt, wie Ihr Inhalt aussieht und wie er gespeichert ist.,
Da die Speicherung von Inhalten ist nicht in einem Standard -, präsentationsneutralen Format der SPA kann es nicht in der API-basierte Art und Weise verwendet werden soll.
Dies ist nicht nur ein Problem bei der Verwendung von SPAs Diese Art von CMS-Einrichtung macht es natürlich unmöglich, Inhalte im Allgemeinen kanalübergreifend wiederzuverwenden.
Da der Inhalt an die Anzeige gebunden ist (ein seitenbasiertes System), können die FAQs, die Sie auf Ihre Website stellen, nicht einfach angezapft werden, damit jemand auf seiner Smartwatch durchblättern kann-Sie müssten den gleichen Inhalt auf zwei verschiedene Arten speichern.,
SPA ‚ s brauchen ein Content-basiertes CMS, um richtig zu funktionieren, damit es rohe Inhalte abrufen und anzeigen kann, wie es will.
Auf der SPA-Seite kommt die Schwierigkeit von der Tatsache, dass viele Websites ein Hybrid-Setup sein werden.
Während Sie vielleicht möchten, dass einige Teile wie ein SPA, möchten Sie vielleicht andere setzen auf die traditionelle Weise (oft besser für SEO), und es muss eine kohärente Gefühl zwischen diesen.
Wenn Ihr Setup zwei Eimer Inhalt, Stücke für die traditionelle Website und das SPA ist, wird dieser Zusammenhalt zu brechen., Sie benötigen Inhalte, die über alles hinweg funktionieren.
Schwierig mit Personalisierung / Relevanz
Inhalte auf „Service“ – Weise zu erfassen, so dass es sich um ein kleines Nugget von Inhalten ohne viel Kontext handelt-keine große Hilfe bei der relevanten Bereitstellung.
Darüber hinaus machen viele CMSs ihre Personalisierung entweder seitenbasiert (in einem SPA nicht hilfreich) oder clientseitig-und diese Javascript – Personalisierungsregeln spielen nicht sehr gut auf dem SPA Javascript. Zu viele Köche in der Sommerküche, wenn Sie so wollen.
Sind Vermarkter für immer in einer aufregenden Welt zum Scheitern verurteilt?
natürlich nicht!, Sie benötigen lediglich ein CMS mit einer Architektur, die für den SPA-Einsatz bereit ist.
Einer, der API-basiert ist, entkoppelt Inhalte von der Präsentation, kann mit dem SPA arbeiten, um eine Live-Vorschau bereitzustellen & Bearbeitungswerkzeuge, unterstützt ein hybrides Setup und führt eine Personalisierung auf der Serverseite durch.
In den folgenden Teilen werde ich Sie durch den Weg Bloomreach tut genau das.
-
Wie Bloomreach Single Page Application Ease für Entwickler und Vermarkter bietet
-
Personalisierung und hybride Unterstützung für Single Page Anwendungen