Quelltext der Seite Frontend Development in 2024 - Gesamt

<span id="vorwort"></span>
= Vorwort =

Es ist 2024. Softwareentwicklung verändert sich gerade in einer Weise wie ich es seit meinem ersten Kontakt mit dieser Disziplin um das Jahr 2010 nicht erlebt habe. ChatBots und KI-gestützte Tools verändern, wie man Softwareprojekte angeht. OpenAIs ChatGPT (OpenAI, 2024) und GitHubs CoPilot (CoPilot, 2024) sind disruptive Technologien, die es Entwickler*innen ermöglichen sich mehr auf die Softwarearchitektur und das große Ganze zu konzentrieren und Unterstützung bei der Detailarbeit zu erhalten.

Eines bleibt, wie es immer war: Es gibt nur einen Weg, Programmieren zu lernen, und dieser heißt: selbst zu programmieren. Dieses Studienheft zu lesen, wird niemandem programmieren beibringen. Softwareentwicklung, egal mit welcher Programmiersprache, kann man nur durch Praxis erlernen und vertiefen. Was mich bei Lehrbüchern oft gestört hat, war, dass oft eine Sprache und deren Konzepte erklärt wurden, aber nicht, wie der ganze Prozess von Anfang bis zum Ende funktioniert. Deshalb beginnen wir in diesem Fach mit dem Setup und dem Tooling, welches für ein Frontendprojekt notwendig ist und in der Praxis verwendet wird.

<span id="das-setup"></span>
= Das Setup =

Bevor wir uns mit JavaScript befassen, richten wir das Entwicklungssetup ein und lernen nützliche Werkzeuge kennen, die das Programmieren erleichtern. Ein lokal laufendes Programm ist zwar gut, kann aber meistens von niemand anderem einfach verwendet werden. Programmieren ist ein Teamsport. Deshalb beginnen wir mit Versionskontrollsystemen, GitHub und der Entwicklungsumgebung. Falls das alles bereits bekannt ist und bereits ein Frontend-Development-Setup vorhanden ist können die nächsten Kapitel überflogen werden und es kann mit der Erstellung des GitHub-Repositories begonnen werden.

<span id="git"></span>
== Git ==

Git (git, 2024) ist ein Versionskontrollsystem (VCS), das die Verwaltung von Quellcode ermöglicht. Es speichert Änderungen an Dateien und erlaubt es, auf frühere Versionen zurückzugreifen. Zuerst gehen wir einige Begriffe durch, und danach werden wir es anwenden und ein GitHub-Repository erstellen. Selbst wenn man allein programmiert, bringt die Verwendung eines VCS Vorteile.

<span id="repository"></span>
=== Repository ===

Ein Repository (Repo) ist ein Speicherort für den Quellcode eines Projekts. Es enthält alle Dateien und Verzeichnisse des Projekts sowie die gesamte Historie der Änderungen.

Lokal: Ein lokales Repository befindet sich auf deinem Computer.

Remote: Ein Remote-Repository befindet sich auf einem Server (z.B. GitHub (GitHub, 2024), GitLab (GitLab, 2024) oder BitBucket (BitBucket, 2024)).

<span id="commit"></span>
=== Commit ===

Ein Commit ist eine gespeicherte Version des Projekts. Jeder Commit hat eine eindeutige ID und enthält eine Nachricht, die die vorgenommenen Änderungen beschreibt.

<code class="mwt-code" >git commit -m </code>&quot;<code class="mwt-code" >Beschreibung der Änderung</code>&quot;

<span id="branch"></span>
===  Branch ===

Ein Branch ist ein unabhängiger Entwicklungszweig innerhalb des Repositories. Der Hauptbranch heißt meist main.

<code class="mwt-code" >git branch </code>&lt;<code class="mwt-code" >branch-name</code>&gt;

<span id="merge"></span>
=== Merge ===

Merging kombiniert die Änderungen aus einem Branch mit einem anderen. Oft wird ein Feature-Branch in den Hauptbranch gemergt.

<code class="mwt-code" >git merge &lt;branch-name&gt;</code>

<span id="konflikte"></span>

=== Konflikte ===

Konflikte entstehen, wenn Änderungen in verschiedenen Branches kollidieren. Git kann diese nicht automatisch zusammenführen, sodass eine manuelle Auflösung erforderlich ist.

<span id="staging-area"></span>
===  Staging Area ===

Die Staging Area ist eine Zwischenschicht zwischen den Dateien im Arbeitsverzeichnis und dem Repository. Änderungen müssen zur Staging Area hinzugefügt werden, bevor sie committet werden.

<code class="mwt-code" >git add </code>&lt;<code class="mwt-code" >datei-name</code>&gt;

<span id="remote-repository"></span>
=== Remote Repository ===

Ein Remote-Repository ist eine gehostete Version eines Repositories.

* Push''':''' Änderungen von lokal nach remote senden.<p><code class="mwt-code" >git push origin &lt;branch-name&gt;</code></p>

* Pull''':''' Änderungen von remote nach lokal holen.<p><code class="mwt-code" >git pull origin &lt;branch-name&gt;</code></p>

<span id="pull-requests-pr-merge-requests-mr"></span>

=== Pull Requests (PR) / Merge Requests (MR) ===

Ein PR oder MR ist eine Anfrage zur Überprüfung und Integration von Änderungen von einem Branch in einen anderen. In der Praxis ist es üblich, dass ein PR von mehreren Entwicklern überprüft wird bevor dieser gemergt wird. In dieser Lehrveranstaltung muss immer ein PR für jede Änderung des Quellcodes erstellt werden.

<span id="tags"></span>
=== Tags ===

Tags sind feste Referenzpunkte im Verlauf eines Projekts. Sie werden oft verwendet, um Versionen zu markieren (z.B.&nbsp;<code class="mwt-code" >v1.0.0</code>).

<code class="mwt-code" >git tag </code>&lt;<code class="mwt-code" >tag-name</code>&gt;

<span id="weiterführende-links"></span>
=== Weiterführende Links ===

* [https://git-scm.com/doc Offizielle Git-Dokumentation]
* [https://git-scm.com/book/en/v2 Pro Git Buch (kostenlos)]

<span id="github"></span>
== GitHub ==

GitHub (GitHub, 2024) ist eine web-basierte Plattform, welche Git-Repositories hostet und zusätzliche Funktionen für die Zusammenarbeit und das Projektmanagement bietet. Es wird häufig von Entwicklern verwendet, um Quellcode zu speichern, zu verwalten und gemeinsam zu bearbeiten.

<span id="alles-beginnt-mit-einem-repo"></span>
=== Alles beginnt mit einem Repo ===

Gehen wir das Gelernte nun an einem Beispiel durch. Die Erstellung eines Repos in einer der oben genannten Plattformen sollte immer der erste Schritt eines jeden Softwareprojekts sein. In dieser Lehrveranstaltung verwenden wir GitHub.

Bevor wir beginnen, schauen wir uns an wo wir hinwollen. Ein Repo sollte eine gute “README.md“ Datei haben, welche erklärt wie man das Projekt verwenden kann. .md steht dabei für Markdown (Markdown, 2024). Markdown ist ein Markup-Sprache, die zum Formatieren von Dokumenten verwendet wird. Hier ein paar Beispiele von gut strukturierten Repos und READMEs.

* https://github.com/facebook/react/blob/main/README.md
* https://github.com/angular/angular/blob/main/README.md
* https://github.com/vuejs/vue/blob/main/README.md
Gute READMEs enthalten eine Beschreibung, worum es bei dem Softwareprojekt geht, wie man es verwendet, wie man etwas beisteuern kann sowie Lizenzen. Erstellen wir nun ein GitHub Konto und ein erstes Repo. Falls git noch nicht installiert ist, können wir dieser Anleitung folgen: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git.

Konto erstellen:

* Gehe zu [https://github.com/ GitHub] und erstelle ein Konto
Ein Repository erstellen:

* Klicke auf "New" (Neu) oben rechts auf der GitHub-Website
* Gib einen Repository-Namen ein, wähle die Sichtbarkeit (öffentlich oder privat) und füge eine kurze Beschreibung hinzu
* Klicke auf "Create repository"
Git-Repository clonen:

* Öffne die Git-Bash (unter Windows) oder das Terminal (unter macOS/Linux)
* Klone das Repository von GitHub auf deinen lokalen Computer<p><code class="mwt-code">git clone &lt;Repository-URL&gt;</code></p>

Ersetze &lt;Repository-URL&gt; durch die URL des erstellten Repositories, welches auf GitHub zu finden ist.

Dateien hinzufügen und committen:

* Navigiere in das geklonte Verzeichnis:<p><code class="mwt-code">cd &lt;repository-name&gt;</code></p>

* Erstelle eine Datei in dem Verzeichnis und füge die Datei dann zur Staging Area hinzu (beispielsweise eine leere README.md Datei).<p><code class="mwt-code">git add &lt;datei-name&gt;</code></p>

* Commite die Änderungen:<p><code class="mwt-code">git commit -m "Mein erster Commit"</code></p>

Änderungen pushen:

* Sende deine Commits zum Remote-Repository auf GitHub:<p><code class="mwt-code">git push origin &lt;branch-name&gt;</code></p>

Ersetze &lt;branch-name&gt; durch den Namen deines Branches (z.B. main).

Pull Requests erstellen:

Wenn man an einem Projekt mit anderen arbeitest, können folgendermaßen Pull Requests (PR) erstellt werden, um Änderungen vorzuschlagen:

* Gehe auf GitHub zu deinem Repository
* Klicke auf "Pull requests" und dann auf "New pull request"
* Vergleiche die Änderungen und füge eine Beschreibung hinzu
* Klicke auf "Create pull request"
* Nachdem man einen Pull Request erstellt hast kann dieser gemergt werden

<span id="github-und-projektmanagement"></span>

=== GitHub und Projektmanagement ===

GitHub und ähnliche Plattformen geben Entwicklern auch die Möglichkeit Tickets für Teilaufgaben Projektpläne zu erstellen.

<span id="weiterführende-links-1"></span>
=== Weiterführende Links ===

* [https://guides.github.com/ GitHub Guides]: Offizielle Tutorials und Ressourcen von GitHub
* [https://guides.github.com/introduction/flow/ Understanding the GitHub flow]: Den GitHub-Workflow verstehen

<span id="frontend-development-aber-richtig---integrierte-entwicklungsumgebungen"></span>

== Frontend Development, aber richtig! - Integrierte Entwicklungsumgebungen ==

IDEs (Integrated Development Environments) sind umfassende Softwareanwendungen, die Entwicklern Werkzeuge zur Verfügung stellen, um Software zu entwickeln, zu debuggen und zu verwalten. Sie bieten eine integrierte Umgebung, die Folgendes umfasst:

Code Editor: Ein Editor für die Erstellung und Bearbeitung von Quellcode in verschiedenen Programmiersprachen mit Funktionen wie Syntaxhervorhebung und Autovervollständigung.

Build Automation: Tools zur Automatisierung von Build-Prozessen, die das Kompilieren von Code und das Erstellen von ausführbaren Anwendungen erleichtern.

Debugger: Ein Debugger, der Entwicklern hilft, Fehler im Code zu identifizieren, zu überprüfen und zu beheben.

Version Control Integration: Integration mit Versionskontrollsystemen wie Git, um Codeänderungen zu verwalten und zu synchronisieren.

Projektmanagement: Funktionen zur Organisation und Verwaltung von Projekten, einschließlich Datei- und Ordnerstrukturen, Abhängigkeitsverwaltung und Projektvorlagen.

Code Refactoring: Werkzeuge zur Optimierung und Umstrukturierung des Codes, um ihn lesbarer, effizienter und wartbarer zu machen.

Plugin-Unterstützung: Die Möglichkeit, Funktionalitäten durch Plugins oder Erweiterungen zu erweitern, die spezielle Anforderungen oder Integrationen bieten können.

Beispiele für populäre IDEs sind:

* Visual Studio Code (Microsoft, 2024): Eine leichte und leistungsstarke Code-Editor-IDE von Microsoft, die eine Vielzahl von Sprachen und Plattformen unterstützt.
* IntelliJ IDEA (JetBrains, 2024): Eine Java-IDE von JetBrains, die auch Unterstützung für andere Sprachen bietet und für ihre intelligenten Code-Refactoring-Funktionen bekannt ist.
* Eclipse (Eclipse Foundation, 2024): Eine plattformübergreifende IDE, die ursprünglich für Java entwickelt wurde, aber durch Plugins erweitert werden kann, um andere Sprachen zu unterstützen.
Diese IDEs erleichtern Entwicklern das Arbeiten, indem sie eine zentrale und effiziente Umgebung bieten, um Code zu schreiben, zu testen und zu verwalten.

<span id="visual-studio-code-vscode"></span>
=== Visual Studio Code (VSCode) ===

Entwickler haben oft Präferenzen, wenn es darum geht, welche IDE am intuitivsten ist. Wir werden die Beispiele anhand von VSCode durchgehen.

<span id="visual-studio-code-herunterladen-und-installieren"></span>
==== Visual Studio Code herunterladen und installieren ====

Download''':''' Gehe zur [https://code.visualstudio.com/ VSCode-Website] und lade die Installationsdatei für dein Betriebssystem herunter.

Installation''':'''

* Unter Windows: Öffne die heruntergeladene Datei und folge den Installationsanweisungen
* Unter MacOS: Ziehe die heruntergeladene VSCode-App in deinen Applications-Ordner.
* Unter Linux: Installiere VSCode über den Paketmanager deiner Distribution.

<span id="erweiterungen-installieren"></span>
==== Erweiterungen installieren ====

Man muss sich das Leben nicht zu schwer machen. Es gibt viele nützliche Erweiterungen, die dabei helfen lesbaren, korrekten und effizienten Programmiercode zu schreiben.

Öffne VSCode nach der Installation, um einige nützliche Erweiterungen zu installieren.

Gehe zum &quot;Extensions&quot;-Tab (Symbol auf der linken Seitenleiste) und suche nach den folgenden Erweiterungen:

* ESLint (OpenJS Foundation, 2024): Ein Linter für JavaScript, der Syntaxfehler und Best Practices prüft.
* Prettier - Code formatter (Prettier, 2024): Ein Tool zur automatischen Codeformatierung.
Klicke auf &quot;Install&quot;, um die Erweiterungen hinzuzufügen.

<span id="hello-world"></span>
==== Hello, World ====

Erstelle nun einen neuen Ordner auf deinem Computer, um deine JavaScript-Datei zu speichern. Zum Beispiel: hello-world-js.

* Öffne VS Code
* Gehe zu Datei &gt; Ordner öffnen.. und wähle das zuvor erstellte Verzeichnis hello-world-js aus
* Klicke im Explorer-Fenster von VS Code (links) auf das Symbol ''Neue Datei''.
* Nenne die Datei ''index.html''
* Füge den folgenden HTML-Code in die ''index.html'' Datei ein
 &lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &nbsp; &nbsp;&lt;head&gt;
 &nbsp; &nbsp; &nbsp; &lt;meta charset="UTF-8"&gt;
 &nbsp; &nbsp; &nbsp; &lt;metaname="viewport"content="width=device-width, initial-scale=1.0"&gt;
 &nbsp; &nbsp; &nbsp; &lt;title&gt;Hello World&lt;/title&gt;
 &nbsp; &nbsp;&lt;/head&gt;
 &nbsp; &nbsp;&lt;body&gt;
 &nbsp; &nbsp; &nbsp; &lt;h1&gt;Hello World&lt;/h1&gt;
 &nbsp; &nbsp; &nbsp; &lt;script&gt;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// JavaScript Code
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log('Hello, World!');
 &nbsp; &nbsp; &nbsp; &lt;/script&gt;
 &nbsp; &nbsp;&lt;/body&gt;
 &lt;/html&gt;
* Speichere die ''index.html'' Datei (Strg+S oder Datei &gt; Speichern)
* Navigiere zu deinem Projektverzeichnis und öffne die ''index.html'' Datei mit einem Webbrowser (z.B. Chrome, Firefox, Safari)
* Öffne die Entwicklerwerkzeuge des Browsers. In Chrome und Firefox kann man dies mit der rechten Maustaste auf der Seite tun und dann auf „Untersuchen“ oder „Element untersuchen“klicken
* Gehe zum Tab „Konsole”
„Hello, World!“ sollte in der Konsole zu sehen sein

[[File:media/image1.png|624x361px]]

[[File:media/image2.png|624x361px]]

<span id="weiterführende-links-2"></span>

==== Weiterführende Links ====

* [https://code.visualstudio.com/docs Visual Studio Code Dokumentation]
* [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLint Extension]
* [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier Extension]

<span id="fallbeispiel-from-peer-review-to-crowd-review"></span>
= Fallbeispiel: From Peer Review to Crowd Review =

Wir werden die Frontend Development und JavaScript Konzepte anhand eines Fallbeispiels durchgehen. Dieses Beispiel wird sich durch den gesamten Kurs ziehen und die Konzepte werden daran veranschaulicht.

Der Peer-Review-Prozess ist entscheidend für die Qualitätssicherung wissenschaftlicher Publikationen. Autoren reichen Manuskripte bei Zeitschriften ein, wo es zunächst von Editoren geprüft wird. Wenn es thematisch und formal passt, wird es an Experten (Gutachter) weitergeleitet. Diese bewerten die Arbeit hinsichtlich ihrer methodischen Korrektheit, Bedeutung, Originalität und Klarheit und erstellen Gutachten mit Empfehlungen zur Akzeptanz, Überarbeitung oder Ablehnung. Die Autoren erhält Feedback, überarbeiten das Manuskript gegebenenfalls und reichen es erneut ein. Nach mehreren Runden von Überarbeitungen und Begutachtungen treffen die Editoren eine endgültige Entscheidung, und die Arbeit wird veröffentlicht. Dieser Prozess ist doppel-blind oder doppel-anonym. Dies bedeutet, dass sowohl die Autoren als auch die Gutachter anonym bleiben. Weder die Autoren wissen, wer die Gutachter sind, noch wissen die Gutachter, wer die Autoren sind. Dies soll sicherstellen, dass die Bewertung der Arbeit objektiv und frei von Vorurteilen erfolgt.

Dieser Prozess hat mehrere Probleme. Gutachter können unbewusst voreingenommen sein, was zu unfairen Bewertungen führt. Die Anonymität der Begutachtungen kann Verantwortlichkeit verringern und Interessenkonflikte verschleiern. Der Prozess ist oft zeitaufwendig, was die Veröffentlichung verzögert, und die Qualität der Gutachten kann stark variieren. Gutachter sind häufig überlastet, was die Schnelligkeit und Qualität der Begutachtungen beeinträchtigten kann. Zudem besteht ein Publikationsbias zugunsten positiver Ergebnisse, und die hohen Kosten traditioneller Zeitschriften schränken den Zugang zu Forschungsergebnissen ein.

Ein Beispiel, welches ich gerne zur Veranschaulichung bringe, ist der Fall von drei MIT-Studenten, die 2015 erfolgreich gefälschte Forschungspapiere bei wissenschaftlichen Zeitschriften einreichten. Diese Papiere, die methodische Fehler und wissenschaftlich unsinnige Inhalte enthielten, wurden von den Gutachtern akzeptiert. Lest euch das Beispiel durch: https://news.mit.edu/2015/how-three-mit-students-fooled-scientific-journals-0414

Stellen wir uns also folgende Anwendung vor: Ein webbasiertes System zur transparenten Veröffentlichung, Begutachtung und Diskussion wissenschaftlicher Publikationen. Sie bietet eine Plattform, auf der Autoren ihre Forschungsarbeiten einreichen, Gutachter diese begutachten und Leser über die veröffentlichten Arbeiten diskutieren können. Der Prozess ist durch verschiedene Rollen (Autor, Gutachter, Leser) und klare Workflow-Schritte strukturiert.

In so einem System könnte man sich folgendes Datenmodell vorstellen:

Benutzer''':''' Enthält alle Benutzer des Systems und speichert deren Informationen wie Benutzername, E-Mail, Passwort (gehasht) und Rolle (Autor, Gutachter, Leser) ab.

Publikationen: Speichert Informationen zu den wissenschaftlichen Publikationen wie Titel, Abstract, Inhalt, Autor und den aktuellen Status der Veröffentlichung ab.

Gutachten: Enthält die Gutachten, die von Gutachtern verfasst wurden, und Empfehlung (Akzeptieren, Kleine Überarbeitung, Große Überarbeitung, Ablehnen).

Kommentare: Ermöglicht Diskussionen und Kommentare zu den Publikationen durch verschiedene Benutzer.

GutachterZuweisungen: Verknüpft Gutachter mit den Publikationen, die sie bewerten sollen.

Wir werden in diesem Studienheft Schritt für Schritt die Benutzeroberfläche einer solcher Anwendung erstellen und optimieren.

<span id="modernes-frontend-development"></span>
= Modernes Frontend Development =

Beim Start eines Frontend-Projekts beginnt man mit dem Einrichten der Entwicklungsumgebung. Visual Studio Code wird installiert und konfiguriert, um eine effiziente Programmierumgebung zu bieten. Ein GitHub-Repository wird erstellt, um Versionskontrolle zu nutzen, und auf den lokalen Rechner geklont. Das Projekt wird in VSCode geöffnet und es werden hilfreiche Erweiterungen installiert.

Der nächste Schritt ist die Planung der Benutzeroberfläche. Wireframes und Mockups werden erstellt, um die Hauptbildschirme der Anwendung zu skizzieren, wie die Startseite, Publikationsübersicht und Detailansichten. Design-Tools wie Figma (Figma, 2024) werden verwendet, um die Benutzeroberflächen und deren Interaktionen detailliert zu entwerfen.

Für die Application Programming Interface (API)-Definition (auf Deutsch Programmierschnittstelle) werden die benötigten Endpunkte festgelegt, die zur Kommunikation mit dem Server genutzt werden. Eine API-Spezifikation kann beispielsweise mit OpenAPI (OpenAPI, 2024) erstellt werden, die die Endpunkte, Parameter und Rückgabewerte beschreibt. Diese Spezifikation wird in Tools wie Swagger UI (Swagger, 2024) geladen, um eine interaktive Dokumentation zu erstellen und die API zu testen.

Abschließend wird ein Frontend-Framework ausgewählt, das den Anforderungen entspricht. Beliebte Optionen wie React (Meta Open Source, 2024), Angular (Google, 2024) oder Vue.js (You, 2024) bieten umfassende Funktionalitäten zur Unterstützung der Anwendung. Das gewählte Framework wird eingerichtet, indem ein neues Projekt erstellt und konfiguriert wird, um die Entwicklungsarbeit zu beginnen.

JavaScript wird oft geschätzt, weil es vielseitig und zentral für die Webentwicklung ist, mit vielen nützlichen Bibliotheken und ständiger Weiterentwicklung. Die Sprache wird jedoch auch kritisiert wegen seiner Inkonsistenzen, untypisierten Natur und Sicherheitsproblemen, sowie wegen der Komplexität der zahlreichen Frameworks und Tools.

HTML5, CSS3 und JavaScript arbeiten zusammen, um moderne Webseiten zu gestalten. HTML5 definiert die grundlegende Struktur und den Inhalt der Webseite. CSS3 kümmert sich um das visuelle Design und Layout, wie Farben, Schriftarten und Abstände. JavaScript ermöglicht interaktive und dynamische Funktionen, indem es auf Benutzeraktionen reagiert und Inhalte in Echtzeit aktualisiert. Zusammen bieten diese Technologien die Basis für ansprechende und funktionale Webanwendungen.

Dies wäre kein vollständiges Frontend Development Studienheft ohne die Erwähnung von TypeScript (Microsoft, 2024). Wir werden uns auf JavaScript konzentrieren, in der Praxis wird jedoch oft TypeScript anstelle von JavaScript verwendet. Einer der größten Kritikpunkte von JavaScript ist, wie oben erwähnt, die untypisierte Natur. Ein kurzer Ausflug: In untypisierten Sprachen wie JavaScript können Variablen Werte unterschiedlichen Typs annehmen, und Typprüfungen erfolgen erst zur Laufzeit. Das bedeutet, dass Variablen flexibel sind, aber Typfehler erst beim Ausführen des Programms entdeckt werden können. In typisierten Sprachen wie TypeScript, Java oder C#, müssen Typen bereits zur Entwicklungszeit festgelegt werden, was eine frühzeitige Fehlererkennung und strukturierteren Code ermöglicht. Diese Sprachen überprüfen die Typen entweder zur Kompilierzeit oder bei der Programmausführung, was zu robusterem und weniger fehleranfälligem Code führt. Weitere untypisierte Sprachen sind Python, Ruby, PHP und Perl.

TypeScript ist eine Erweiterung von JavaScript, die statische Typisierung bietet, wodurch viele Fehler bereits zur Entwicklungszeit erkannt werden können. JavaScript ist flexibler und wird direkt von Browsern ausgeführt, erfordert jedoch Laufzeitprüfungen für Typfehler. TypeScript bietet zusätzliche Funktionen und eine robustere Entwicklungsumgebung, während JavaScript aufgrund seiner Flexibilität und breiten Unterstützung bevorzugt wird.

<span id="html-html5-für-die-strukturierung-von-webseiten"></span>
== HTML, HTML5 für die Strukturierung von Webseiten ==

HTML (Hypertext Markup Language) und HTML5 sind beide Markup-Sprachen zur Strukturierung von Webseiten. HTML5 bringt einige Verbesserungen gegenüber HTML mit sich.

HTML ist die grundlegende Sprache für die Erstellung von Webseiten und definiert, wie Inhalte wie Texte, Links, Bilder und Listen strukturiert werden. Es bietet grundlegende Elemente, die es ermöglichen, einfache und funktionale Webseiten zu erstellen.

Elemente sind beispielsweise:

* &lt;h1&gt; bis &lt;h6&gt; für Überschriften
* &lt;p&gt; für Absätze
* &lt;a&gt; für Hyperlinks
* &lt;img&gt; für Bilder
HTML5 ist die neuere Version von HTML und baut auf HTML auf. Es bietet neue semantische Tags wie &lt;header&gt;, &lt;footer&gt;, &lt;section&gt;, und &lt;article&gt;, die helfen, Webseiten besser zu strukturieren und den Inhalt klarer zu gliedern. HTML5 unterstützt auch erweiterte Multimedia-Elemente wie &lt;video&gt; und &lt;audio&gt;, die es einfacher machen, Medieninhalte ohne zusätzliche Plugins einzubinden. Zudem bringt es Verbesserungen bei der Formularverarbeitung und der Unterstützung für moderne Webanwendungen, einschließlich APIs für lokale Speicherung und grafische Darstellungen.

Heutzutage ist HTML5 der Standard für die Webentwicklung.

Viel genützte Tags sind:

* &lt;header&gt;: Definiert den Kopfbereich einer Seite oder eines Abschnitts
* &lt;nav&gt;: Navigationslinks
* &lt;section&gt;: Markiert thematische Abschnitte innerhalb des Dokuments
* &lt;article&gt;: Stellt eigenständige Inhalte dar, die unabhängig wiederverwendet werden können
* &lt;footer&gt;: Gibt den Fußbereich einer Seite oder eines Abschnitts an
* &lt;aside&gt;: Definiert Inhalte, die nicht direkt zum Hauptinhalt gehören (z.B. Seitenleisten)
* &lt;main&gt;: Markiert den Hauptinhalt der Seite
* &lt;figure&gt; und &lt;figcaption&gt;: Dienen zur Darstellung von Bildern und zugehörigen Beschreibungen
* &lt;video&gt;: Einbetten von Videos
* &lt;audio&gt;: Einbetten von Audiodateien
* &lt;progress&gt;: Zeigt den Fortschritt eines laufenden Prozesses an.
In unserem Beispiel von oben haben wir einige dieser Tags verwendet. Nun fügen wir etwas CSS5 hinzu.

<span id="css-css3-für-das-styling-von-webseiten"></span>
== &nbsp;CSS, CSS3 für das Styling von Webseiten ==

CSS (Cascading Style Sheets) ist die grundlegende Styling-Sprache für Webseiten. CSS3 ist die aktuelle Version, die erweiterte Funktionen für modernes Layout und Design bietet.

<span id="css-konstrukte"></span>
=== CSS-Konstrukte ===

Selektoren: Bestimmen, welche HTML-Elemente gestaltet werden. Beispiel: p für alle Absätze, .class für Elemente mit der Klasse „class“, #id für das Element mit der ID „id“

Eigenschaften: Definieren, welche Stile angewendet werden. Beispiel: „color“ für die Textfarbe, „font-size“ für die Schriftgröße

Werte: Geben die spezifischen Einstellungen für die Eigenschaften an. Beispiel: „color: red“; für rote Textfarbe, „font-size: 16px;“ für eine Schriftgröße von 16 Pixel

Box-Modell: Beschreibt das Layout von Elementen.

Beispiele:

* „margin: 10px“, für den äußeren Abstand
* „border: 1px solid black“ für einen schwarzen Rand, padding: 5px; für den inneren Abstand, width: 100px; für die Breite des Inhaltsbereichs
Positionierung: Bestimmt, wie Elemente auf der Seite angeordnet werden. Beispiel: “position: relative;“ für relative Positionierung, „position: absolute;“ für absolute Positionierung, „top: 10px; left: 20px;“ für die Platzierung des Elements.

CSS3 führt eine Reihe neuer Konstrukte und Module ein, die das Design und Layout von Webseiten erweitern:

Flexbox: Ein Layout-Modul für flexible und anpassungsfähige Layouts. Beispiel: display: flex; auf einem Container, um dessen Kinder flexibel zu gestalten.

Grid Layout: Ermöglicht komplexe, zweidimensionale Layouts mit Zeilen und Spalten. Beispiel: display: grid;für ein Gitter-Layout.

Media Queries: Passen das Design je nach Bildschirmgröße oder Gerätetyp an. Beispiel: @media (max-width: 600px) { /* Styles für kleine Bildschirme */ }.

Animationen und Übergänge: Erlauben das Erstellen von dynamischen Effekten. Beispiel: @keyframes für Animationen und transition: all 0.3s ease; für sanfte Übergänge zwischen Zuständen.

Transform: Ermöglicht das Skalieren, Drehen oder Verschieben von Elementen. Beispiel: transform: rotate(45deg); zum Drehen eines Elements.

Gradienten: Erstellen von Farbverläufen. Beispiel: background: linear-gradient(to right, red, yellow);für einen Verlauf von Rot nach Gelb.

Hier das oben erwähnte Beispiel etwas aufgehübscht. Öffnen wir das Beispiel nun wieder in einem Browser und sehen es uns an.<ppre>
 &lt;!DOCTYPE html&gt;
 
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;From Peer Review to Crowd Review&lt;/title&gt;
 &lt;style&gt;
 &nbsp; body {
 &nbsp; &nbsp; font-family: Arial, sans-serif;
 &nbsp; &nbsp; background: linear-gradient(to right, #342fc9, #2da327);
 &nbsp; &nbsp; color: #333;
 &nbsp; &nbsp; text-align: center;
 &nbsp; &nbsp; margin: 0;
 &nbsp; &nbsp; padding: 0;
 &nbsp; }
 
 &nbsp; h1 {
 
 &nbsp; &nbsp; color: #007bff;
 &nbsp; &nbsp; font-size: 3em;
 &nbsp; &nbsp; margin-top: 20vh;
 &nbsp; &nbsp; transition: color 0.3s ease;
 &nbsp; }
 
 &nbsp; h1:hover {
 
 &nbsp; &nbsp; color: #0056b3;
 &nbsp; &nbsp; transform: scale(1.1);
 &nbsp; }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt; From Peer Review to Crowd Review &lt;/h1&gt;
 
 &lt;script&gt;
 
 // JavaScript Code
 console.log('Hello World!');
 &lt;/script&gt;
 
 &lt;/body&gt;
 
 &lt;/html&gt;

* CSS3 wurde im &lt;style&gt;-Tag hinzugefügt
* Der Hintergrund der Seite verwendet einen linearen Farbverlauf.
* Der Text der Überschrift &lt;h1&gt; erhält eine Farbe und eine Schriftgröße, und eine Übergangsanimation wird hinzugefügt, die beim Hover-Effekt die Farbe ändert und den Text leicht vergrößert.
[[File:media/image3.png|624x363px]]

<span id="javascript-syntax-variablen-datentypen-und-operatoren"></span>

== JavaScript-Syntax, Variablen, Datentypen und Operatoren ==

Sehen wir uns nun die einzelnen Konstrukte der Sprache JavaScript genauer an.

<span id="variablen"></span>
=== Variablen ===

Deklaration''':''' Variablen sind Container zum Speichern von Datenwerten. In JavaScript können sie mit den Schlüsselwörtern var, let und const deklariert werden.

* var: Wird verwendet, um eine Variable mit Funktions-Scope zu deklarieren. Variablen, die mit var deklariert wurden, können innerhalb ihrer Funktion neu deklariert und aktualisiert werden.
* let: Wird verwendet, um eine Variable mit Block-Scope zu deklarieren. Variablen, die mit let deklariert wurden, können innerhalb ihres Blocks aktualisiert, aber nicht neu deklariert werden.
* const: Wird verwendet, um eine Konstante zu deklarieren, die nicht neu zugewiesen werden kann. Konstanten haben ebenfalls Block-Scope.
Beispiele:

<code class="mwt-code" >var alterBenutzername = 'neo_the_one';</code>

<code class="mwt-code" >let benutzername = 'alice_wonderland';</code>

<code class="mwt-code" >const email = 'alice@example.com';</code>

<code class="mwt-code" >let rolle = 'Autor';</code>

<span id="datentypen"></span>
=== Datentypen ===

Primitive Typen: Dazu gehören Number, String, Boolean, Null, Undefined und Symbol.

Komplexe Typen: Dazu gehören Objekte und Arrays.

Beispiele für primitive Typen sind:

Number:

<code class="mwt-code" >let zahl = 42;</code>

String:

<code class="mwt-code" >let text = </code>&quot;<code class="mwt-code" >Hello World</code>&quot;<code class="mwt-code" >;</code>

Boolean:

<code class="mwt-code" >let wahrOderFalsch = true;</code>

Null:

<code class="mwt-code" >let leererWert = null;</code>

Undefined:

<code class="mwt-code" >let undefiniert;</code>

Symbol:

<code class="mwt-code" >let symbol = Symbol(</code>&quot;<code class="mwt-code" >einzigartig</code>&quot;<code class="mwt-code" >);</code>

<span id="operatoren"></span>
=== Operatoren ===

Vergleichsoperatoren: Werden verwendet, um zwei Werte zu vergleichen. Die gängigen Vergleichsoperatoren sind ==, ===, !=, !==, &lt;, &gt;, &lt;=, &gt;=.

'''Gleich (==)''': Vergleicht zwei Werte, wobei Typkonvertierungen durchgeführt werden, wenn nötig. Beispiel: 42 == '42'ergibt true, weil '5' zu 5 konvertiert wird.

'''Strikte Gleichheit (===)''': Vergleicht zwei Werte ohne Typkonvertierungen. Beide Werte müssen denselben Typ und Wert haben. Beispiel: 42 === '42' ergibt false, da die Typen unterschiedlich sind.

'''Ungleich (!=)''': Vergleicht zwei Werte, wobei Typkonvertierungen durchgeführt werden, wenn nötig. Beispiel: 42 != '42'ergibt false, da '42' zu 42 konvertiert wird.

'''Strikte Ungleichheit (!==)''': Vergleicht zwei Werte ohne Typkonvertierungen. Beide Werte müssen entweder im Typ oder im Wert unterschiedlich sein. Beispiel: 42 !== '42' ergibt true, da die Typen unterschiedlich sind.

'''Größer als (&gt;)''': Überprüft, ob der linke Wert größer als der rechte Wert ist. Beispiel: 42 &gt; 23 ergibt true.

'''Kleiner als (&lt;)''': Überprüft, ob der linke Wert kleiner als der rechte Wert ist. Beispiel: 23 &lt; 42 ergibt true.

'''Größer oder gleich (&gt;=)''': Überprüft, ob der linke Wert größer oder gleich dem rechten Wert ist. Beispiel: 42 &gt;= 42 ergibt true, und 42 &gt;= 23 ergibt true.

'''Kleiner oder gleich (&lt;=)''': Überprüft, ob der linke Wert kleiner oder gleich dem rechten Wert ist. Beispiel: 23 &lt;= 42 ergibt true, und 42 &lt;= 42 ergibt true.

In unserem Fallbeispiel könnten wir Operatoren beispielsweise folgendermaßen verwenden:<div><div></div></div>
 if (publikation.status === 'eingereicht') {
    console.log('Die Publikation wurde eingereicht und wartet auf Begutachtung.');
 }

=== Funktionen ===

'''Funktion''': Ein Block von Code, der entworfen wurde, um eine bestimmte Aufgabe auszuführen. Funktionen können Parameter (Eingaben) annehmen und ein Ergebnis zurückgeben.
 function neuerBenutzer(benutzername, email, passwort, rolle) {

:return {

:benutzername: benutzername,

:email: email,

:passwort: passwort,

:rolle: rolle
 };

}
let neuerAutor = neuerBenutzer('neo_the_one', 'neo@example.com', 'hashed_password2', 'Autor');

<span id="kontrollstrukturen"></span>

=== Kontrollstrukturen ===

'''Bedingte Anweisungen''': Dazu gehören if, else if und else, die verwendet werden, um Code basierend auf spezifischen Bedingungen auszuführen.

'''Schleifen''': Dazu gehören for, while und do...while, die verwendet werden, um Codeblöcke wiederholt auszuführen.
 <code class="mwt-code">if (neuerAutor.rolle === 'Autor') {</code>

<code class="mwt-code">   console.log('Willkommen, Autor!');</code>

<code class="mwt-code">}</code>

<code class="mwt-code">let gutachtenListe = [</code>

<code class="mwt-code">{ empfehlung: 'Akzeptieren', kommentar: 'Sehr gute Arbeit.' },</code>

<code class="mwt-code">{ empfehlung: 'Kleine Überarbeitung', kommentar: 'Einige kleine Korrekturen erforderlich.' }</code>

<code class="mwt-code">];</code>

<code class="mwt-code">for (let i = 0; i </code>&lt;<code class="mwt-code"> gutachtenListe.length; i++) {</code>

<code class="mwt-code">   console.log(gutachtenListe[i].empfehlung);</code>

<code class="mwt-code">}</code>

<span id="objekte-und-arrays"></span>

=== Objekte und Arrays ===

'''Objekte''': Sammlungen von Schlüssel-Wert-Paaren, wobei die Schlüssel Zeichenketten oder Symbole und die Werte beliebige Datentypen sein können.

'''Arrays''': Geordnete Listen von Werten, auf die über ihren Index zugegriffen wird.

Beispiel einen Objektes:

<code class="mwt-code">let kommentar = {</code>

<code class="mwt-code">   benutzername: 'neo_the_one',</code>

<code class="mwt-code">   kommentar: 'Sehr interessante Publikation!',</code>

<code class="mwt-code">   datum: '2024-08-10'</code>

<code class="mwt-code">};</code>

Beispiel eines Arrays:

<code class="mwt-code">let wissenschaftlichePublikationen = [</code>"<code class="mwt-code">Deep Learning in AI</code>"<code class="mwt-code">, </code>"<code class="mwt-code">Quantum Computing Advances</code>"<code class="mwt-code">, </code>"<code class="mwt-code">Blockchain Technology Overview</code>"<code class="mwt-code">, </code>"<code class="mwt-code">Genomics and CRISPR</code>"<code class="mwt-code">, </code>"<code class="mwt-code">Sustainable Energy Solutions</code>"<code class="mwt-code">];</code>

In JavaScript greift man auf einzelne Elemente folgendermaßen zu:

<code class="mwt-code">let erstePublikation = wissenschaftlichePublikationen[0];</code>

In diesem Fall ist erstePublikation gleich "Deep Learning in AI".

JavaScript-Arrays sind etwas flexibler als Arrays in anderen Programmiersprachen. Sie sind dynamisch und können wachsen oder schrumpfen, ohne eine feste Größe zu haben. Sie erlauben auch das Speichern von Elementen unterschiedlicher Typen, wie Zahlen, Strings und Objekte. Das macht sie flexibler im Vergleich zu Arrays in Sprachen wie Java, die eine feste Größe haben und nur Elemente eines einzigen Datentyps enthalten können. Zudem bieten JavaScript-Arrays zahlreiche eingebaute Methoden zur Manipulation von Daten, wie push, pop und shift, was sie vielseitiger und einfacher zu handhaben macht.

<span id="ereignisse"></span>

=== Ereignisse ===

'''Ereignis''': Eine Aktion welche im System erkannt und darauf reagiert wird. Beispiele sind Mausklicks, Tastatureingaben oder das Laden einer Seite.

Mausklick:

<code class="mwt-code" >document.getElementById(</code>&quot;<code class="mwt-code" >zeigePublikation</code>&quot;<code class="mwt-code" >).addEventListener(</code>&quot;<code class="mwt-code" >click</code>&quot;<code class="mwt-code" >, function() {</code>

<code class="mwt-code" >alert(</code>&quot;<code class="mwt-code" >Publikation: Deep Learning in AI</code>&quot;<code class="mwt-code" >);</code>

<code class="mwt-code" >});</code>

Mouseover (Maus über ein Element bewegen):

<code class="mwt-code" >document.getElementById(</code>&quot;<code class="mwt-code" >zeigePublikation</code>&quot;<code class="mwt-code" >).addEventListener(</code>&quot;<code class="mwt-code" >mouseover</code>&quot;<code class="mwt-code" >, function() {</code>

<code class="mwt-code" >console.log(</code>&quot;<code class="mwt-code" >Maus ist über dem Publikationsbereich!</code>&quot;<code class="mwt-code" >);</code>

<code class="mwt-code" >});</code>

Keydown (Tastendruck):

<code class="mwt-code" >document.addEventListener(</code>&quot;<code class="mwt-code" >keydown</code>&quot;<code class="mwt-code" >, function(event) {</code>

<code class="mwt-code" >console.log(</code>&quot;<code class="mwt-code" >Gedrückte Taste: </code>&quot;<code class="mwt-code" > + event.key);</code>

<code class="mwt-code" >});</code>

Seitenladen (DOMContentLoaded):

<code class="mwt-code" >document.addEventListener(</code>&quot;<code class="mwt-code" >DOMContentLoaded</code>&quot;<code class="mwt-code" >, function() {</code>

<code class="mwt-code" >console.log(</code>&quot;<code class="mwt-code" >Die Seite ist vollständig geladen!</code>&quot;<code class="mwt-code" >);</code>

<code class="mwt-code" >});</code>

Formular absenden:

<code class="mwt-code" >document.getElementById(</code>&quot;<code class="mwt-code" >publikationsFormular</code>&quot;<code class="mwt-code" >).addEventListener(</code>&quot;<code class="mwt-code" >submit</code>&quot;<code class="mwt-code" >, function(event) {</code>

<code class="mwt-code" >event.preventDefault(); // Verhindert das Standardverhalten</code>

<code class="mwt-code" >alert(</code>&quot;<code class="mwt-code" >Formular zur Publikation wurde abgesendet!</code>&quot;<code class="mwt-code" >);</code>

<code class="mwt-code" >});</code>

<span id="fehlerbehandlung"></span>
=== Fehlerbehandlung ===

'''Fehlerbehandlung''': Verwendung von try, catch, finally und throw, um Fehler zu erkennen und zu verarbeiten.
 try {
let neuerGutachter = neuerBenutzer('alice_wonderland', 'alice@example.com', 'hashed_password3', 'Gutachter');
 if (!neuerGutachter.email.includes('@')) {
    throw new Error('Ungültige E-Mail-Adresse');
    } 
 } catch (error) {
    console.log(error.message); }
<span id="module"></span>

=== Module ===

'''Module''': Erlauben es, Code in separate Dateien zu unterteilen. Jedes Modul kann Werte oder Funktionen exportieren und in anderen Dateien importieren.
 <code class="mwt-code">// benutzer.js
 
 export function neuerBenutzer(benutzername, email, passwort, rolle) {</code>

<code class="mwt-code">return {</code>

<code class="mwt-code">   benutzername: benutzername,</code>

<code class="mwt-code">   email: email,</code>

<code class="mwt-code">   passwort: passwort,</code>

<code class="mwt-code">   rolle: rolle</code>

<code class="mwt-code">      };</code>

<code class="mwt-code">}</code>

<code class="mwt-code">// main.js</code>

<code class="mwt-code">import { neuerBenutzer } from './benutzer.js';</code>

<code class="mwt-code">let neuerLeser = neuerBenutzer('neo_the_one', 'neo@example.com', 'hashed_password4', 'Leser');</code>

<code class="mwt-code">console.log(neuerLeser);</code>

<span id="dom-dom-dom"></span>

= DOM, DOM, DOM =

Der&nbsp;'''Document Object Model (DOM)''' ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es repräsentiert die Struktur eines Dokuments als eine Baumstruktur, wobei jede HTML- oder XML-Komponente (wie Tags, Attribute und Text) als Knoten dargestellt wird. Mit dem DOM können Sie die Struktur, den Inhalt und das Styling eines Dokuments dynamisch ändern.

Kommen wir zurück zu unserem Fallbeispiel. Auf unserer Webseite möchten wir Informationen zu Publikationen anzeigen und es den Benutzern ermöglichen, Kommentare zu hinterlassen.

Ein einfaches HTML-Dokument für unser System könnte wie folgt aussehen:
 &lt;<code class="mwt-code">!DOCTYPE html</code>&gt;
&lt;<code class="mwt-code">html lang=</code>"<code class="mwt-code">de</code>"&gt;
&lt;<code class="mwt-code">head</code>&gt;
&lt;<code class="mwt-code">meta charset=</code>"<code class="mwt-code">UTF-8</code>"&gt;

&lt;<code class="mwt-code">title</code>&gt;<code class="mwt-code">Publikationen</code>&lt;<code class="mwt-code">/title</code>&gt;

&lt;<code class="mwt-code">/head</code>&gt;

&lt;<code class="mwt-code">body</code>&gt;

 &lt;<code class="mwt-code">h1</code>&gt;<code class="mwt-code">Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code">/h1</code>&gt;

 &lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">publikation-container</code>"&gt;

 &lt;<code class="mwt-code">h2 id=</code>"<code class="mwt-code">publikation-titel</code>"&gt;<code class="mwt-code">Gibt es die Matrix wirklich?</code>&lt;<code class="mwt-code">/h2</code>&gt;

 &lt;<code class="mwt-code">p id=</code>"<code class="mwt-code">publikation-abstract</code>"&gt;<code class="mwt-code">Eine umfassende Analyse der Frage, ob wir in einer simulierten Realität leben.</code>&lt;<code class="mwt-code">/p</code>&gt;

 &lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">kommentare</code>"&gt;

 &lt;<code class="mwt-code">h3</code>&gt;<code class="mwt-code">Kommentare</code>&lt;<code class="mwt-code">/h3</code>&gt;

 &lt;<code class="mwt-code">!-- Kommentare werden hier hinzugefügt --</code>&gt;

 &lt;<code class="mwt-code">/div</code>&gt;

 &lt;<code class="mwt-code">textarea id=</code>"<code class="mwt-code">neuer-kommentar</code>"<code class="mwt-code"> placeholder=</code>"<code class="mwt-code">Fügen Sie einen Kommentar hinzu...</code>"&gt;&lt;<code class="mwt-code">/textarea</code>&gt;

 &lt;<code class="mwt-code">button id=</code>"<code class="mwt-code">kommentar-hinzufuegen</code>"&gt;<code class="mwt-code">Kommentar hinzufügen</code>&lt;<code class="mwt-code">/button</code>&gt;

 &lt;<code class="mwt-code">/div</code>&gt;

 &lt;<code class="mwt-code">script src=</code>"<code class="mwt-code">app.js</code>"&gt;&lt;<code class="mwt-code">/script</code>&gt;

&lt;<code class="mwt-code">/body</code>&gt;

&lt;<code class="mwt-code">/html</code>&gt;


[[File:media/image4.png|624x362px]]

In diesem Beispiel haben wir HTML-Elemente wie h1, h2, p, div, textarea und button, die verschiedene Teile unserer Publikationsseite darstellen. Das DOM repräsentiert diese Elemente als Knoten in einem Baum.

In unserem JavaScript-Code können wir auf diese DOM-Elemente zugreifen und sie manipulieren. Erstelle in demselben Ordner eine neue Datei app.js. In dieser Datei schreiben wir den JavaScript Code. Auf diesen wird in dem obigen Beispiel mit &lt;script src=“app.js“&gt; zugegriffen. Manipulieren wir nun die HTML Datei mit JavaScript code. Hier sind einige Beispiele:
 <code class="mwt-code">// Zugriff auf DOM-Elemente</code>

<code class="mwt-code">let titelElement = document.getElementById('publikation-titel');</code>

<code class="mwt-code">let abstractElement = document.getElementById('publikation-abstract');</code>

<code class="mwt-code">let kommentareElement = document.getElementById('kommentare');</code>

<code class="mwt-code">let textareaElement = document.getElementById('neuer-kommentar');</code>

<code class="mwt-code">let buttonElement = document.getElementById('kommentar-hinzufuegen');</code>

<code class="mwt-code">// Hinzufügen eines Kommentars</code>

<code class="mwt-code">buttonElement.addEventListener('click', () =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">let neuerKommentar = textareaElement.value;</code>

<code class="mwt-code">if (neuerKommentar) {</code>

<code class="mwt-code">   let kommentarElement = document.createElement('p');</code>

<code class="mwt-code">   kommentarElement.textContent = neuerKommentar;</code>

<code class="mwt-code">   kommentareElement.appendChild(kommentarElement);</code>

<code class="mwt-code">   textareaElement.value = ''; // Textarea leeren</code>

<code class="mwt-code">} else {</code>

<code class="mwt-code">   alert('Bitte geben Sie einen Kommentar ein.');</code>

<code class="mwt-code">}</code>

<code class="mwt-code">});</code>
Öffne die HTML Datei erneut in deinem Browser und siehe was sich verändert hat.

[[File:media/image5.png|624x364px]]

[[File:media/image6.png|624x364px]]

Im obigen JavaScript-Beispiel verwenden wir das DOM, um:

* '''Elemente zu finden''': Wir greifen auf Elemente wie den Titel und das Abstract der Publikation zu.
* '''Ereignisse zu behandeln''': Wir fügen einen Event-Listener für den Button hinzu, um einen Kommentar hinzuzufügen, wenn der Button geklickt wird.
* '''Elemente zu erstellen und zu modifizieren''': Wir erstellen neue p-Elemente für Kommentare und fügen sie dem DOM hinzu. Außerdem ändern wir den Inhalt von textarea und leeren ihn nach dem Hinzufügen eines Kommentars.<br>
Die Baumstruktur des DOM für unser Beispiel sieht folgendermaßen aus:
 &lt;<code class="mwt-code">html</code>&gt;

&lt;<code class="mwt-code">head</code>&gt;

&lt;<code class="mwt-code">meta</code>&gt;

&lt;<code class="mwt-code">title</code>&gt;

&lt;<code class="mwt-code">body</code>&gt;

&lt;<code class="mwt-code">h1</code>&gt;

&lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">publikation-container</code>"&gt;

&lt;<code class="mwt-code">h2 id=</code>"<code class="mwt-code">publikation-titel</code>"&gt;

&lt;<code class="mwt-code">p id=</code>"<code class="mwt-code">publikation-abstract</code>"&gt;

&lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">kommentare</code>"&gt;

&lt;<code class="mwt-code">h3</code>&gt;

<code class="mwt-code">(Kommentare werden hier hinzugefügt)</code>

&lt;<code class="mwt-code">textarea id=</code>"<code class="mwt-code">neuer-kommentar</code>"&gt;

&lt;<code class="mwt-code">button id=</code>"<code class="mwt-code">kommentar-hinzufuegen</code>"&gt;


Sehen wir uns nun weitere Beispiele von Ereignissen an.

'''Ereignis: Eingabe in Textarea'''

'''Beschreibung''': Zeigt eine Live-Vorschau des eingegebenen Kommentars an, während der Benutzer tippt.

<code class="mwt-code">// Zugriff auf DOM-Elemente</code>

<code class="mwt-code">let textareaElement = document.getElementById('neuer-kommentar');</code>

<code class="mwt-code">let liveVorschauElement = document.createElement('div');</code>

<code class="mwt-code">liveVorschauElement.id = 'live-vorschau';</code>

<code class="mwt-code">document.body.appendChild(liveVorschauElement);</code>

<code class="mwt-code">// Ereignis-Handler für die Eingabe in die Textarea</code>

<code class="mwt-code">textareaElement.addEventListener('input', () =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">let eingabeText = textareaElement.value;</code>

<code class="mwt-code">liveVorschauElement.textContent = `Vorschau: ${eingabeText}`;</code>

<code class="mwt-code">});</code>

[[File:media/image7.png|624x363px]]

'''Ereignis: Mausbewegung'''

'''Beschreibung''': Ändert die Hintergrundfarbe eines Elements, wenn die Maus darüber bewegt wird.

<code class="mwt-code">// Zugriff auf DOM-Element</code>

<code class="mwt-code">let titelElement = document.getElementById('publikation-titel');</code>

<code class="mwt-code">// Ereignis-Handler für Mausbewegung</code>

<code class="mwt-code">titelElement.addEventListener('mouseover', () =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">titelElement.style.backgroundColor = '#f0f0f0'; // Hintergrundfarbe ändern</code>

<code class="mwt-code">});</code>

<code class="mwt-code">// Ereignis-Handler für Mausverlassen</code>

<code class="mwt-code">titelElement.addEventListener('mouseout', () =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">titelElement.style.backgroundColor = ''; // Hintergrundfarbe zurücksetzen</code>

<code class="mwt-code">});</code>

[[File:media/image8.png|624x360px]]

'''Ereignis: Formular-Submit'''

'''Beschreibung''': Verhindert das Standard-Submit-Verhalten eines Formulars und zeigt stattdessen eine Bestätigungsmeldung an.

index.html

&lt;<code class="mwt-code">form id=</code>"<code class="mwt-code">kommentar-form</code>"&gt;

&lt;<code class="mwt-code">textarea id=</code>"<code class="mwt-code">neuer-kommentar</code>"<code class="mwt-code"> placeholder=</code>"<code class="mwt-code">Fuegen Sie einen Kommentar hinzu...</code>"&gt;

&lt;<code class="mwt-code">/textarea</code>&gt;

&lt;<code class="mwt-code">button type=</code>"<code class="mwt-code">submit</code>"<code class="mwt-code"> id=</code>"<code class="mwt-code">kommentar-hinzufuegen</code>"&gt;<code class="mwt-code">Kommentar hinzufuegen</code>

&lt;<code class="mwt-code">/button</code>&gt;

&lt;<code class="mwt-code">/form</code>&gt;

&lt;<code class="mwt-code">script src=</code>"<code class="mwt-code">app.js</code>"&gt;&lt;<code class="mwt-code">/script</code>&gt;

app.js

<code class="mwt-code">// Zugriff auf DOM-Elemente</code>

<code class="mwt-code">let textareaElement = document.getElementById('neuer-kommentar');</code>

<code class="mwt-code">let formElement = document.getElementById('kommentar-form');</code>

<code class="mwt-code">// Ereignis-Handler für Formular-Submit</code>

<code class="mwt-code">formElement.addEventListener('submit', (event) =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">event.preventDefault(); // Verhindert das Standard-Submit-Verhalten</code>

<code class="mwt-code">let neuerKommentar = textareaElement.value;</code>

<code class="mwt-code">if (neuerKommentar) {</code>

<code class="mwt-code">let kommentarElement = document.createElement('p');</code>

<code class="mwt-code">kommentarElement.textContent = neuerKommentar;</code>

<code class="mwt-code">textareaElement.value = ''; // Textarea leeren</code>

<code class="mwt-code">alert('Kommentar erfolgreich hinzugefuegt!');</code>

<code class="mwt-code">} else {</code>

<code class="mwt-code">alert('Bitte geben Sie einen Kommentar ein.');</code>

<code class="mwt-code">}</code>

<code class="mwt-code">});</code>

[[File:media/image9.png|624x361px]]

[[File:media/image10.png|624x361px]]

'''Ereignis: Tastatureingabe'''

'''Beschreibung''': Zeigt eine Nachricht an, wenn die Eingabetaste gedrückt wird.

<code class="mwt-code">// Ereignis-Handler für Tastatureingaben</code>

<code class="mwt-code">document.addEventListener('keydown', (event) =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">if (event.key === 'Enter') {</code>

<code class="mwt-code">alert('Eingabetaste wurde gedrückt!');</code>

<code class="mwt-code">}</code>

<code class="mwt-code">});</code>

[[File:media/image11.png|624x362px]]

'''Ereignis: Ändern eines Select-Menüs'''

'''Beschreibung''': Zeigt die ausgewählte Option aus einem Dropdown-Menü an, wenn der Benutzer eine Auswahl trifft.

&lt;<code class="mwt-code">select id=</code>"<code class="mwt-code">rolle-select</code>"&gt;

&lt;<code class="mwt-code">option value=</code>"<code class="mwt-code">Autor</code>"&gt;<code class="mwt-code">Autor</code>&lt;<code class="mwt-code">/option</code>&gt;

&lt;<code class="mwt-code">option value=</code>"<code class="mwt-code">Gutachter</code>"&gt;<code class="mwt-code">Gutachter</code>&lt;<code class="mwt-code">/option</code>&gt;

&lt;<code class="mwt-code">option value=</code>"<code class="mwt-code">Leser</code>"&gt;<code class="mwt-code">Leser</code>&lt;<code class="mwt-code">/option</code>&gt;

&lt;<code class="mwt-code">/select</code>&gt;

&lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">ausgewaehlte-rolle</code>"&gt;&lt;<code class="mwt-code">/div</code>&gt;

<code class="mwt-code">// Zugriff auf DOM-Elemente</code>

<code class="mwt-code">let rolleSelectElement = document.getElementById('rolle-select');</code>

<code class="mwt-code">let ausgewaehlteRolleElement = document.getElementById('ausgewaehlte-rolle');</code>

<code class="mwt-code">// Ereignis-Handler für Änderungen des Select-Menüs</code>

<code class="mwt-code">rolleSelectElement.addEventListener('change', () =</code>&gt;<code class="mwt-code"> {</code>

<code class="mwt-code">let ausgewaehlteRolle = rolleSelectElement.value;</code>

<code class="mwt-code">ausgewaehlteRolleElement.textContent = `Ausgewählte Rolle: ${ausgewaehlteRolle}`;</code>

<code class="mwt-code">});</code>

[[File:media/image12.png|624x361px]]

<span id="frameworks"></span>

= Frameworks =

JavaScript-Frameworks erleichtern die Webentwicklung, indem sie strukturierte Ansätze, wiederverwendbare Komponenten und integrierte Funktionen bieten. Die meistverwendeten Frameworks sind React (Meta, 2024), Angular (Google, 2024) und Vue.js (You, 2024). React, von Facebook entwickelt, konzentriert sich auf die Erstellung von Benutzeroberflächen mit einem komponentenbasierten Modell und einem Virtual DOM für effiziente Updates. Angular, gepflegt von Google, bietet eine umfassende Lösung für große Webanwendungen, inklusive Dependency Injection und Routing, und verwendet TypeScript für statische Typisierung. Vue.js ist ein leichtgewichtiges Framework, das einfach zu integrieren und zu lernen ist, und bietet eine flexible API, die Elemente von React und Angular kombiniert. Die Wahl eines Frameworks hängt von den spezifischen Projektanforderungen ab. Diese Frameworks sparen Zeit, verbessern die Code-Qualität, optimieren die Leistung und bieten umfassende Dokumentation sowie Community-Support, was zu schnellerer, konsistenterer und wartbarer Entwicklung führt.

<span id="react"></span>
== React ==

React ist eine JavaScript-Bibliothek, die es ermöglicht, komplexe Benutzeroberflächen in wiederverwendbare, isolierte Komponenten zu zerlegen. Diese Komponenten verwalten ihren eigenen Zustand und nutzen einen virtuellen DOM, um effizient Änderungen an der Benutzeroberfläche vorzunehmen. Dies führt zu einer reaktiven und schnellen Anwendung.

<span id="komponenten"></span>
=== Komponenten ===

In React ist eine Komponente ein selbstständiges, wiederverwendbares Stück der Benutzeroberfläche. Sie kann in andere Komponenten eingebettet werden und hat ihren eigenen Zustand und ihre eigene Logik.

'''Beispiel:''' Für unsere Anwendung könnten wir eine Publikation-Komponente erstellen, die die Details einer wissenschaftlichen Publikation anzeigt.

<code class="mwt-code" >function Publikation({ titel, abstract, inhalt }) {</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;<code class="mwt-code" >{titel}</code>&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;<code class="mwt-code" >{abstract}</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;<code class="mwt-code" >{inhalt}</code>&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

In diesem Beispiel ist Publikation eine Komponente, die titel, abstract und inhalt als Props erhält und diese Daten in der Benutzeroberfläche darstellt.

<span id="jsx"></span>
=== JSX ===

JSX ist eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnlichen Code direkt in JavaScript zu schreiben. Dieser Code wird von React in regulären JavaScript-Code übersetzt.

'''Beispiel:''' Das folgende JSX beschreibt die Struktur eines Kommentarformulars.

<code class="mwt-code" >function KommentarFormular() {</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >form</code>&gt;

&lt;<code class="mwt-code" >textarea placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;<code class="mwt-code" > /</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier sehen wir, wie HTML-ähnlicher Code in JavaScript eingebettet wird, um die Benutzeroberfläche zu definieren.

<span id="props"></span>
=== Props ===

Props (Eigenschaften) sind Parameter, die an Komponenten übergeben werden, um Daten weiterzugeben. Sie sind unveränderlich innerhalb der Komponente.

'''Beispiel:''' In der App-Komponente übergeben wir Daten an die Publikation-Komponente.

<code class="mwt-code" >function App() {</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >Gibt es die Matrix wirklich?</code>&quot;

<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >Eine Untersuchung der Realität und ihrer Möglichkeiten.</code>&quot;

<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.</code>&quot;

<code class="mwt-code" >/</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier erhält Publikation die Daten als Props und zeigt diese in der Benutzeroberfläche an.

<span id="state"></span>
=== State ===

Der State ist der interne Zustand einer Komponente, der sich ändern kann und die Darstellung der Komponente beeinflusst. Er ist veränderbar und ermöglicht es, die Benutzeroberfläche dynamisch zu aktualisieren.

'''Beispiel:''' In der KommentarFormular-Komponente verwalten wir den Text des Kommentars im State.

<code class="mwt-code" >import React, { useState } from 'react';</code>

<code class="mwt-code" >function KommentarFormular() {</code>

<code class="mwt-code" >const [kommentar, setKommentar] = useState('');</code>

<code class="mwt-code" >const handleChange = (event) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >setKommentar(event.target.value);</code>

<code class="mwt-code" >};</code>

<code class="mwt-code" >const handleSubmit = (event) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >event.preventDefault();</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + kommentar);</code>

<code class="mwt-code" >setKommentar('');</code>

<code class="mwt-code" >};</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >form onSubmit={handleSubmit}</code>&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >value={kommentar}</code>

<code class="mwt-code" >onChange={handleChange}</code>

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier verwenden wir den State, um den aktuellen Kommentar zu speichern und die Benutzeroberfläche bei Änderungen zu aktualisieren.

<span id="lifecycle-methoden"></span>
=== Lifecycle-Methoden ===

Lifecycle-Methoden sind spezielle Methoden, die zu verschiedenen Zeitpunkten im Lebenszyklus einer Komponente aufgerufen werden. Bei funktionalen Komponenten werden Hooks verwendet, um ähnliche Funktionalität zu erreichen.

'''Beispiel:''' In einer PublikationenListe-Komponente laden wir beim ersten Rendern Daten von einem Server:

<code class="mwt-code" >import React, { useEffect, useState } from 'react';</code>

<code class="mwt-code" >function PublikationenListe() {</code>

<code class="mwt-code" >const [publikationen, setPublikationen] = useState([]);</code>

<code class="mwt-code" >useEffect(() =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >fetch('/api/publikationen')</code>

<code class="mwt-code" >.then(response =</code>&gt;<code class="mwt-code" > response.json())</code>

<code class="mwt-code" >.then(data =</code>&gt;<code class="mwt-code" > setPublikationen(data));</code>

<code class="mwt-code" >}, []); // Leeres Array bedeutet, dass es nur einmal ausgeführt wird</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >div</code>&gt;

<code class="mwt-code" >{publikationen.map(publikation =</code>&gt;<code class="mwt-code" > (</code>

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >key={publikation.id}</code>

<code class="mwt-code" >titel={publikation.titel}</code>

<code class="mwt-code" >abstract={publikation.abstract}</code>

<code class="mwt-code" >inhalt={publikation.inhalt}</code>

<code class="mwt-code" >/</code>&gt;

<code class="mwt-code" >))}</code>

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier verwenden wir useEffect, um Daten beim ersten Rendern der Komponente abzurufen.

<span id="virtual-dom"></span>
=== Virtual DOM ===

Der Virtual DOM ist eine in-memory-Repräsentation des echten DOMs. React verwendet den Virtual DOM, um Änderungen effizienter zu verarbeiten, indem es nur die Teile des echten DOMs aktualisiert, die tatsächlich verändert wurden. Diese Optimierung wird automatisch von React gehandhabt, daher müssen wir keinen speziellen Code dafür schreiben.

<span id="event-handling"></span>
=== Event-Handling ===

React ermöglicht die Behandlung von Benutzerereignissen wie Klicks und Eingaben direkt innerhalb der JSX-Syntax.

'''Beispiel:''' In einer KommentarFormular-Komponente verarbeiten wir das Absenden des Formulars:

<code class="mwt-code" >function KommentarFormular() {</code>

<code class="mwt-code" >const [kommentar, setKommentar] = useState('');</code>

<code class="mwt-code" >const handleSubmit = (event) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >event.preventDefault();</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + kommentar);</code>

<code class="mwt-code" >setKommentar('');</code>

<code class="mwt-code" >};</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >form onSubmit={handleSubmit}</code>&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >value={kommentar}</code>

<code class="mwt-code" >onChange={(e) =</code>&gt;<code class="mwt-code" > setKommentar(e.target.value)}</code>

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier wird der onSubmit-Event-Handler verwendet, um den Kommentar beim Absenden des Formulars zu verarbeiten.

<span id="hooks"></span>
=== Hooks ===

Hooks sind Funktionen, die es ermöglichen, in funktionalen Komponenten auf den State und andere React-Funktionen zuzugreifen.

'''Beispiel:''' Mit useState und useEffect können wir Zustand und Nebenwirkungen in funktionalen Komponenten verwalten:

<code class="mwt-code" >import React, { useState, useEffect } from 'react';</code>

<code class="mwt-code" >function KommentarFormular() {</code>

<code class="mwt-code" >const [kommentar, setKommentar] = useState('');</code>

<code class="mwt-code" >useEffect(() =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >console.log('KommentarFormular gerendert');</code>

<code class="mwt-code" >}, []);</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >form</code>&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >value={kommentar}</code>

<code class="mwt-code" >onChange={(e) =</code>&gt;<code class="mwt-code" > setKommentar(e.target.value)}</code>

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >button</code>&quot;<code class="mwt-code" > onClick={() =</code>&gt;<code class="mwt-code" > alert('Kommentar hinzugefügt: ' + kommentar)}</code>&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

Hier verwenden wir useState, um den Kommentar zu speichern, und useEffect, um einen Effekt nach dem ersten Rendern auszuführen.

<span id="erste-react-applikation-in-vscode"></span>
=== Erste React Applikation in VSCode ===

Da wir nun die wichtigsten Konzepte, die React verwendet, kennengelernt haben, können wir nun unsere erste React App in VSCode ertellen.

'''Installiere Node.js und npm'''

Besuche die [https://nodejs.org/ Node.js-Website] und lade die neueste LTS-Version herunter. Dies installiert auch npm, das für das Verwalten von Paketen verwendet wird.

'''Installiere create-react-app'''

Öffne dein Terminal oder die Kommandozeile und installiere das create-react-app-Tool global:

npm install -g create-react-app

'''Erstelle ein neues React-Projekt'''

Gehen wir in das Verzeichnis, in dem das Projekt erstellt werden soll, und führen wir diesen Befehl aus:

npx create-react-app from-peer-review-to-crowd-review

Dieser Befehl erstellt ein neues Verzeichnis namens fromPeerReviewToCrowdReview mit einer grundlegenden React-Anwendung.

'''Öffne das Projekt in Visual Studio Code'''

Starte Visual Studio Code und öffne das Projektverzeichnis. Alternativ kannst man im Terminal folgenden Befehl verwenden:

code from-peer-review-to-crowd-review

'''Starte den Entwicklungsserver'''

Öffne das integrierte Terminal in VSCode (Terminal &gt; Neues Terminal) und starte die Entwicklungsumgebung:

npm start

Dies startet den Entwicklungsserver und öffnet deine Anwendung in einem Webbrowser. Der Server überwacht Änderungen an deinem Code und aktualisiert die Anwendung automatisch.

'''Bearbeite die Anwendung'''

Gehe zur Datei src/App.js. Ändere den Code, um die Benutzeroberfläche für unsere Anwendung darzustellen:

i<code class="mwt-code" >mport React from 'react';</code>

<code class="mwt-code" >import Publikation from './Publikation'; // Importiere die neue Komponente</code>

<code class="mwt-code" >function App() {</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >div className=</code>&quot;<code class="mwt-code" >App</code>&quot;&gt;

&lt;<code class="mwt-code" >header className=</code>&quot;<code class="mwt-code" >App-header</code>&quot;&gt;

&lt;<code class="mwt-code" >h1</code>&gt;<code class="mwt-code" >Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code" >/h1</code>&gt;

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >Gibt es die Matrix wirklich?</code>&quot;

<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >Eine Untersuchung der Realität und ihrer Möglichkeiten.</code>&quot;

<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.</code>&quot;

<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >/header</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

export default App;

'''Füge eine neue Komponente hinzu'''

Erstelle eine neue Datei src/Publikation.js für die Publikation-Komponente:

<code class="mwt-code" >import React from 'react';</code>

<code class="mwt-code" >function Publikation({ titel, abstract, inhalt }) {</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;<code class="mwt-code" >{titel}</code>&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;<code class="mwt-code" >{abstract}</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;<code class="mwt-code" >{inhalt}</code>&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

export default Publikation;

'''Füge weitere Komponenten hinzu'''

Wir können nun weitere Komponenten erstellen, die beispielsweise das Kommentarformular und andere Teile der Anwendung zu integrieren. Zum Beispiel, erstelle src/KommentarFormular.js:

<code class="mwt-code" >import React, { useState } from 'react';</code>

<code class="mwt-code" >function KommentarFormular() {</code>

<code class="mwt-code" >const [kommentar, setKommentar] = useState('');</code>

<code class="mwt-code" >const handleChange = (event) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >setKommentar(event.target.value);</code>

<code class="mwt-code" >};</code>

<code class="mwt-code" >const handleSubmit = (event) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >event.preventDefault();</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + kommentar);</code>

<code class="mwt-code" >setKommentar('');</code>

<code class="mwt-code" >};</code>

<code class="mwt-code" >return (</code>

&lt;<code class="mwt-code" >form onSubmit={handleSubmit}</code>&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >value={kommentar}</code>

<code class="mwt-code" >onChange={handleChange}</code>

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

<code class="mwt-code" >);</code>

<code class="mwt-code" >}</code>

export default KommentarFormular;

Importiere und verwende diese Komponente in App.js.

<span id="angular"></span>
== Angular ==

Angular ist ein weit verbreitetes Framework für die Entwicklung von Webanwendungen, das von Google entwickelt wird. Es basiert auf TypeScript und bietet eine strukturierte Architektur für den Aufbau von Single-Page-Anwendungen. Angular nutzt Komponenten als grundlegende Bausteine für die Benutzeroberfläche und bietet eine Vielzahl von Funktionen wie Datenbindung, Dependency Injection und Routing, um die Entwicklung und Wartung von komplexen Anwendungen zu erleichtern. Es enthält auch ein leistungsstarkes CLI (Command Line Interface) zum Generieren von Code und zur Verwaltung von Projekten. Angular ist bekannt für seine umfassenden Features und seine robuste Architektur, die es für große und skalierbare Projekte geeignet macht.

<span id="komponenten-1"></span>
=== Komponenten ===

In Angular sind Komponenten die Hauptbausteine der Benutzeroberfläche. Jede Komponente besteht aus einer HTML-Vorlage, einer CSS-Datei für das Styling und einer TypeScript-Datei für die Logik.

'''Beispiel:''' Erstellen wir eine PublikationComponent, um eine Publikation anzuzeigen.

'''HTML-Datei (publikation.component.html):'''

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;{{ titel }}&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;{{ abstract }}&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;{{ inhalt }}&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

'''TypeScript-Datei (publikation.component.ts):'''

<code class="mwt-code" >import { Component, Input } from '@angular/core';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-publikation',</code>

<code class="mwt-code" >templateUrl: './publikation.component.html',</code>

<code class="mwt-code" >styleUrls: ['./publikation.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class PublikationComponent {</code>

<code class="mwt-code" >@Input() titel: string;</code>

<code class="mwt-code" >@Input() abstract: string;</code>

<code class="mwt-code" >@Input() inhalt: string;</code>

<code class="mwt-code" >}</code>

<span id="module-1"></span>
=== Module ===

Angular-Anwendungen bestehen aus Modulen, die verschiedene Teile der Anwendung gruppieren. Ein Modul kann Komponenten, Dienste und andere Module enthalten.

'''Beispiel:''' Definieren wir ein Modul für die Publikationsfunktionalität.

'''TypeScript-Datei (app.module.ts):'''

<code class="mwt-code" >import { NgModule } from '@angular/core';</code>

<code class="mwt-code" >import { BrowserModule } from '@angular/platform-browser';</code>

<code class="mwt-code" >import { AppComponent } from './app.component';</code>

<code class="mwt-code" >import { PublikationComponent } from './publikation/publikation.component';</code>

<code class="mwt-code" >@NgModule({</code>

<code class="mwt-code" >declarations: [</code>

<code class="mwt-code" >AppComponent,</code>

<code class="mwt-code" >PublikationComponent</code>

<code class="mwt-code" >],</code>

<code class="mwt-code" >imports: [</code>

<code class="mwt-code" >BrowserModule</code>

<code class="mwt-code" >],</code>

<code class="mwt-code" >providers: [],</code>

<code class="mwt-code" >bootstrap: [AppComponent]</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class AppModule { }</code>

<span id="services"></span>
=== Services ===

Services sind wiederverwendbare Klassen, die Logik und Datenmanagement bereitstellen. Sie werden oft verwendet, um Daten zwischen Komponenten zu teilen.

'''Beispiel:'''&nbsp;Erstellen wir nun einen PublikationService, um Publikationen von einer API abzurufen.

'''TypeScript-Datei (publikation.service.ts):'''

<code class="mwt-code" >import { Injectable } from '@angular/core';</code>

<code class="mwt-code" >import { HttpClient } from '@angular/common/http';</code>

<code class="mwt-code" >import { Observable } from 'rxjs';</code>

<code class="mwt-code" >@Injectable({</code>

<code class="mwt-code" >providedIn: 'root'</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class PublikationService {</code>

<code class="mwt-code" >private apiUrl = 'https://api.example.com/publikationen';</code>

<code class="mwt-code" >constructor(private http: HttpClient) { }</code>

<code class="mwt-code" >getPublikationen(): Observable</code>&lt;<code class="mwt-code" >any[]</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >return this.http.get</code>&lt;<code class="mwt-code" >any[]</code>&gt;<code class="mwt-code" >(this.apiUrl);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="routing"></span>
=== Routing ===

Angular-Routing ermöglicht das Navigieren zwischen verschiedenen Ansichten oder Komponenten innerhalb einer Anwendung.

'''Beispiel:''' Konfigurieren wir Routen für die Publikationsansicht und ein Kommentarformular.

'''TypeScript-Datei (app-routing.module.ts):'''

<code class="mwt-code" >import { NgModule } from '@angular/core';</code>

<code class="mwt-code" >import { RouterModule, Routes } from '@angular/router';</code>

<code class="mwt-code" >import { PublikationComponent } from './publikation/publikation.component';</code>

<code class="mwt-code" >const routes: Routes = [</code>

<code class="mwt-code" >{ path: 'publikationen', component: PublikationComponent },</code>

<code class="mwt-code" >{ path: '', redirectTo: '/publikationen', pathMatch: 'full' }</code>

<code class="mwt-code" >];</code>

<code class="mwt-code" >@NgModule({</code>

<code class="mwt-code" >imports: [RouterModule.forRoot(routes)],</code>

<code class="mwt-code" >exports: [RouterModule]</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class AppRoutingModule { }</code>

<span id="datenbindung"></span>
=== Datenbindung ===

Angular bietet verschiedene Arten der Datenbindung, einschließlich Einweg- und Zweiweg-Datenbindung, um Daten zwischen der Logik der Komponente und der Ansicht zu synchronisieren.

'''Beispiel:''' Zeigen wir nun Daten aus dem PublikationService in der PublikationComponent an.

'''TypeScript-Datei (publikation.component.ts):'''

<code class="mwt-code" >import { Component, OnInit } from '@angular/core';</code>

<code class="mwt-code" >import { PublikationService } from '../publikation.service';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-publikation',</code>

<code class="mwt-code" >templateUrl: './publikation.component.html',</code>

<code class="mwt-code" >styleUrls: ['./publikation.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class PublikationComponent implements OnInit {</code>

<code class="mwt-code" >publikationen: any[] = [];</code>

<code class="mwt-code" >constructor(private publikationService: PublikationService) { }</code>

<code class="mwt-code" >ngOnInit(): void {</code>

<code class="mwt-code" >this.publikationService.getPublikationen().subscribe(data =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >this.publikationen = data;</code>

<code class="mwt-code" >});</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="forms"></span>
=== Forms ===

Angular bietet sowohl Template-driven Forms als auch Reactive Forms für die Verarbeitung von Benutzereingaben.

'''Beispiel:''' Erstellen wir ein Formular zum Hinzufügen von Kommentaren.

'''HTML-Datei (kommentar-formular.component.html):'''

&lt;<code class="mwt-code" >form (ngSubmit)=</code>&quot;<code class="mwt-code" >onSubmit()</code>&quot;<code class="mwt-code" > #kommentarForm=</code>&quot;<code class="mwt-code" >ngForm</code>&quot;&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >name=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;

<code class="mwt-code" >[(ngModel)]=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >required</code>&gt;

&lt;<code class="mwt-code" >/textarea</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

'''TypeScript-Datei (kommentar-formular.component.ts):'''

<code class="mwt-code" >import { Component } from '@angular/core';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-kommentar-formular',</code>

<code class="mwt-code" >templateUrl: './kommentar-formular.component.html',</code>

<code class="mwt-code" >styleUrls: ['./kommentar-formular.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class KommentarFormularComponent {</code>

<code class="mwt-code" >kommentar: string = '';</code>

<code class="mwt-code" >onSubmit(): void {</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + this.kommentar);</code>

<code class="mwt-code" >this.kommentar = '';</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="dependency-injection"></span>
=== Dependency Injection ===

Angular verwendet Dependency Injection (DI), um Abhängigkeiten wie Services in Komponenten und andere Services einzufügen.

'''Beispiel:''' Der PublikationService wird in PublikationComponent durch DI eingefügt.

'''TypeScript-Datei (publikation.component.ts):'''

<code class="mwt-code" >import { Component, OnInit } from '@angular/core';</code>

<code class="mwt-code" >import { PublikationService } from '../publikation.service';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-publikation',</code>

<code class="mwt-code" >templateUrl: './publikation.component.html',</code>

<code class="mwt-code" >styleUrls: ['./publikation.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class PublikationComponent implements OnInit {</code>

<code class="mwt-code" >publikationen: any[] = [];</code>

<code class="mwt-code" >constructor(private publikationService: PublikationService) { }</code>

<code class="mwt-code" >ngOnInit(): void {</code>

<code class="mwt-code" >this.publikationService.getPublikationen().subscribe(data =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >this.publikationen = data;</code>

<code class="mwt-code" >});</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="mein-erstes-angular-projekt-in-vscode"></span>
=== Mein erstes Angular Projekt in VSCode ===

<blockquote>Stellen wir zuerst sicher, dass Node.js auf deinem System installiert ist. Node.js kann von der [https://nodejs.org/ Node.js-Website] heruntergeladen und installieren werden.

Installiere Angular CLI global, um ein neues Angular-Projekt zu erstellen:

<code class="mwt-code" >npm install -g @angular/cli</code></blockquote>

<span id="erstelle-ein-neues-angular-projekt"></span>
==== Erstelle ein neues Angular-Projekt ====

<blockquote>Öffne das Terminal oder die Kommandozeile und navigiere zu dem Verzeichnis, in dem das Projekt erstellt werden soll.

Führe den folgenden Befehl aus, um ein neues Angular-Projekt zu erstellen:

<code class="mwt-code" >ng new from-peer-review-to-crowd-review</code>

Wähle &quot;Ja&quot; um Angular Routing zu verwenden und verwende das Standard-Stilformat (z. B. CSS).</blockquote>

<span id="öffne-das-projekt-in-visual-studio-code"></span>
==== Öffne das Projekt in Visual Studio Code ====

Starte Visual Studio Code und öffne das Projektverzeichnis:

<blockquote><code class="mwt-code" >code from-peer-review-to-crowd-review</code></blockquote>

<span id="erstelle-eine-komponente-für-die-publikation"></span>
==== Erstelle eine Komponente für die Publikation ====

Erstelle eine neue Komponente für die Publikationen:

<blockquote><code class="mwt-code" >ng generate component publication</code></blockquote>
'''HTML-Datei (src/app/publikation/publikation.component.html):'''

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;{{ titel }}&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;{{ abstract }}&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;{{ inhalt }}&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

'''TypeScript-Datei (src/app/publikation/publikation.component.ts):'''

<code class="mwt-code" >import { Component, Input } from '@angular/core';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-publikation',</code>

<code class="mwt-code" >templateUrl: './publikation.component.html',</code>

<code class="mwt-code" >styleUrls: ['./publikation.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class PublikationComponent {</code>

<code class="mwt-code" >@Input() titel: string;</code>

<code class="mwt-code" >@Input() abstract: string;</code>

<code class="mwt-code" >@Input() inhalt: string;</code>

<code class="mwt-code" >}</code>

<span id="erstelle-eine-komponente-für-das-kommentarformular"></span>
==== Erstelle eine Komponente für das Kommentarformular ====

Erstelle eine neue Komponente für das Kommentarformular:

<blockquote><code class="mwt-code" >ng generate component kommentar-formular</code></blockquote>
'''HTML-Datei (src/app/kommentar-formular/kommentar-formular.component.html):'''

&lt;<code class="mwt-code" >form (ngSubmit)=</code>&quot;<code class="mwt-code" >onSubmit()</code>&quot;<code class="mwt-code" > #kommentarForm=</code>&quot;<code class="mwt-code" >ngForm</code>&quot;&gt;

&lt;<code class="mwt-code" >textarea</code>

<code class="mwt-code" >name=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;

<code class="mwt-code" >[(ngModel)]=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;

<code class="mwt-code" >placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;

<code class="mwt-code" >required</code>&gt;

&lt;<code class="mwt-code" >/textarea</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

'''TypeScript-Datei (src/app/kommentar-formular/kommentar-formular.component.ts):'''

<code class="mwt-code" >import { Component } from '@angular/core';</code>

<code class="mwt-code" >@Component({</code>

<code class="mwt-code" >selector: 'app-kommentar-formular',</code>

<code class="mwt-code" >templateUrl: './kommentar-formular.component.html',</code>

<code class="mwt-code" >styleUrls: ['./kommentar-formular.component.css']</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class KommentarFormularComponent {</code>

<code class="mwt-code" >kommentar: string = '';</code>

<code class="mwt-code" >onSubmit(): void {</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + this.kommentar);</code>

<code class="mwt-code" >this.kommentar = '';</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="füge-routing-hinzu"></span>
==== Füge Routing hinzu ====

'''TypeScript-Datei (src/app/app-routing.module.ts):'''

<code class="mwt-code" >import { NgModule } from '@angular/core';</code>

<code class="mwt-code" >import { RouterModule, Routes } from '@angular/router';</code>

<code class="mwt-code" >import { PublikationComponent } from './publikation/publikation.component';</code>

<code class="mwt-code" >import { KommentarFormularComponent } from './kommentar-formular/kommentar-formular.component';</code>

<code class="mwt-code" >const routes: Routes = [</code>

<code class="mwt-code" >{ path: 'publikationen', component: PublikationComponent },</code>

<code class="mwt-code" >{ path: '', redirectTo: '/publikationen', pathMatch: 'full' }</code>

<code class="mwt-code" >];</code>

<code class="mwt-code" >@NgModule({</code>

<code class="mwt-code" >imports: [RouterModule.forRoot(routes)],</code>

<code class="mwt-code" >exports: [RouterModule]</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class AppRoutingModule { }</code>

'''TypeScript-Datei (src/app/app.module.ts):''' Füge die neuen Komponenten und das FormsModule hinzu:

<blockquote><code class="mwt-code" >import { NgModule } from '@angular/core';</code>

<code class="mwt-code" >import { BrowserModule } from '@angular/platform-browser';</code>

<code class="mwt-code" >import { FormsModule } from '@angular/forms'; // Importiere FormsModule</code>

<code class="mwt-code" >import { AppComponent } from './app.component';</code>

<code class="mwt-code" >import { PublikationComponent } from './publikation/publikation.component';</code>

<code class="mwt-code" >import { KommentarFormularComponent } from './kommentar-formular/kommentar-formular.component';</code>

<code class="mwt-code" >import { AppRoutingModule } from './app-routing.module';</code>

<code class="mwt-code" >@NgModule({</code>

<code class="mwt-code" >declarations: [</code>

<code class="mwt-code" >AppComponent,</code>

<code class="mwt-code" >PublikationComponent,</code>

<code class="mwt-code" >KommentarFormularComponent</code>

<code class="mwt-code" >],</code>

<code class="mwt-code" >imports: [</code>

<code class="mwt-code" >BrowserModule,</code>

<code class="mwt-code" >AppRoutingModule,</code>

<code class="mwt-code" >FormsModule // Füge FormsModule hinzu</code>

<code class="mwt-code" >],</code>

<code class="mwt-code" >providers: [],</code>

<code class="mwt-code" >bootstrap: [AppComponent]</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >export class AppModule { }</code></blockquote>

<span id="starte-die-anwendung"></span>
==== Starte die Anwendung ====

Starte den Angular-Entwicklungsserver, um deine Anwendung auszuführen:

<blockquote><code class="mwt-code" >ng serve</code></blockquote>
Öffne einen Webbrowser und gehe zu http://localhost:4200, um die Anwendung zu sehen.

<span id="verändere-die-app.component.html"></span>
=== Verändere die app.component.html ===

'''HTML-Datei (src/app/app.component.html):''' Ersetze den Standardinhalt, um die PublikationComponent und KommentarFormularComponent&nbsp;einzuschließen:

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >app</code>&quot;&gt;

&lt;<code class="mwt-code" >h1</code>&gt;<code class="mwt-code" >Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code" >/h1</code>&gt;

&lt;<code class="mwt-code" >app-publikation</code>

<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >Gibt es die Matrix wirklich?</code>&quot;

<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >Eine Untersuchung der Realität und ihrer Möglichkeiten.</code>&quot;

<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.</code>&quot;&gt;

&lt;<code class="mwt-code" >/app-publikation</code>&gt;

&lt;<code class="mwt-code" >app-kommentar-formular</code>&gt;&lt;<code class="mwt-code" >/app-kommentar-formular</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

Nun haben wir eine grundlegende Angular-Anwendung erstellt, die eine Publikation anzeigt und ein Kommentarformular enthält. Diese Anwendung verwendet grundlegende Angular-Konzepte wie Komponenten, Module, Routing und Formulare.

<span id="vue.js"></span>
== Vue.js ==

Vue.js ist besonders für seine Einfachheit und Flexibilität bekannt. Vue.js verwendet eine deklarative Syntax, bei der die Benutzeroberfläche mit einem reaktiven Datenmodell verknüpft ist, was bedeutet, dass sich die UI automatisch aktualisiert, wenn sich die zugrunde liegenden Daten ändern. Es basiert auf Komponenten, die HTML, CSS und JavaScript in einer einzigen Datei kombinieren, was die Entwicklung und Wartung von Anwendungen erleichtert. Vue.js ist leichtgewichtig, leicht erlernbar und lässt sich gut in bestehende Projekte integrieren oder für die Entwicklung von neuen, komplexeren Anwendungen nutzen.

<span id="komponenten-2"></span>
=== Komponenten ===

In Vue.js sind Komponenten wiederverwendbare und isolierte Einheiten, die HTML, CSS und JavaScript zusammenfassen.

'''Beispiel:''' Erstellen wir eine Publikation-Komponente, um eine Publikation darzustellen.

'''Datei Publikation.vue:'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;{{ titel }}&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;{{ abstract }}&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;{{ inhalt }}&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >props: {</code>

<code class="mwt-code" >titel: String,</code>

<code class="mwt-code" >abstract: String,</code>

<code class="mwt-code" >inhalt: String</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style scoped</code>&gt;

<code class="mwt-code" >/* Styles für die Publikation */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<span id="reaktive-datenbindung"></span>
=== Reaktive Datenbindung ===

Vue.js verwendet reaktive Datenbindung, um sicherzustellen, dass Änderungen an Daten automatisch in der Benutzeroberfläche angezeigt werden.

'''Beispiel:''' Verwenden wir eine data-Eigenschaft in einer App-Komponente, um eine Liste von Publikationen zu verwalten.

'''Datei App.vue:'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div id=</code>&quot;<code class="mwt-code" >app</code>&quot;&gt;

&lt;<code class="mwt-code" >h1</code>&gt;<code class="mwt-code" >Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code" >/h1</code>&gt;

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >v-for=</code>&quot;<code class="mwt-code" >(publikation, index) in publikationen</code>&quot;

:<code class="mwt-code" >key=</code>&quot;<code class="mwt-code" >index</code>&quot;
:<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >publikation.titel</code>&quot;
:<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >publikation.abstract</code>&quot;
:<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >publikation.inhalt</code>&quot;
<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >KommentarFormular /</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >import Publikation from './components/Publikation.vue';</code>

<code class="mwt-code" >import KommentarFormular from './components/KommentarFormular.vue';</code>

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >components: {</code>

<code class="mwt-code" >Publikation,</code>

<code class="mwt-code" >KommentarFormular</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >data() {</code>

<code class="mwt-code" >return {</code>

<code class="mwt-code" >publikationen: [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >titel: 'Gibt es die Matrix wirklich?',</code>

<code class="mwt-code" >abstract: 'Eine Untersuchung der Realität und ihrer Möglichkeiten.',</code>

<code class="mwt-code" >inhalt: 'Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.'</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style</code>&gt;

<code class="mwt-code" >/* Styles für die App */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<span id="props-1"></span>
=== Props ===

Props sind Eigenschaften, die von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden, um Daten zu übermitteln.

'''Beispiel:''' Die Publikation-Komponente erhält titel, abstract und inhalt&nbsp;als Props.

'''In Publikation.vue:'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;{{ titel }}&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;{{ abstract }}&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;{{ inhalt }}&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >props: {</code>

<code class="mwt-code" >titel: String,</code>

<code class="mwt-code" >abstract: String,</code>

<code class="mwt-code" >inhalt: String</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

<span id="event-handling-1"></span>
=== Event Handling ===

Vue.js ermöglicht es, Benutzeraktionen wie Klicks und Eingaben zu erfassen und darauf zu reagieren.

'''Beispiel:''' Erstellen wir nun ein Kommentarformular, das einen Kommentar hinzufügt und anzeigt.

'''Datei''' KommentarFormular.vue''':'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >form @submit.prevent=</code>&quot;<code class="mwt-code" >onSubmit</code>&quot;&gt;

&lt;<code class="mwt-code" >textarea v-model=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;<code class="mwt-code" > placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;<code class="mwt-code" > required</code>&gt;&lt;<code class="mwt-code" >/textarea</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >data() {</code>

<code class="mwt-code" >return {</code>

<code class="mwt-code" >kommentar: ''</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >methods: {</code>

<code class="mwt-code" >onSubmit() {</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + this.kommentar);</code>

<code class="mwt-code" >this.kommentar = '';</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style scoped</code>&gt;

<code class="mwt-code" >/* Styles für das Kommentarformular */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<span id="vue-router"></span>
=== Vue Router ===

Vue Router ist eine offizielle Router-Bibliothek für Vue.js, die das Routing innerhalb der Anwendung ermöglicht.

'''Beispiel:''' Konfigurieren wir nun Routen, um zwischen verschiedenen Komponenten zu navigieren.

'''Datei''' router/index.js''':'''

<code class="mwt-code" >import Vue from 'vue';</code>

<code class="mwt-code" >import Router from 'vue-router';</code>

<code class="mwt-code" >import Publikation from '../components/Publikation.vue';</code>

<code class="mwt-code" >import KommentarFormular from '../components/KommentarFormular.vue';</code>

<code class="mwt-code" >Vue.use(Router);</code>

<code class="mwt-code" >export default new Router({</code>

<code class="mwt-code" >routes: [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >path: '/publikationen',</code>

<code class="mwt-code" >name: 'Publikation',</code>

<code class="mwt-code" >component: Publikation</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >path: '/',</code>

<code class="mwt-code" >name: 'KommentarFormular',</code>

<code class="mwt-code" >component: KommentarFormular</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code>

<code class="mwt-code" >});</code>

'''In der Hauptdatei''' main.js''':'''

<code class="mwt-code" >import Vue from 'vue';</code>

<code class="mwt-code" >import App from './App.vue';</code>

<code class="mwt-code" >import router from './router';</code>

<code class="mwt-code" >Vue.config.productionTip = false;</code>

<code class="mwt-code" >new Vue({</code>

<code class="mwt-code" >router,</code>

<code class="mwt-code" >render: h =</code>&gt;<code class="mwt-code" > h(App)</code>

<code class="mwt-code" >}).$mount('#app');</code>

<span id="vuex"></span>
=== Vuex ===

Vuex ist eine State-Management-Bibliothek für Vue.js-Anwendungen, die ein zentrales Repository für alle Komponenten bereitstellt.

'''Beispiel:''' Verwende Vuex für die Verwaltung der Publikationen.

'''Datei''' store/index.js''':'''

<code class="mwt-code" >import Vue from 'vue';</code>

<code class="mwt-code" >import Vuex from 'vuex';</code>

<code class="mwt-code" >Vue.use(Vuex);</code>

<code class="mwt-code" >export default new Vuex.Store({</code>

<code class="mwt-code" >state: {</code>

<code class="mwt-code" >publikationen: [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >titel: 'Gibt es die Matrix wirklich?',</code>

<code class="mwt-code" >abstract: 'Eine Untersuchung der Realität und ihrer Möglichkeiten.',</code>

<code class="mwt-code" >inhalt: 'Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.'</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >mutations: {</code>

<code class="mwt-code" >addPublikation(state, publikationen) {</code>

<code class="mwt-code" >state.publikationen.push(publikationen);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >actions: {</code>

<code class="mwt-code" >addPublikation({ commit }, publikationen) {</code>

<code class="mwt-code" >commit('addPublikation', publikationen);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >});</code>

'''In''' App.vue''':'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div id=</code>&quot;<code class="mwt-code" >app</code>&quot;&gt;

&lt;<code class="mwt-code" >h1</code>&gt;<code class="mwt-code" >Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code" >/h1</code>&gt;

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >v-for=</code>&quot;<code class="mwt-code" >(publikation, index) in $store.state.publikationen</code>&quot;

:<code class="mwt-code" >key=</code>&quot;<code class="mwt-code" >index</code>&quot;
:<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >publikation.titel</code>&quot;
:<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >publikation.abstract</code>&quot;
:<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >publikation.inhalt</code>&quot;
<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >KommentarFormular /</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

Mit diesen Konzepten kann man strukturierte Vue.js-Anwendung erstellen, die eine Publikation anzeigt und ein Kommentarformular enthält.

<span id="mein-erstes-vue.js-projekt-in-vscode"></span>
=== Mein erstes Vue.js Projekt in VSCode ===

Es beginnt wieder damit sicherzustellen, dass Node.js auf deinem System installiert ist. Falls nicht, lade es von der [https://nodejs.org/ Node.js-Website] herunter und installiere es.

Installiere Vue CLI global, um ein neues Vue-Projekt zu erstellen:

npm install -g @vue/cli

<span id="erstelle-ein-neues-vue-projekt"></span>
==== Erstelle ein neues Vue-Projekt ====

Öffne das Terminal oder die Kommandozeile und navigiere zu dem Verzeichnis, in dem das Projekt erstellt werden soll. Führe den folgenden Befehl aus:

vue create from-peer-review-to-crowd-review

Wähle die Standardkonfiguration oder passe sie nach Bedarf an.

<span id="öffne-das-projekt-in-visual-studio-code-1"></span>
==== Öffne das Projekt in Visual Studio Code ====

Starte Visual Studio Code und öffne das neu erstellte Projektverzeichnis:

code from-peer-review-to-crowd-review

<span id="erstelle-komponenten"></span>
==== 4. Erstelle Komponenten ====

Erstelle eine neue Datei für die Publikation-Komponente:

* Erstelle einen neuen Ordner components im src-Verzeichnis
* Füge eine Datei Publikation.vue im src/components-Ordner hinzu
'''Datei''' src/components/Publikation.vue''':'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;{{ titel }}&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;{{ abstract }}&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;{{ inhalt }}&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >props: {</code>

<code class="mwt-code" >titel: String,</code>

<code class="mwt-code" >abstract: String,</code>

<code class="mwt-code" >inhalt: String</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style scoped</code>&gt;

<code class="mwt-code" >/* Styles für die Publikation */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<code class="mwt-code" >Füge eine Datei KommentarFormular.vue im src/components-Ordner hinzu.</code>

<code class="mwt-code" >'''Datei''' src/components/KommentarFormular.vue''':'''</code>

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >form @submit.prevent=</code>&quot;<code class="mwt-code" >onSubmit</code>&quot;&gt;

&lt;<code class="mwt-code" >textarea v-model=</code>&quot;<code class="mwt-code" >kommentar</code>&quot;<code class="mwt-code" > placeholder=</code>&quot;<code class="mwt-code" >Fügen Sie einen Kommentar hinzu...</code>&quot;<code class="mwt-code" > required</code>&gt;&lt;<code class="mwt-code" >/textarea</code>&gt;

&lt;<code class="mwt-code" >button type=</code>&quot;<code class="mwt-code" >submit</code>&quot;&gt;<code class="mwt-code" >Kommentar hinzufügen</code>&lt;<code class="mwt-code" >/button</code>&gt;

&lt;<code class="mwt-code" >/form</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >data() {</code>

<code class="mwt-code" >return {</code>

<code class="mwt-code" >kommentar: ''</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >methods: {</code>

<code class="mwt-code" >onSubmit() {</code>

<code class="mwt-code" >alert('Kommentar hinzugefügt: ' + this.kommentar);</code>

<code class="mwt-code" >this.kommentar = '';</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style scoped</code>&gt;

<code class="mwt-code" >/* Styles für das Kommentarformular */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<span id="konfiguriere-routing"></span>
==== Konfiguriere Routing ====

Falls das Projekt noch keinen Router enthält, installiere Vue Router:

npm install vue-router

Erstelle eine Datei router/index.js im src-Verzeichnis:

'''Datei''' src/router/index.js''':'''

<code class="mwt-code" >import Vue from 'vue';</code>

<code class="mwt-code" >import Router from 'vue-router';</code>

<code class="mwt-code" >import Publikation from '../components/Publikation.vue';</code>

<code class="mwt-code" >import KommentarFormular from '../components/KommentarFormular.vue';</code>

<code class="mwt-code" >Vue.use(Router);</code>

<code class="mwt-code" >export default new Router({</code>

<code class="mwt-code" >routes: [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >path: '/publikationen',</code>

<code class="mwt-code" >name: 'Publikation',</code>

<code class="mwt-code" >component: Publikation</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >path: '/',</code>

<code class="mwt-code" >name: 'KommentarFormular',</code>

<code class="mwt-code" >component: KommentarFormular</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code>

<code class="mwt-code" >});</code>

<span id="verwende-die-komponenten-in-app.vue"></span>
==== Verwende die Komponenten in App.vue ====

Ersetze den Inhalt der App.vue, um die Publikation- und KommentarFormular-Komponenten einzuschließen:

'''Datei''' src/App.vue''':'''

&lt;<code class="mwt-code" >template</code>&gt;

&lt;<code class="mwt-code" >div id=</code>&quot;<code class="mwt-code" >app</code>&quot;&gt;

&lt;<code class="mwt-code" >h1</code>&gt;<code class="mwt-code" >Wissenschaftliche Publikationen</code>&lt;<code class="mwt-code" >/h1</code>&gt;

&lt;<code class="mwt-code" >Publikation</code>

<code class="mwt-code" >v-for=</code>&quot;<code class="mwt-code" >(publikation, index) in publikationen</code>&quot;

:<code class="mwt-code" >key=</code>&quot;<code class="mwt-code" >index</code>&quot;
:<code class="mwt-code" >titel=</code>&quot;<code class="mwt-code" >publikation.titel</code>&quot;
:<code class="mwt-code" >abstract=</code>&quot;<code class="mwt-code" >publikation.abstract</code>&quot;
:<code class="mwt-code" >inhalt=</code>&quot;<code class="mwt-code" >publikation.inhalt</code>&quot;
<code class="mwt-code" >/</code>&gt;

&lt;<code class="mwt-code" >KommentarFormular /</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/template</code>&gt;

&lt;<code class="mwt-code" >script</code>&gt;

<code class="mwt-code" >import Publikation from './components/Publikation.vue';</code>

<code class="mwt-code" >import KommentarFormular from './components/KommentarFormular.vue';</code>

<code class="mwt-code" >export default {</code>

<code class="mwt-code" >components: {</code>

<code class="mwt-code" >Publikation,</code>

<code class="mwt-code" >KommentarFormular</code>

<code class="mwt-code" >},</code>

<code class="mwt-code" >data() {</code>

<code class="mwt-code" >return {</code>

<code class="mwt-code" >publikationen: [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >titel: 'Gibt es die Matrix wirklich?',</code>

<code class="mwt-code" >abstract: 'Eine Untersuchung der Realität und ihrer Möglichkeiten.',</code>

<code class="mwt-code" >inhalt: 'Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.'</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

&lt;<code class="mwt-code" >/script</code>&gt;

&lt;<code class="mwt-code" >style</code>&gt;

<code class="mwt-code" >/* Styles für die App */</code>

&lt;<code class="mwt-code" >/style</code>&gt;

<span id="starte-die-anwendung-1"></span>
==== Starte die Anwendung ====

Starte den Vue-Entwicklungsserver, um die Anwendung auszuführen:

npm run serve

Öffne einen Webbrowser und gehe zu http://localhost:8080, um die Anwendung zu sehen.

Jetzt haben wir ein funktionierendes Vue.js-Projekt erstellt, welches eine Publikation anzeigt und ein Kommentarformular enthält.

<span id="asynchrone-programmierung-und-datenübertragung"></span>
= Asynchrone Programmierung und Datenübertragung =

Frontend-Entwicklung konzentriert sich auf die Gestaltung der Benutzeroberfläche und Interaktivität einer Webanwendung unter Verwendung moderner Technologien wie HTML5, CSS3 und JavaScript-Frameworks wie React, Angular oder Vue.js. Im Full-Stack-Kontext arbeitet das Frontend mit dem Backend zusammen, das durch Technologien wie Node.js, Express und Datenbanken wie MongoDB oder PostgreSQL unterstützt wird. Die Kommunikation zwischen Frontend und Backend erfolgt typischerweise durch RESTful APIs oder GraphQL, wobei JSON oder XML als Formate für den Datenaustausch verwendet werden. Promises und async/await sind Methoden zur Handhabung von asynchronem Code in JavaScript. Sie helfen dabei, Code lesbarer und wartbarer zu machen, insbesondere wenn man mit asynchronen Operationen wie API-Anfragen oder Datenverarbeitung arbeitet.

Sehen wir uns nun an, wie man Promises und async/await in unserem Beispiel anwenden kann. Promises sind Objekte, die einen zukünftigen Wert repräsentieren. Sie bieten eine Möglichkeit, asynchrone Operationen zu verwalten, indem sie auf den Abschluss dieser Operation warten.

Angenommen, wir möchten die Publikationen von einem Server abrufen. Wir verwenden eine Funktion, die ein Promise zurückgibt:

'''JavaScript Code:'''

<code class="mwt-code" >// Funktion zum Abrufen von Publikationen (simuliert mit setTimeout)</code>

<code class="mwt-code" >function fetchPublikationen() {</code>

<code class="mwt-code" >return new Promise((resolve, reject) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >setTimeout(() =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >const publikationen = [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >titel: 'Gibt es die Matrix wirklich?',</code>

<code class="mwt-code" >abstract: 'Eine Untersuchung der Realität und ihrer Möglichkeiten.',</code>

<code class="mwt-code" >inhalt: 'Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.'</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >];</code>

<code class="mwt-code" >resolve(publikationen);</code>

<code class="mwt-code" >}, 1000);</code>

<code class="mwt-code" >});</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >// Nutzung des Promises</code>

<code class="mwt-code" >fetchPublikationen().then(publikationen =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >console.log('Publikationen erhalten:', publikationen);</code>

<code class="mwt-code" >}).catch(error =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >console.error('Fehler beim Abrufen der Publikationen:', error);</code>

<code class="mwt-code" >});</code>

In diesem Beispiel simulieren wir die asynchrone Abrufoperation mit setTimeout. Die Funktion fetchPublikationen gibt ein Promise zurück, das nach einer Verzögerung von 1 Sekunde die Publikationen auflöst (resolve). Wenn ein Fehler auftritt, wird die Funktion reject aufgerufen.

<span id="asyncawait"></span>
== async/await ==

'''async/await''' ist eine syntaktische Vereinfachung für die Arbeit mit Promises, die es ermöglicht, asynchrone Operationen wie synchronen Code zu schreiben.

Wir können das gleiche Beispiel mit async/await umsetzen:

'''JavaScript Code:'''

<code class="mwt-code" >// Funktion zum Abrufen von Publikationen (simuliert mit setTimeout)</code>

<code class="mwt-code" >function fetchPublikationen() {</code>

<code class="mwt-code" >return new Promise((resolve, reject) =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >setTimeout(() =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >const publikationen = [</code>

<code class="mwt-code" >{</code>

<code class="mwt-code" >titel: 'Gibt es die Matrix wirklich?',</code>

<code class="mwt-code" >abstract: 'Eine Untersuchung der Realität und ihrer Möglichkeiten.',</code>

<code class="mwt-code" >inhalt: 'Hier wird die Forschung zu den Fragen der Matrix-Theorie vorgestellt.'</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >];</code>

<code class="mwt-code" >resolve(publikationen);</code>

<code class="mwt-code" >}, 1000);</code>

<code class="mwt-code" >});</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >// Async-Funktion zum Abrufen und Anzeigen von Publikationen</code>

<code class="mwt-code" >async function showPublikationen() {</code>

<code class="mwt-code" >try {</code>

<code class="mwt-code" >const publikationen = await fetchPublikationen();</code>

<code class="mwt-code" >console.log('Publikationen erhalten:', publikationen);</code>

<code class="mwt-code" >} catch (error) {</code>

<code class="mwt-code" >console.error('Fehler beim Abrufen der Publikationen:', error);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >// Aufruf der async-Funktion</code>

showPublikationen();

Dieses Beispiel erläutert:

* fetchPublikationen bleibt unverändert und gibt ein Promise zurück
* showPublikationen ist eine async&nbsp;Funktion. Innerhalb dieser Funktion verwenden wir await, um auf das Ergebnis von fetchPublikationen zu warten. Await pausiert die Ausführung der Funktion, bis das Promise aufgelöst wird.
* Fehler werden mit try/catch behandelt, was den Code sauber und verständlich macht
Daten zwischen dem Backend und dem Frontend können in mehreren Formaten gesendet werden, meistens wird entweder XML oder JSON verwendet. XML (eXtensible Markup Language) ist ein markiertes Datenformat, das Daten in einer hierarchischen Struktur mit benutzerdefinierten Tags darstellt. Es ist sehr flexibel und kann komplexe Datenstrukturen repräsentieren, wird jedoch als schwerfälliger und aufwändiger in der Verarbeitung angesehen. JSON (JavaScript Object Notation) ist ein leichteres Format, das Daten in einer einfacheren Schlüssel-Wert-Paar-Struktur organisiert. JSON ist leichter lesbar und einfacher zu verarbeiten, insbesondere in JavaScript-Umgebungen. In der Praxis wird JSON häufiger verwendet als XML, da es einfacher zu integrieren und effizienter in modernen Webanwendungen ist. JSON lässt sich nahtlos mit JavaScript kombinieren und ermöglicht eine schnellere und unkompliziertere Datenverarbeitung.

AJAX (Asynchronous JavaScript and XML) ermöglicht die asynchrone Kommunikation zwischen dem Browser und dem Server, wodurch Inhalte dynamisch aktualisiert werden können, ohne die ganze Seite neu zu laden. In unserem Beispiel für eine Plattform zur Veröffentlichung wissenschaftlicher Publikationen können wir AJAX verwenden, um Publikationen vom Server abzurufen und auf der Webseite anzuzeigen. Obwohl der Name &quot;AJAX&quot; XML impliziert, wird in der Praxis oft JSON verwendet.

Beispiel einer XML-Datei:

&lt;<code class="mwt-code" >publikation</code>&gt;

&lt;<code class="mwt-code" >titel</code>&gt;<code class="mwt-code" > Die Matrix: Leben wir in einer Simulation?</code>&lt;<code class="mwt-code" >/titel</code>&gt;

&lt;<code class="mwt-code" >autor</code>&gt;<code class="mwt-code" >Alice</code>&lt;<code class="mwt-code" >/autor</code>&gt;

&lt;<code class="mwt-code" >jahr</code>&gt;<code class="mwt-code" >2024</code>&lt;<code class="mwt-code" >/jahr</code>&gt;

&lt;<code class="mwt-code" >/publikation</code>&gt;

<code class="mwt-code" >Und hier dieselbe Information als JSON-Datei:</code>

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >titel</code>&quot;<code class="mwt-code" >:</code>&quot;<code class="mwt-code" >Die Matrix: Leben wir in einer Simulation?</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >autor</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Alice</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >jahr</code>&quot;<code class="mwt-code" >: 2024</code>

<code class="mwt-code" >}</code>

Senden wir nun eine Anfrage mit der fetch-API. Der Server liefert die Publikationen im JSON-Format zurück. Diese Daten werden dann verarbeitet und in der Benutzeroberfläche angezeigt, ohne dass die Seite neu geladen wird.

<code class="mwt-code" >async function fetchPublikationen() {</code>

<code class="mwt-code" >try {</code>

<code class="mwt-code" >const response = await fetch('https://api.example.com/publikationen');</code>

<code class="mwt-code" >if (!response.ok) {</code>

<code class="mwt-code" >throw new Error('Netzwerkantwort war nicht okay.');</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >const data = await response.json();</code>

<code class="mwt-code" >console.log('Publikationen erhalten:', data);</code>

<code class="mwt-code" >displayPublikationen(data);</code>

<code class="mwt-code" >} catch (error) {</code>

<code class="mwt-code" >console.error('Fehler beim Abrufen der Publikationen:', error);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >function displayPublikationen(publikationen) {</code>

<code class="mwt-code" >const container = document.getElementById('publikationen-container');</code>

<code class="mwt-code" >container.innerHTML = publikationen.map(p =</code>&gt;<code class="mwt-code" > `</code>

&lt;<code class="mwt-code" >div</code>&gt;

&lt;<code class="mwt-code" >h2</code>&gt;<code class="mwt-code" >${p.titel}</code>&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;<code class="mwt-code" >${p.autor}</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >div</code>&gt;<code class="mwt-code" >${p.jahr}</code>&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >`).join('');</code>

<code class="mwt-code" >}</code>

fetchPublikationen();

In diesem Code wird eine Anfrage an die API gesendet, um Publikationen zu erhalten. Die JSON-Daten werden dann verarbeitet und die Inhalte auf der Webseite angezeigt, was eine dynamische und reaktive Benutzererfahrung ermöglicht. Es ist üblich Beispiel-Serverantworten und -anfragen lokal zu speichern und diese Daten (üblicherweise in der Praxis oft JSON-Dateien) im Frontend zu verwenden, also die Daten anhand von diesen JSON Dateien anzuzeigen.

<span id="api-definitionen"></span>
== API Definitionen ==

API-Definitionen sind von zentraler Bedeutung für die Erstellung klarer und konsistenter Schnittstellen, die den Datenaustausch zwischen verschiedenen Systemen regeln. Sie bieten eine strukturierte Übersicht über verfügbare Endpunkte, erforderliche Parameter und die Formate der zurückgegebenen Daten, was die Integration von Frontend und Backend vereinfacht. OpenAPI (The Linux Foundation, 2024)''',''' ehemals bekannt als Swagger, ist ein weit verbreitetes Tool zur Definition und Dokumentation von APIs. Mit OpenAPI können Entwickler präzise API-Spezifikationen in einem maschinenlesbaren Format erstellen, das auch interaktive Dokumentation umfasst. Diese Dokumentation erleichtert es Entwicklern, die API zu verstehen und zu testen, ohne direkt mit dem Backend-Code interagieren zu müssen. OpenAPI unterstützt die klare Kommunikation der API-Funktionalitäten und trägt zur Konsistenz und Interoperabilität bei der Systemintegration bei.

Um die OpenAPI-Spezifikation für unsere Plattform zur Veröffentlichung wissenschaftlicher Publikationen visuell anzusehen und zu testen, können wir die Swagger UI verwenden. Hier ist eine Schritt-für-Schritt-Anleitung, wie dies aussehen kann:

<span id="swagger-ui-verwenden"></span>
=== Swagger UI verwenden ===

'''Swagger UI lokal einrichten''':

* Lade die [https://github.com/swagger-api/swagger-ui Swagger UI] herunter oder klone das Repository
* Öffne das Verzeichnis dist und kopiere die Dateien swagger-ui-bundle.js, swagger-ui-standalone-preset.js und&nbsp;swagger-ui.css in ein Verzeichnis, das von deinem Webserver bereitgestellt wird
'''OpenAPI-Spezifikation einbinden''':

Erstelle eine HTML-Datei, zum Beispiel index.html, im selben Verzeichnis wie die Swagger UI Dateien und binde die OpenAPI-Spezifikation ein. Die index.html könnte folgendermaßen aussehen:
 &lt;<code class="mwt-code">!DOCTYPE html</code>&gt;
&lt;<code class="mwt-code">html lang=</code>"<code class="mwt-code">en</code>"&gt;
&lt;<code class="mwt-code">head</code>&gt;
&lt;<code class="mwt-code">meta charset=</code>"<code class="mwt-code">UTF-8</code>"&gt;
&lt;<code class="mwt-code">title</code>&gt;<code class="mwt-code">Swagger UI</code>&lt;<code class="mwt-code">/title</code>&gt;

&lt;<code class="mwt-code">link rel=</code>"<code class="mwt-code">stylesheet</code>"<code class="mwt-code"> type=</code>"<code class="mwt-code">text/css</code>"<code class="mwt-code"> href=</code>"<code class="mwt-code">swagger-ui.css</code>"<code class="mwt-code"> </code>&gt;

&lt;<code class="mwt-code">script src=</code>"<code class="mwt-code">swagger-ui-bundle.js</code>"<code class="mwt-code"> charset=</code>"<code class="mwt-code">UTF-8</code>"&gt;<code class="mwt-code"> </code>&lt;<code class="mwt-code">/script</code>&gt;
&lt;<code class="mwt-code">script src=</code>"<code class="mwt-code">swagger-ui-standalone-preset.js</code>"<code class="mwt-code"> charset=</code>"<code class="mwt-code">UTF-8</code>"&gt;<code class="mwt-code"> </code>&lt;<code class="mwt-code">/script</code>&gt;

&lt;<code class="mwt-code">script</code>&gt;
<code class="mwt-code">   window.onload = function() {</code>
<code class="mwt-code">   const ui = SwaggerUIBundle({</code>
<code class="mwt-code">   url: </code>"<code class="mwt-code">path/to/your/openapi.yaml</code>"<code class="mwt-code">, // Pfad zu deiner OpenAPI-Spezifikation</code>
<code class="mwt-code">   dom_id: '#swagger-ui',</code>
<code class="mwt-code">   presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],</code>
<code class="mwt-code">   layout: </code>"<code class="mwt-code">StandaloneLayout</code>"
<code class="mwt-code">   });</code>

<code class="mwt-code">   window.ui = ui;</code>

<code class="mwt-code">}</code>

&lt;<code class="mwt-code">/script</code>&gt;
&lt;<code class="mwt-code">/head</code>&gt;
&lt;<code class="mwt-code">body</code>&gt;
&lt;<code class="mwt-code">div id=</code>"<code class="mwt-code">swagger-ui</code>"&gt;&lt;<code class="mwt-code">/div</code>&gt;
&lt;<code class="mwt-code">/body</code>&gt;
&lt;<code class="mwt-code">/html</code>&gt;


Ersetze path/to/your/openapi.yaml durch den Pfad zu deiner OpenAPI-Spezifikation.

'''Swagger UI lokal öffnen''':

Starte einen lokalen Webserver, um die index.html Datei anzuzeigen. Zum Beispiel kannst man dies mit Python tun: python -m http.server im Verzeichnis mit der index.html Datei.

Öffne deinen Browser und navigiere zu der URL, die deinem lokalen Webserver zugewiesen ist, wie http://localhost:8000, um die interaktive API-Dokumentation deiner Publikationen-Plattform zu sehen.

<span id="api-definition-für-unser-fallbeispiel"></span>

=== API Definition für unser Fallbeispiel ===

In unserem Beispiel könnte man sich folgende vereinfachte API Definitionen vorstellen:

<code class="mwt-code" >POST /register</code>

<code class="mwt-code" >POST /login</code>

<code class="mwt-code" >POST /publications</code>

<code class="mwt-code" >GET /publications/{id}</code>

<code class="mwt-code" >POST /reviews</code>

<code class="mwt-code" >GET /comments?publicationId={id}</code>

POST erstellt neue Daten auf dem Server. PUT aktualisiert bestehende Daten. GET ruft Daten vom Server ab, ohne sie zu ändern. Im Frontend Development ist sollte man immer die gesamte Applikation verstehen und wie die Daten am effizientesten zwischen dem Server und dem Frontend ausgetauscht werden können. Deshalb ist es wichtig sich die API-Definition, sowie das UI-Design, am Anfang eines neuen Frontendprojekts gut zu überlegen. Die API-Definition ist der Vertrag zwischen der UI und dem Server. Sehen wir uns nun die Datenübertragung für ein paar Endpunkte im Detail an.

# POST /register
'''Beschreibung:''' Registriert einen neuen Benutzer im System.

<blockquote>'''Anfrage:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >username</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >alice</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >email</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >alice@example.com</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >password</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >securepassword</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >role</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Author</code>&quot;

<code class="mwt-code" >}</code>

'''Antwort:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >id</code>&quot;<code class="mwt-code" >: 1,</code>

&quot;<code class="mwt-code" >username</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >alice</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >email</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >alice@example.com</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >role</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Author</code>&quot;

<code class="mwt-code" >}</code></blockquote>
<ol style="list-style-type: decimal;" start="2">
<li><p>POST /login</p></li>
</ol>
<blockquote>'''Beschreibung:''' Authentifiziert einen Benutzer und erstellt eine Sitzung.

'''Anfrage:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >email</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >alice@example.com</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >password</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >securepassword</code>&quot;

<code class="mwt-code" >}</code>

'''Antwort:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >token</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >jwt-token-string</code>&quot;

<code class="mwt-code" >}</code></blockquote>
<ol style="list-style-type: decimal;" start="3">
<li><p>POST /publications</p></li>
</ol>
'''Beschreibung:'''Erstellt eine neue wissenschaftliche Publikation.

'''Anfrage:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >title</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Einfluss von KI auf Peer-Review-Prozesse</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >abstract</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Diese Arbeit untersucht...</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >content</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Der komplette Inhalt...</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >authorId</code>&quot;<code class="mwt-code" >: 1</code>

<code class="mwt-code" >}</code>

'''Antwort:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >id</code>&quot;<code class="mwt-code" >: 101,</code>

&quot;<code class="mwt-code" >title</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Einfluss von KI auf Peer-Review-Prozesse</code>&quot;<code class="mwt-code" >,</code>

&quot;<code class="mwt-code" >status</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Eingereicht</code>&quot;

<code class="mwt-code" >}</code>

<ol style="list-style-type: decimal;" start="4">
<li><p>GET /publications/{id}</p></li>
</ol>
<blockquote>'''Beschreibung:''' Gibt Details zu einer spezifischen Publikation zurück.

'''Parameter:'''</blockquote>
* id (Pfadparameter): Die ID der Publikation.
<blockquote>'''Antwort:'''

{

&quot;id&quot;: 101,

&quot;title&quot;: &quot;Einfluss von KI auf Peer-Review-Prozesse&quot;,

&quot;abstract&quot;: &quot;Diese Arbeit untersucht...&quot;,

&quot;content&quot;: &quot;Der komplette Inhalt...&quot;,

&quot;status&quot;: &quot;Eingereicht&quot;,

&quot;authorId&quot;: 1

}</blockquote>
<ol style="list-style-type: decimal;" start="5">
<li><p>POST /reviews</p></li>
</ol>
<blockquote>'''Beschreibung:''' Ein Gutachter erstellt ein Gutachten für eine Publikation.

'''Anfrage:'''

{

&quot;publicationId&quot;: 101,

&quot;reviewerId&quot;: 2,

&quot;comments&quot;: &quot;Die Arbeit ist gut, aber...&quot;,

&quot;recommendation&quot;: &quot;Kleine Überarbeitung&quot;

}

'''Antwort:'''

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >id</code>&quot;<code class="mwt-code" >: 201,</code>

&quot;<code class="mwt-code" >publicationId</code>&quot;<code class="mwt-code" >: 101,</code>

&quot;<code class="mwt-code" >reviewerId</code>&quot;<code class="mwt-code" >: 2,</code>

&quot;<code class="mwt-code" >status</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Gutachten erstellt</code>&quot;

<code class="mwt-code" >}</code></blockquote>
<ol style="list-style-type: decimal;" start="6">
<li><p>GET /comments?publicationId={id}</p></li>
</ol>
<blockquote>'''Beschreibung:''' Listet alle Kommentare zu einer Publikation auf.

'''Parameter:'''</blockquote>
* publicationId (Query-Parameter): Die ID der Publikation.
<blockquote>'''Antwort:'''

<code class="mwt-code" >[</code>

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >id</code>&quot;<code class="mwt-code" >: 301,</code>

&quot;<code class="mwt-code" >publicationId</code>&quot;<code class="mwt-code" >: 101,</code>

&quot;<code class="mwt-code" >userId</code>&quot;<code class="mwt-code" >: 3,</code>

&quot;<code class="mwt-code" >content</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Sehr interessante Ergebnisse!</code>&quot;

<code class="mwt-code" >},</code>

<code class="mwt-code" >{</code>

&quot;<code class="mwt-code" >id</code>&quot;<code class="mwt-code" >: 302,</code>

&quot;<code class="mwt-code" >publicationId</code>&quot;<code class="mwt-code" >: 101,</code>

&quot;<code class="mwt-code" >userId</code>&quot;<code class="mwt-code" >: 4,</code>

&quot;<code class="mwt-code" >content</code>&quot;<code class="mwt-code" >: </code>&quot;<code class="mwt-code" >Ich stimme dem Gutachter zu, aber...</code>&quot;

<code class="mwt-code" >}</code>

<code class="mwt-code" >]</code></blockquote>

<span id="alternative-tools"></span>
=== Alternative Tools ===

Es gibt auch online Tools zur API-Dokumentation. Beispielsweise:

* Swagger Editor (SmartBear, 2024): Besuche Swagger Editor, lade eine OpenAPI-Spezifikation hoch oder füge den Inhalt direkt ein, um die API-Dokumentation zu erstellen und zu testen.
* Postman (Postman, Inc., 2024): Lade eine OpenAPI-Spezifikation in Postman, um die API-Dokumentation anzuzeigen und API-Anfragen zu testen.
Diese Tools helfen, die API-Dokumentation für die Plattform zu visualisieren und zu überprüfen, wie die API funktioniert.

<span id="responsive-webdesign"></span>
= Responsive Webdesign =

Responsive Webdesign sorgt dafür, dass Websites auf allen Geräten gut aussehen, indem sie sich automatisch an verschiedene Bildschirmgrößen anpassen. Zu den Prinzipien gehören flexible Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen, skalierbare Bilder und Schriften sowie die Verwendung von Media Queries in CSS, um spezifische Stile für verschiedene Geräte zu definieren. Ziel ist es, eine konsistente und nutzerfreundliche Erfahrung auf Smartphones, Tablets und Desktops zu bieten.

<span id="gestaltung-von-benutzeroberflächen-die-auf-verschiedenen-geräten-und-bildschirmgrößen-gut-funktionieren"></span>
== Gestaltung von Benutzeroberflächen, die auf verschiedenen Geräten und Bildschirmgrößen gut funktionieren ==

Sehen wir uns ein paar HTML und CSS-Konzepte an, die es ermöglichen Elemente unterschiedlich auf unterschiedlichen Geräten darzustellen. Die besprochenen JavaScript Frameworks helfen auch dabei Websites zu designen die sowohl auf großen Bildschirmen als auch auf Smartphones gut bedienbar sind.

<span id="responsive-layout"></span>
=== Responsive Layout ===

Verwende Flexbox für ein flexibles Layout, das sich an verschiedene Bildschirmgrößen anpasst.

&lt;<code class="mwt-code" >!-- HTML-Struktur --</code>&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >publikationen-container</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >publikation</code>&quot;&gt;

&lt;<code class="mwt-code" >h2</code>&gt;<code class="mwt-code" >Publikation 1</code>&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;<code class="mwt-code" >Abstract...</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >publikation</code>&quot;&gt;

&lt;<code class="mwt-code" >h2</code>&gt;<code class="mwt-code" >Publikation 2</code>&lt;<code class="mwt-code" >/h2</code>&gt;

&lt;<code class="mwt-code" >p</code>&gt;<code class="mwt-code" >Abstract...</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >!-- Weitere Publikationen --</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

<code class="mwt-code" >/* CSS für responsives Layout */</code>

<code class="mwt-code" >.publikationen-container {</code>

<code class="mwt-code" >display: flex;</code>

<code class="mwt-code" >flex-wrap: wrap;</code>

<code class="mwt-code" >gap: 16px;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 calc(33.333% - 32px); /* Drei Spalten Layout mit Abstand */</code>

<code class="mwt-code" >box-sizing: border-box;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >@media (max-width: 768px) {</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 calc(50% - 32px); /* Zwei Spalten Layout auf Tablets */</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >@media (max-width: 480px) {</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 100%; /* Einspaltiges Layout auf Mobilgeräten */</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="media-queries"></span>
=== Media Queries ===

Passe Stile für unterschiedliche Bildschirmgrößen an, um das Layout und die Schriftgröße zu optimieren.

<code class="mwt-code" >/* Media Queries für unterschiedliche Bildschirmgrößen */</code>

<code class="mwt-code" >@media (max-width: 1200px) {</code>

<code class="mwt-code" >.header {</code>

<code class="mwt-code" >font-size: 1.5em;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >@media (max-width: 768px) {</code>

<code class="mwt-code" >.header {</code>

<code class="mwt-code" >font-size: 1.2em;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >.navigation {</code>

<code class="mwt-code" >display: none; /* Navigation auf kleineren Bildschirmen ausblenden */</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="flexible-bilder"></span>
=== Flexible Bilder ===

Stelle sicher, dass Bilder sich proportional zur Bildschirmgröße skalieren.

<code class="mwt-code" >/* Flexibles Bild */</code>

<code class="mwt-code" >img {</code>

<code class="mwt-code" >max-width: 100%;</code>

<code class="mwt-code" >height: auto;</code>

<code class="mwt-code" >}</code>

<span id="touchfreundliche-elemente"></span>
=== Touchfreundliche Elemente ===

Gestalte Schaltflächen und Links groß genug für eine einfache Bedienung auf Touchscreens.

<code class="mwt-code" >/* Touchfreundliche Schaltflächen */</code>

<code class="mwt-code" >button {</code>

<code class="mwt-code" >padding: 12px 20px;</code>

<code class="mwt-code" >font-size: 16px;</code>

<code class="mwt-code" >}</code>

<span id="testen"></span>
=== Testen ===

Nutze Entwicklertools in Browsern oder echte Geräte, um das Layout und die Funktionalität auf verschiedenen Bildschirmgrößen zu überprüfen. Mit diesen Techniken und Beispielen kannst man sicherstellen, dass unsere Plattform für wissenschaftliche Publikationen auf allen Geräten gut aussieht und benutzerfreundlich ist.

<span id="medienabfragen-und-die-verwendung-von-css-frameworks-zur-unterstützung-des-responsiven-designs"></span>
== Medienabfragen und die Verwendung von CSS-Frameworks zur Unterstützung des responsiven Designs ==

<span id="medienabfragen"></span>
=== Medienabfragen ===

Medienabfragen ermöglichen es, CSS-Stile basierend auf den Eigenschaften des Geräts wie Bildschirmgröße und -auflösung anzupassen. Sie sind besonders nützlich, um sicherzustellen, dass deine Plattform auf verschiedenen Bildschirmgrößen gut aussieht.

'''Beispiel:''' Wir möchten das Layout der Publikationen auf unterschiedlichen Geräten anpassen.

<code class="mwt-code" >/* Standardlayout für große Bildschirme */</code>

<code class="mwt-code" >.publikationen-container {</code>

<code class="mwt-code" >display: flex;</code>

<code class="mwt-code" >flex-wrap: wrap;</code>

<code class="mwt-code" >gap: 16px;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 calc(33.333% - 32px); /* Drei Spalten Layout für große Bildschirme */</code>

<code class="mwt-code" >box-sizing: border-box;</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >/* Layout für Tablets */</code>

<code class="mwt-code" >@media (max-width: 768px) {</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 calc(50% - 32px); /* Zwei Spalten Layout für Tablets */</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >/* Layout für Mobilgeräte */</code>

<code class="mwt-code" >@media (max-width: 480px) {</code>

<code class="mwt-code" >.publikation {</code>

<code class="mwt-code" >flex: 1 1 100%; /* Einspaltiges Layout für Mobilgeräte */</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="verwendung-von-css-frameworks"></span>
=== Verwendung von CSS-Frameworks ===

CSS-Frameworks bieten vorgefertigte Klassen und Komponenten, die helfen, responsives Design schnell und einfach zu implementieren. Beliebte Frameworks sind Bootstrap, Foundation und Tailwind CSS.

Bootstrap ist ein weit verbreitetes CSS-Framework, das eine Reihe von nützlichen Klassen für responsives Design bereitstellt. Füge die Bootstrap CSS-Datei in deinem HTML-Dokument ein.

&lt;<code class="mwt-code" >!-- Bootstrap CSS einbinden --</code>&gt;

&lt;<code class="mwt-code" >link rel=</code>&quot;<code class="mwt-code" >stylesheet</code>&quot;<code class="mwt-code" > href=</code>&quot;<code class="mwt-code" >https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css</code>&quot;&gt;

<code class="mwt-code" >Verwende Bootstrap-Klassen, um ein responsives Layout für deine Publikationen zu erstellen.</code>

&lt;<code class="mwt-code" >!-- HTML-Struktur mit Bootstrap-Klassen --</code>&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >container</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >row</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >col-md-4 mb-4</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >card</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >card-body</code>&quot;&gt;

&lt;<code class="mwt-code" >h5 class=</code>&quot;<code class="mwt-code" >card-title</code>&quot;&gt;<code class="mwt-code" >Publikation 1</code>&lt;<code class="mwt-code" >/h5</code>&gt;

&lt;<code class="mwt-code" >p class=</code>&quot;<code class="mwt-code" >card-text</code>&quot;&gt;<code class="mwt-code" >Abstract...</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >col-md-4 mb-4</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >card</code>&quot;&gt;

&lt;<code class="mwt-code" >div class=</code>&quot;<code class="mwt-code" >card-body</code>&quot;&gt;

&lt;<code class="mwt-code" >h5 class=</code>&quot;<code class="mwt-code" >card-title</code>&quot;&gt;<code class="mwt-code" >Publikation 2</code>&lt;<code class="mwt-code" >/h5</code>&gt;

&lt;<code class="mwt-code" >p class=</code>&quot;<code class="mwt-code" >card-text</code>&quot;&gt;<code class="mwt-code" >Abstract...</code>&lt;<code class="mwt-code" >/p</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >!-- Weitere Publikationen --</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

&lt;<code class="mwt-code" >/div</code>&gt;

In diesem Beispiel verwendet die Plattform Bootstrap-Klassen wie container, row und col-md-4, um ein responsives Raster zu erstellen, das sich je nach Bildschirmgröße anpasst. Bootstrap sorgt dafür, dass das Layout auf großen Bildschirmen in drei Spalten und auf kleineren Bildschirmen in einer oder zwei Spalten angezeigt wird. Durch die Kombination von Medienabfragen und CSS-Frameworks kann man sicherstellen, dass deine Plattform zur Veröffentlichung wissenschaftlicher Publikationen auf verschiedenen Geräten gut aussieht und benutzerfreundlich ist.

<span id="leistungsoptimierung"></span>
= Leistungsoptimierung =

Niemand wartet gerne mehrere Sekunden, bis eine Website vollständig geladen ist. Jede Website, die wir entwickeln sollte, immer so optimiert wie möglich sein. Performance-Benchmarks messen, wie schnell und gut eine Website läuft. Sie helfen dabei, die Benutzererfahrung zu verbessern. Es ist ratsam die Performance einer Website immer wieder zu messen, um sicherzugehen dass man Ladezeiten mit neuen Grafiken oder anderen Elementen unnötig verlängert hat.

<span id="optimierung-von-ladezeiten"></span>
== Optimierung von Ladezeiten ==

'''Szenario:''' Die Seite lädt eine Liste von Publikationen, einschließlich Titel, Abstract und Inhaltszusammenfassung.

'''Wir haben folgende Optimierungsmöglichkeiten:'''

Lazy Loading: Lade Inhalte nur dann, wenn sie tatsächlich benötigt werden. Anstatt alle Publikationen auf einmal zu laden, zeige zunächst nur eine Übersicht an und lade detaillierte Informationen erst, wenn der Benutzer mehr darüber erfahren möchte. Dies reduziert die anfängliche Ladezeit erheblich.

Caching: Verwende Browser-Caching oder serverseitiges Caching, um häufig abgerufene Daten zwischenzuspeichern. Wenn eine Publikation einmal abgerufen wurde, speichere diese Daten lokal oder auf dem Server, um sie bei zukünftigen Anfragen schneller bereitstellen zu können. Dies vermindert die Notwendigkeit, dieselben Daten wiederholt vom Server abzurufen.

Minimierung von HTTP-Anfragen''':''' Reduziere die Anzahl der HTTP-Anfragen durch das Zusammenfassen von CSS- und JavaScript-Dateien. Anstatt mehrere Dateien zu laden, kombiniere sie in einer einzigen Datei, um die Anzahl der Anfragen zu minimieren und die Ladezeit zu verkürzen.

Komprimierung: Komprimiere die Daten, die zwischen Server und Client ausgetauscht werden. Verwende Gzip oder Brotli-Komprimierung, um die Größe der übertragenen Daten zu reduzieren. Dies verringert die Menge an Daten, die heruntergeladen werden müssen, und beschleunigt die Ladezeiten.

Optimierung von Bildern''':''' Stelle sicher, dass alle Bilder auf der Website komprimiert und in einem Web-freundlichen Format vorliegen. Verwende Formate wie WebP oder JPEG 2000, die eine bessere Komprimierung bieten, um die Größe der Bilddateien zu reduzieren und die Ladezeiten zu verbessern.

Content Delivery Network (CDN): Nutze ein CDN, um statische Dateien wie Bilder, CSS und JavaScript von Servern in der Nähe des Benutzers zu liefern. Ein CDN kann die Ladezeiten durch geografische Verteilung und schnelle Bereitstellung von Inhalten verbessern.

<span id="lazy-loading"></span>
===  Lazy Loading ===

Lade Publikationen nur bei Bedarf, nicht alle auf einmal. Hier wird zunächst nur eine Übersicht oder ein Teaser angezeigt, und detaillierte Informationen werden erst geladen, wenn der Benutzer auf „Mehr lesen“ klickt oder scrollt.

<code class="mwt-code" >// Funktion zum Laden der Details einer Publikation auf Knopfdruck</code>

<code class="mwt-code" >async function loadPublikationDetails(publikationId) {</code>

<code class="mwt-code" >try {</code>

<code class="mwt-code" >const response = await fetch(`https://api.example.com/publikationen/${publikationId}`);</code>

<code class="mwt-code" >if (!response.ok) {</code>

<code class="mwt-code" >throw new Error('Netzwerkantwort war nicht okay.');</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >const data = await response.json();</code>

<code class="mwt-code" >displayPublikationDetails(data);</code>

<code class="mwt-code" >} catch (error) {</code>

<code class="mwt-code" >console.error('Fehler beim Abrufen der Publikation:', error);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >// Event-Handler für </code>&quot;<code class="mwt-code" >Mehr lesen</code>&quot;<code class="mwt-code" > Button</code>

<code class="mwt-code" >document.querySelectorAll('.more-info').forEach(button =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >button.addEventListener('click', () =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >const publikationId = button.getAttribute('data-id');</code>

<code class="mwt-code" >loadPublikationDetails(publikationId);</code>

<code class="mwt-code" >});</code>

<code class="mwt-code" >});</code>

<span id="caching"></span>
=== Caching ===

Nutze Browser-Caching, um die Daten von Publikationen zwischenzuspeichern. Bei wiederholten Anfragen können die gecachten Daten verwendet werden, anstatt sie erneut vom Server abzurufen.

<code class="mwt-code" >// Funktion zum Abrufen der Publikationen mit Caching</code>

<code class="mwt-code" >async function fetchPublikationen() {</code>

<code class="mwt-code" >const cacheKey = 'publikationen-cache';</code>

<code class="mwt-code" >const cachedData = localStorage.getItem(cacheKey);</code>

<code class="mwt-code" >if (cachedData) {</code>

<code class="mwt-code" >return JSON.parse(cachedData); // Rückgabe der gecachten Daten</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >try {</code>

<code class="mwt-code" >const response = await fetch('https://api.example.com/publikationen');</code>

<code class="mwt-code" >if (!response.ok) {</code>

<code class="mwt-code" >throw new Error('Netzwerkantwort war nicht okay.');</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >const data = await response.json();</code>

<code class="mwt-code" >localStorage.setItem(cacheKey, JSON.stringify(data)); // Speichern in lokalem Speicher</code>

<code class="mwt-code" >return data;</code>

<code class="mwt-code" >} catch (error) {</code>

<code class="mwt-code" >console.error('Fehler beim Abrufen der Publikationen:', error);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >}</code>

<span id="minimierung-von-http-anfragen"></span>
=== Minimierung von HTTP-Anfragen ===

Kombiniere mehrere CSS- und JavaScript-Dateien zu einer einzigen Datei, um die Anzahl der HTTP-Anfragen zu reduzieren.

&lt;<code class="mwt-code" >!-- Kombinierte CSS-Datei --</code>&gt;

&lt;<code class="mwt-code" >link rel=</code>&quot;<code class="mwt-code" >stylesheet</code>&quot;<code class="mwt-code" > href=</code>&quot;<code class="mwt-code" >styles.min.css</code>&quot;&gt;

&lt;<code class="mwt-code" >!-- Kombinierte JavaScript-Datei --</code>&gt;

&lt;<code class="mwt-code" >script src=</code>&quot;<code class="mwt-code" >scripts.min.js</code>&quot;&gt;&lt;<code class="mwt-code" >/script</code>&gt;

Verwende Build-Tools wie Webpack oder Gulp, um deine CSS- und JavaScript-Dateien zu bündeln und zu minimieren.

<span id="komprimierung"></span>
=== Komprimierung ===

Aktiviere Gzip-Komprimierung auf deinem Webserver, um die Größe der übertragenen Daten zu reduzieren.

Beispielsweise kann man dies in der Apache-Konfiguration folgendermaßen machen:

&lt;<code class="mwt-code" >IfModule mod_deflate.c</code>&gt;

<code class="mwt-code" >AddOutputFilterByType DEFLATE text/text</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE text/html</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE text/xml</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE text/css</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE application/xml</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE application/xhtml+xml</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE application/rss+xml</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE application/javascript</code>

<code class="mwt-code" >AddOutputFilterByType DEFLATE application/x-javascript</code>

&lt;<code class="mwt-code" >/IfModule</code>&gt;

<span id="optimierung-von-bildern"></span>
=== Optimierung von Bildern ===

Verwende komprimierte Bildformate wie WebP, um die Größe der Bilddateien zu reduzieren.

&lt;<code class="mwt-code" >!-- WebP-Bild verwenden --</code>&gt;

&lt;<code class="mwt-code" >img src=</code>&quot;<code class="mwt-code" >publikationen-image.webp</code>&quot;<code class="mwt-code" > alt=</code>&quot;<code class="mwt-code" >Publikationsbild</code>&quot;&gt;

<span id="content-delivery-network-cdn"></span>
=== Content Delivery Network (CDN) ===

Nutze ein CDN, um statische Dateien wie Bilder und JavaScript von Servern näher am Benutzer bereitzustellen.

&lt;<code class="mwt-code" >!-- Bild von einem CDN laden --</code>&gt;

&lt;<code class="mwt-code" >img src=</code>&quot;<code class="mwt-code" >https://cdn.example.com/images/publikationen-image.jpg</code>&quot;<code class="mwt-code" > alt=</code>&quot;<code class="mwt-code" >Publikationsbild</code>&quot;&gt;

Durch diese Optimierungen kann man die Ladezeiten deiner Plattform erheblich verbessern und somit die Benutzererfahrung steigern.

<span id="ressourcenoptimierung"></span>
== Ressourcenoptimierung ==

Um den Ressourcenverbrauch in einer Webanwendung zu optimieren, kann man verschiedene Techniken anwenden, um die Effizienz der Nutzung von CPU, Speicher und Netzwerkbandbreite zu verbessern. Hier sind einige Beispiele, wie man dies für unsere Plattform zur Veröffentlichung wissenschaftlicher Publikationen umsetzen kann:

<span id="code-splitting"></span>
=== Code-Splitting ===

Unterteile deinen JavaScript-Code in kleinere, nach Bedarf ladbare Teile. Das reduziert die anfängliche Ladezeit und verbessert die Leistung, da nur der benötigte Code geladen wird.

<code class="mwt-code" >// Beispiel mit Webpack für Code-Splitting</code>

<code class="mwt-code" >import(/* webpackChunkName: </code>&quot;<code class="mwt-code" >publikation-details</code>&quot;<code class="mwt-code" > */ './publikation-details.js')</code>

<code class="mwt-code" >.then(module =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >const loadDetails = module.loadDetails;</code>

<code class="mwt-code" >loadDetails();</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >.catch(err =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >console.error('Fehler beim Laden des Moduls:', err);</code>

<code class="mwt-code" >});</code>

<span id="vermeidung-von-übermäßigem-dom-manipulationen"></span>
=== Vermeidung von übermäßigem DOM-Manipulationen ===

Reduziere die Anzahl der DOM-Manipulationen, indem man Änderungen in einem Dokumentfragment vornimmt und das Fragment dann einmal in das DOM einfügt.

<code class="mwt-code" >// Reduziere DOM-Manipulationen</code>

<code class="mwt-code" >const fragment = document.createDocumentFragment();</code>

<code class="mwt-code" >const list = document.createElement('ul');</code>

<code class="mwt-code" >for (let i = 0; i </code>&lt;<code class="mwt-code" > 100; i++) {</code>

<code class="mwt-code" >const item = document.createElement('li');</code>

<code class="mwt-code" >item.textContent = `Publikation ${i + 1}`;</code>

<code class="mwt-code" >list.appendChild(item);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >fragment.appendChild(list);</code>

<code class="mwt-code" >document.getElementById('publikationen-container').appendChild(fragment);</code>

<span id="minimierung-von-berechnungen-im-haupt-thread"></span>
=== Minimierung von Berechnungen im Haupt-Thread ===

Verschiebe rechenintensive Aufgaben in Web Worker, um den Haupt-Thread zu entlasten und die Benutzeroberfläche reaktionsfähig zu halten.

<code class="mwt-code" >// Haupt-Thread</code>

<code class="mwt-code" >const worker = new Worker('worker.js');</code>

<code class="mwt-code" >worker.postMessage('start');</code>

<code class="mwt-code" >// worker.js</code>

<code class="mwt-code" >self.onmessage = function(event) {</code>

<code class="mwt-code" >if (event.data === 'start') {</code>

<code class="mwt-code" >// Rechenintensive Aufgabe</code>

<code class="mwt-code" >let result = performHeavyComputation();</code>

<code class="mwt-code" >self.postMessage(result);</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >};</code>

<span id="ressourcenoptimierung-durch-lazy-loading-von-bildern"></span>
=== Ressourcenoptimierung durch Lazy Loading von Bildern ===

Lade Bilder nur dann, wenn sie in den Sichtbereich des Benutzers kommen, um Bandbreite zu sparen und die Ladezeiten zu verbessern.

&lt;<code class="mwt-code" >!-- Verwende `loading=</code>&quot;<code class="mwt-code" >lazy</code>&quot;<code class="mwt-code" >` für Lazy Loading von Bildern --</code>&gt;

&lt;<code class="mwt-code" >img src=</code>&quot;<code class="mwt-code" >image.jpg</code>&quot;<code class="mwt-code" > loading=</code>&quot;<code class="mwt-code" >lazy</code>&quot;<code class="mwt-code" > alt=</code>&quot;<code class="mwt-code" >Publikationsbild</code>&quot;&gt;

<span id="vermeidung-von-redundanz-bei-netzwerkanfragen"></span>
=== Vermeidung von Redundanz bei Netzwerkanfragen ===

Nutze ETags und Last-Modified Header zur Validierung von Cache-Inhalten, um unnötige Netzwerkanfragen zu vermeiden.

<code class="mwt-code" >// Beispiel für einen Server-Response mit ETag</code>

<code class="mwt-code" >HTTP/1.1 200 OK</code>

<code class="mwt-code" >ETag: </code>&quot;<code class="mwt-code" >123456789</code>&quot;

<code class="mwt-code" >Content-Type: application/json</code>

<code class="mwt-code" >// Client-seitige Validierung</code>

<code class="mwt-code" >fetch('https://api.example.com/publikationen', {</code>

<code class="mwt-code" >headers: {</code>

<code class="mwt-code" >'If-None-Match': '123456789' // Verwende den ETag-Wert</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >})</code>

<code class="mwt-code" >.then(response =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >if (response.status === 304) {</code>

<code class="mwt-code" >console.log('Daten nicht geändert, verwende Cache.');</code>

<code class="mwt-code" >} else {</code>

<code class="mwt-code" >return response.json();</code>

<code class="mwt-code" >}</code>

<code class="mwt-code" >});</code>

<span id="effiziente-datenabfragen"></span>
=== Effiziente Datenabfragen ===

Wir können API-Anfragen optimieren, indem man nur die benötigten Daten abfragt und die Abfragen entsprechend filtert.

<code class="mwt-code" >// API-Anfrage mit spezifischen Abfrageparametern</code>

<code class="mwt-code" >fetch('https://api.example.com/publikationen?fields=titel,abstract')</code>

<code class="mwt-code" >.then(response =</code>&gt;<code class="mwt-code" > response.json())</code>

<code class="mwt-code" >.then(data =</code>&gt;<code class="mwt-code" > {</code>

<code class="mwt-code" >console.log(data);</code>

<code class="mwt-code" >});</code>

<span id="optimierung-der-bildgröße"></span>
=== Optimierung der Bildgröße ===

Verwende Bildkomprimierung und -optimierung, um die Dateigröße zu reduzieren, ohne die Bildqualität merklich zu beeinträchtigen.<pre>
 &lt;!-- Komprimiertes Bild verwenden --&gt;
&lt;img src="publikationen-image-compressed.jpg" alt="Publikationsbild"&gt;
</pre>

Durch diese Techniken kann man den Ressourcenverbrauch deiner Anwendung senken, die Leistung verbessern und eine flüssigere Benutzererfahrung bieten.

<span id="bibliography"></span>

= Bibliography =

BitBucket. (2024, Juli 28). ''BitBucket''. Retrieved from BitBucket: https://bitbucket.org

CoPilot, G. (2024, July 10). Retrieved from https://github.com/features/copilot

Eclipse Foundation. (2024, Juli 2024). ''Eclipse''. Retrieved from Eclipse: https://www.eclipse.org

Figma. (2024, Juli 28). ''Figma''. Retrieved from Figma: https://www.figma.com

git. (2024, Juli 28). ''git-scm''. Retrieved from git-scm: https://git-scm.com

GitHub. (2024, Juli 2024). ''GitHub''. Retrieved from GitHub: https://github.com

GitLab. (2024, Juli 29). ''GitLab''. Retrieved from GitLab: https://about.gitlab.com

Google. (2024, Juli 28). ''Angular''. Retrieved from Angular: https://angular.dev

JetBrains. (2024, Juli 28). ''JetBrains''. Retrieved from JetBrains: https://www.jetbrains.com/idea/

Markdown. (2024, Juli 28). ''Markdown Guide''. Retrieved from Markdown Guide: https://www.markdownguide.org

Meta. (2024, August 10). ''React''. Retrieved from React: https://react.dev

Meta Open Source. (2024, Juli 28). ''React''. Retrieved from React: https://react.dev

Microsoft. (2024, Juli 28). ''TypeScript''. Retrieved from TypeScript: https://www.typescriptlang.org

Microsoft. (2024, Juli 28). ''VisualStudioCode''. Retrieved from VisualStudioCode: https://code.visualstudio.com

OpenAI. (2024, July 10). ''OpenAI''. Retrieved from OpenAI: https://chat.openai.com/

OpenAPI. (2024, Juli 28). ''OpenAPI''. Retrieved from OpenAPI: https://www.openapis.org

OpenJS Foundation. (2024, Juli 28). ''ESLint''. Retrieved from ESLint: https://eslint.org

Postman, Inc. (2024, 08 13). ''Postman''. Retrieved from Postman: https://www.postman.com

Prettier. (2024, Juli 28). ''Prettier''. Retrieved from Prettier: https://prettier.io

SmartBear. (2024, 08 13). ''SwaggerEditor''. Retrieved from SwaggerEditor: https://editor.swagger.io

Swagger. (2024, Juli 28). ''Swagger''. Retrieved from Swagger: https://swagger.io/tools/swagger-ui/

The Linux Foundation. (2024, 08 13). ''OpenAPI''. Retrieved from OpenAPI: https://www.openapis.org/what-is-openapi

You, E. (2024, Juli 28). ''Vue.js''. Retrieved from Vue.js: https://vuejs.org