Svelte Framework komplett

Seminarziel

• Verbesserte Benutzererfahrung durch schnelles Laden und reaktionsfähige Webanwendungen.
• Kürzere Entwicklungszyklen und verkürzte Markteinführungszeiten für neue Funktionen.
• Skalierbarkeit und Wartbarkeit von Anwendungen mit steigender Benutzerbasis.
• Kostenoptimierung durch Reduzierung von Hosting- und Bandbreitenkosten.
• Flexibilität zur Integration mit vorhandenen Systemen und Technologien.
• SEO-Freundlichkeit zur Verbesserung der Online-Sichtbarkeit und des organischen Traffics.
• Zufriedenheit und Bindung von Entwicklern durch eine produktive und angenehme Entwicklungsumgebung.
• Langfristige Kompatibilität und Unterstützung durch eine engagierte Community und fortlaufende Updates.

Inhalt

• Einführung in den Svelte Compiler & Grundlagen von Svelte
  • Verständnis, wie Svelte Komponenten zu hocheffizientem JavaScript-Code kompiliert
  • Vorteile des Svelte-Compiler-Ansatzes im Vergleich zu herkömmlichen Frameworks
  • Praktische Übung: „Hello, Svelte!“ - Erstellen einer einfachen Svelte-Komponente
• Svelte 4 vs. Svelte 5
  • Vergleich der Kernunterschiede, neuen Features und Verbesserungen in Svelte 5
  • Einen Überblick, warum man Svelte 4 und Svelte 5 lernen sollte
  • Praktische Übung: Identifikation und Refactoring eines Svelte 4 Codes zu Svelte 5
• Svelte-Komponenten, Reaktivität und kleine praktische Übungen
  • Aufbau und Struktur einer Svelte-Komponente (Script, Style, Markup)
  • Anwendung von reaktiven Anweisungen und State Management
  • Praktische Übung: Entwicklung eines dynamischen Counter-Components
• Einführung in SvelteKit und seine Erweiterungen
  • Darstellung der zusätzlichen Funktionen von SvelteKit (Routing, SSR, API-Integration)
  • Vergleich: Client-seitiges Svelte vs. Fullstack-SvelteKit
  • Praktische Übung: Initialisieren und Erkunden eines SvelteKit-Projekts
• Fortgeschrittene Routing- und SSR-Konzepte in SvelteKit
  • Implementierung von verschachtelten Routen und Routenwächtern
  • Verständnis von Server-Side Rendering und Hydration
  • Praktische Übung: Erstellen einer mehrseitigen Anwendung mit dynamischen Routen
• Progressive Web Applications (PWAs) mit Svelte/SvelteKit
  • Erstellung von progressiven Webanwendungen: Service Worker, Offline-Unterstützung und Push-Benachrichtigungen
  • Integration von PWA-Features in SvelteKit-Projekte
  • Praktische Übung: Erweiterung einer SvelteKit-App um PWA-Funktionalitäten
• Svelte und TypeScript Integration
  • Einrichtung von Svelte/SvelteKit mit TypeScript
  •  Nutzung von TypeScript„s statischer Typprüfung in Svelte-Komponenten
  • Umgang mit typisierten Props und State-Management in Svelte + TypeScript-Projekten
• Fortgeschrittene Themen und Performance-Optimierung
  • Untersuchung von Komponenten-Lebenszyklusmethoden in Svelte und Anwendung der Context API
  • Profiling, Optimierung und Debugging von Svelte-Anwendungen
  • Praktische Übung: Optimieren und Debuggen eines vorgegebenen Svelte-Komponenten-Codes
• Internationale Erweiterungen und mobile Entwicklung
  • Implementierung von Mehrsprachigkeit in Svelte-Anwendungen
  • Erstellung von mobilen Apps mit Svelte und Frameworks wie Capacitor oder Cordova
  • Integration von serverlosen Funktionen (z. B. AWS Lambda, Netlify Functions)
  • Mini-Übung: Brainstorming in Kleingruppen zur Integration eines dieser Features
• Praktischer Teil: Entwicklung einer SvelteKit-Anwendung
  • Aufbau einer vollständigen SvelteKit-App, die:
    • Svelte-Komponenten (inkl. Unterschiede Svelte 4 vs. Svelte 5)
    • SvelteKit-Routing, SSR und API-Integration
    • PWA-Funktionalitäten (Service Worker, Offline-Unterstützung) integriert
  • Mentorenunterstützung während des Entwicklungsprozesses und abschließende Präsentation der Projekte