So ersetzen Sie Ihre Site langsam durch eine neue Site, die mit EmberJS erstellt wurde

Wie Sie vielleicht wissen (falls nicht, lesen Sie unsere Artikel ), haben wir kürzlich unser neues Frontend für unsere Kunden veröffentlicht (siehe https://medium.com/@appaloosastore/we-have-a-new-emberjs-front-end) -c7246e76cdbd).

Vor mehr als zwei Jahren haben wir mit der Arbeit an diesem neuen Frontend begonnen, bei dem es sich um eine vollständige Überarbeitung unseres alten massiven Frontends handelt (viele Funktionen / Seiten). Zum jetzigen Zeitpunkt deckt der neue Administrator nicht das globale Spektrum unseres alten Administrators ab. Wir haben uns jedoch für die Freigabe für unsere Kunden entschieden, da es eine schöne Oberfläche mit einer besseren Benutzeroberfläche ist und einfacher zu aktualisieren / zu warten ist.

Für die Teile, die (noch) nicht verfügbar sind, leiten wir unsere Benutzer an unseren alten Administrator weiter.

Dieses neue Frontend wurde mit EmberJS erstellt und wir haben uns heute entschlossen, Ihnen zu zeigen, wie wir den Übergang von unserem neuen Administrator zu unserem alten Administrator verwalten. Wir haben uns entschlossen, unsere Lösung mit anderen zu teilen, da wir der Meinung sind, dass dies eine gute Lösung ist, die Menschen helfen kann, die dasselbe Verhalten hinzufügen müssen.

Aber lassen Sie uns zuerst einen kleinen Blick darauf werfen, wie es in Wirklichkeit aussieht.

Sieht gut aus, oder?

Warum ein Redirection Modal?

Bevor wir uns mit der Umleitung befassen, erstellen wir ein nettes Modal. Das Modal ist sehr wichtig, da es den Benutzer darüber informiert, was gerade passiert. Ohne das Modal wäre der Benutzer verloren. Stellen Sie sich vor, Sie befinden sich auf einer gut aussehenden Oberfläche und landen plötzlich auf einer anderen Website mit einem ganz anderen und alt aussehenden Design.

So führen Sie eine Umleitung durch

Beginnen wir mit etwas HTML

Nachdem wir nun ein Modal haben, lassen Sie uns CSS verwenden, um ein gut aussehendes Modal zu erstellen.

Nachdem wir ein nettes Modal haben, nehmen wir die Umleitung vor. Um das Hinzufügen / Entfernen von Umleitungen in unseren Vorlagen zu vereinfachen, haben wir uns für einen Dienst entschieden und einen einfachen HTML-Link verwendet.

Werfen wir einen Blick auf den Umleitungsdienst.

Dieser Service ist ziemlich einfach und besteht aus 3 Aktionen:

umleiten: Mit dieser Aktion wird die Umleitung eingerichtet, indem die Anforderungs-URL gespeichert und das Umleitungsmodal angezeigt wird.
continueRedirection: Diese Aktion löst die Weiterleitung zur angeforderten Seite aus
cancelRedirection: Bricht die Umleitung ab. Bereinigen Sie den Umleitungsdienst, indem Sie die gespeicherte URL löschen und das Umleitungs-Popup schließen.

Außerdem wird displayModal verfügbar gemacht, mit dem das Modal bei Bedarf angezeigt wird.

Denn mit Ember können Sie das Ziel für eine Aktion festlegen. Das Hinzufügen einer Umleitung in der App ist so einfach wie das Hinzufügen eines Link-Tags in einer Vorlage (Komponente oder Route). Die einzige Voraussetzung ist, den Dienst einzuspritzen.

Wie Sie sehen, ist es ziemlich einfach, einen solchen Umleitungsdienst hinzuzufügen. Der einzige schwierige Teil besteht darin, die Rückwärtsnavigation zu erkennen und das Umleitungs-Popup zu schließen. Zum Glück gibt es seit Ember 2.15 einen Router-Dienst, den Sie verwenden können (siehe Versionshinweis hier). Mit diesem Dienst können Sie die Rückwärtsnavigation leicht erkennen, indem Sie die aktuelle Route des Routers beobachten. Ändern wir also den vorherigen Code ein wenig.

Jetzt können wir alle "Zurück" -Navigationsaktionen erkennen und das Modal automatisch schließen.

Mehr tun als umleiten

In diesem Artikel erfahren Sie, wie Sie eine einfache Umleitung erstellen, die ein Popup öffnet. Dies ist nur ein einfaches Beispiel. Sie können jedoch noch mehr tun.

Beispielsweise senden wir bei Appaloosa einige Analysen, wenn ein Benutzer umgeleitet wird. Auf diese Weise priorisieren wir die Übertragung einer Funktion vom alten auf den neuen Administrator, da wir wissen, welche Funktion unsere Benutzer am meisten benötigen.

Mit dem gleichen Code können Sie auch ein Eingabefeld in das Umleitungs-Popup einfügen und um Feedback bitten oder ihre Erfahrungen bewerten

Sie sollten unseren Blog abonnieren, um benachrichtigt zu werden, wenn ein neuer Artikel verfügbar ist!

Dieser Artikel wurde von Benjamin JEGARD vom Appaloosa-Entwicklerteam verfasst.
PS: Hier finden Sie ein Live-Beispiel für diesen Umleitungsdienst.