HTMX: Web 1.0 with the benefits of Web 2.0 without the grift of Web 3.0
2 likes2,741 views
- 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.
HTMX: Web 1.0 with the benefits of Web 2.0 without the grift of Web 3.0
- 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
- 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
- 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?
- 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/[email protected]"></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
- 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? [email protected] @[email protected] 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