codingwithalex

Frontend for Backend Developers: What You Need to Know About Modern Frontend Development

Alex Silva -

As a backend developer, you might be an expert at creating APIs, managing databases, and configuring servers, but the world of frontend development has grown in complexity, and it’s no longer a simple task. Over the course of my career, I’ve observed a common issue: many backend developers don't have a clear understanding of how the modern frontend works, which often leads to architecture problems and scope misunderstandings in applications.

In this blog post, I’ll walk you through the essential concepts that every backend developer should understand about the modern frontend. By understanding how frontend works today, you can avoid many of the common pitfalls in backend-frontend interaction and improve the efficiency of your development process.

1. What Backend Developers Should Know About CORS

Cross-Origin Resource Sharing (CORS) is a security feature in browsers that restricts web pages from making requests to a different domain than the one that served the web page. This policy was introduced to prevent malicious sites from exploiting resources on other websites without permission. For example, if you create a site and link to images or resources from another domain, the other domain may be unintentionally paying for server resources you’re consuming.

CORS, which stands for Cross-Origin Resource Sharing, ensures that only specified domains are allowed to access a server’s resources. The browser checks the server's response headers, particularly the Access-Control-Allow-Origin header, to see whether the requesting origin is allowed to access the resource.

Why Backend Developers Need to Configure CORS Properly

While CORS issues are experienced on the frontend, the responsibility of configuring it lies with the backend. The frontend makes a request, and the backend needs to return the correct headers (Access-Control-Allow-Origin) that dictate which domains are permitted to access the server's resources.

Here’s a key point: testing CORS in tools like Postman won’t reveal the problem because CORS enforcement happens at the browser level. So even if the request works in Postman, your browser might block it due to CORS. To prevent such issues, ensure your API's CORS configuration is set up correctly.

2. SPA and PWA: Understanding Modern Web Applications

In the early days of web development, each time you accessed a webpage, the browser would send a request to the server, which would return the full HTML document. This approach is no longer efficient for modern web applications.

Single Page Application (SPA)

Today, many web applications use the Single Page Application (SPA) model. When a user loads a web application, the entire app is loaded as a JavaScript bundle that handles the app’s structure, routes, and page transitions without the need for constant page reloads.

SPAs shift the control of routing from the backend to the frontend. The server typically delivers a single HTML page, and the client-side JavaScript handles navigating between different views, updating the URL dynamically. When the user interacts with the application, it loads new data asynchronously using APIs without refreshing the entire page.

Progressive Web Application (PWA)

A Progressive Web Application (PWA) takes this a step further. It behaves like a native mobile app by allowing users to install the web app on their devices, cache assets, and even work offline. From a backend developer’s perspective, this means that you need to be aware that your API may be queried dynamically and asynchronously, and any stateful logic should be carefully handled.

Implications for Backend Developers

Since SPAs and PWAs make most of their requests via HTTP APIs, many traditional techniques for session management, state preservation, or routing control that backend developers are accustomed to no longer apply. Requests are often stateless, and the frontend takes full control over the application's routing and state management. This means that backend developers need to understand that session-based architectures may not work the same way as they do with traditional, server-rendered applications.

3. Backend for Frontend (BFF)

One of the challenges with modern frontend architecture is that frontends are growing increasingly complex, and sometimes the API structure doesn't align perfectly with frontend needs. This is where the Backend for Frontend (BFF) pattern comes into play.

A BFF is a backend layer that serves as an intermediary between the frontend and various backend services. Instead of forcing the frontend to deal with multiple microservices or complex API architectures, the BFF acts as a single entry point for frontend applications. The BFF aggregates data from multiple services, transforms it if needed, and returns the data in a format that the frontend can easily consume.

Why Backend Developers Should Consider BFF

Implementing a BFF gives frontend developers more flexibility and autonomy to design the API responses according to their needs without burdening the backend with frontend-specific logic. It decouples the frontend from the complexity of the backend microservices and allows for a cleaner, more manageable architecture.

For complex systems with numerous microservices or varying client types (e.g., web, mobile), introducing a BFF can simplify frontend-backend communication and improve developer productivity on both sides.

4. URLs and Domains Matter

For backend developers, a URL is often seen as nothing more than an endpoint for a resource. However, for frontend developers, the URL is a contract that’s linked to many other aspects of the system, such as:

  • CORS policies
  • Content Security Policies (CSP)
  • Cookie policies
  • SPA routing

In SPAs, the frontend has full control over the URL structure and routing, which can have a significant impact on the application's behavior. Changing a URL or adding parameters can drastically affect how the frontend operates, so backend developers should always consider the potential impact on the frontend when altering URLs.

For example, moving a resource from one domain to another may break CORS policies or affect how the SPA handles routing. Make sure to coordinate with frontend teams when making such changes to avoid unnecessary conflicts.

5. Consistent Data Models Across Endpoints

Frontend and backend developers need to establish consistent contracts when working with APIs. If the data model changes depending on the API endpoint or action, it can create unnecessary complexity for the frontend team. For example, let’s say you have the following API endpoints:

  • GET /items returns a list of items.
  • PUT /item updates an item.

If the GET endpoint returns items in the format { itemID, itemDescription }, but the PUT endpoint expects data in a different format, say { item: { id, description } }, the frontend has to handle these inconsistencies, which can lead to bugs and unnecessary code complexity.

The best practice is to maintain the same structure across all actions for a resource. If you are sending or receiving data about an item, always use the same data model to minimize confusion and complexity on the frontend. Consistent data models make development faster and reduce the likelihood of errors on both sides.

Conclusion: The Evolving Role of Frontend in Modern Development

In the world of modern web development, the frontend has evolved into a complex and powerful entity, with responsibilities that extend far beyond the traditional rendering of static HTML pages. For backend developers, it’s essential to understand how the modern frontend works to build more efficient, scalable, and compatible applications.

Here’s a quick recap of what backend developers should keep in mind when working with modern frontend technologies:

  • CORS: It’s your job to configure CORS correctly to avoid browser blocks.
  • SPAs/PWAs: Understand that the frontend takes over routing and state management. Backend services need to support stateless HTTP requests.
  • BFF: Consider implementing a Backend for Frontend layer to simplify communication between frontend and complex backend services.
  • URLs and Domains: Don’t treat URLs as just endpoints — consider their impact on CORS, routing, and other frontend functionalities.
  • Consistent Data Models: Ensure that the data models are consistent across all API endpoints to reduce complexity on the frontend side.

Modern web development is a collaborative effort between frontend and backend teams, and the more each side understands the other's challenges and requirements, the smoother the development process will be.