2. Werkzeuge der Webentwicklung

Es gibt inzwischen sehr leistungsfähige Entwicklungsumgebungen, die die Webentwicklung unterstützen und effizienter machen, da sie HTML, CSS und JavaScript sowie Client-/Server-Probleme gleichzeitig berücksichtigen.

Eine Entwicklungsumgebung ist ein Programm, das die Entwicklung von Software, z. B. Webseiten, komfortabler macht, indem es Tools zur Fehlererkennung und Unterstützung mehrerer Technologien bietet.

Die Webentwicklung ist herausfordernd, da sie die gleichzeitige Verwendung mehrerer Technologien (HTML, CSS, JavaScript) sowie die Verwaltung von Client- und Server-seitigen Fehlern erfordert.

Visual Studio Code ist eine plattformübergreifende, kostenlose Entwicklungsumgebung, die von Microsoft entwickelt wurde. Es basiert auf der Chromium-Engine und lässt sich durch zahlreiche Plug-ins erweitern.

WebStorm ist eine kommerzielle Entwicklungsumgebung der Firma JetBrains. Es ist besonders leistungsfähig und für private Zwecke kostenlos nutzbar.

Online-Editoren, wie Visual Studio Code Web, Phoenix und der in GitHub integrierte Editor, können ohne Installation direkt im Browser genutzt werden, was sie besonders flexibel macht.

In diesem Kurs wird Visual Studio Code verwendet, da es plattformübergreifend, kostenlos und in der Popularität stark wachsend ist.

VSCodium ist eine offene Variante von Visual Studio Code. Es ist eine Alternative zu Visual Studio Code ohne die proprietären Teile von Microsoft.

Plug-ins erweitern Visual Studio Code um zusätzliche Funktionen, die in bestimmten Phasen der Webentwicklung nützlich sind, um effizienter arbeiten zu können.

Die Herausforderungen umfassen die Synchronisierung des Codes, das Rückgängigmachen von Änderungen, das Entfernen von Features ohne Beschädigung des Systems und die parallele Entwicklung von Features, die zu unterschiedlichen Zeiten implementiert werden.

Revisionssicherheit bedeutet, dass man jederzeit auf ältere Versionen der Software zugreifen kann, um Änderungen rückgängig zu machen oder ältere Versionen zu überprüfen.

Ein Versionskontrollsystem ermöglicht es, verschiedene Versionen von Dateien zu verwalten und Änderungen an diesen nachzuvollziehen.

Eine "Working Copy" ist die lokale Kopie des gesamten Quellcodes, mit der der Entwickelnde unabhängig von den anderen arbeitet.

Linus Torvalds entwickelte git, da ihm kein existierendes Versionskontrollsystem geeignet erschien, um die Anforderungen des Linux-Kernels zu erfüllen. Git ist heute ein weltweiter Standard.

Git benötigt keinen zentralen Server, um in der Basisfunktionalität zu arbeiten. Entwicklerhaben immer eine lokale Kopie des gesamten Quellcodes und können Plattformen wie Github für die Zusammenarbeit nutzen.

Der Befehl init legt ein neues Repository an und setzt das aktuelle Verzeichnis unter Versionskontrolle.

Mit dem Befehl add werden Dateien dem Repository hinzugefügt, sodass sie von git verwaltet werden können.

Der Befehl commit speichert Änderungen im Repository. Jeder Commit enthält eine Erklärung, die beschreibt, was und warum geändert wurde.

Der Befehl status zeigt an, welche Dateien schon committet wurden, welche geändert wurden und welche git noch nicht kennt.

Der Befehl log zeigt die Historie aller bisherigen Änderungen im Repository an.

Remote-Repositories ermöglichen es, Code zwischen Entwickelnden auszutauschen. Sie können z. B. bei Plattformen wie Github liegen oder auf eigenen Servern gehostet werden.

Der Befehl clone wird verwendet, um ein Remote-Repository herunterzuladen und lokal eine Kopie davon zu erstellen.

Der Befehl push überträgt lokale Änderungen in ein Remote-Repository, um sie anderen zur Verfügung zu stellen.

Der Befehl pull integriert Änderungen aus einem Remote-Repository in das lokale Repository.

Git ist nahtlos in Visual Studio Code integriert, sodass alle wesentlichen Operationen wie commit, push und pull mit einem Mausklick ausgeführt werden können.

Paketmanager werden benötigt, um Abhängigkeiten zwischen verschiedenen JavaScript- und CSS-Frameworks aufzulösen und sicherzustellen, dass nur der benötigte Code an den Browser ausgeliefert wird.

Ein Build-Prozess fasst die verschiedenen Komponenten einer Anwendung zusammen und erstellt daraus eine lauffähige Applikation. Er kann in Frameworks integriert sein, wie z. B. bei Tailwind CSS, oder separat aufgesetzt werden, wie bei Vue.js oder React.

Npm (Node Package Manager) ist der Standard-Paketmanager für node.js. Es arbeitet mit vielen Frameworks zusammen und verwaltet die Abhängigkeiten in Web-Applikationen.

Yarn, entwickelt von Facebook, legt besonderen Wert auf Geschwindigkeit, Verlässlichkeit und Sicherheit. Es verwendet einen lokalen Cache für Pakete und installiert diese parallel, wodurch es meist schneller ist als npm.

Ein Paketmanager wird notwendig, wenn eine Anwendung komplexer wird und Abhängigkeiten zwischen verschiedenen Bibliotheken und Frameworks aufgelöst werden müssen.

Webpack ist ein Packer, der entscheidet, welche Dateien in einer Web-Applikation benötigt werden, und diese nach Bedarf umformt, z. B. durch das Übersetzen von TypeScript in JavaScript. Es bietet auch einen integrierten Webserver, der Änderungen automatisch erkennt und im Browser einen Reload auslöst.

Parcel ist ein Packer, der stark an Popularität gewonnen hat, weil es die Arbeit an sogenannte Worker-Prozesse delegiert und Mehrprozessorsysteme effizient nutzt. Durch einen integrierten Cache wird der Build-Prozess deutlich schneller.

Gulp arbeitet ähnlich wie Webpack, bietet jedoch durch JavaScript-Code eine höhere Konfigurierbarkeit. Es ermöglicht einfache Implementierung von Plug-ins und lässt sich flexibel anpassen.

Babel ist ein Transpiler, der neuere JavaScript-Versionen in ältere übersetzt, damit sie von allen Browsern verstanden werden. Er kann auch JSX, eine Mischung aus JavaScript und HTML, konvertieren.

Frameworks wie Tailwind CSS haben integrierte Build-Prozesse. Andere, wie Vue.js oder React, unterstützen verschiedene Build-Prozesse, die separat aufgesetzt werden müssen.

Ein Paketmanager löst Abhängigkeiten zwischen Bibliotheken und Frameworks auf, stellt sicher, dass nur benötigter Code verwendet wird, und erleichtert den Build-Prozess.

Spezielle Compiler wie Babel oder Tools wie Gulp unterstützen den Entwicklungsprozess, indem sie z. B. JavaScript-Varianten übersetzen, Build-Prozesse automatisieren oder die Konfiguration von Plug-ins erleichtern.

Upload bezeichnet die Übertragung von Dateien vom eigenen Computer auf einen Server, auf dem die Web-Anwendung bereitgestellt wird.

HTTPS bietet eine verschlüsselte Datenübertragung, die sensible Informationen, wie z. B. Kreditkartennummern, schützt. Es benötigt Zertifikate, die z. B. von LetsEncrypt kostenlos bereitgestellt werden.

Continuous Integration ist der Prozess, bei dem Software bei jeder Änderung automatisch gebaut und getestet wird. Dies ermöglicht frühe Fehlererkennung und erhöht die Effizienz im Entwicklungsprozess.

Deployment beschreibt die Installation von Software oder Webseiten auf einem Server, damit diese von Nutzern im Internet verwendet werden können.

Continuous Integration ermöglicht:

1. Frühe Fehlererkennung,

2. Effizienz durch automatisierte Tests,

3. Schnellere Release-Zyklen,

4. Verbesserte Zusammenarbeit im Team durch regelmäßiges Einchecken des Codes.

Tools wie Jenkins oder Github Actions ermöglichen die Automatisierung von Build- und Integrationsprozessen in CI-Systemen.

Einfache Webseiten können auf externen Webspace-Anbietern, Cloud-Diensten oder Plattformen wie Github Pages hochgeladen werden.

Durch die Automatisierung des Build-Prozesses mittels Continuous Integration wird der Code regelmäßig getestet und integriert, was Fehler reduziert und den Entwicklungsprozess beschleunigt.

Visual Studio Code bietet einen integrierten Webserver, der Änderungen erkennt und den Browser automatisch informiert, sodass die Webseite nicht manuell neu geladen werden muss.