Frontend Core Concepts and Communication
What is Frontend?
To understand frontend development, we first need to know about the "client." A client can be different things, like web browsers, desktop applications, mobile apps, or other devices that use our services. In this context, "client" refers to the software or devices that interact with the backend services.
For example, when you use Facebook, your browser or mobile app sends requests to Facebook's server. You don’t directly use the server; your browser is doing that for you. So, the real clients are the applications or devices communicating with the server, not the users themselves.
Here are some potential clients of our backend services:
- Web App: Though you access the app via a browser, the actual client making API requests is the web application.
- Mobile App: Notifications or data synchronization across devices, like a web app and mobile app working together, are possible because both are connected to the same API.
- Desktop App: Applications installed on desktop systems can also be clients consuming backend APIs.
- IoT Device: Internet of Things (IoT) devices, such as smart TVs or door sensors, are also backend clients as they send and receive data through APIs.
In simple terms, any device or software that uses the backend API is considered a client. According to this theory, the backend itself can be a client for databases, as it directly interacts with them.
Features of Frontend
Now that we understand what the frontend is, let's explore the various layers that constitute the frontend architecture.
Representation Layer
This is the visible part of an application—the user interface (UI). Whether it's a button, form, heading, image, or paragraph, everything that the user interacts with falls under the representation layer. We typically build this layer using HTML and CSS.
Data Layer
The data layer involves managing two types of data:
- Application Data: Data related to the application's functionality, like a toggle state, which doesn’t need to be stored in a server.
- Server Data: Data fetched from APIs and stored in a backend database.
We store and manage this data either temporarily in memory (e.g., arrays, objects, local/session storage) or more permanently in databases.
Logical Layer
The logical layer processes data and coordinates communication between other layers. For example, it might process API data and send it to the representation layer to be displayed. Or, it could take user input from the representation layer and send it through the network layer to the backend for storage.
Network Layer
The network layer handles communication between the frontend and backend through API calls. Using HTTP requests (via modules like fetch or libraries like axios), it retrieves or sends data to the backend API.
Frontend Architecture Diagram
Below is a conceptual diagram representing how data flows between different layers in the frontend and the backend.
+----------------------------------------------------+
| |
| Representation Layer |
| (UI Components, HTML/CSS) |
| |
| Frontend Clients: |
| 1. Web App |
| 2. Mobile App |
| 3. Desktop App |
| 4. IoT Device |
| 5. VS Code Extension |
| 6. Browser Extension |
| 7. Figma Plugin |
| 8. Any Device |
| |
+----------------------------------------------------+
⇧ ⇩
+----------------------------------------------------+
| |
| Logical Layer |
| (Decides Data Flow Between Layers) |
| |
+----------------------------------------------------+
⇧ ⇩
+----------------------------------------------------+
| |
| Data Layer |
| (Temporary Store: Variables, LocalStorage) |
| |
+----------------------------------------------------+
⇧ ⇩
+----------------------------------------------------+
| |
| Network Layer |
| (Handles HTTP Requests and Responses) |
| |
+----------------------------------------------------+
⇩ ⇧
+----------------------------------------------------+
| |
| Backend API |
| (Provides Data in JSON, Connects to Database) |
| |
+----------------------------------------------------+
⇩ ⇧
+----------------------------------------------------+
| |
| Third-Party APIs |
| (E.g., Twilio, SendGrid, Google Maps) |
| |
+----------------------------------------------------+The Role of HTTP and JSON
In modern web applications, HTTP is the core communication channel that allows the frontend to retrieve and send data to the backend. The data is typically exchanged in JSON format, which both the frontend and backend can easily understand.
A while ago, it wasn't possible to use the same backend for different frontend clients. This was because backends used to return a complete HTML page for each request, which was difficult for mobile apps or other clients to interpret. With the advent of JSON-based APIs, backend services now return raw data, enabling frontend clients (whether web, mobile, or desktop) to render that data in any form they need.
Conclusion
The frontend architecture can be summarized as having four core layers:
- Representation Layer: The UI built with HTML/CSS (or frameworks like React, Angular, Vue).
- Data Layer: Manages both application and server data (temporary storage, local storage, cookies).
- Logical Layer: Processes data and directs communication between the frontend and backend.
- Network Layer: Communicates with the backend via HTTP requests.
Despite differences in implementation (e.g., web, mobile, or desktop apps), the underlying concept remains the same across all frontends. The API serves as a bridge between the client and the backend, while HTTP and JSON ensure smooth data transmission between them.