Einführung HTWR Frontend Dev

Alle sagen es sei einfach, aber es ist einfach nur (unnötig) kompliziert. Aber es macht Spaß, man kann wenigstens sehen was man erschafft.

HTWR-aachen.de nutzt React und Nextjs als Bibliothek und Framework. Ich werde hier keine so gute Einführung in die beiden Sachen geben können wie sie selber, deswegen guckt da mal vorbei.

HTWR ist in verschiedene Lehrstühle/Institute (inistitues) aufgegliedert ähnlich wie es die Informatik auch ist.

Lehrstühle vs Institute

Tatsächlich sind Institute ein oder mehrere Lehrstühle die sich zusammen getan haben. Ein Lehrstuhl ist einfach nur die Stelle eines Professors.

Die Institute unterrichten dann mehrere Fächer (subjects) die dann bei HTWR aufgearbeitet werden. Jedoch, können Fächer auch von mehreren Instituten zusammen gemacht sein.

Also ergibt sich so ein Modell

// src/models/institute.ts
export type Institute = {
  name: Institutes;
  professor: string;
  fullName: string;
  href: string;
  // {... etc.}
};

// src/models/subjects.ts
export type Subject = {
  name: string;
  institutes: Institutes[];
  displayName: string;
  fullName?: string;
  articlesURL: string;
  articlesPath: string;
};

Grundlagen

HTWR benutzt den halbwegs neuen App Router von Nextjs, dass bedeutet in /src/app werden alle URL Pfade als Order definiert. In jedem Order befindet sich dann eine page.tsx Datei, die die Seite rendert.

Server vs Client Component

Die Seite ist im normalfall ein Server Component, kann aber, falls Interaktion gewünscht ist (z.B. durch useState) in ein Client Component verwandelt werden. Lest euch die Next Dokumentation durch.

Das Seite wird dann in an der stelle von {children} in einem Layout eingefügt, das dann wiederum im {children} eines höheren Layouts eingefügt wird bis zum root /src/app/layout.tsx.

[subject], [...slug] sind dynamische Pfade, die (alle) pattern matching (mit ... rekursiv) nutzten und den erkannten Wert als Parameter an die darunterliegenden Seiten weitergibt.

So können dynamisch die Zusammenfassungen aus dem Dateiordner gezogen werden und dann mit nur einem page.tsx alle gerendert werden.

Viele weiter Informationen lassen sich sehr gut bei Bedarf in der Next Dokumentation (Achtet darauf App Router links oben ausgewählt zu haben).

Layouts

Das root layout ist absichtlich sehr schlicht. Es beinhaltet nur die Schriftarten und Metadaten Headers der Webseite, sowie eine Grundlegende (simplifiziert)

<html>
  <head></head>
  <body>
    {children}
  </body>
</html>

Denn jedes Institute hat sein eigenes Layout /src/layouts. Viele benutzten aber das RWTH CMS System, welches als Component src/layouts/rwth zur Verfügung steht. Hier lässt sich das Logo und die Navigationsleiste (und die Mobile Navigation) konfigurieren. Embedded/Deddebme, SE/ES, Logic/Cigol und ComSys/SysCom haben eigene Layouts.