How Web Applications Work
Last updated
Last updated
I use markdown for sequence diagrams and include the ascii version using this because gitbooks doesn't support it yet.
You can also parse the markdown using something like which is included in my current markdown editor, .
This is a web application so lets start from the internet browser (think of Google Chrome or Safari). What happens when you go to ?
How DNS (Domain Name System) works is out of the scope of this article but this article is pretty good; . tl;dr domains are resolved by your local computer and a chain of remote DNS servers.
You can find out the ip address of a domain from your terminal.
Traditionally, the server will return a HTML page which can instruct the browser to make further requests for other assets such as images or code to style the page. This is the case with google.com and you can see that by:
Right click the page
Select Inspect
Select the Network tab.
Refresh the page.
Scroll to the top of the pane.
The first asset is the root HTML page and you can see the code by clicking on the request then selcting the response tab. From there it issues requests for the other assets like the image.
Note: we'll exclude the DNS part for the rest of this article now that we've covered it.
Dynamic web pages were the next step - web pages that are generated when the request is received. It might look like this.
This pattern takes more resources to produce a page than the static pattern because we're doing a lot more on each request.
An SPA could load a dynamic web page into the current page but that would mean the server would have to know what the ui is going to look like in order for it to return the correct html. We have more flexibility if the server returns structured data and the ui handles the presentation of that data. This is what we call separation of concerns.
Single page applications can choose when to retrieve data. Is it on page load like the glue stack list page or is it on some user action like clicking the done button. It could even at a set interval like some 'realtime' sports scores websites.
Just like the dynamic web page this data might come from a database or an external source but in glue stack it is most certainly a database.
This is how Glue Stack works.
The browser can also make changes to data using the same flow but with different HTTP methods like POST and PATCH.
Your browser will establish a connection to 216.58.199.46 and send a GET request to the "/" path of the server, GET being a type of . The server will then respond based on the request. This is important: HTTP is a request-response protocol; the request has data and the response has data based on the request.
Go to in .
If we think about the simplest example of a HTML page, all the assets are static - they don't change. They're just files that a simple server sends when the path matches the filename. We could use something like (Simple Storage Service) for this (we do).
Fun fact: I wanted to use my website for the previous section but learned about the .
This is the pattern that made popular particular with the world's largest open source blog platform . It is incredibly powerful because we could fetch some really cool data like today's weather or the latest sports scores. The data might even come from an external service so we might not even need to handle the database ourselves.
For pages that don't change that often like blogs or basic websites there are tools like and that try to create static pages before the request comes in so they have the same performance as static websites but that's a bit out of the scope of this article.
Fun fact: you can even do this pattern with React now with .
Glue stack is a (SPA) which follows on from the previous examples. It aims to provide a better user experience by loading data into the current page instead of completely reloading it. Go ahead and click the signup button on to see for yourself.
This pattern starts exactly like the static pattern, what's different is what happens next. The root html page will make requests for more static assets (not included in the diagram for simplicity) just like before, but the important asset for an SPA is a asset. Javascript is the programming language for browsers and is particularly important for making single page applications work. Just to be explicit the javascript asset is static just like the original html page.
Javascript is very powerful and among thousands of other things, can retrieve data from servers using what's called an . API is a vague term since a programming interface can mean a lot of different things. When we're talking about APIs in a web developer context we're usually talking about HTTP JSON APIs. (Some people call them APIs but that term seems to be pretty controversial so we'll just avoid it.) stands for javascript object notation so its really just a way of structuring data that's really easy for javascript applications to use. An example of JSON is in the diagram.
Further reading about this architecture is available at .