As a frontend engineer, your entire world is built on communication. From fetching data for a user profile to streaming a live video, everything relies on a set of rules for data exchange. This is where communication protocols come in. A communication protocol is a set of standardized rules and conventions that govern the exchange of data between devices or systems over the network. It dictates various methods, such as data format, transmission method, and error handling of data, ensuring the seamless experience your users expect.
In this article, we’ll explore the protocols every frontend engineer should know, from their core workings to their real-world usage and tradeoffs.
How Communication Protocols Work Behind Every Website
Communication protocols are the digital languages that govern how devices exchange data over a network. They’re a set of rules that dictate everything from how data is formatted to how it’s transmitted and how errors are handled. Think of them as the traffic laws of the internet, ensuring that information flows smoothly and reliably.
One of the most fundamental of these protocols is the Internet Protocol (IP). Its primary job is to address and route data packets so they can find their way from a source to a destination across a network. There are two main versions of IP in use today: IPv4 and IPv6.
Internet Protocol (IP): The Address System
The Internet Protocol (IP) is a fundamental addressing system enabling routing data to each device over the network. You can imagine it as each device’s unique street address connected to the network. This address ensures that data packets sent from your browser reach the correct server and that the server’s response finds its way back to you.
There are two primary versions of IP in use today:
- IPv4: The older, more common version, which uses a format of four sets of numbers, each separated by a period. A typical IPv4 address looks like this:
192.0.2.235. - IPv6: The newer version, designed to accommodate the exponential growth of internet-connected devices. It uses a longer, more complex format with a mix of letters and numbers. A typical IPv6 address looks like this:
2001:0db8:85a3:0000:0000:8a2e:0370:7334.
Types of IP Addresses
There are two key distinctions of IP addresses: public vs. private and static vs. dynamic.
- Public IP Address: It identifies your entire home network to the outside world. It’s the one address that all of your devices share when they communicate on the internet. Your home’s public IP address is assigned by your Internet Service Provider (ISP) to your modem or a combined modem/router device. Your router uses this single public IP to connect to the internet.
- Private IP Address: The router then assigns a private IP address to each individual device in your home (e.g., your laptop, phone, smart TV). This allows your devices to communicate with each other on the local network. These addresses are only for local communication and aren’t visible to the public internet.
- Static IP Address: It is a permanent, unchanging IP address assigned to a device. It’s like having a dedicated street address that never changes. This is typically used for servers, websites, or services that need to be consistently located at the same address.
- Dynamic IP Address: It is a temporary IP address that changes automatically. Your Internet Service Provider (ISP) temporarily lends your network an IP address from a large pool of available addresses. This system allows ISPs to manage their IP addresses more efficiently, which is why it’s the standard for most home users. You don’t have to do anything to get it; it’s all handled automatically by your router and ISP.
IP Packets
Data is sent across the network not as one big file, but in smaller, manageable chunks of packets known as IP packets. Each packet contains two essential parts: a header and a payload.
- header: It contains critical routing information, such as the source IP address (where the packet came from) and the destination IP address (where it’s going). It also includes other metadata, like the packet’s size and a “time-to-live” value to prevent it from circulating endlessly if it gets lost.
- payload: It contains the real data you want to send—be it a small piece of a JPEG image, a line of text, or a JSON object. This payload is often wrapped in a higher-level protocol, like TCP or UDP, which we’ll discuss next.
We’ve now explored the Internet Protocol (IP), the network layer that acts as a post-delivery system between two devices. We’ve seen how our data is broken down into small, informative packets and sent from point A to point B. However, IP’s job ends there. It doesn’t guarantee that these packets are delivered, nor does it handle their order or correct for errors. For those crucial tasks, we need a higher level of protocol.
TCP vs. UDP: The Transport Layer
Now we understand how data is packaged and exchanged between devices across the network. It is time to learn how the two primary methods for actually “shipping” that data across the network, Transmission Control Protocol (TCP) and User Datagram Protocol (UDP).
In the OSI model, the methods operate at the transport layer (Layer 4). Layer 4 is responsible for end-to-end communication between devices and flow and error control. Also, the Transport layer on the device at the receiving end is responsible for re-ordering the received packets into data.
Transmission Control Protocol (TCP)
Transmission Control Protocol (TCP) is an important connection protocol that guarantees reliable data delivery between two devices. It ensures that data (like messages, videos, or webpages) is delivered correctly and in the same order from one device to another. Think of it as a subscribed mail service for data.
TCP Header Fields
The TCP headers are a small block of data containing crucial information for managing the connection and ensuring reliable data transfer. Here’s a breakdown of some important fields:
TCP Header Structure (20–60 bytes)
0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Source Port | Destination Port | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Sequence Number | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Acknowledgment Number | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Data | |U|A|P|R|S|F| | | Offset| Reserved |R|C|S|S|Y|I| Window | | | |G|K|H|T|N|N| | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Checksum | Urgent Pointer | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Options (Optional) | Padding | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ | Data | +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
- Source Port (16 bits) & Destination Port (16 bits): Identifies which application(IP address & Port Number) is sending/receiving the data.
- Sequence Number (32 bits): Tracks the byte position of the first byte in this segment.
- Acknowledgment Number (32 bits): Confirms received data.
- Data Offset(4bits): Indicates the TCP header size (in 32-bit words). It helps locate where the actual data starts.
- Control Flags (6 bits): Manages connection states.
- URG (Urgent): Marks data as high-priority (rarely used).
- ACK (Acknowledgment): Indicates the Acknowledgment Number is valid.
- PSH (Push): “Send this data immediately, don’t buffer!”
- RST (Reset): Abruptly terminates the connection (error/attack).
- SYN (Synchronize): Initiates a connection (used in 3-way handshake).
- FIN (Finish): Gracefully closes the connection.
Working of Transmission Control Protocol (TCP)
TCP establishes a reliable connection between the sender and the receiver using the three-way handshake (SYN, SYN-ACK, ACK), and it uses a four-step handshake (FIN, ACK, FIN, ACK) to close connections properly.
Let us understand with a simple example. Imagine you are sending a book (your data) to your friend, but instead of sending the whole book, you are sending one page at a time through the mail.
Connection Setup (3-Way Handshake)
Before sending the pages (data), TCP establishes a connection between you and your friend:
- Step 1 (SYN): You meet your friend and say, “Hey, can we talk? I’ll start with page 101.“?
- Step 2 (SYN-ACK): Your friend replies, “Sure, let’s talk! I’ll start with page 501.“
- Step 3 (ACK): You say, “I am sending you the book!“
✅ Now, the connection is open!
-
Your data stream starts at 101.
-
Their data stream starts at 501.
Note:- When the initial connection is made, the sender and receiver both send the starting sequence or number. This number isn’t for the first piece of data; it’s a starting point for the entire conversation. With these sequence numbers, TCP tallies the bytes sent and received, ensuring every piece of data is accounted for.
The initial three-way handshake establishes a starting sequence number for each direction, ensuring a two-way, confusion-free conversation.
Sending data ( Reliable Delivery)
- Now your book is being split into pages.
- Each page has been numbered, so that your friend can reorder it again.
- Your friend sends an ACK (acknowledgment) for each received page.
- If any page is lost, TCP resends it.
Flow Control (Avoiding Overload)
- Your friend can also say, “Slow down! I can’t handle so many pages at once!”
- TCP can adjust speed to prevent crashes.
Connection Termination (4-Way Handshake)
When done, TCP closes the connection politely:
-
Step 1 (FIN): You say, “I’m done sending!”
-
Step 2 (ACK): Your friend replies, “Got it, but I might still send pages.”
-
Step 3 (FIN): Your friend says, “Now I’m done too!”
-
Step 4 (ACK): You confirm, “Okay, goodbye!”
✅ Connection closed!
Thus, this is how you can send your book to your friend using the TCP method.
Features of TCP
- Reliable – No lost data (retransmits if needed).
- Ordered – Data arrives in the correct order.
- Error-checked – Detects corrupted data.
- Flow control – Prevents overwhelming the receiver.
User Datagram Protocol (UDP)
The User Datagram Protocol, or UDP, is an important connection protocol that is used especially for time-sensitive transmissions such as video playback or DNS lookups. Unlike TCP, UDP is connectionless, unreliable, and orderless, making it a lightweight and efficient option for certain types of data transmission. It breaks down data into small, self-contained packets called datagrams.
UDP Header Fields
The UDP headers are a small block of data containing crucial information for managing fast but careless connections. Here’s a breakdown of some important fields:
UDP Header Fields (8 Bytes Total)
0 7 8 15 16 23 24 31 +--------+--------+--------+--------+ | Source Port (16 bits) | +--------+--------+--------+--------+ | Destination Port (16 bits) | +--------+--------+--------+--------+ | Length (16 bits) | +--------+--------+--------+--------+ | Checksum (16 bits) | +--------+--------+--------+--------+ | Data (Payload) | +-----------------------------------+
- Source Port (16 bits): Identifies the app sending the data (like TCP).
- Destination Port (16 bits): Identifies the app receiving the data.
- Length (16 bits): Total size of the UDP header + data (in bytes).
- Checksum (16 bits): Optional error-checking for header + data.
Working of User Datagram Protocol (UDP)
UDP establishes a connectionless protocol that sends data quickly without any reliability guarantee. It’s often described as a “fire and forget” protocol because it doesn’t establish a connection or check to see if the data arrived.
No Handshake
Unlike TCP, UDP does not perform a three-way handshake before sending data. It simply starts sending data packets (called datagrams) to the destination as soon as it’s ready.
Best-Effort Delivery
UDP sends datagrams without any order or acknowledgment. This means that packets can arrive out of order, or not at all, and UDP doesn’t retransmit them.
Minimal Overhead
UDP’s header is small and contains less information. This makes UDP faster and more efficient, as it requires less processing and network bandwidth.
In simple analogy, imagine you are sending a postcard. You write a message and drop it in a mailbox. You don’t get a confirmation that it was delivered, and you don’t know if it arrived in one piece or at all. However, it’s a very fast and simple way to send a message.
Features of UDP
- Fast – Sends data without delay or setup.
- Connectionless – No connection is established before sending data.
- Unreliable – Doesn’t guarantee delivery or retransmission of lost data.
- Low Overhead – Has a smaller header and fewer control features, making it lightweight.
Difference between TCP and UDP
TCP and UDP are both essential transport-layer protocols, but they have major differences. Let’s understand these key distinctions between them:-
| Transmission Control Protocol (TCP) | User Datagram Protocol (UDP) |
|---|---|
| TCP is a connection-oriented protocol, which means it sends data only after the connection has been established. | UDP is a connectionless-oriented protocol, which means it does not require establishing a connection to send data. |
| TCP is reliable and guarantees the delivery of data. | UDP is unreliable and does not guarantee the delivery of data. |
| TCP provides extensive error-checking mechanisms because it provides flow control and acknowledgment of data. | UDP has only the basic error-checking mechanism using checksums. |
| An acknowledgment segment is present. | No acknowledgment segment. |
| TCP maintains the data sequence while transferring data. | UDP does not maintain the data sequence while transferring data. |
| TCP is comparatively slower than UDP. | UDP is faster and simpler than TCP. |
| If any packet is lost, TCP retransmits the lost packet. | UDP does not support retransmit of packets if any packets are lost. |
| TCP’s header has more data with a variable length (20-60) bytes. | UDP has an 8-byte fixed-length header. |
| TCP uses handshakes such as SYN, ACK, and SYN-ACK. | UDP has no handshakes. |
| TCP doesn’t support Broadcasting. | UDP supports Broadcasting. |
| TCP is primarily utilized in situations when a safe and trustworthy communication procedure is necessary, such as in email or surfing the web. | UDP is used in situations where speed is more prioritized than reliability, such as Online Gaming, Video calls, and Live streaming. |
Also read, Frontend System Design: How Browsers Render Web Pages
Final Words
As a frontend engineer, your entire world is built on communication. Every time a user interacts with your application—whether they’re fetching data, sending a message, or streaming a video—a conversation is happening behind the scenes between the client and the server. It is important to understand the communication protocols that are the fundamental rules and conventions that govern this exchange.
In this article, we learnt what Internet Protocols are, how data gets converted to small packets, and important transport layer methods, their working, features, and their difference.
Leave a Reply