Webentwicklung mit Svelte und Svelte Material UI

Seminarziel

Am Ende des Seminars sind die Teilnehmenden in der Lage, Svelte und Svelte Material UI effektiv zu nutzen, um leistungsstarke, skalierbare und visuell ansprechende Webanwendungen zu entwickeln und bereitzustellen. Sie lernen, wie sie Projekte planen, entwickeln, integrieren und testen, um verschiedene Anforderungen abzudecken und die Anwendungsleistung zu optimieren.

Inhalt

• Einführung in Svelte
  • Überblick und Ziele: Was ist Svelte und warum ist es wichtig? Historische Entwicklung und Hauptmerkmale.
  • Anwendungsbereiche: Typische Anwendungsbereiche und Szenarien, in denen Svelte eingesetzt wird (z.B. Webanwendungen, SPAs).
  • Vorteile von Svelte: Vergleich mit anderen JavaScript-Frameworks wie React und Vue.js.
• Installation und Einrichtung
  • Systemvoraussetzungen: Voraussetzungen für die Installation und Ausführung von Svelte.
  • Installation: Schritt-für-Schritt-Anleitung zur Installation von Svelte mit dem Svelte CLI.
  • Erste Schritte: Einrichtung einer Entwicklungsumgebung und Erstellung eines neuen Svelte-Projekts.
• Grundlegende Konzepte und Syntax
  • Svelte-Syntax: Einführung in die grundlegende Syntax von Svelte, einschließlich Komponenten, Props und State.
  • Reaktivität: Erklärung der Reaktivität in Svelte und wie sie genutzt wird.
  • Event Handling: Nutzung von Event-Handling und Binding in Svelte-Komponenten.
• Komponenten und Architektur
  • Komponentenstruktur: Erstellung und Nutzung von Svelte-Komponenten.
  • Datenfluss und Zustandsverwaltung: Einführung in den Datenfluss und die Zustandsverwaltung in Svelte.
  • Lifecycle Hooks: Nutzung von Lifecycle Hooks in Svelte-Komponenten.
• Praktische Übung 1: Erstellung einer einfachen Svelte-Anwendung
  • Problemstellung: Erstellung einer einfachen To-Do-Liste mit Svelte.
  • Lösung: Installation und Konfiguration der Entwicklungsumgebung, Implementierung der Komponenten und Reaktivität.
  • Ergebnis: Eine funktionierende To-Do-Liste-Anwendung mit grundlegenden Svelte-Funktionen.
• Einführung in Svelte Material UI
  • Überblick und Ziele: Was ist Svelte Material UI und warum ist es wichtig? Hauptmerkmale und Vorteile.
  • Installation: Schritt-für-Schritt-Anleitung zur Installation und Einrichtung von Svelte Material UI.
  • Erste Schritte: Nutzung grundlegender Svelte Material UI-Komponenten.
• Grundlegende Svelte Material UI-Komponenten
  • Layout-System: Nutzung des Layout-Systems und der Grid-Komponenten von Svelte Material UI.
  • Formulare und Eingaben: Erstellung von Formularen und Nutzung von Eingabekomponenten.
  • Navigation: Implementierung von Navigationsleisten, Menüs und Tabs.
• Erweiterte Svelte Material UI-Komponenten
  • Datenanzeige: Nutzung von Tabellen, Karten und Listen zur Datenanzeige.
  • Dialoge und Overlays: Implementierung von Dialogen, Modalen und Tooltips.
  • Medien und Icons: Einbindung und Nutzung von Medienkomponenten und Icons.
• Theming und Anpassung
  • Theming: Einführung in das Theming-System von Svelte Material UI.
  • Anpassung von Styles: Nutzung von CSS und Svelte Material UI-Utilities zur Anpassung von Komponenten.
  • Erstellung eines benutzerdefinierten Themes: Schritt-für-Schritt-Anleitung zur Erstellung eines benutzerdefinierten Themes.
• Praktische Übung 2: Erstellung einer erweiterten Anwendung mit Svelte Material UI
  • Problemstellung: Erweiterung der bestehenden To-Do-Liste-Anwendung mit Svelte Material UI-Komponenten und -Funktionalitäten.
  • Lösung: Installation und Konfiguration von Svelte Material UI, Implementierung der Material UI-Komponenten, Anpassung des Layouts und des Themas.
  • Ergebnis: Eine erweiterte To-Do-Liste-Anwendung mit Svelte Material UI-Integration und benutzerdefiniertem Theme.
• Fortgeschrittene Svelte-Konzepte
  • Routing: Einführung in Svelte Routing und die Implementierung von Routing in einer Svelte-Anwendung.
  • State Management: Nutzung von Svelte Stores zur zentralen Zustandsverwaltung.
  • Performance-Optimierung: Techniken zur Verbesserung der Leistung von Svelte-Anwendungen.
• Fortgeschrittene Svelte Material UI-Konzepte
  • Dynamische Formulare: Erstellung und Verwaltung dynamischer Formulare mit Svelte Material UI.
  • API-Integration: Nutzung von Svelte Material UI-Komponenten zur Darstellung von API-Daten.
  • Authentifizierung: Implementierung von Authentifizierungsmechanismen in Svelte Material UI-Anwendungen.
• Testen und Debugging
  • Unit Testing: Einführung in das Unit Testing mit Svelte Testing Library und Jest.
  • End-to-End Testing: Nutzung von Cypress zur Durchführung von End-to-End-Tests.
  • Debugging: Techniken und Tools zur Fehlersuche und Debugging von Svelte- und Svelte Material UI-Anwendungen.
• Deployment und Wartung
  • Deployment: Einführung in Deployment-Strategien für Svelte-Anwendungen.
  • CI/CD: Implementierung von Continuous Integration und Continuous Deployment für Svelte-Projekte.
  • Wartung und Skalierung: Best Practices zur Wartung und Skalierung von Svelte-Anwendungen.
• Praktische Übung 3: Entwicklung und Deployment einer kompletten Anwendung
  • Problemstellung: Entwicklung und Deployment einer vollständigen Svelte-Anwendung mit Svelte Material UI-Integration und API-Anbindung.
  • Lösung: Implementierung des Projekts unter Nutzung der erlernten Techniken und Tools, Durchführung von Tests und Deployment.
  • Ergebnis: Eine vollständige, funktionierende Svelte-Anwendung mit Svelte Material UI-Integration, die bereit für den Produktionseinsatz ist.