- HTMX is a JavaScript library that allows any HTML element to interact as a hypermedia component by adding attributes that instruct HTMX on what requests to make and how to update the DOM. - Attributes like hx-get, hx-post, hx-target, and hx-swap allow elements to make requests and update other elements without JavaScript. Inherited attributes remove repetition. - HTMX requests can be detected on the server via request headers, and response headers can modify requests by changing targets or swapping mechanisms. Classes provide feedback during requests.

1. HTMX: WEB 1.0
WITH WEB 2.0 BENEFITS
WITHOUT THE GRIFT OF WEB 3.0
MARTIJN DASHORST
# jfall.

2. WHO HAS HEARD OF
HTMX BEFORE
THIS TALK?

3. WHO HAS HEARD OF
INTERCOOLER
TURBOLINKS, OR
HOTWIRE?

4. HTMX is an old idea
that's getting a lot
of new attention
— @bholmesdev

6. https://www.youtube.com/watch?v=AOzy44b2gko

7. https://htmx.org/essays/when-to-use-hypermedia/

8. https://htmx.org/essays/when-to-use-hypermedia/

9. https://htmx.org/essays/when-to-use-hypermedia/

10. https://htmx.org/essays/when-to-use-hypermedia/

11. HERE WE ARE
I THOUGHT IT WAS A GOOD IDEA TO PITCH A PRESENTATION
FOR JFALL ABOUT HTMX TO GET TO KNOW IT BETTER. SO...

12. MARTIJN DASHORST
● 18 YEARS @TOPICUS
PARNASSYS, PARRO, SOMTODAY, EDUARTE
SPREEKUUR.NL, DARMKANKER SCREENING,
CORONATEST.NL, FORCE (MORTGAGES)
● BACKEND DEVELOPER BY HEART
● LOVES CREATING FIXING LEGACY SOFTWARE
● CONTRIBUTOR APACHE WICKET
● CO-AUTHORED WICKET IN ACTION

13. WHY HTMX?
HTMX = WEB 1.0 + WEB 2.0 - WEB 3.0
01
04
02
05
03
WHAT IS HTMX?
HOW DOES IT WORK?
DEMOS
CONCLUSIONS

14. HTMX
https://htmx.org
intercooler 2013-2020
14kb JavaScript library (gzipped)
- no dependencies
- no build
- attributes
- css classes
- request/response headers
- events
- extensions
- javascript API

15. HTMX
https://htmx.org
version 1.9.8 (Nov 6, 2023)
14kb JavaScript library (gzipped)
- no dependencies
- no build
- attributes
- css classes
- request/response headers
- events
- extensions
- javascript API
<script src="htmx.js"></script>

16. HTMX
https://htmx.org
version 1.9.8 (Nov 6, 2023)
14kb JavaScript library (gzipped)
- no dependencies
- no build
- attributes
- css classes
- request/response headers
- events
- extensions
- javascript API
<script src="htmx.js"></script>
<button
hx-get="/counter"
hx-swap="outerHTML">
Click me</button>

17. HTMX
https://htmx.org
version 1.9.8 (Nov 6, 2023)
14kb JavaScript library (gzipped)
- no dependencies
- no build
- attributes
- css classes
- request/response headers
- events
- extensions
- javascript API
<script src="htmx.js"></script>
<button
hx-get="/counter"
hx-swap="outerHTML"
hx-indicator="#indicator"
>Click me</button>
<i id="indicator"
class="htmx-indicator spinner-border">
</i>

18. By Carson Gross
https://bigsky.software
A Return to Hypermedia –
"Curing Your JavaScript Fatigue
Using The Original Architecture
Of The Web"
htmx: Writing JavaScript to Avoid
Writing JavaScript
HTMx: Building modern web
applications without JS
HTMX

19. one day code base understandable and grug can
get work done, everything good!
next day impossible: complexity demon spirit has
entered code and very dangerous situation!
— https://grugbrain.dev/

20. WHY HTMX?
HTMX = WEB 1.0 + WEB 2.0 - WEB 3.0
01
04
02
05
03
WHAT IS HTMX?
HOW DOES IT WORK?
DEMOS
CONCLUSIONS

21. BUILDING A REST API
FOR A WEB PORTAL AND NATIVE APP
MY EXPERIENCES
REST server
xml
html
xml

22. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES

23. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML

24. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
POST or PUT?

25. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
caching the resources
POST or PUT?

26. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
caching the resources
paging of results
POST or PUT?

27. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
versioning the API
caching the resources
paging of results
POST or PUT?

28. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
versioning the API
caching the resources
paging of results
POST or PUT?
POST to /resource or /
resource/new ?

29. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
versioning the API
caching the resources
paging of results
POST or PUT?
POST to /resource or /
resource/new ?
Links between
resources?

30. BUILDING A REST API
FOR A WEB PORTAL
MY EXPERIENCES
data format for API:
JSON or XML
versioning the API
caching the resources
paging of results
POST or PUT?
POST to /resource or /
resource/new ?
Links between
resources?
Complex UIs, more
generic REST resources,
God Objects

31. A FEW
MOMENTS
YEARS
LATER

32. SPA architecture =
JSON + REST

34. Dear Roy,
What is the best practice for versioning a REST API?

35. DON'T
— Roy T. Fielding
Dear Roy,
What is the best practice for versioning a REST API?
https:/
/www.slideshare.net/evolve_conference/201308-fielding-evolve#31

36. Dear Roy,
What is the best practice for versioning a REST API?
https:/
/www.slideshare.net/evolve_conference/201308-fielding-evolve#31
when you use hypertext as the engine of application
state, you don't need it
— Roy T. Fielding

37. SPA architecture =
JSON + RPC
"REST"

38. SPA architecture =
JSON + RPC
"REST"
WHY?

39. WHY CAN ONLY <A> AND <FORM> PERFORM
THOSE REQUESTS?
WHY ONLY GET & POST REQUESTS?

40. HTML 2.0 specification
https:/
/datatracker.ietf.org/doc/html/rfc1866
1995

41. https:/
/datatracker.ietf.org/doc/html/rfc1866
1995

42. WHY HTMX?
HTMX = WEB 1.0 + WEB 2.0 - WEB 3.0
01
04
02
05
03
WHAT IS HTMX?
HOW DOES IT WORK?
DEMOS
CONCLUSIONS

43. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component

44. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
credit: @htmx.org@twitter
https:/
/twitter.com/htmx_org/status/1700259958405869711

45. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
<button class="btn btn-success"
onclick="
const req = new XMLHttpRequest();
req.onload = (e) => {
const admin = document.getElementById('admin');
const newAdmin = req.responseXML.getElementById('admin');
admin.innerHTML = newAdmin.innerHTML;
};
req.responseType = 'document';
req.open('GET', '/admin');
req.overrideMimeType('text/html');
req.send();"
>Click me</button>
<section id="admin"></section>

46. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
<button class="btn btn-primary"
hx-get="/admin"
hx-select="#admin"
hx-target="#admin"
>Click me</button>
<section id="admin"></section>

47. GETTING THE SCRIPT
<script src="https://unpkg.com/htmx.org@1.9.7"></script>
Quick and dirty

48. TIP: USE WEBJARS
i
Using webjars
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>htmx.org</artifactId>
<version>1.9.7</version>
</dependency>
<script src="/webjars/htmx.org/1.9.7/dist/htmx.js"></script>
/META-INF/resources/webjars
«classpath»
SEE ALSO: https:/
/www.baeldung.com/maven-webjars

49. TIP: WEBJARS + LOCATOR
i
Spring
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.48</version>
</dependency>
<script src="/webjars/htmx.org/dist/htmx.js"></script>
no version
Quarkus
quarkus ext add io.quarkus:quarkus-webjars-locator
SEE ALSO: https:/
/www.baeldung.com/maven-webjars

50. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element

51. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
hx-boost="true|false"
hx-get="/count"
hx-post="/count"
hx-target="#counter"
hx-swap="innerHTML|outerHTML|afterend|..."
hx-trigger="click|load|every 1s"
hx-select="#htmx-badge"
hx-swap-oob="true|outerHTML:selector"
hx-delete|patch|put="/url"
...

52. ATTRIBUTES – hx-boost
<nav hx-boost="true">
<li><a href="/menu1">Menu 1</a></li>
<li><a href="/menu2">Menu 2</a></li>
<li><a href="/menu3">Menu 3</a></li>
<li><a href="/menu4">Menu 4</a></li>
</nav>
Replaces the GET/POST request using AJAX and replaces the body using
innerHTML swap.
inherited

53. ATTRIBUTES – hx-get
<button hx-get="/speaker/1">Get speaker 1</button>
Issue a GET request to the specified URL and swap the returned HTML into
the DOM using a swap strategy

54. ATTRIBUTES – hx-get
<button hx-get="/speaker/1">Get speaker 1</button>
Issue a GET request to the specified URL and swap the returned HTML into
the DOM using a swap strategy

55. ATTRIBUTES – hx-get
<button hx-get="/speaker/1">Get speaker 1</button>
Issue a GET request to the specified URL and swap the returned HTML into
the DOM using a swap strategy
<div id="speaker">...</div>

56. ATTRIBUTES – hx-get
<button hx-get="/speaker/1">Get speaker 1</button>
Issue a GET request to the specified URL and swap the returned HTML into
the DOM using a swap strategy
<div id="speaker">...</div>
<button hx-get="/speaker/1">
Get speaker 1
</button>

57. ATTRIBUTES – hx-get
<button hx-get="/speaker/1">Get speaker 1</button>
Issue a GET request to the specified URL and swap the returned HTML into
the DOM using a swap strategy
<div id="speaker">...</div>
<button hx-get="/speaker/1">
<div id="speaker">...</div>
</button>

58. ATTRIBUTES – hx-swap
<button hx-get="/speaker/1"
hx-swap="outerHTML">Get speaker 1</button>
Controls how the HTML is swapped into the DOM.
innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none
<div id="speaker">...</div>
<button hx-get="/speaker/1"
hx-swap="outerHTML">Get speaker 1</button>
inherited

59. ATTRIBUTES – hx-swap
<button hx-get="/speaker/1"
hx-swap="outerHTML">Get speaker 1</button>
Controls how the HTML is swapped into the DOM.
innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none
<div id="speaker">...</div>
<div id="speaker">...</div>

60. ATTRIBUTES – hx-target
Controls which element in the DOM gets swapped with the returned HTML
using a swapping strategy.
inherited
<button hx-get="/speaker/1" hx-swap="outerHTML"
hx-target="#speaker">Get speaker 1</button>
<div id="speaker">No content</div>

61. ATTRIBUTES – hx-target
Controls which element in the DOM gets swapped with the returned HTML
using a swapping strategy.
inherited
<button hx-get="/speaker/1" hx-swap="outerHTML"
hx-target="#speaker">Get speaker 1</button>
<div id="speaker">No content</div>
<div id="speaker">Johan Janssen</div>
<div id="speaker">No content</div>

62. ATTRIBUTES – hx-target
Controls which element in the DOM gets swapped with the returned HTML
using a swapping strategy.
inherited
<button hx-get="/speaker/1" hx-swap="outerHTML"
hx-target="#speaker">Get speaker 1</button>
<div id="speaker">No content</div>
<div id="speaker" class="card">Johan Janssen</div>
<div id="speaker">No content</div>

63. ATTRIBUTES – hx-target
Controls which element in the DOM gets swapped with the returned HTML
using a swapping strategy.
inherited
<button hx-get="/speaker/1" hx-swap="outerHTML"
hx-target="#speaker">Get speaker 1</button>
<div id="speaker">No content</div>
<div id="speaker" class="card">Johan Janssen</div>
<div id="speaker" class="card">Johan Janssen</div>

64. ATTRIBUTES – hx-target
Inherited???
inherited
<menu>
<a hx-get="/speaker/1" hx-target="#speaker">Get speaker 1
<a hx-get="/speaker/2" hx-target="#speaker">Get speaker 2
<a hx-get="/speaker/3" hx-target="#speaker">Get speaker 3
<a hx-get="/speaker/4" hx-target="#speaker">Get speaker 4
</menu>

65. ATTRIBUTES – hx-target
hx-target is inherited and can be placed on a parent element.
inherited
<menu hx-target="#speaker">
<a hx-get="/speaker/1">Get speaker 1</a>
<a hx-get="/speaker/2">Get speaker 2</a>
<a hx-get="/speaker/3">Get speaker 3</a>
<a hx-get="/speaker/4">Get speaker 4</a>
</menu>

66. MORE ABOUT ATTRIBUTES
INHERITED ATTRIBUTES
NO JAVASCRIPT REQ'D
Removes repetition of
common attributes, such as
the target, swap method,
selecting elements etc.
Can be overridden by
hx-disinherit
With just the tags you can
create rich dynamically
updating pages.
Slap on some attributes and
continue.
In the HTML response you can
add more updates by using
out-of-band swaps
(hx-swap-oob)
UPDATE MULTIPLE ELEMENTS

67. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
Server may need to
distinguish between
normal and HTMX
request: Headers

68. HX-Request always true
HX-Boosted indicates hx-boost request
HX-Current-URL ...
...
REQUEST HEADERS
RESPONSE HEADERS
HX-Redirect client-side redirect
HX-Refresh client-side full refresh of the page
HX-Retarget modify the hx-target
HX-Trigger trigger client-side events
...
HOW DOES IT WORK – HEADERS
Convenient for deciding to return a
partial or a full page
DETECT HTMX REQUEST
MODIFY REQUESTS
Change the target, or swapping
mechanism, send a redirect or replace
the URL in the location bar. And more.

69. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
Server may need to
distinguish between
normal and HTMX
request: Headers
When a HTMX request
is in flight, feedback is
wanted for Users:
classes

70. htmx-indicator toggles visibility (opacity:1)
htmx-request applied to hx-indicator during request
htmx-added
htmx-swapping
htmx-settling
CLASSES
HOW DOES IT WORK – CLASSES
Convenient for deciding to return a
partial or a full page
INDICATOR
ANIMATIONS
Animate swapping of elements for a
more rich experience.

71. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
Server may need to
distinguish between
normal and HTMX
request: Headers
When a HTMX request
is in flight, feedback is
wanted for Users:
classes
Complex needs for
reacting to interactions,
swapping, requests &
responses: events

72. HOW DOES IT WORK? – EVENTS
htmx:abort
htmx:afterOnLoad
htmx:afterProcessNode
htmx:afterRequest
htmx:afterSettle
htmx:afterSwap
htmx:beforeCleanupElement
htmx:beforeOnLoad
htmx:beforeProcessNode
htmx:beforeRequest
htmx:beforeSwap
htmx:beforeSend
htmx:configRequest
htmx:confirm
htmx:historyCacheError
htmx:historyCacheMiss
htmx:historyCacheMissError
htmx:historyCacheMissLoad
htmx:historyRestore
htmx:beforeHistorySave
htmx:load
htmx:noSSESourceError
htmx:onLoadError
htmx:oobAfterSwap
htmx:oobBeforeSwap
htmx:oobErrorNoTarget
htmx:prompt
htmx:pushedIntoHistory
htmx:responseError
htmx:sendError
htmx:sseError
htmx:sseOpen
htmx:swapError
htmx:targetError
htmx:timeout
htmx:validation:validate
htmx:validation:failed
htmx:validation:halted
htmx:xhr:abort
htmx:xhr:loadend
htmx:xhr:loadstart
htmx:xhr:progress

73. HOW DOES IT WORK? – EVENTS
before/after swaps
occurred, after DOM has
settled, out-of-bounds
swaps, etc.
Anything relevant to
modifying using the
history API
The lifecycle of the XHR
request: progress,
loadend, loadstart, etc.
Errors sending a request,
receiving a response,
targetting an element, etc.
SWAPPING HISTORY VALIDATION
Triggered when client side
validation is performed,
failed.
Configure the request
before it is sent to the
server, response
processing
XHR ERRORS REQUESTS

74. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
Server may need to
distinguish between
normal and HTMX
request: Headers
When a HTMX request
is in flight, feedback is
wanted for Users:
classes
Complex needs for
reacting to interactions,
swapping, requests &
responses: events
In the events some
annoying JavaScript
needs to be executed
(e.g. add class):
JavaScript library

75. FINDING ELEMENTS
HOW DOES IT WORK? – JAVASCRIPT
addClass(), removeClass(),
toggleClass(), takeClass()
remove(), values()
EVENTS ON ELEMENTS
on(), off(), trigger()
closest(), find(), findAll() config, ajax(), process()
defineExtension(), removeExtension()
WORKING WITH CLASSES WORKING WITH ELEMENTS
INTERNALS & EXTENSIONS

76. HOW DOES IT WORK? – JAVASCRIPT
Documents
Projects
Members
Admin
Gangplank lookout killick jack yo-ho-ho Sea Legs yard
marooned interloper yawl. Gabion fire ship Brethren of the
Coast lanyard chase Cat o'nine tails dead men tell no tales
barque yawl Nelsons folly.
<ul class="list-group" hx-target="#content"
hx-on::after-request="htmx.takeClass(event.detail.elt, 'active')">
<li class="list-group-item" hx-get="/sub/Documents">Documents</li>
<li class="list-group-item" hx-get="/sub/Projects">Projects</li>
<li class="list-group-item" hx-get="/sub/Members">Members</li>
<li class="list-group-item" hx-get="/sub/Admin">Admin</li>
</ul>
<section id="content"></section>

77. HOW DOES IT WORK?
Any HTML element can
interact as an
hypermedia component
Attributes instruct
HTMX what to do with
what element
Server may need to
distinguish between
normal and HTMX
request: Headers
When a HTMX request
is in flight, feedback is
wanted for Users:
classes
Complex needs for
reacting to interactions,
swapping, requests &
responses: events
In the events some
annoying JavaScript
needs to be executed
(e.g. add class):
JavaScript library
We need to use a
different HTML
morphing algo,
serverside sent events
or web sockets:
extensions

78. FINALLY HATEOAS?
HTMX = WEB 1.0 + WEB 2.0 - WEB 3.0
01
04
02
05
03
WHAT IS HTMX?
HOW DOES IT WORK?
DEMOS
CONCLUSIONS

79. Examples

80. Fun with flags game

81. fun with flags
● quarkus
● qute
● websockets
● htmx
● htmx-ws
● bootstrap
● flag=icons
github.com/dashorst/funwithflags

84. WEBSOCKETS FTW!
@ServerEndpoint("/game/{player}")
public class FunWithFlagsWebSocket {
@OnOpen
public void onOpen(Session session, @PathParam("player") String encodedPlayer) {
var player = URLDecoder.decode(encodedPlayer, StandardCharsets.UTF_8);
sessions.put(player, session);
funWithFlagsGame.registerPlayer(session, player);
}

85. WEBSOCKETS FTW!
@ServerEndpoint("/game/{player}")
public class FunWithFlagsWebSocket {
@OnOpen
public void onOpen(Session session, @PathParam("player") String encodedPlayer) {
var player = URLDecoder.decode(encodedPlayer, StandardCharsets.UTF_8);
sessions.put(player, session);
funWithFlagsGame.registerPlayer(session, player);
}
<div id="game" hx-ext="ws" ws-connect="/game/{playername}" class="row">
<div class="col-12 text-center">
<h3>Joining lobby...</h3>
{#fragment id=lobby}
<ul class="list-group" id="lobby-list">
{#for player in players}
<li class="list-group-item {#if player.name == playername} list-group-
{/for}
</ul>
{/fragment}
<p>Waiting for other players to join!</p>
</div>
</div>

86. WEBSOCKETS FTW!
@ServerEndpoint("/game/{player}")
public class FunWithFlagsWebSocket {
@OnOpen
public void onOpen(Session session, @PathParam("player") String encodedPlayer) {
var player = URLDecoder.decode(encodedPlayer, StandardCharsets.UTF_8);
sessions.put(player, session);
funWithFlagsGame.registerPlayer(session, player);
}
<div id="game" hx-ext="ws" ws-connect="/game/{playername}" class="row">
<div class="col-12 text-center">
<h3>Joining lobby...</h3>
{#fragment id=lobby}
<ul class="list-group" id="lobby-list">
{#for player in players}
<li class="list-group-item {#if player.name == playername} list-group-
{/for}
</ul>
{/fragment}
<p>Waiting for other players to join!</p>
</div>
</div>
hx-ext="ws" ws-connect="/game/{playername}"
@ServerEndpoint("/game/{player}")
@OnOpen
public void onOpen(Session session, @PathParam("player")

87. SENDING TURN START TO PLAYERS
public void onTurnStarted(@Observes TurnStarted event) {
var game = event.game();
var turn = event.turn();
var countryToGuess = turn.countryToGuess();
for (Player player : game.players()) {
var turnHtml = Templates.game$turnPartial(player, game, turn, countryToGuess)
.render();
var rankHtml = Templates.game$rankingPartial(player, game, turn).render();
player.session().getAsyncRemote().sendObject(turnHtml + "n" + rankHtml);
}
}
<div id="turn" class="col-12 col-lg-6 offset-lg-3">
<h2>Round {game.turnNumber} of {game.numberOfTurns}</h2>
...
</div>
<div id="in-game-ranking" class="col-12 col-md-3">
<h3>Ranking round {game.turnNumber}</h3>
...
</div>

88. SENDING TURN START TO PLAYERS
public void onTurnStarted(@Observes TurnStarted event) {
var game = event.game();
var turn = event.turn();
var countryToGuess = turn.countryToGuess();
for (Player player : game.players()) {
var turnHtml = Templates.game$turnPartial(player, game, turn, countryToGuess)
.render();
var rankHtml = Templates.game$rankingPartial(player, game, turn).render();
player.session().getAsyncRemote().sendObject(turnHtml + "n" + rankHtml);
}
}
<div id="turn" class="col-12 col-lg-6 offset-lg-3">
<h2>Round {game.turnNumber} of {game.numberOfTurns}</h2>
...
</div>
<div id="in-game-ranking" class="col-12 col-md-3">
<h3>Ranking round {game.turnNumber}</h3>
...
</div>

89. SENDING TURN START TO PLAYERS
public void onTurnStarted(@Observes TurnStarted event) {
var game = event.game();
var turn = event.turn();
var countryToGuess = turn.countryToGuess();
for (Player player : game.players()) {
var turnHtml = Templates.game$turnPartial(player, game, turn, countryToGuess)
.render();
var rankHtml = Templates.game$rankingPartial(player, game, turn).render();
player.session().getAsyncRemote().sendObject(turnHtml + "n" + rankHtml);
}
}
<div id="turn" class="col-12 col-lg-6 offset-lg-3">
<h2>Round {game.turnNumber} of {game.numberOfTurns}</h2>
...
</div>
<div id="in-game-ranking" class="col-12 col-md-3">
<h3>Ranking round {game.turnNumber}</h3>
...
</div>

90. SENDING TURN START TO PLAYERS
public void onTurnStarted(@Observes TurnStarted event) {
var game = event.game();
var turn = event.turn();
var countryToGuess = turn.countryToGuess();
for (Player player : game.players()) {
var turnHtml = Templates.game$turnPartial(player, game, turn, countryToGuess)
.render();
var rankHtml = Templates.game$rankingPartial(player, game, turn).render();
player.session().getAsyncRemote().sendObject(turnHtml + "n" + rankHtml);
}
}
<div id="turn" class="col-12 col-lg-6 offset-lg-3">
<h2>Round {game.turnNumber} of {game.numberOfTurns}</h2>
...
</div>
<div id="in-game-ranking" class="col-12 col-md-3">
<h3>Ranking round {game.turnNumber}</h3>
...
</div>

91. SENDING TURN START TO PLAYERS
public void onTurnStarted(@Observes TurnStarted event) {
var game = event.game();
var turn = event.turn();
var countryToGuess = turn.countryToGuess();
for (Player player : game.players()) {
var turnHtml = Templates.game$turnPartial(player, game, turn, countryToGuess)
.render();
var rankHtml = Templates.game$rankingPartial(player, game, turn).render();
player.session().getAsyncRemote().sendObject(turnHtml + "n" + rankHtml);
}
}
<div id="turn" class="col-12 col-lg-6 offset-lg-3">
<h2>Round {game.turnNumber} of {game.numberOfTurns}</h2>
...
</div>
<div id="in-game-ranking" class="col-12 col-md-3">
<h3>Ranking round {game.turnNumber}</h3>
...
</div>

92. DEMO

93. FINALLY HATEOAS?
HTMX = WEB 1.0 + WEB 2.0 - WEB 3.0
01
04
02
05
03
WHAT IS HTMX?
HOW DOES IT WORK?
DEMOS
CONCLUSIONS

94. BACKEND DEVS REJOICE
HTMX: WEB 1.0 + WEB 2.0 - WEB 3.0
No more general APIs between your
user interface and your back end. Use
hypermedia as the engine for your
application state
Hypermedia On Whatever You'd Like.
Backend agnostic! Spring Boot,
Quarkus, JSP, PHP, DJango, Ruby on
Rails, ...
HTMX allows you to build rich front
ends without having to learn rich front
end technologies.
Just one script tag and your back end.
Written in whatever you'd like.
REST WITH HATEOAS HOWL STACK
REDUCE THE CHURN

95. It took me ~2 months spare time to write Fun with
Flags, but most of that time was spent figuring out
the game mechanics, not HTMX integration.
9/10, would use again1
1 (already using it in other projects)

96. HTMX.ORG
https://htmx.org
Great documentation,
examples and essays on the
fundamentals of HTMX and
hypermedia.
WARNING
Also memes

97. HYPERMEDIA
SYSTEMS
https://hypermedia.systems
Best explanation of
Hypermedia, REST,
RESTFUL and HATEOAS.
WARNING
Risk of wanting to use HTMX after reading

98. https:/
/fun-with-flags.eduarte.dev
Wanna play?
Scan this

99. CREDITS: This presentation template was created by Slidesgo, and
includes icons by Flaticon, and infographics & images by Freepik
THANKS!
Do you have any questions?
martijn.dashorst@topicus.nl
@dashorst@mastodon.social
martijndashorst.com
CREDITS
HTMX was conceived by Carson Gross
Title "HTMX: WEB 1.0 WITH WEB 2.0 BENEFITS WITHOUT THE GRIFT OF WEB 3.0"
was inspired by The Primagen
Template by slidesgo and includes images from flaticon and icons from freepik

100. Thanks for your attention
Please rate my session in the J-Fall app
# jfall.
fun-with-flags.eduarte.dev HTMX: web 1.0 + web 2.0 - web 3.0
Martijn Dashorst
topicus