Modul 245 Alle Aufgaben

Aufgabe 7: React-Frameworks vergleichen und bewerten

Ausgangslage

Welches Framework ein Projekt nutzt, entscheidet mit darüber, ob es sich technisch umsetzen lässt. In dieser Aufgabe vergleichen Sie mehrere React-Frameworks anhand derselben vier Kriterien und treffen danach einen begründeten Entscheid.

Sie arbeiten in Vierergruppen: Jede Person übernimmt eine Framework-Card, entwickelt mit dem Tutorial der offiziellen Dokumentation einen Blog, deployt ihn und dokumentiert den Vergleich.

Zeitbedarf: 2 Lektionen à 45 Minuten, also 90 Minuten Unterricht (Woche 8)
Hilfsmittel: Node.js und npm, Git (GitHub oder GitLab), Hosting auf IaaS oder PaaS, Google Lighthouse (in den Chrome DevTools)
Sozialform: Vierergruppen, Arbeit an der Card einzeln oder zu zweit

Lernziele

• Sie können ein Framework anhand der vier Kriterien Ecosystem, Performance, Business Models & Pricing und Scalability analysieren.
• Sie können die offizielle Dokumentation eines Frameworks nutzen, um eine lauffähige Anwendung aufzubauen.
• Sie können eine Anwendung mit Git verwalten und auf einer IaaS- oder PaaS-Plattform deployen.
• Sie können Messwerte mit Lighthouse erheben und vergleichend in einer Matrix darstellen.
• Sie können eine Framework-Wahl fachlich begründen und mit den Anforderungen Ihres Projekts verknüpfen.

Material und Links

• Framework-Cards (in Teams abgelegt), je eine pro Framework: create-react-app, Next.js, Gatsby, Blitz, Redwood, Remix / React Router 7, Astro
• Faktoren-Card «factors to consider» (Grundlage der vier Kriterien)
• Verbreitung vergleichen: npm trends
• Zwei Gegenentwürfe zum React-Ökosystem: htmx · Qwik
• Links aus den Framework-Cards:
  • Remix: github.com/remix-run/remix · React Router: Modes
  • Astro: Upgrade auf v4
• Performance-Messung: Google Lighthouse, in die Chrome DevTools integriert

Vorgehen

Teil 1: Gruppen und Cards (ca. 5 Minuten)

1. Bilden Sie Vierergruppen.
2. Verteilen Sie die Cards innerhalb der Gruppe.
3. Klären Sie: Wer dokumentiert was, und wann ist der Blog deployt?

Teil 2: Blog erstellen (ca. 45 Minuten)

1. Arbeiten Sie das Tutorial der offiziellen Framework-Dokumentation durch.
2. Ziel ist ein minimaler Blog: Liste aller Beiträge, Detailansicht und ein Formular zum Anlegen.
3. Halten Sie fest, wo das Tutorial gut war und wo es Lücken hatte. Das gehört zur Dokumentation.

Teil 3: Git und Deployment (ca. 15 Minuten)

1. Verwalten Sie das Projekt mit Git (GitHub oder GitLab).
2. Deployen Sie die Anwendung auf eine IaaS- oder PaaS-Plattform.
3. Notieren Sie den Aufwand: Build-Zeit, Konfiguration, Kosten.

Teil 4: Die vier Matrizen (ca. 15 Minuten)

Erstellen Sie in Ihrer Dokumentation vier Tabellen und tragen Sie pro Framework eine Zeile ein.

Ecosystem-Matrix

Performance-Matrix

Erheben Sie die Werte mit Lighthouse.

Business-Models- und Pricing-Matrix

Scalability-Matrix

Teil 5: Anforderungen Ihres Projekts (ca. 5 Minuten)

1. Business Needs: Notieren Sie, was für Ihr Projekt gilt (Kostenrahmen, Teamgrösse, Zeit).
2. Scalability Needs: Notieren Sie, wie stark Ihr Projekt wachsen muss.
3. Vergleichen Sie Ihre Anforderungen mit den Werten aus den Matrizen.

Teil 6: Erkenntnisse (ca. 5 Minuten)

Schreiben Sie kurz auf, was Sie fachlich mitnehmen und was das für Ihre spätere Framework-Wahl bedeutet.

Abgabe

1. Git-Repository und deployte URL je Framework
2. Dokumentation mit Ecosystem-Summary, den vier Matrizen, den Notizen zu den Projekt-Anforderungen und den Takeaways
3. Lauffähiger Blog je Framework (Tutorial-Stand genügt)

Checkliste

• Card gelesen und Framework-Features dokumentiert

• Blog gemäss Tutorial erstellt und lokal gestartet

• Projekt mit Git verwaltet

• Deployment auf IaaS oder PaaS durchgeführt

• Lighthouse-Messung durchgeführt und Werte notiert

• Alle vier Matrizen ausgefüllt

• Projekt-Anforderungen und Takeaways aufgeschrieben