Module 14: Frontend Integration

This final module serves as the “bridge” between your powerful .NET backend and the user’s browser. Even if you specialize in backend development, a “Full-Stack” understanding is vital because you need to know how the frontend consumes the data you provide.

1. The Core Languages of the Web

Every website, regardless of the framework, is eventually rendered as these three things:

HTML (Structure): The skeleton of the page (headings, buttons, inputs).
CSS (Style): The skin and clothes (colors, fonts, spacing, responsive layouts).
JavaScript (Behavior): The muscles and brain. It allows the page to react to clicks, fetch data in the background, and update the UI without a full page refresh.

2. CSS Frameworks: Bootstrap vs. Tailwind

Modern developers rarely write every line of CSS from scratch. Instead, we use frameworks to speed up development.

Bootstrap: Component-based. It gives you pre-styled “widgets” like btn-primary, navbar, and card. It’s great for building professional, consistent internal tools quickly.
Tailwind CSS: Utility-based. Instead of components, it gives you tiny classes like flex, pt-4, and text-center. It offers much more design freedom and is currently the industry favorite for custom-branded sites.

3. Razor Pages vs. SPA Concepts

This is the most important architectural choice in modern web development.

Approach	Technology	How it Works	Pros/Cons
Server-Side Rendering (SSR)	ASP.NET Core MVC / Razor Pages	The server builds the full HTML page and sends it to the browser.	Pros: SEO friendly, simple security. Cons: Full page flickers on every click.
Single Page App (SPA)	React, Angular, Vue, Blazor	The server sends a blank shell and a JS file. The JS builds the UI and fetches data via APIs.	Pros: Feels like a mobile app (fast, smooth). Cons: More complex setup.

4. Calling APIs using JavaScript (AJAX/Fetch)

In a modern application, the frontend and backend communicate via JSON. The most common way to do this in JavaScript is the fetch() API.

Example:

JavaScript

// Calling your .NET Web API from the browser
async function getProducts() {
    const response = await fetch('https://localhost:5001/api/products');
    const data = await response.json();
    
    // Logic to display data in the HTML
    console.log(data);
}

This is the moment where your Module 10 (Web API) meets the user interface.

5. Intro to React, Angular, and Blazor

If you want to move beyond basic HTML/JS, you’ll pick a framework:

React: Owned by Meta. Highly flexible, uses a “component” mindset, and has the largest job market.
Angular: Owned by Google. A “batteries-included” framework. It’s very structured and preferred by large enterprises (it feels very similar to C# in its architecture).
Blazor: Microsoft’s “Secret Weapon.” It allows you to write frontend logic using C# instead of JavaScript. It’s a game-changer for .NET developers who want to stay within the .NET ecosystem.

6. The Full-Stack Workflow

In a real project, the workflow looks like this:

Backend: You create a Product table in SQL Server (Module 12) and map it with EF Core (Module 11).
API: You create a ProductController that returns a ProductDto (Module 10).
Security: You protect that API with a JWT token (Module 13).
Frontend: You use JavaScript fetch to get the JSON and display it in a beautiful Tailwind-styled table.

Outcome: Build Full-Stack Applications

By the end of this module, you are no longer just writing “code snippets.” You are building complete systems. You understand how a button click in a browser travels through the internet, hits an API, talks to a database, and returns a result to the user.

Log In

Sign Up