Sådan erstattes langsomt dit websted med et nyt lavet med EmberJS

Som du måske ved (hvis ikke, læs vores artikler ) på Appaloosa vi for nylig frigiver vores nye frontend til vores kunder (læs https://medium.com/@appaloosastore/we-have-a-new-emberjs-front-end -c7246e76cdbd).

For mere end to år siden begyndte vi arbejdet med denne nye frontend, som er en komplet redesign af vores gamle massive frontend (mange funktioner / sider). På det tidspunkt, der stadig arbejder at gøre, dækker den nye admin ikke det globale spektrum af vores gamle admin. Men vi besluttede at frigive til vores kunder, fordi det er en dejlig interface med en bedre UX, og det er lettere at opdatere / vedligeholde.

For de dele, der endnu ikke er tilgængelige, omdirigerer vi vores brugere til vores gamle / ældre administrator.

Denne nye frontend er bygget sammen med EmberJS, og i dag besluttede vi at vise dig, hvordan vi administrerer overgangen fra vores nye admin til vores gamle admin. Vi besluttede at dele vores løsning, fordi vi synes, det er en god løsning, der kan hjælpe folk, der har brug for at tilføje den samme adfærd.

Men lad os først se et lille blik på, hvordan det ser ud i virkelighed.

Ser godt ud, er det ikke?

Hvorfor en omdirigeringsmodal?

Lad os oprette en dejlig modal, før du behandler omdirigeringen. Modalen er meget vigtig, fordi den informerer brugeren om, hvad der sker. Uden modalen ville brugeren gå tabt. Forestil dig at være på et flot interface og ender pludselig på en anden webside med et meget anderledes og gammelt udseende design.

Sådan foretages en omdirigering

Lad os starte med noget HTML

Nu hvor vi har en modal, lad os få nogle CSS til at gøre et flot modal.

Nu hvor vi har en dejlig modal, lad os foretage omdirigeringen. For at gøre det nemt at tilføje / fjerne omdirigering i vores skabeloner har vi besluttet at gå med en service og bruge et simpelt html-link.

Lad os se på omdirigeringstjenesten.

Denne service er temmelig enkel, den består af 3 handlinger:

omdirigering: Denne handling konfigurerer omdirigeringen ved at gemme anmodnings-url'en og vise omdirigeringsmodal.
fortsRedirection: Denne handling udløser omdirigering til den ønskede side
annullere omdirigering: Annuller omdirigeringen. Oprydning af videresendelsestjenesten ved at slette den gemte url og lukke omdirigerings popup.

Det udsætter også displayModal, der bruges til at vise modalen, når det er nødvendigt.

For med Ember kan du specificere målet for en handling. Tilføjelse af en omdirigering i appen er så enkel som at tilføje et linktag i en skabelon (komponent eller rute). Det eneste krav er at injicere tjenesten.

Som du kan se, er det temmelig nemt at tilføje en sådan omdirigeringstjeneste, den eneste vanskelige del er at registrere tilbage navigation og lukke omdirigerings popup. Heldigvis siden Ember 2.15 er der en routertjeneste, du kan bruge (se udgivelsesnotatet her). Ved hjælp af denne service kan du nemt registrere navigering tilbage ved at observere routerens aktuelle rute. Så lad os ændre den forrige kode lidt.

Nu er vi i stand til at registrere enhver "tilbage" navigationshandling og lukke modalen automatisk.

Gør mere end omdirigering

I denne artikel deler vi, hvordan man opretter en enkel omdirigering, der åbner en popup, det er bare et grundlæggende enkelt eksempel, der er mere, du kan gøre.

For eksempel sender vi på Appaloosa nogle analyser, når en bruger omdirigeres. På den måde prioriterer vi overførslen af ​​en funktion fra den gamle administrator til den nye, fordi vi ved, hvilken funktion vores brugere har mest brug for.

Med den samme kode kan du også tilføje et inputfelt i omdirigerings-pop-up'en, der beder om en feedback, eller vurdere deres oplevelser ... er op til dig

Du skal abonnere på vores blog for at blive underrettet, når en ny artikel er tilgængelig!

Denne artikel er skrevet af Benjamin JEGARD fra Appaloosas dev-team.
PS: Der er et direkte eksempel på denne omdirigeringstjeneste her .