Vorbereitungen

Beispiel-App

Eine Beispiel-App dient zur Veranschaulichung des konkreten Lernziels. Diese App wurde als reines Webfrontend mit HTML, CSS und JavaScript ohne Frameworks entwickelt und kann hier ausprobiert werden: webprog-weather.vercel.app. Quellcode der App: github.com/behrends/webprog-weather

Wir werden diese App gemeinsam während der ersten Termine entwickeln und somit einen Teil der wesentlichen Konzepte von HTML, CSS und JavaScript auf praktische Weise erlernen.

Webentwicklung: Frontend vs. Backend

Wir haben nur 33 Vorlesungsstunden, daher beschränken wir die Themen:

• nur Frontend (HTML/CSS/JavaScript)
• kein Backend (PHP, ASP.NET, …)
• Single Page App (evtl. nur eine HTML-Seite)
• keine Frameworks (reines HTML/CSS/JavaScript)

33 Vorlesungsstunden sind auch für HTML/CSS/JavaScript sehr knapp…

Weitere Technologien des Internets und der Webentwicklung werden ggf. in anderen Vorlesungen behandelt.

Eine Frontend Developer Roadmap zeigt den großen Umfang der Front-Webentwicklung ohne Backend.

JavaScript und auch CSS entwickeln sich beständig weiter und haben ein großes Umfeld mit einigen Frameworks und Erweiterungen, siehe z.B.

• State of JavaScript
• State of CSS

HTML, CSS und JavaScript stellen nur die Grundlagen und den Ausgangspunkt der clientseitigen Web-Entwicklung im Frontend dar (d.h. zur Ausführung im Browser).

Später kommen häufig Frameworks für CSS und JavaScript zum Einsatz. Ein paar Beispiele beliebter Frameworks:

• CSS: Tailwind, Bootstrap
• JavaScript: React, Angular, Vue, Svelte

Serverseitig gibt es auf dem Backend ebenfalls Frameworks für jede beliebte Programmiersprache und u.a. kommen in der Regel auch Datenbanken zum Einsatz (siehe die Abbildung oben). Für eine Behandlung der serverseitigen Themen reichen die Vorlesungsstunden nicht aus.

Ablauf

In der gemeinsamen „Vorlesung“ wird hauptsächlich aktives Lernen durch Live Coding stattfinden. Die Studierenden können die Konzepte mitprogrammieren und interaktiv Fragen stellen. Daher sollten alle bitte immer ihren Laptop mitbringen. Folien wird es kaum geben, da diese nur ein passives Lernen ermöglichen.

Aufgrund der knappen Zeit werden nur die wesentliche Aspekte im Unterricht besprochen. Durch praktische Übungen und insbesondere das Gruppenprojekt werden die Inhalte angewendet und vertieft.

In Moodle wird Material zum Nachschlagen bereitgestellt. Eigene Recherchen im Selbststudium sind während der Webentwicklung unumgänglich und verstärken das aktive Lernen.

Dozierende bieten Hilfestellung und Coaching während des Projekts an. Wir werden in den späteren Terminen auch Zeit für das gemeinsame Programmieren haben.

Entwicklungsumgebung

Für die Webentwicklung eignet sich im Prinzip jeder Texteditor und fast jede Entwicklungsumgebung für andere Programmiersprachen, da diese meistens auch Unterstützung für HTML, CSS und JavaScript bieten. Außerdem gibt es sehr gut funktionierende Entwicklungsumgebungen in der Cloud, für die nur eine Internetverbindung und ein Browser benötigt wird.

Webentwicklung in der Cloud

Es gibt zahlreiche Programmierumgebungen für Webentwickler in der Cloud, wie z.B. die sehr umfangreiche Plattform Replit. In Replit gibt es mit Replit AI einen integrierten „KI-Assistenten“, der Code generieren, debuggen und erklären kann, und der in einem interaktiven Chat nutzbar ist.

Vorführung: Beispiel-App in replit.com, Ablauf der Entwicklung und 
des LiveCodings (mitmachen!)

Codepen ist sehr nützlich für Beispiele. Hier werden im Gegensatz zu replit die Dateien verborgen und es gibt nur drei Eingabebereiche — jeweils einen für HTML, CSS und JavaScript. Dadurch lassen sich einzelne Bestandteile bzw. Komponenten einer Webanwendung unabhängig vom Rest der App programmieren.

Lokal auf dem eigenen Rechner (z.B. VS Code)

Lediglich ein Texteditor wird benötigt. Empfohlen wird der flexible und kostenlose Editor Visual Studio Code von Microsoft (VS Code), der von vielen Webentwicklern eingesetzt wird. Es können aber auch andere Editoren verwendet werden. VS Code wird empfohlen, da mit diesem das Live Coding vorgeführt wird.

Vorführung: VS Code mit Live Server und der Beispiel-App, 
Ablauf der Entwicklung und des LiveCodings (mitmachen!)

VS Code kann in allen Betriebssystemen installiert werden. Eine nützliche Erweiterung (_extension in VS Code) ist Live Preview von Microsoft, mit der lokale Web-Projekte lokal gestartet und in einem in VS Code integrierten Browser ausgeführt werden können (Rechtsklick auf die HTML-Datei und „Show Preview“ wählen).

VS Code im Browser: vscode.dev

Übung

Bei Replit registrieren und/oder VS Code installieren und einrichten.

Zu Beginn und ggf. zwischendurch nochmals vorführen (falls Fragen/Probleme auftauchen): Datei index.html erstellen und mit Text füllen, Live Server in VS Code starten (Go Live).

• VS Code herunterladen und installieren
• In VS Code die Erweiterung (bzw. extension) „Live Preview“ einrichten
• Datei index.html erstellen und in Projektordner speichern.
• Beliebigen Text in index.html eingeben und speichern
• Live Preview mit Rechtsklick auf die HTML-Datei starten
• replit.com (HTML/CSS/JavaScript-Template) und codepen.io ausprobieren.

Zusammenfassung

Diskussion

Gab es Schwierigkeiten bei der Installation?

Wenn die Arbeit im Team beginnt, dann sollten die Gruppen sich überlegen, ob sie mit git, GitHub/GitLab/etc. und VS Code arbeiten oder das Projekt ohne git gemeinsam in der Cloud mit Replit entwickeln (ohne git). Im letzten Fall sollte trotzdem immer wieder eine lokale Kopie der Dateien erstellt werden und VS Code kann nützlich für die lokale Entwicklung sein. Im Prinzip wäre auch eine Entwicklung im Team mit Codepen möglich, wenn es nur eine Datei jeweils für HTML, CSS und JavaScript gibt.

Kennt jemand weitere empfehlenswerte Editoren, Cloud-Umgebungen, Tools?

Bemerkung: NodeJS wird in der Vorlesung und im Projekt nicht benötigt.