· ~7 minutes
I have been meaning to write about this topic for years now and always found a reason to postpone. Now is the time, and I am incredible excited to uncover one of the best features of the N26 web platform.
- Why bother?
- Tailoring the experience
- Avoiding mounting flash
- Minimising failure
The N26 web platform is built on React. One interesting thing about React as a library is that it can run seamlessly on the client as well as the server. In other word, generating HTML to send to the client is not only feasible, it’s also relatively easy.
Tailoring the experience
Therefore it’s important not to try making the no-JS experience work like the full one. The interface has to be revisited. Some features might even have to be removed, or dramatically reduced in scope. That’s also okay. As long as the main features are there and things work nicely, it should be fine that the experience is not as polished.
- The page has been loaded.
- The React tree has been rendered and is ready to be interacted with.
To avoid using a local state and a
Then components can read that value from the context:
Avoiding mounting flash
<meta http-equiv='refresh' /> with a
<noscript> tag gets added to the document
This meta tag redirects to an Express route (simplified below), where the cookie is deleted and the user is redirected back to the page they were on, thus causing the process to start again.
We realise it is an arbitrary and opinionated decision to make on behalf of the user, but we also believe a basic working experience is better than a fully broken one.