Intro

The way our websites work today, they rely on the communication of two parties, the client (web browser), and the server (remote computer). In the process some of the information is being stored permanently or temporarily on the browser and others are being stored on servers with a focus of the availability for this information to the user at any moment.

Intro

The organizations and corporations behind the existence of our today’s browsers have always been keeping ways for this communication to occur. And it's the developer’s job to make use of these technologies and determine which method fits best for each case during the process of problem solving building a website.

Intro

The process of operating software in servers highly depends on the way we send the information.

The development process require some arrangements between both who are responsible of this connection to occur. Which usually are the front-end developer and the backend developer.

We will discuss

• What is Front-end and Back-end.
• What a Client and Server.
• The way both communicate.
• Communication and internal protocols.
• Front-end types of communication.
• Back-end common API design.

What is front-end

The frontend is everything a user sees and interacts with when they click on a link or type in a web address to open a website.

The web address is also known as URL (Uniform Resource Locator) and it tells which web page should load and appear in your browser.

URL components

What is back-end

Backend development deals with the technologies responsible for securely receiving, storing and processing user data.

It’s the part associated with all the hidden logic when users interact with a front-end web page.

Back-end is considered any operation that happens outside of the web browser.

Difference between Website and Web Application

Website basically contains static content. The user of website only can read the content of website but not manipulate it.

Web application is designed for interaction with end users. The user of web application can read the content of web application and also manipulate the data.

What is a client (user-agent)

The user-agent is any tool that acts on behalf of the user. This role is primarily performed by the Web browser, but it may also be performed by programs used by developers and engineers to debug and test their websites or web applications.

What is server

On the hardware side, a web server connects to the internet, which enables it to exchange data or files between other clients that are likewise connected to the internet. This data can come in different forms, such as HTML files, images, JavaScript files, CSS stylesheets ...etc. Web server hardware also stores web server software.

Web server software controls how web users access hosted files. It consists of several components, housing at least an HTTP server. An HTTP server is software that can understand different kind of requests and URLs.

Web Servers

How do front-end and back-end communicate

For this communication to happen both front-end and back-kend need to use a standard protocol that’s supported and known by each of them, to make sure the data is being sent in a way both of them are able to understand.

Main Client/Server communication and internal protocols

• Hyper Text Transfer Protocol (HTTP)
• Hyper Text Transfer Protocol Secure (HTTPS)
• WebSocket Protocol (WS)
• WebSocket Secure Protocol (WSS)
• Domain Name System (DNS)

• Transport Layer Security (TLS)
• Internet Protocol (IP)
• Transmission Control Protocol (TCP)
• User Datagram Protocol (UDP)
• File Transfer Protocol (FTP)
• And more...

Front-end ways of communication

Currently HTTP has many versions v1.0, v1.1, v2.0, v3.0 - Browser support varies https://caniuse.com/?search=http

Front-end ways of communication

• HTTP protocol
  • Web Request
  • XMLHttpRequest (XHR or formerly AJAX)
  • Server-sent events (SSE)
• WebSocket protocol

HTTP (Hyper Text Transfer Protocol)

HTTP is the major method of communication. HTTP is a protocol for fetching resources. It's the foundation of any data exchange on the web.

HTTP is a client-server protocol, that means requests are initiated by the recipient which is usually the client side web browser.

Web Request

A web request is a communicative message that is transmitted between the client to the servers. This request is essential in providing the user with the correct and preferred webpage and content that then will be displayed on the user’s interface.

Web Request

Web Request

Web Request supported protocols (schemes)

Other types of URL schemes can be found here https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

How Web Request Can Happen

• When you open a web page URL in the browser bar.
• When a web page has more content and assets linked to it like images, CSS, and JavaScript files...etc . The browser then has to make more HTTP requests to retrieve them.
• The same type of request can occur when you submit a form with the action and method attributes which should result into navigating away from the web page to the action URL.

HTTP Web Request - Web Page Example

HTTP Web Request - HTTP POST Request Example

XMLHttpRequest (XHR)

XMLHttpRequest is technology that is used to transfer data between a server and a client without refreshing the whole web page. It can send and receive information in various formats, including JSON, XML, HTML, and text files.

XMLHttpRequest (XHR)

How to Make a XHR Request

• XMLHttpRequest technology
• Fetch technology
• XHR wrapper libraries (like AJAX and Axios for example)

HTTP XHR Request - HTTP POST Request Example

HTTP Fetch Request - HTTP POST Request Example

HTTP Axios Request - HTTP POST Request Example

Server-sent events (SSE)

Server-sent events are a push technology that allows the client to receive data automatically from the server through an HTTP connection after an HTTP connection has been established between the server and the client, the server then can send automatic updates. SSEs are unidirectional, so they allow sending data from the server to the client only.

Server-sent events (SSE)

Server-sent events Example

WebSocket

WebSocket is a communication protocol that provides bidirectional communication channels. A WebSocket connection starts as a normal HTTP connection which then is upgraded to a WebSocket connection through the WebSocket handshake. The client can send data to the server and the server can also send data back to the client.

WebSocket

WebSocket Example

High-level features of XHR, SSE, and WebSocket

Streaming is a technique that allows a web server to continuously send data to a client (or vice versa) over a single connection that remains open indefinitely

Binary framing is breaking the communication between the client and server into small chunks and creates an interleaved bidirectional stream of communication.

Web Servers (examples are next)

Popular Examples of Web Servers

• Apache HTTP Server. A free and open-source web server used for many operating systems, including Windows, Linux, and Mac OS X. Apache is the oldest web server software with a market share of over 31%.
• NGINX. A famous open source web server software that initially only functioned for HTTP web serving. It is now also used as a reverse proxy, HTTP load balancer, and email proxy. NGINX is known for its speed and ability to handle multiple connections, which is why many high-traffic websites use its services.

Popular Examples of Web Servers

• Microsoft Internet Information Services (IIS). IIS is a closed web server software developed by Microsoft widely used in Windows operating systems.
• Lighttpd. A free and open-source web server software that’s known for its speed while requiring less CPU power. Lighttpd is also popular for having a small memory footprint.

Back-end common API design

• REST API
• GraphQL
• gRPC

REST API

An API, or application programming interface, is a set of rules that define how applications or devices can connect to and communicate with each other.

There are five methods that are commonly used in a REST-based Architecture i.e., POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations respectively. There are other methods which are less frequently used like OPTIONS and HEAD.  

GraphQL

GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more.

It's designed to make APIs fast, flexible, and developer-friendly. As an alternative to REST, GraphQL lets developers construct requests that pull data from multiple data sources in a single API call.

gRPC

gRPC is a robust open-source RPC (Remote Procedure Call) framework used to build scalable and fast APIs. It allows the client and server applications to communicate transparently and develop connected systems. Many leading tech firms have adopted gRPC, such as Google, Netflix, IBM. This framework relies on HTTP/2, protocol buffers, and other modern technology stacks to ensure maximum API security, performance, and scalability.

Fin

Resources

https://www.freecodecamp.org/news/frontend-vs-backend-whats-the-difference/

https://www.geeksforgeeks.org/difference-between-web-application-and-website

https://iq.opengenus.org/types-of-client-server-communication/

https://sourcedefense.com/glossary/web-request/

https://hpbn.co/primer-on-browser-networking/

https://www.hostinger.com/tutorials/what-is-a-web-server

https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

https://mulloverthing.com/what-protocols-do-browsers-support/

https://blog.logrocket.com/server-sent-events-vs-websockets/

https://www.cloudflare.com/learning/serverless/glossary/client-side-vs-server-side/

Exercise

- How DNS Work

http://howdns.works/

- What is HTTPS

https://howhttps.works/

- Push vs Polling vs Long Polling

​https://hvalls.dev/posts/polling-long-polling-push/

- HTTP Push vs HTTP Pull

https://medium.com/@intmainco/http-push-and-pull-introduction-nlogn-c726c012662

Scan to browse this presentation online