Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung HTMX: Einführung in moderne Webentwicklung ohne JavaScript-Frameworks
Weniger Komplexität, mehr Produktivität in der Frontend-Entwicklung
Schulungsformen
Inhouse-/Firmenschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
Finden Sie das richtige Webentwicklung Training aus unserem Portfolio.
Schulungsziel
Nach Abschluss können die Teilnehmer HTMX einsetzen, um dynamische Webanwendungen zu entwickeln, die HTTP-Anfragen direkt aus HTML-Elementen auslösen und HTML-Fragmente gezielt in die Seite einfügen. Sie beherrschen die Kernattribute für Anfragen, Ziele, Swap-Strategien und Trigger sowie fortgeschrittene Techniken wie Out-of-Band-Updates, History-Integration und Progressive Enhancement.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- 1. HTMX und das Hypermedia-Paradigma verstehen
- Die Philosophie hinter HTMX kennenlernen, die HTML als vollständiges Hypertext-Format betrachtet und dynamisches Verhalten direkt über Attribute definiert, anstatt umfangreichen JavaScript-Code zu erfordern
- Verstehen, wie HTMX die ursprüngliche REST-Vision von Roy Fielding umsetzt, bei der der Server HTML-Fragmente liefert und der Browser diese einfach darstellt, ohne JSON zu parsen und clientseitig zu rendern
- Die Vorteile dieses Ansatzes einordnen, darunter geringere Komplexität, kleinere Bundle-Größen, keine Build-Pipeline und eine flachere Lernkurve für Teams mit Backend-Fokus
- 2. Installation und erste Schritte
- HTMX in ein Projekt einbinden, entweder über CDN mit einem einzelnen Script-Tag oder als lokale Datei, wobei die Bibliothek mit etwa 14 KB gzip-komprimiert minimal bleibt
- Das erste dynamische Element erstellen, indem ein Button mit hx-post und hx-swap Attributen versehen wird und beim Klick HTML vom Server abruft und in die Seite einfügt
- Den Unterschied zwischen traditionellen vollständigen Seitenaktualisierungen und HTMX-gesteuerten partiellen Updates nachvollziehen und verstehen, wie der Server HTML-Fragmente statt ganzer Seiten zurückgibt
- 3. HTTP-Anfragen mit hx-get, hx-post und weiteren Attributen
- Die Kernattribute für HTTP-Anfragen kennenlernen, wobei hx-get, hx-post, hx-put, hx-delete und hx-patch jeweils AJAX-Anfragen mit der entsprechenden HTTP-Methode auslösen
- Die Standard-Trigger verstehen, bei denen Input-, Select- und Textarea-Elemente auf change reagieren, Formulare auf submit und alle anderen Elemente auf click, sowie diese Standardverhalten bei Bedarf anpassen
- Parameter und Daten an den Server übermitteln, indem Formularwerte automatisch gesendet werden oder mit hx-include zusätzliche Elemente in die Anfrage einbezogen werden
- 4. Ziele und Swap-Strategien mit hx-target und hx-swap
- Mit hx-target festlegen, welches Element im DOM durch die Serverantwort aktualisiert wird, wobei CSS-Selektoren das Ziel präzise bestimmen und this das auslösende Element selbst referenziert
- Die verschiedenen Swap-Strategien kennenlernen, darunter innerHTML als Standard, outerHTML zum Ersetzen des gesamten Elements, beforebegin und afterend zum Einfügen vor oder nach dem Element sowie beforeend und afterbegin für Einfügungen innerhalb des Elements
- Erweiterte Swap-Optionen nutzen wie Verzögerungen, Scroll-Verhalten und Morphing-Algorithmen, die bestehende DOM-Elemente intelligent aktualisieren statt sie zu ersetzen
- 5. Trigger und Ereignissteuerung mit hx-trigger
- Das hx-trigger Attribut einsetzen, um präzise zu steuern, welches Ereignis eine Anfrage auslöst, darunter Standard-DOM-Events wie click, keyup, mouseenter oder benutzerdefinierte Events
- Modifier für Trigger anwenden, darunter once für einmalige Auslösung, changed für Auslösung nur bei Wertänderung, delay für Verzögerungen und throttle für Ratenbegrenzung
- Polling implementieren mit der every-Syntax, die periodische Anfragen in festgelegten Intervallen auslöst, sowie Filter in eckigen Klammern nutzen, um Trigger an Bedingungen zu knüpfen
- 6. Fortgeschrittene Techniken für komplexe Interaktionen
- Out-of-Band-Swaps mit hx-swap-oob einsetzen, um mehrere Bereiche der Seite gleichzeitig zu aktualisieren, etwa wenn eine Aktion sowohl den Hauptinhalt als auch einen Zähler in der Navigation ändern soll
- Bestätigungsdialoge mit hx-confirm implementieren, die vor destruktiven Aktionen eine Nutzerbestätigung einholen, sowie Ladezustände mit der htmx-indicator Klasse visualisieren
- Browser-History-Integration mit hx-push-url und hx-replace-url nutzen, um URLs bei AJAX-Navigationen zu aktualisieren und Vor- und Zurück-Navigation zu ermöglichen
- 7. Formulare und Validierung
- Formulare mit HTMX absenden, wobei der Server HTML-Fragmente mit Erfolgsmeldungen, Fehlern oder aktualisierten Inhalten zurückgibt und das Post/Redirect/Get-Muster überflüssig wird
- Serverbasierte Validierung implementieren, bei der der Server bei ungültigen Eingaben HTML mit Fehlermeldungen zurückgibt, die direkt in die entsprechenden Formularfelder eingesetzt werden
- Inline-Bearbeitung umsetzen, bei der ein Klick auf einen Textbereich ein Bearbeitungsformular lädt, das nach dem Speichern wieder durch die aktualisierte Anzeige ersetzt wird
- 8. Serverseitige Integration und Backend-Patterns
- Verstehen, wie Backend-Frameworks HTML-Fragmente statt vollständiger Seiten oder JSON rendern und welche Template-Engines und Strukturen sich dafür eignen
- HTMX-spezifische Request-Header auswerten, darunter HX-Request zur Erkennung von HTMX-Anfragen, HX-Trigger zur Identifikation des auslösenden Elements und HX-Target zur Kenntnis des Zielbereichs
- Response-Header nutzen wie HX-Redirect für Weiterleitungen, HX-Trigger zum Auslösen clientseitiger Events und HX-Reswap zur dynamischen Änderung der Swap-Strategie
- 9. Progressive Enhancement und Integration mit anderen Bibliotheken
- Progressive Enhancement umsetzen mit hx-boost, das Links und Formulare automatisch zu AJAX-Anfragen aufwertet und bei deaktiviertem JavaScript weiterhin funktionsfähig bleibt
- HTMX mit ergänzenden Bibliotheken kombinieren, darunter Alpine.js für clientseitigen Zustand bei Dropdowns und Tabs, Hyperscript für deklaratives Scripting und Tailwind CSS für Styling
- Entscheidungskriterien für den HTMX-Einsatz verstehen und einordnen, wann HTMX die richtige Wahl ist und wann komplexere Anforderungen an clientseitigen Zustand React, Vue oder ähnliche Frameworks rechtfertigen
- Praxisübung: Eine vollständige CRUD-Anwendung mit HTMX implementieren
- Die Teilnehmer entwickeln eine funktionsfähige Webanwendung, die Datensätze anzeigt, erstellt, bearbeitet und löscht, ohne eine Zeile JavaScript zu schreiben. Zunächst wird eine Liste von Einträgen vom Server geladen und mit hx-get beim Seitenaufruf in einen Container eingefügt. Ein Formular zum Anlegen neuer Einträge wird mit hx-post implementiert, wobei der Server den neuen Eintrag als HTML-Fragment zurückgibt, das ans Ende der Liste angehängt wird. Für jeden Eintrag wird ein Bearbeiten-Button hinzugefügt, der per hx-get ein Inline-Formular lädt und den Eintrag temporär ersetzt. Das Speichern sendet die Änderungen mit hx-put und tauscht das Formular gegen den aktualisierten Eintrag aus. Löschen-Buttons erhalten hx-delete mit hx-confirm für eine Bestätigung und entfernen den Eintrag aus der Liste. Die Teilnehmer ergänzen Ladezustände, experimentieren mit verschiedenen Swap-Strategien und implementieren optional eine Suchfunktion mit verzögertem Trigger. Abschließend wird hx-boost auf die Navigation angewendet, um die gesamte Anwendung mit sanften Übergängen zu versehen.
- Die Teilnehmer entwickeln eine funktionsfähige Webanwendung, die Datensätze anzeigt, erstellt, bearbeitet und löscht, ohne eine Zeile JavaScript zu schreiben. Zunächst wird eine Liste von Einträgen vom Server geladen und mit hx-get beim Seitenaufruf in einen Container eingefügt. Ein Formular zum Anlegen neuer Einträge wird mit hx-post implementiert, wobei der Server den neuen Eintrag als HTML-Fragment zurückgibt, das ans Ende der Liste angehängt wird. Für jeden Eintrag wird ein Bearbeiten-Button hinzugefügt, der per hx-get ein Inline-Formular lädt und den Eintrag temporär ersetzt. Das Speichern sendet die Änderungen mit hx-put und tauscht das Formular gegen den aktualisierten Eintrag aus. Löschen-Buttons erhalten hx-delete mit hx-confirm für eine Bestätigung und entfernen den Eintrag aus der Liste. Die Teilnehmer ergänzen Ladezustände, experimentieren mit verschiedenen Swap-Strategien und implementieren optional eine Suchfunktion mit verzögertem Trigger. Abschließend wird hx-boost auf die Navigation angewendet, um die gesamte Anwendung mit sanften Übergängen zu versehen.
Zielgruppe & Vorkenntnisse
Das Seminar richtet sich an Fachkräfte aus der Webentwicklung, die dynamische Benutzeroberflächen ohne die Komplexität großer JavaScript-Frameworks umsetzen möchten. Angesprochen sind insbesondere Personen mit Schwerpunkt auf serverseitiger Entwicklung in Sprachen wie Python, Ruby, PHP, Java oder Go, die ihre Anwendungen um moderne Interaktionen erweitern wollen. Grundlegende Kenntnisse in HTML, HTTP und einer serverseitigen Technologie werden vorausgesetzt; JavaScript-Erfahrung ist hilfreich, aber nicht erforderlich.
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Ausgewogene Mischung aus Theorie und Praxis | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Seminarunterlagen oder Fachbuch inklusive. Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsplatz | |
|
|
| Lernumgebung | |
Neu aufgesetzte Remote-Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter, sodass Sie über ein perfektes Setup für die Durchführung aller praktischen Übungen verfügen. | |
| Arbeitsmaterialien | |
Din A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
Organisation
In Präsenz | Online | |
|---|---|---|
| Teilnehmendenzahl | ||
min. 1, max. 8 Personen | ||
| Garantierte Durchführung * | ||
Ab 1 Teilnehmenden | ||
| Schulungszeiten | ||
| ||
| Ort der Schulung | ||
 GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | ||
| Räumlichkeiten | ||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | |
| All-Inclusive | ||
Frühstück, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | |
| Barrierefreiheit | ||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Was bedeutet Offene Schulung und Inhouse Schulung?
Bei einer offenen Schulung stehen Ort und Termin vorab fest. Jeder Interessent kann eine offene Schulung buchen, daher treffen Teilnehmer aus verschiedenen Unternehmen aufeinander.
Inhouse Schulungen können auf Ihren individuellen Schulungsbedarf zugeschnitten werden. Sie bestimmen den Teilnehmerkreis, Termin und Schulungsort.
Ist eine Inhouse Schulung die richtige Wahl?
Bei einer Inhouse Schulung gehen wir auf die individuellen Bedürfnisse Ihres Unternehmens ein und decken den Schulungsbedarf direkt bei Ihnen im Unternehmen ab.
Das spart Zeit und Geld und sorgt für einen schnellen Wissenstransfer Ihrer Mitarbeiter.
Wer kümmert sich um die Technik bei Inhouse Schulungen?
Eine komplette Lernumgebung in der Cloud mit Remote Zugriff ist für uns selbstverständlich. Sie müssen sich um nichts kümmern. Lediglich ein funktionierender PC oder Notebook mit Internetanschluss sollte für jeden Teilnehmer am Schulungstag bereit stehen.
Vorteile einer Inhouse Schulung
- Kompetente Seminarberatung
- Dozenten aus der Praxis
- Auf Ihre Bedürfnisse zugeschnittener individueller Lernstoff
- Sie können den Termin flexibel gestalten, so wie es für Sie am besten passt
- Unsere Inhouse Schulungen können Europaweit durchgeführt werden
- Der Fokus liegt auf Ihrem Schulungsbedarf, somit schonen Sie Ihr Budget
- Wissenslücken Ihrer Mitarbeitet werden schnell geschlossen