URL as an Application State

#url #state #react #reactrouter

Cover photo credit: @sagardani Unsplash

URL (Uniform Resource Locator), as the name suggests, locates information on the web. We access and share information on the web via URLs. I like to think of a URL as an interface to the website. For example, we can touch and swipe on mobile to do some actions, in the same way, we can write and modify URLs to access the different parts of the web page. URLs can be considered as a power user tool.

The state is the current behavior or a snapshot of an app. In the case of a web page, it is the current behavior of the UI elements. The state changes as we perform actions like clicking on buttons, scrolling through the page, and so on.

What do I mean by URL as an application state? It means that the URL should reflect the content that is being shown on a page. And changing parts of it should also change the things inside the page. Not only this but if user actions like click and scroll change the UI, it should also be reflected in the URL. The page is like a puppet and the URL is like a string.

Let's take an example of URL https://en.wikipedia.org/wiki/Bitcoin. The URL consists of different parts, protocol(https), domain(en.wikipedia.org), and pathname(/wiki/Bitcoin). We are particularly interested in the last part, the URL pathname. It represents a web page. Whenever we visit this URL, it opens a page about Bitcoin. Suppose that we change it to /wiki/Apple. Now we can guess what page it opens. It will show a page about the fruit Apple. The URL here is acting as a state of the app. As the URL changes, the state of the app changes.

Before we proceed with a URL-managed app let's try to create a simple app where the state is managed internally(in-memory). We will be creating a Cryptopedia app that would help us search about Cryptocurrencies and show details about them. We'll be creating different versions of the app to demonstrate each concept.

Example 1: Page State managed internally

This is the simplest version of the app. It doesn't react to URL pathname changes. When we click on any item, we do not notice any changes in the URL in the sandbox. There's no way we can share a specific page but rather send a set of actions that would lead to that page. Try searching and navigating to different pages below.

We get to see these kinds of apps rarely in web app scenarios. It is similar to how desktop and mobile apps behave. Now let's improve our app and make it react to the URL.

Example 2: URL as state

Let us modify our app to get the current page state from the URL. In the example below, If we click on Bitcoin, the pathname changes to /bitcoin. This is how most apps behave nowadays. If we want to share a page, we can copy the URL and send it. We can now see our improved version of the app has one more way to access a page than our initial app mentioned above.

We can now observe the differences between the internal and URL-managed apps.

So why is it good to make our app behave according to the URL? Let’s briefly discuss this in the following section of the article.

Fast Navigation

URLs give users one more way to help navigate the page. I like how many apps use the URL to manage multiple users. For example in Gmail, when we visit mail.google.com we'll be redirected to mail.google.com/mail/u/0/#inbox which is our default logged-in user inbox. Notice the pathname here /mail/u/0/#inbox which means it's the first logged-in user and /#inbox means the inbox page is opened by default. Now we can switch to another inbox just by changing the URL to /mail/u/1/#inbox. We can also directly navigate to our spam page by changing the hash like /mail/u/1/#spam. Making the page behave with the URL gives the user faster access. Adding to that, browsers save the URLs in history so next time we want to open the same page, we can just type in some words in the address bar and the browser will autocomplete the URL for us.

Example 3: Tabs state in URL

Let’s improve our app more. Like Gmail, let's make our tabs accessible through URL. Navigate to any Crypto page and click on Conversion tab and see the URL pathname change. Now you can access and share conversion tab with the URL directly.

Sharing

Let us imagine sharing a page from our first example with others. We can share the URL, but it will always open the home page. We need to tell them to do the set of actions that took us to the current page.
But in our second and third example, we can just copy the URL and send it to others. Another user would be able to open the page with the exact state we were in.

There's a recent trend on the web to use the Route as Modal. It makes Modal dialogs accessible and sharable through URL. If we visit sites like Instagram, Twitter, FB, all of these sites use the Route as Modal to open the individual posts. They can be shared by copying the URL.

Example 4: Route as Modal

We have now improved our app to use Route as a Modal for the crypto detail page. Notice how each page opens up in a modal together with changing the URL pathname. And we don't have to click the Home link to go back to the main page. We just close the modal, simple, isn’t it? We have gone one step further in this example. The tabs also change within the modal together with changing the pathname.

SEO

Without URL-managed pages, search engines cannot scrape and differentiate between content. In our first example, how would a search engine differentiate between Bitcoin and Etherium pages? Both of them have the same URL. It would only be able to scrape the home page.
So for an SEO-friendly app, each page should have its unique URL. Separating content by a clean URL makes your page rank higher in search engines.

Easy Internal State Management

We don't need the hassle of managing what page is open inside our app. Our app can directly access the URL and show the page based on it. URL can be the source of truth for our page.

Conclusion

In conclusion, when the state of the app is reflected in the URL, it can make a robust app and all in all a good user experience. Next time when we are trying to make a feature or a UI we need to decide whether it needs to be reflected in the URL so that it's accessible and shareable.

References:

https://en.wikipedia.org/wiki/Clean_URL
https://en.wikipedia.org/wiki/Permalink
https://www.nngroup.com/articles/url-as-ui/
https://web.archive.org/web/20160302200756/http://www.isoc.org/inet95/proceedings/PAPER/016/html/paper.html