HTMX ist erstellt von Carson Gross

Kontrolle


Einleitung


  • Webanwendungen mit reinem HTML erstellen!
  • HTMX gibt Zugang zu AJAX, CSS-Übergängen.
  • WebSockets und Ereignisse vom Server direct abrufbar in HTML.
  • HTMX ist schlank (~14kB minified und gzipped), hat keine Abhängigkeiten und ist erweiterbar.

Motivation

  • Warum sollten nur <a > und <form > in der Lage sein, HTTP-Anfragen zu stellen?
  • Warum sollten nur Click- und Submit-Ereignisse sie auslösen?
  • Warum sollten nur GET & POST Methoden verfügbar sein?
  • Warum sollten Sie nur den gesamten Bildschirm ersetzen können?

    • Schnellstart

    
				<script src="https://unpkg.com/htmx.org@1.9.10"></script>
				
				<button hx-post="/clicked" hx-swap="outerHTML">
				  Click Me
				</button>

    Die Attribute hx-post und hx-swap auf dieser Schaltfläche sagen zum HTMX:
    "Wenn ein Benutzer auf diese Schaltfläche klickt, sende ein Ajax-Anfrage an "/clicked". Die HTML-antwort ersetzt die gesamte Schaltfläche".

    Kurz und bündig

    HTMX ist eine JS-Bibliothek die nur mit HTML Attributen arbeitet, anstatt JavaScript direct zu verwenden. Um HTMX zu verstehen, werfen wir zunächst einen Blick auf einen Anker-Tag: 
    
                	<a href="/blog" >Blog</a>

    Dieser Anker-Tag sagt dem Browser:

    "Wenn ein Benutzer auf diesen Link klickt, wird eine HTTP-GET-Anfrage an '/blog' gestellt und die Antwort in das Browserfenster geladen ".

    Betrachten wir dazu das folgende HTML-Stück: 
    
					<button hx-post="/clicked"
    				hx-trigger="click"
    				hx-target="#parent-div"
    				hx-swap="outerHTML"	>
    				Click Me!
				  </button>

					<div id="parent-div">

					</div>

    Dies sagt HTMX:

    "Wenn ein Benutzer auf diese Schaltfläche klickt, wird eine HTTP-POST-Anfrage an '/clicked' gestellt und der Inhalt der Antwort ersetzt das Element parent-div in dem DOM."

    HTMX erweitert und verallgemeinert die Kernidee von HTML als Hypertext und eröffnet viele weitere Möglichkeiten direkt innerhalb HTML.

    Jetzt kann jedes Element, nicht nur Anker und Formulare, eine HTTP-Anfrage stellen.

    Jedes Ereignis, nicht nur Klicks oder Formularübertragungen können Anfragen auslösen.

    Mit HTTP können, nicht nur GET und POST, sondern auch POST, PUT, DELETE und PATCH verwendet werden.

    Jetzt kann jedes beliebige Element, nicht nur das gesamte Fenster, Ziel der HTML-Antwort werden.

    Filter auslösen

    Man kann auch Triggerfilter anwenden. Darzu nutzt man eckige Klammern nach dem Ereignisnamen und schließt einen JS-Ausdruck ein. Das Ereignis wird ausgelöst wenn der Ausdruck wahr zurück gibt. 

    
<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
	Control Click Me
</div>

    Tauschen

    HTMX bietet verschiedene Möglichkeiten, das zurückgegebene HTML in DOM-Baum einzubetten. Standardmäßig wird der Inhalt des Target-DOM-Elements (innerHTML) ersetzt.

    hx-swap Attributwert
    innerHTML Ist der Standardwert. Setzt den Inhalt in das Target
    outerHTML Ersetzt das gesamte Target durch den zurückgegebenen Inhalt
    afterbegin Fügt den Inhalt vor dem ersten Child innerhalb des Targets ein
    beforebegin Stellt den Inhalt vor dem Target im übergeordneten Element des Targets ein
    hx-swap Attributwert
    beforeend Fügt den Inhalt nach dem letzten Child innerhalb des Targets ein
    afterend Fügt den Inhalt nach dem Target im übergeordneten Element des Targets ein
    delete Löscht das Target unabhängig von der Antwort
    none DOM-baum bleibt unverändert (betrift nicht 'Out of Band Swaps' und 'Response Headers')
    Zu beachten ist, das bei verwendung von HTMX der server mit HTML antwortet und nicht mit JSON.

    AJAX

    Der Kern von HTMX wird von einer Reihe von Attributen gebildet: Sie ermöglichen es, AJAX-Abfragen direkt über HTML-Attribute zu stellen:

    Attribut Beschreibung
    hx-get Stellt eine GET-Anfrage an die angegebene URL
    hx-post Stellt eine POST-Anfrage an die angegebene URL
    Attribut Beschreibung
    hx-put Stellt eine PUT-Anfrage an die angegebene URL
    hx-patch Stellt eine PATCH-Anfrage an die angegebene URL
    hx-delete Stellt eine DELETE-Anfrage an die angegebene URL
    Jedes dieser Attribute enthält eine URL, an die eine AJAX-Anfrage gestellt wird. Das Element sendet eine Anfrage des angegebenen Typs an die angegebene URL, wenn das Element ausgelöst wird: 
    
						<div hx-put="/messages" hx-trigger="click" hx-swap="innerHTML">
							Put To Messages
						</div >
    Dies teilt dem Browser mit: Wenn ein Benutzer auf dieses div klickt, stelle eine PUT-Anfrage an die URL /messages und lade die Antwort in das div

    Auslösen von Anträgen

    Standardmäßig werden AJAX-Anfragen durch das "natürliche" Ereignis eines Elements ausgelöst:

    Input, textarea & select werden durch das Änderungsereignis ausgelöst.

    Formular wird durch das Submit-Ereignis ausgelöst.

    Alles andere wird durch das Klick-Ereignis ausgelöst.

    Wenn ein anderes Verhalten erwünscht ist, kannst das Attribut hx-trigger verwendet werden.
    Hier ist ein div-Element, das ein hx-post abschickt, sobald der Mauscursor über das Element tritt: 
    
<div hx-post="/mouse_entered" hx-trigger="mouseenter">
    [Here Mouse, Mouse!]
</div>

    Demo

    Github
    Fragen?