Opening the product web page "on top" of the feed page, such as Twitter

There are three aspects to your question. Let me first dive into the technology required to implement everything, and then briefly discuss how Twitter uses this technology.

TL; DR? Twitter uses the history API in combination with AJAX and DOM manipulation to do its magic.

Methods and some background

(a) Changing the url without refreshing the page (2 and 4 on your list)
There is an API for this implemented by modern browsers.

window.history.pushState(state, title, URL);
window.history.replaceState(state, title, URL);
window.addEventListener('popstate', (event) => { /* use event.state */ });

      

        
        
        
      

    

The first two functions allow you to simulate a user switching to URL

. The first adds an entry to the navigation history, and the second replaces the current entry. This affects what happens when users use the back and forward buttons in their browser.

When users navigate backwards, or mimic this with history.back()

, an event occurs popstate

, and state

- you went through pushState

, you can access through event.sate

. state

can be any object, so this is useful for storing, say, the page title (to update document.title

), the scroll position, or whatever you want.

(b) Downloading Content Directly
Since the entry is stored in the browsing history, users can visit this URL immediately after closing a tab or even their browser. They can also share URLs while others visit it directly. In such cases, there will be no event popstate

, but just a request to your web server for the URL

one you passed to pushState

. Therefore, the URL must be meaningful to the server.

Twitter is obviously loading the poster profile as a background in this case. It depends on your use case what you want the page to look like. Everything goes!

(c) Loading content asynchronously (3 on your list)
Go back to (a) for bits. Twitter not only changes the URL but also downloads the tweets, the metadata of that tweet, and responds to it. This is then displayed as a modal popup.

Again, API ¹ : AJAX exists to load content asynchronously . In particular, the object XMLHttpRequest

and its functions are of interest . This can be used to send requests to the server and get content without having to completely reload the page.

It should be noted that a new API is being developed: the Fetch API . At the time of this writing, there is basic support in all modern major browsers, but it is still in development.

Once you have selected content, it can be displayed on the page in any way. JavaScript can be used to create, delete, and modify elements in the DOM as you see fit.

Example from your question: Twitter

Now that all the methods are on the table, let's summarize what Twitter is doing.

When a user clicks on a tweet in their feed.

• Download the tweet metadata and responses (as described in section (c) ).
• Create background and modal and fill them with uploaded content.
  This uses the standard methods: create , delete and modify page elements.
• Update the URL (as described in section (a) ) to make sharing easier.

When the user rejects the modal.

• Remove modal and background.
• Update the URL (as described in section (a) ).

When a user directly visits the URL for a specific tweet.

• Let the server respond with the tweet author's profile page, and the tweet details are loaded into a modal on top of it. So JavaScript is not required at all. Of course, the modal can be rejected in the same way as in the previously described use case.

Implementing this in your own website

You have correctly determined that there are side sizes for this technique on both the client and server side. The beauty is that, when implemented correctly, it is completely transparent to users. The only thing they (not) will notice is that the page load is less.

The links sprinkled in this answer should serve as a good starting point for you!

Final Notes

All of this is sometimes also used to create smooth transitions between pages on the same site. In these cases, full pages are loaded asynchronously (according to (c) ) and then a smooth transition occurs, usually involving animation. There are many , many , many , many examples, tutorials and libraries for this. You can search PJAX to learn and find more.

__________
¹ Actually, not one API, but an approach or thinking. See MDN link for details .