Fragen zur Erfahrung mit Single-Page-Anwendungen

---Inhalt wiederherstellen beginnt---

##Was ist eine Single-Page-Anwendung?
Die sogenannte Single-Page-Anwendung bezieht sich auf die Integration mehrerer Funktionen auf einer Seite. Auch wenn das gesamte System nur eine Seite (ein HTML) hat Geschäftsfunktionen sind ihre Submodule, die auf bestimmte Weise mit der Hauptschnittstelle verbunden sind.

##Warum gibt es Single-Page-Anwendungen?
Wir wissen, dass die Ajax-Technologie teilweise entwickelt wurde, um Benutzern die Anzeige von Datenänderungen auf der Seite zu ermöglichen, ohne die Seite zu aktualisieren. Wir können sagen, dass Ajax das Erlebnis verbessert.

Mit der Entwicklung des Internets sind die vom Browser bereitgestellten Dienste immer komplexer geworden. Das Web-Frontend ist keine einfache Seite mehr, ein Gadget, das teilweise über Ajax geswipt werden kann. Anwendungen mit Dutzenden von Unterseiten sind überall auf dem Markt zu finden. Diese Unterseiten teilen sich viele gemeinsame Ressourcen (statisch und dynamisch), und das Laden dieser Ressourcen nimmt viel Zeit in Anspruch. Wenn Sie das wiederholte Laden dieser Ressourcen vermeiden möchten, gibt es eine offensichtliche Möglichkeit: Fügen Sie sie in einen HTML-Code ein.

Es handelt sich also um eine weitere Sublimation der Ajax-Technologie, die den aktualisierungsfreien Mechanismus von Ajax auf die Spitze treibt, sodass ein reibungsloses Benutzererlebnis geschaffen werden kann, das mit Desktop-Programmen vergleichbar ist.

##Probleme, die durch Einzelseitenanwendungen verursacht werden
Wir wissen, dass das Einfügen von einem Dutzend oder zwanzig Unterseitenprogrammen in einen HTML-Code nicht durch Ausschneiden und Einfügen gelöst werden kann. Das Ergebnis der Zusammenstellung der ursprünglich nicht zusammenhängenden Programme ist die Masse-Energie-Gleichung der Programmwelt. Fehler = (Mehr Code)^2

##Die Erfahrung von Single-Page-Anwendungen
Zurück zum Thema Wie kann die Einzelseitenanwendung so weit wie möglich verbessert werden? Wie ist die Betriebserfahrung der Seitenanwendung?

Werfen wir zunächst einen Blick darauf, was sich auf die Benutzererfahrung auswirkt, einschließlich

1. Die anfängliche Ladegeschwindigkeit der Seite
Die Reaktion auf die Interaktion
3 von Seitendaten (insbesondere unter anormalen Netzwerkbedingungen)

--
Die ersten beiden Punkte werden tatsächlich in vielen Artikeln diskutiert. Hier werde ich mein Bestes geben, sie kurz zu erwähnen und mich auf den dritten Punkt zu konzentrieren.

####Anfängliche Seitenladegeschwindigkeit
-On-Demand-Laden statischer Ressourcen (unter der Voraussetzung einer guten Modularisierung Modul-Bundler-Tools wie Webpack und SystemJS verwenden)
-On-Demand Laden dynamischer Ressourcen Muss abgerufen werden (erfordert eine gute Architektur der Front-End-Datenschicht)
- Serverseitiges Rendering (während des Seitenladevorgangs „erfasst“ das Front-End Daten und „generiert“ die Seite, vervollständigt es auf der Serverseite. Gilt nicht für den ersten Bildschirm. (Übermäßig komplexe Anwendungen)

####Interaktive Antwort
- Geschwindigkeit: Von Back-End-Anfrage, Front-End-Cache und Folge zurückgegebene Daten Synchronisation. Vermeiden Sie wiederholte Anfragen nach denselben Daten.
- Ausnahmebehandlung: Heutzutage ist mobiles Büro beliebt und bietet Benutzern eine gute Wartezeit oder eine Meldung auf der Benutzeroberfläche, wenn der Netzwerkzustand nicht gut ist.

####
Darüber möchte ich sprechen. Wir sind in der Praxis auf viele Probleme gestoßen und haben einige Lösungen ausprobiert.

Ich persönlich denke, wenn Sie dies gut machen möchten, sind nur diese Worte erforderlich: **„Gute Cache-Verwaltung“**, der Cache bezieht sich hier auf das Front-End-Cache-Modell.

Schauen Sie sich nicht nur diese wenigen Worte an, es ist ziemlich schwierig. Warum?

#### Lassen Sie uns zunächst über die Speicherquellen sprechen. Es gibt die folgenden Typen:

- Browser-Cache (indexDB, localStorage und dergleichen)
- HTTP-Anfrage
- webSocket push

Unterschiedliche Quellen wirken sich auf dieselben Daten aus, was eine gute Abstraktion erfordert, damit die Geschäftsschicht die Wahrnehmung von Datenquellen abschirmen kann, um dieses Problem zu lösen, darunter RxJs, CycleJS usw. Und es gab auch einige frühere Leute, die aus diesem Grund das Konzept von MVI entwickelten.

####Lassen Sie uns über Gedächtnisveränderungen sprechen

Es besteht keine Notwendigkeit, auf Änderungen im Normalzustand einzugehen. Hier sprechen wir nur über einige Arten von abnormalen Zuständen.

#####http-Anfrage fehlgeschlagen

Hier muss ein Wort namens **"Operationskompensation"** erwähnt werden

Was ist eine Operationskompensation?

Wenn wir die Schnittstelle bearbeiten und eine Aufgabe erstellen, sollte die neue Aufgabe logischerweise nicht sofort angezeigt werden, sondern warten, bis der Server den Erfolg bestätigt, bevor sie zur Schnittstelle hinzugefügt wird. Es ist jedoch sehr wahrscheinlich, dass unser Netzwerk nicht gut ist und die Benutzer lange auf diesen Schritt warten müssen. Aus Sicht der Benutzererfahrung ist das nicht gut, also können wir zuerst die Schnittstelle einrichten und dann einige eindeutige Identifikatoren und andere Dinge in die Speicherdaten einfüllen, nachdem die Meldung über die erfolgreiche Erstellung zurückkommt.

Einzelschritt-Vorgangskompensation ist nicht allzu schwierig. Wenn es mehrere Schritte gibt, wird es im Extremfall sehr problematisch sein, wenn der Benutzer eine neue Aufgabe hinzufügt und der Server sie nicht zurückgibt. , erstellt er sofort eine Unteraufgabe unter dieser Aufgabe, aber die Unteraufgabe hat zu diesem Zeitpunkt nicht die ID der übergeordneten Aufgabe. Wenn Sie diesen Schritt kompensieren möchten, ist dies problematischer. Es wird sogar gesagt, dass nach mehreren aufeinanderfolgenden Vorgängen festgestellt wird, dass der vorherige Vorgang fehlgeschlagen ist und die nachfolgende Verarbeitung sehr kompliziert sein wird.

Dieses Problem tritt auch bei unseren Produkten auf. Unser Ansatz ist – **„Kompromiss“**, für wichtige Daten eine einstufige oder zweistufige Kompensation vorzunehmen. Wenn die Abhängigkeitsbeziehung des Front-End-Modells komplex ist und der Schreibvorgang des übergeordneten Modells fehlschlägt oder zu viele Kompensationsschritte vorhanden sind, wird der Benutzer im Voraus benachrichtigt und der Interaktionseingang des Benutzers wird auf der Benutzeroberfläche gesperrt Vermeiden Sie nachfolgende Schreibvorgänge.

Wenn Sie dies hier fortsetzen, können Sie es weiterhin tun. Die Idee ist ähnlich wie bei der Offline-Anwendung. Warten Sie, bis das Netzwerk normal ist, und synchronisieren Sie dann die Daten .


#####Trennung und erneute Verbindung

Netzwerkschwankungen, Netzwerkwechsel, Ruhezustand und Neustart des Computers usw. führen dazu, dass wir mit komplexeren Netzwerkbedingungen konfrontiert werden Wenn der Benutzer erneut eine Verbindung zum Internet herstellt, muss die Anwendung erneut eine Verbindung herstellen.

Zu diesem Zeitpunkt synchronisiert eine ideale Single-Page-Anwendung beim erneuten Verbinden die Endergebnisse aller vorherigen Ereignisse, also den neuesten Status.

Unsere Anwendung ist ein kollaboratives Unternehmen. Benutzer im selben Unternehmen nutzen dasselbe Modell und synchronisieren es über webSocket, um die Unmittelbarkeit und Korrektheit des Modells sicherzustellen. Das ist also auch für uns eine große Herausforderung. Unsere Lösung besteht darin, webSocket erneut zu senden.

#####Hot Update

Wie bereits erwähnt, kann es sein, dass Benutzer unsere Anwendung längere Zeit geöffnet lassen und sie dann mittendrin nicht aktualisieren. Unter normalen Umständen sollten alle geschäftlichen Änderungen übernommen werden und der von der Schnittstelle zurückgemeldete Status ist immer der neueste und entspricht der aktuellen Situation. Aber wir müssen uns noch mit einem anderen Thema befassen: Was ist mit System-Upgrades?

Natürlich können wir eine Benachrichtigung senden: Dieses System wurde aktualisiert, bitte klicken Sie auf „Aktualisieren“. Aber kann man es besser machen? Um dieses Ziel zu erreichen, müssen wir Hot-Updates verwenden, um die ultimative Modularisierung und Änderungsverwaltung des Codes zu erreichen. Jedes aktualisierte Codemodul wird auch als Patch auf das aktuelle System übertragen. Dieser Mechanismus erfordert hohe Standards des Entwicklungsteams.

#####Endlich
Ich habe einmal ein Sprichwort gehört: Wie beurteilt man das technische Niveau eines einseitigen Produkts?
Öffnen Sie die Seite mehrere Tage lang, ohne sie zu schließen. Die Anwendung kann weiterhin normal, korrekt und reibungslos verwendet werden.

Ich glaube, dass Studierende, die einseitige Bewerbungen erstellt haben, die Bedeutung davon verstehen werden.

##Zusammenfassung

Ich habe viel gesagt, fassen wir es zusammen. Wir haben einige Probleme und Möglichkeiten zur Verbesserung des Single-Page-Anwendungserlebnisses erwähnt. Wenn sie implementiert werden, werden die Benutzer auf jeden Fall sehr zufrieden sein, aber die Kluft zwischen Ideal und Realität muss ruhig abgewogen werden. Was wir tun, ist Software-Engineering, daher müssen wir die Ästhetik angemessen aufgeben und unsere begrenzte menschliche Energie in die entscheidenden Punkte investieren.

---Ende des Wiederherstellungsinhalts---

Das obige ist der detaillierte Inhalt vonFragen zur Erfahrung mit Single-Page-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!