React vs Angular for Data Engineers A Practical Comparison

# A small API that any front end (React or Angular) can call
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:5173",
                   "http://localhost:4200"], allow_methods=["GET"])

RUNS = [
    {"pipeline": "orders_daily", "status": "success", "rows": 120345},
    {"pipeline": "customers_sync", "status": "failed", "rows": 0},
    {"pipeline": "payments_hourly", "status": "running", "rows": 8812},
]

@app.get("/api/runs")
def runs():
    return RUNS

# run: uvicorn pipeline_api:app --reload

Do I need a JavaScript framework?

[ ] Users must click, edit or approve data (not just view)
[ ] Several data systems must appear on one custom page
[ ] Many people will use the tool every day
[ ] BI tools and Python dashboards cannot meet the need
[ ] Someone will maintain the front end long term

0-2 ticks: use Streamlit, Grafana or a BI tool
3-5 ticks: React or Angular makes sense

# React with Vite and TypeScript
npm create vite@latest pipeline-ui -- --template react-ts
cd pipeline-ui
npm install
npm run dev          # http://localhost:5173

# Angular CLI
npm install -g @angular/cli
ng new pipeline-ui --routing --style=css
cd pipeline-ui
ng serve             # http://localhost:4200

# Generate a service for API calls
ng generate service runs

import { useEffect, useState } from "react";

type Run = { pipeline: string; status: string; rows: number };

export default function RunsTable() {
  const [runs, setRuns] = useState<Run[]>([]);
  useEffect(() => {
    fetch("http://localhost:8000/api/runs")
      .then((r) => r.json())
      .then(setRuns);
  }, []);

  return (
    <table>
      <thead><tr><th>Pipeline</th><th>Status</th><th>Rows</th></tr></thead>
      <tbody>
        {runs.map((r) => (
          <tr key={r.pipeline}>
            <td>{r.pipeline}</td><td>{r.status}</td><td>{r.rows}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// runs-table.component.ts (standalone component, Angular 17+)
// Requires provideHttpClient() in app.config.ts
import { Component, OnInit, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";

interface Run { pipeline: string; status: string; rows: number; }

@Component({
  selector: "app-runs-table",
  standalone: true,
  template: `
    <table>
      <tr><th>Pipeline</th><th>Status</th><th>Rows</th></tr>
      @for (r of runs; track r.pipeline) {
        <tr><td>{{ r.pipeline }}</td><td>{{ r.status }}</td><td>{{ r.rows }}</td></tr>
      }
    </table>`,
})
export class RunsTableComponent implements OnInit {
  private http = inject(HttpClient);
  runs: Run[] = [];
  ngOnInit() {
    this.http.get<Run[]>("http://localhost:8000/api/runs")
      .subscribe((data) => (this.runs = data));
  }
}

Score 1-5                         | Streamlit/BI | React | Angular
----------------------------------|--------------|-------|--------
Time to first working version     |              |       |
Needs editing / approvals         |              |       |
Number of users and features      |              |       |
Team's existing skills            |              |       |
Long-term maintenance             |              |       |
Integration with company UI       |              |       |
TOTAL                             |              |       |

Data tool brief

Users: ______________________
What they must see: __________
What they must do (edit, approve, trigger): ______
Data sources / APIs: ________
Data volume per screen: _____
Refresh needs (live, hourly, daily): ______
Who maintains the front end: ______
Chosen approach and why: ______

2-week starter plan for a data engineer

Week 1
- Build the API (FastAPI) for one data view
- Try Streamlit first; note what it cannot do

Week 2
- If needed, build the same view in React or Angular
- Add loading and error states
- Add pagination for large tables
- Write a short README comparing both attempts