Inventage AGDieser Workshop zum Thema Web Components wurde als interne Schulung von Inventage Mitarbeitern erstellt. An einem ganzen Tag hatten alle Mitarbeiter von Inventage die Möglichkeit, diesen Workshop durchzuführen und so den Umgang mit Web Components besser kennenzulernen. Nun haben wir beschlossen, diesen Workshop für den Start unseres Inventage Labs zu überarbeiten und als Workshop-Serie zu veröffentlichen.
In diesem mehrteiligen Workshop zeigen wir Schritt für Schritt auf, wie eine Web-Applikation auf Basis von Web Components entsteht. Dabei nutzen wir sowohl bereits vorhandene Web Components und andererseits entwickeln wir selber neue.
Für die Umsetzung der Web-Applikation verwenden wir Lit. Lit ist eine schlanke und leistungsfähige Bibliothek zur Entwicklung von Web-Components. Mit einer template-basierten Syntax, Datenbindung, Reaktivität und effizienter Aktualisierung erleichtert Lit die Erstellung moderner Web-Components. Es erlaubt die Verwendung vertrauter HTML-Templates und bindet Daten automatisch an die Komponenten. Reaktive Eigenschaften sorgen dafür, dass Komponenten automatisch aktualisiert werden, wenn sich die Daten ändern. Die Aktualisierung der Komponenten wird optimiert, indem nur die geänderten Teile der DOM-Struktur aktualisiert werden. Lit kann eigenständig oder in Kombination mit anderen JavaScript-Bibliotheken verwendet werden und erfreut sich grosser Beliebtheit bei Webentwicklern.
Die entstehende Web-Applikation ist ein sogenannter “Amenity Finder”. Das fertige Produkt kann unter https://amenity-finder.surge.sh gefunden werden. “Amenity” steht hier für “Annehmlichkeit”, “Attraktivität” oder “(Freizeit-)Einrichtung”. Unser Amenity Finder hilft dir dabei, schnell und einfach Restaurants in deiner Nähe zu finden.
Für diesen Workshop werden die folgenden Tools vorausgesetzt:
Stelle sicher, dass du eine aktuelle Node.js-Version installiert hast. Du kannst Node.js entweder über den offiziellen Installer herunterladen und installieren oder, falls du Homebrew verwendest, die node Formula verwenden (z.B. über den Befehl $ brew install node). Überprüfe, ob die Installation erfolgreich war, indem du den Befehl $ node -v ausführst. Die Ausgabe sollte eine Version anzeigen, die grösser oder gleich >=14 (LTS) oder >=16 (current) ist.
Du benötigst eine integrierte Entwicklungsumgebung (IDE) oder einen Texteditor, um den Code zu schreiben. Wir empfehlen entweder die Verwendung einer aktuellen Version von IntelliJ IDEA oder WebStorm mit den Plugins Prettier oder Visual Studio Code mit den Plugins ESLint, lit-plugin und Prettier. Diese Plugins unterstützen dich bei der Codeformatierung, Fehlererkennung und bieten eine bessere Unterstützung für die Entwicklung von Web-Components.
open-wc bietet spezielle Empfehlungen für die Verwendung von integrierten Entwicklungsumgebungen (IDEs) oder Texteditoren bei der Entwicklung von Web-Components. Die “IDE @ open-wc” ist eine Sammlung von Konfigurationen und Plugins, die die Entwicklung von Web-Components in verschiedenen IDEs und Editoren erleichtern.
Im ersten Teil dieser Workshop Serie werden wir dir dabei helfen, deine Entwicklungsumgebung Schritt für Schritt aufzubauen.
Stelle sicher, dass du einen modernen Web-Browser installiert hast, am besten Chrome oder Firefox. Beachte, dass der Internet Explorer 11 oder der Edge-Browser in Versionen kleiner oder gleich 18 nicht unterstützt werden. Ein aktueller Browser gewährleistet die korrekte Darstellung und Funktionalität der entwickelten Web-Components.
Mit diesen Voraussetzungen bist du bereit, das Lab zu beginnen und dich in die spannende Welt der Web-Components zu vertiefen. Viel Spass beim Entwickeln und Entdecken dieser neuen Möglichkeiten!
Unser Web Components Workshop besteht aus sieben Teilen, die aufeinander aufbauen und sich im Kontext der Amenity Finder Serie bewegen. In jedem Teil konzentrieren wir uns auf spezifische Aspekte der Entwicklung unserer Amenity Finder Applikation und setzen dabei Web Components ein.
