As you may know (if not, read our articles 😉) at Appaloosa we recently release our new frontend to our customers (read We have a new EmberJS front end).
More than two years ago, we started the work on this new frontend which is a complete redesign of our old massive frontend (lot of features/pages). At the time there’s still works to do, the new admin does not cover the global spectrum of our old admin. But we decided to release to our customers, because it’s a nice interface with a better UX and it’s easier to update/maintain.
For the parts that are not available (yet), we redirect our users to our old/legacy admin.
This new frontend is build with EmberJS and today we decided to show you how we manage the transition from our new admin to our old admin. We decided to share our solution, because we think it’s a good one that might help people that need to add the same behavior.
But first let’s have a small look of how it looks in real.
Looks great, isn’t it ?
Why a redirection modal?
Before dealing with the redirection, let’s create a nice modal. The modal is very important because it inform the user about what’s happening. Without the modal, the user would be lost. Imagine being are on a nice looking interface and suddenly ending up on another website with a very different and old-looking design 😱.
How to make a redirection
Let’s start with some HTML
Now that we have a modal, let’s have some CSS to make a good looking modal.
Now that we have a nice modal, let’s make the redirection. To make it easy to add/remove redirection in our templates we’ve decided to go with a service and use a simple html link.
Let’s have a look to the redirection service.
This service is pretty simple, it consist on 3 actions :
redirect: This action setup the redirection, by saving the request url, and displaying the redirection modal.
proceedRedirection: This action triggers the redirection to the requested page
cancelRedirection: Cancel the redirection. Cleanup the redirection service by erasing the saved url and close the redirection popup.
It also expose displayModal that is use to display the modal when needed.
Because with Ember you can specify the target for an action. Adding a redirection in the app is as simple as adding a link tag in a template (component or route). The only requirement is to inject the service.
As you can see it’s pretty easy to add such redirection service the only tricky part is to detect back navigation and close the redirection popup. Fortunately since Ember 2.15 there’s a router service you can use (see the release note here). Using this service you can easily detect back navigation by observing the router’s current route. So let’s change the previous code a little bit.
Now we’re able to detect any “back” navigation action and close the modal automatically.
Doing more than redirection
In this article we share how to create a simple redirection which opens a popup, it’s just a basic simple example there’s more you can do.
For example, at Appaloosa we send some analytics when a user is redirected. That way we prioritise the transfer of a feature from the old admin to the new one, because we know what feature our users need the most.
With the same code you can also add an input field inside the redirect popup asking for a feedback, or rate their experiences… is up to you 😉
👋 You should subscribe to our blog to be notified whenever a new article is available!
This article was written by Benjamin JEGARD of Appaloosa’s dev team.
PS: There’s a live example of this redirection service here 🤩.
Top comments (0)