Framework Fundamentals: A Critical Comparison

📋 Table of Contents

• Course Overview
  • Learning Objectives
• Session 1: Theory & Context
  • 1.1 What Is a Framework? (15 min)
    • The Landscape
    • Historical Evolution
  • 1.2 Key Framework Characteristics (25 min)
    • 🧩 Component Architecture
    • ⚡ Reactivity
    • 🗺️ Routing
    • 🗃️ State Management
  • 1.3 Framework Selection Criteria (20 min)
    • Quick Guide
  • 1.4 Demo: Same Counter, Three Ways (30 min)
    • Vanilla JavaScript
    • React
    • Vue 3
    • Comparison
  • 1.5 Introduction to Vite (15 min)
• Session 2: Comparative Practice
  • 2.1 Team Rotation Structure (10 min)
  • 2.2 The Challenge: Build a To-Do App (60 min)
    • Requirements
    • This Exercises
  • 2.3 Presentation and Reflection (15 min)
• Framework Decision Matrix
• Key Takeaways
• References
• 🔗 Lesson Navigation

“All codebases beat at different tempos. Some in allegro, some in adagio, some in panic.” — The Tao of Development

Course Overview

Learning Objectives

Session 1:

• Explain what frameworks are and why they exist
• Identify key characteristics (components, reactivity)
• Apply selection criteria for different project types
• Set up development environment with Vite

Session 2:

• Build the same app in Vanilla JS, React, and Vue
• Compare developer experience across stacks
• Make informed technology decisions based on evidence

Session 1: Theory & Context

1.1 What Is a Framework? (15 min)

A front-end framework provides tools, patterns, and conventions for building user interfaces.

LIBRARY (React)           FRAMEWORK (Angular)
─────────────────         ────────────────────
You call the library.     The framework calls you.
You decide structure.     Structure is provided.
Assemble your own stack.  Batteries included.

The Landscape

Historical Evolution

2005    jQuery: DOM manipulation made easier
2013    React: Component model + Virtual DOM
2014    Vue: Progressive framework
2016    Angular 2+: TypeScript-first
2019    Svelte: Compile-time reactivity
2020+   Signals, Islands, Server Components...

1.2 Key Framework Characteristics (25 min)

🧩 Component Architecture

              <App>
             /     \
        <Header>   <Main>
           │       /    \
        <Nav>   <List>  <Detail>

⚡ Reactivity

When data changes, UI updates automatically—no manual DOM manipulation.

🗺️ Routing

Navigate without full page reloads (SPA).

🗃️ State Management

1.3 Framework Selection Criteria (20 min)

Quick Guide

🧘 Koan: “Write code for humans first, computers second.”

1.4 Demo: Same Counter, Three Ways (30 min)

Vanilla JavaScript

<button id="btn">
  Contador: <span id="count">0</span>
</button>
<script>
  let count = 0;
  document.getElementById('btn').addEventListener('click', () => {
    count++;
    document.getElementById('count').textContent = count;
  });
</script>

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Contador: {count}
    </button>
  );
}

Vue 3

<template>
  <button @click="count++">Contador: 8</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Comparison

1.5 Introduction to Vite (15 min)

Vite = modern, fast build tool.

# Create project
npm create vite@latest my-project -- --template react
cd my-project
npm install
npm run dev

Why Vite?

• Near-instant dev server (<1s vs 30s+ for Webpack)
• Hot Module Replacement
• Minimal configuration

Session 2: Comparative Practice

2.1 Team Rotation Structure (10 min)

Teams of 3 students, rotating roles:
• Implementer: writes code
• Integrator: reviews, tests
• Documentor: README, notes

Sprint 1 (20 min): Vanilla JS
Sprint 2 (20 min): React
Sprint 3 (20 min): Vue

2.2 The Challenge: Build a To-Do App (60 min)

Requirements

• Add a task (text input + button)
• Display list of tasks
• Mark task as complete (toggle)
• Delete a task

This Exercises

2.3 Presentation and Reflection (15 min)

Each team presents (3 min):

1. Demo: Show working app
2. Challenge: Hardest part?
3. Comparison: Which felt most natural?

🧘 Koan: “Experience is simply the name we give to our bugs after we fix them.”

Framework Decision Matrix

Key Takeaways

There is no best framework—only the best framework for your context.

References

• React Documentation
• Vue.js Documentation
• Vite Documentation
• MDN Web Docs

🔗 Lesson Navigation

“The master developer does not force the scroll—they channel its flow.”