AngularJS Best Practice - Vorlagen vs Javascript

8

Standardmäßig holt Angular die HTML-Vorlagen vom Server, wenn der Benutzer zu einer Route navigiert. In diesem Sinne stellen Sie sich dieses Szenario vor:

  • Der Benutzer lädt die Angular-App. Die Hauptansicht hat eine Unterseite namens "Order".
  • Während der Benutzer die Hauptansicht betrachtet, wird eine neue Version der App in der Produktion eingeführt. Die neue Version hat eine komplette Neugestaltung der Bestellseite mit neuem Javscript und HTML.
  • Der Benutzer navigiert zur Bestellseite. Das Javascript wird bereits in Schritt 1 vom Browser geladen, sodass sich der Benutzer auf der alten Version befindet, bis die App neu geladen wird. Die neue Vorlage wird jedoch vom Server über die Navigation abgerufen . So, jetzt sind das Javascript und die Vorlage unsere von sync!

Ist meine Annahme, dass das Javascript / HTML nicht synchron ist, korrekt?

Wenn ja, gibt es Best Practices in Bezug auf dieses Problem?

Ich denke, eine Lösung ist das make Angular holen alle Vorlagen auf App-Initialisierung. Dies kann jedoch zu einer Leistungseinbuße führen, wenn die App Hunderte von HTML-Ansichten enthält.

    
HoffZ 27.02.2015, 15:34
quelle

7 Antworten

1

Danke für gute Antworten.

Es stellte sich heraus, dass sich dieses Problem für uns selbst gelöst hat. Jedes Mal, wenn wir ein neues Release veröffentlichen, werden alle Benutzersitzungen gelöscht und die Benutzer werden zur Anmeldeseite weitergeleitet. Dies wird eine Seitenladung auslösen und frisches JavaScript / HTML wird geladen.

    
HoffZ 09.04.2015, 13:09
quelle
2

Ich habe mich nie selbst über dieses Thema Gedanken gemacht. Eine mögliche Idee wäre, das Muster, das als Versionsverwaltung für Assets bekannt ist, wiederzuverwenden. Bei der neuen Version werden alle Assets umbenannt.

Zum Beispiel würden Sie anstelle von login.html login-xyz.html als Namen einer Vorlage verwenden. xyz könnte ein zufälliger Wert oder eine Prüfsumme der Datei sein. Checksum könnte eine etwas bessere Option sein, denn wenn das neue Release klein ist (dh Sie haben nur einen kleinen Fehler in einer Datei behoben), wird der Benutzer, wenn er eine Seite außer der festen lädt, nicht mit einem Reload belästigt - alle anderen Dateien haben die gleichen Prüfsummen, sie funktionieren ohne Unterbrechungen.

Wenn eine veraltete Anguar-App versucht, eine Vorlage abzurufen, wird ein HTTP 404 -Fehler angezeigt. Zusätzlich könnten Sie einen einfachen $ http-Interceptor schreiben, der ein% co_de erkennen würde % response, und laden Sie die Seite automatisch neu (oder bieten Sie dem Benutzer eine entsprechende Option an).

Es gibt Module, die in der Lage sind, Assets umzubenennen, wie gulp-rev - aber ich habe nie davon gehört für eckige Vorlagen. Sie können jedoch so etwas selbst implementieren.

Natürlich möchten Sie vielleicht die neue und die alte Version von Dateien beibehalten, damit Benutzer arbeiten können, ohne sie bei einer Aktualisierung zu unterbrechen. Hängt davon ab, was Ihre Anforderungen sind. Ich nehme an, du versuchst das zu vermeiden.

Beispiel 404 Interceptor (CoffeScript, wie ich es jetzt praktisch habe):

%Vor%     
kamituel 27.02.2015 16:21
quelle
0

Ich habe vor längerer Zeit über dieses Problem gelesen, und eine Option ist die Versionierung auf geänderten Seiten und in der Datei application.js.

Zum Beispiel in Ihrer Version 1 Ihrer Anwendung können Sie in Ihrer HTML-Datei etwas wie:

verwenden %Vor%

Veröffentlichen Sie in Ihren Routen auch die Vorlage "templateURL"

%Vor%

Wenn Sie also eine neue Version bereitstellen, werden Sie keine Templates überschreiben, und Benutzer, die bereits arbeiten, haben die alte Version, bis sie den Browser neu laden, aber keine Versionsinkonsistenzen haben.

    
alphamikevictor 27.02.2015 16:29
quelle
0

Die Versionierung der Assets mit den Dateinamen würde selbst für eine App mit mittleren Seiten nicht mehr möglich sein.

Obwohl es ein schwergewichtiger Ansatz für Web-Assets ist, könnten Sie in die Inhaltsverhandlung schauen. An dieser Stelle gibt der Aufruf für eine Ressource, in der Regel eine REST API, die Version der Ressource Content-Type: application/vnd.contentful.delivery.v1+json. zurück. Auf dem Client können Sie überprüfen, ob die Version dem entspricht, was sie erwartet. Wenn also der Client nur weiß, wie er v1.1 und die Ressourcenantworten mit v1.2 lädt, weiß die UI, dass sie das nicht verarbeiten kann und die Seite neu laden sollte.

Eine andere Möglichkeit besteht darin, alle Vorlagen in der Benutzeroberfläche zu laden. Es gibt Build-Prozesse in Grunt, die Sie ausführen können, wie Ссылка , die alle Ihre Templates in einer einzigen Datei für Lieferung und dann laden Sie sie in $ templateCache, so dass keine Anfragen jemals auf den Server gelangen.

    
Enzey 27.02.2015 16:35
quelle
0

Wenn Sie eine serverseitige Sprache haben, können Sie einen Filter in (.NET, Rails, Java oder was auch immer) erstellen und eine Versionsnummer mit Ihren Vorlagenanforderungen übergeben. Wenn die vom Client angeforderte Version älter ist als die bereitgestellte Version, senden Sie eine Fehlermeldung an den Client. Ihr Client würde nach diesem Fehler ($ http interceptor) suchen und eine Seitenaktualisierung erzwingen, um den neueren JavaScript-Code zu entfernen. (Vielleicht zuerst dem Benutzer eine Warnung anzeigen, damit er weiß, was vor sich geht).

    
Nicholas Smith 27.02.2015 18:04
quelle
0

Sie können alle Ihre Vorlagen in einen $ templateCache laden und sie als eine templates.js-Datei bereitstellen. Es gibt eine Schluckaufgabe für dieses Ссылка . Dann lädt Ihre Anwendung alle Templates in einer einzigen Anfrage zusammen mit Anwendungsskripten beim Start, so dass sie synchron sind. Lesen Sie Ссылка für weitere Informationen.

    
Marian Ban 28.02.2015 20:42
quelle
0

Es macht immer Sinn, eine Versionsnummer zu haben und diese beim Synchronisieren von Ressourcen zu verwenden. Es ist nicht nur eine gute Übung für den von Ihnen beschriebenen Anwendungsfall, sondern auch für andere Situationen, z. B. das Zurücksetzen auf eine bestimmte Version oder zwei Versionen, die live und nutzbar sind (z. B. um einigen Benutzern eine Vorschau der nächsten Version zu ermöglichen). p>     

Moshe Shaham 28.02.2015 21:18
quelle

Tags und Links