Web Applications
A web application is a software application that a user runs on a browser. Web applications are composed of the client and the server as shown in "Client Server Model". The client is the code in the browser, mainly responsible for presenting the application. The server is a computer located elsewhere that stores information and business logic.
Client Server Model (Vignoni, 2011)
Interacting with a webpage
When a user goes to a web address, it makes a request to the server. The server sends the user’s browser (the client) the information needed to set up the requested page. This consists of three things: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. HTML is responsible for the structure of the webpage while CSS is responsible for the style of the webpage. JavaScript allows for dynamic manipulation of the HTML and CSS on the webpages as well as communication with the server.
Transmission Control Protocol (TCP)
The TCP is the dominant protocol for transporting data across a network. It is what allows the information going out of your computer to find its way to the intended recipient reliably. The World Wide Web relies on the TCP for all data transportation. On top of the TCP layer are the HyperText Transfer Protocol (HTTP) and Websockets. These are two distinct, but closely related ways communicating over TCP as shown in "HTTP vs WebSocket".
Hypertext Transfer Protocol (HTTP)
The TCP allows data to be transported across a network, but it doesn’t know how to ask for information or provide an answer to a request. This is where the HTTP comes in, providing a standardized form of data transfer. When the client requests information from the server, it usually does it in the form of a HTTP request. These requests are interpreted by the server, and then an HTTP response is sent to the client as shown in "HTTP vs WebSocket". For secure communication, the Hypertext Transfer Protocol Secure (HTTPS) is used, which encrypts the request going through the network.
Web Sockets
The HTTP has no effective way of updating a client without that client explicitly requesting the update. A web socket provides bi-directional communication between a server and a client to make many modern applications, such as a live chat application, possible. It’s based on the TCP and can support any protocol that would traditionally rely on a standard TCP connection. In order to initiate a web socket connection, an http request is sent to the server as an upgrade request. Then, the connection is maintained to allow for communication from either party as shown in "HTTP vs WebSocket". (“Web Sockets”, 2017)
HTTP vs WebSocket (Waghmare, 2015)
Historically, most web applications are static, meaning that they don’t use JavaScript to manipulate the HTML or CSS. Instead, static sites rely on hyperlinks to navigate through the application. These hyperlinks can reference external or internal web addresses, but a HTTP request will need to be issued to a server to receive a new web page.
Dynamic single page web applications rely on JavaScript to manipulate the HTML and CSS. The benefit of this strategy is that the HTML, CSS, and JavaScript files are only requested in full once instead of being requested every time a hyperlink is clicked. This substantially decreases the overhead per HTTP request to the server, but slightly raises the overhead on the client.