Back vs Front: Full‑Stack Overview

Quick tour: Front-end, Back-end, Full‑Stack & Main Solutions

web-development
full-stack
overview
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2025-10-12

Résumé

Course lectures and practices for JavaScript full‑stack web development with AI‑assisted workflows.

Overview

Give a clear mental model of front-end vs back-end, explain full‑stack, and present common solutions you can pick quickly.

What is Front‑End?

  • Definition: The code that runs in the user’s browser and controls UI, interactions, and client-side state.
  • Responsibilities:
    • UI/UX, DOM updates, client routing, API consumption.
    • Performance and accessibility.
  • Typical tech:
    • HTML, CSS, JavaScript, React / Vue / Svelte / Angular, build tools (Vite).

SPA, SSR & SEO

  • SPA (Single Page Application)
    • Definition: Client-side app that updates the UI without full page reloads.
    • Pros: Smooth interactions, fast subsequent navigation, good for app-like UX.
    • Cons: Initial load may be slower, requires JS for content, SEO needs work.
    • Example: React app bootstrapped with Vite or Create React App.
  • SSR (Server-Side Rendering)
    • Definition: HTML is rendered on the server for the initial request.
    • Pros: Faster first meaningful paint, better SEO, predictable initial HTML.
    • Cons: More complex server logic, potentially higher server cost/latency.
    • Example: Next.js pages rendered on server or using hybrid modes.
  • SEO (Search Engine Optimization) considerations
    • Why it matters: Search engines and social previews rely on server-provided HTML for best results.
    • When to prioritize: Marketing pages, public content, and product landing pages.
    • Mitigations for SPA: Pre-rendering (SSG), dynamic rendering, or server-side snapshots.
  • Hybrid & static options
    • SSG (Static Site Generation): Build-time HTML (good for blogs, docs).
    • ISR/On-demand revalidation: Hybrid between SSG and SSR for fresh content.

What is Back‑End?

  • Definition: Server-side logic that stores data, enforces rules, and provides APIs.
  • Responsibilities:
    • Authentication, data persistence, business logic, integrations, security.
  • Typical tech:
    • Node.js + Express, Python + Django/Flask, Ruby on Rails, Java + Spring Boot, databases (Postgres, MongoDB).

What is Full‑Stack?

  • Definition: Teams or developers that build both front-end and back-end; or architectures integrating both.
  • Benefits:
    • Shared language (JavaScript), faster prototyping, easier context switching.
  • Trade-offs:
    • Broader skill set required; consider team scale and specialization needs.

Main Solution Patterns

  • Client-Server (React + REST API)
    • Decoupled, scalable, ubiquitous.
  • SSR / Hybrid (Next.js)
    • SEO and performance for initial load.
  • Full‑Stack React (Remix)
    • Server-first routing and data loading with modern React.
  • Enterprise SPA (Angular)
    • TypeScript-first, opinionated structure, good for large teams and long-lived apps.
  • Java / Spring Boot
    • Robust, mature ecosystem for enterprise back-end services and microservices.
  • Serverless Functions (Vercel/Netlify/Azure Functions)
    • Easy scaling, lower infra overhead.
  • Monolith (Express + templating)
    • Simple for small projects or teams with less infra complexity.

Choosing a Stack

Quick guideline to choose:

  • If SEO and fast first paint: Next.js
  • If large enterprise app with strict structure: Angular
  • If rapid API-driven SPA: React + Express (or serverless API)
  • If small/simple site: server-rendered pages (templating)

Minimal Full‑Stack Stack Recommendation

Practical starter stack for most projects: - Front-end: React + Vite - Back-end: Node.js + Express (or Serverless functions) - Database: PostgreSQL or MySQL (structured) or MongoDB (flexible)

Framework Code Examples

React + Express (Our Learning Stack)

When to choose: Learning full-stack, rapid prototyping, API-driven SPAs

  • Front-end (React):

    // Minimal React fetch (use in a component)
useEffect(() => {
  fetch('/api/items')
    .then(res => res.json())
    .then(setItems)
    .catch(console.error);
}, []);

  • Back-end (Express):

    // Minimal Express route
app.get('/api/items', async (req, res) => {
  const items = await db.getItems(); // placeholder
  res.json(items);
});

Angular (Enterprise SPA)

When to choose: Large teams, long-term maintenance, strict TypeScript architecture

  • Component Example:

    // src/app/hello/hello.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello {{name}}</h1>`
})
export class HelloComponent {
  name = 'World';
}

  • Trade-offs: Steeper learning curve, more opinionated, heavier initial bundle (but mitigations exist)

Remix (Full-Stack React)

When to choose: React-first framework with server-driven data loading, fast first load

  • Route with Server Loader:

    // routes/index.jsx
import { useLoaderData } from "@remix-run/react";

export const loader = async () => {
  const res = await fetch("https://api.example.com/items");
  return res.json();
};

export default function Index() {
  const items = useLoaderData();
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

  • Trade-offs: Less ecosystem maturity than Next.js for some deployment patterns, but strong conventions

Glossary (short)

  • SPA: Single Page Application — client routes handled in browser.
  • SSR: Server-Side Rendering — HTML rendered on server for first load.
  • API: Application Programming Interface — endpoints returning structured data.
  • Serverless: Functions run on demand, no server process to manage.

Learning Path Rationale: Why React + Vanilla JS + Node/Express?

As full-stack educators, we’ve chosen this specific learning sequence for pedagogical reasons:

Start with Fundamentals (Vanilla JS)

  • Mental Models First: Understanding DOM manipulation, events, and async patterns before frameworks
  • Transferable Skills: Vanilla JS knowledge applies to React, Angular, Vue, and any future framework
  • Debugging Foundation: When React “doesn’t work,” you need vanilla JS skills to diagnose

React as Modern UI Standard

  • Industry Relevance: ~70% of front-end jobs mention React (2024 surveys)
  • Gentle Learning Curve: Compared to Angular’s complexity or Vue’s different paradigms
  • Ecosystem Maturity: Largest community, most Stack Overflow answers, best AI assistance
  • Component Thinking: Teaches reusable UI patterns that apply everywhere

Node.js + Express for Back-End

  • Same Language: Reduces cognitive load—students apply JS knowledge immediately
  • JSON-Native: Perfect match for modern API-first development
  • Async Patterns: Teaches modern server paradigms (non-blocking I/O)
  • Deployment Simplicity: Easy to host on modern platforms (Vercel, Railway, Heroku)

This Foundation Enables Everything Else

Once you master React + Node/Express, you can easily:

  • Add TypeScript: Strong typing for larger projects
  • Upgrade to Next.js: SSR/SSG when you need SEO
  • Try Angular: You already understand components and services
  • Use Different Back-ends: The API patterns transfer to Python, Java, etc.
  • Go Serverless: Functions are just smaller Express routes

Why Not Start with [Other Framework]?

Angular: Excellent for enterprise, but steep learning curve with TypeScript, decorators, and dependency injection upfront

Vue: Great framework, but smaller ecosystem and job market than React

Svelte: Innovative and fast, but still emerging ecosystem

Next.js: Perfect for production, but adds SSR complexity before students understand SPAs

Full-Stack Frameworks (Rails, Laravel): Excellent, but server-rendering paradigm is different from modern API-first patterns

Key Teaching Insight: Breadth Before Depth

Students often ask: “Should I learn everything about React before touching the backend?”

Answer: No. Full-stack thinking requires understanding the connections between layers:

  • How does a button click become a database update?
  • Why do we need CORS and how do cookies work?
  • What happens when the API is slow or fails?

You can’t understand these concepts by studying frontend or backend in isolation.

Conclusion: The Path Forward

This overview gives you the mental framework for full-stack development. The specific technologies matter less than understanding:

  1. Separation of Concerns: Front-end renders, back-end processes, databases persist
  2. API Design: How clients and servers communicate effectively
  3. State Management: Where data lives and how it flows through your application
  4. User Experience: How technical decisions affect real people using your software

🎯 Final Thought

The React + Node.js stack we’re teaching isn’t just popular—it’s pedagogically optimal. It minimizes the number of new concepts you learn simultaneously while maximizing the real-world applicability of your skills.

Once you understand this stack, you’ll have the foundation to learn any other web technology quickly and effectively.

Réutilisation