Select text to annotate, Click play in YouTube to begin
00:00:00
foreign [Applause]
00:00:01
[Music]
00:00:53
foreign [Music] foreign [Music]
00:01:46
[Music] [Music] thank you [Music] [Music]
00:02:21
[Music] foreign [Music]
00:02:49
[Music] [Music] thank you [Music] [Music]
00:03:33
foreign foreign [Music] [Music] [Music]
00:04:24
[Applause] thank you welcome to another Meetup of front-end client mine The Countdown music was Miami midnight drive by computer music artist Chris
00:04:44
Wilson um so if you grew up during the era of the Amiga or 360 for home computers in the
00:04:56
80s or early 90s you might remember its game and the soundtrack like the soundtrack of this game I'm showing here um and he was contributing uh with a famous music to this game
00:05:08
um and it's Chris Hill's back uh check out his homepage wilspec.com he really does amazing stuff and as today's Meetup could also be titled Back to the Future so to say we thought this fits quite
00:05:20
nice so today we are super happy to welcome Carson gross from Montana in the US to connect with us from Wiesbaden in Germany and we are curious from where do you
00:05:33
draw in our live stream now write it in the chat right really super super curious about and if you want to find more about us please go to front and randmind de or
00:05:46
click the links in the video and description invented htmax which gives you access to HX CSS Transitions websockets and server send events directly in HTML using
00:06:02
attributes showing some funny memes during my talking htmax is small dependency free extendable IE 11 compatible and has reduced code base sizes by 67 when
00:06:16
compared with react I just discovered it's this year and after reading through his ebook about hypermetia systems I could hook pretty
00:06:27
much so why not let himself provide a first-hand overview on hypermedia with htmx welcome Carson how's it going thanks uh
00:06:39
very much Dan I appreciate that glad to glad to be here it was pretty close we've touched down about 10 minutes ago and I sprinted around the airport and found a spot I could actually do the stock end so if there's background noise
00:06:52
I apologize it's been a rough uh 24 hours uh Delta canceled or delayed a flight by 12 hours and kind of stuck me in a hotel for three hours last night so I'm a little
00:07:04
I'm a little and I'm not necessarily in Peak shape right now but I'll try my best to explain what uh htmx is and how it can be useful cool I can't appreciate uh much right how how I like it that you
00:07:19
under the circumstances made it and and like sitting at the airport giving this presentation now in time arrived uh that's why we had a small delay and it was the live stream starting but all is good you are here now and hopefully the background noise is fine
00:07:32
um you might turn up your volume maybe in in the audience um when when Carson is maybe a bit more silent due to the noise um yeah I think
00:07:45
um yeah maybe it's just some short housekeeping so to say um Carson will like give a talk for like 32 probably 40 minutes roughly and you
00:07:57
can write all the comments questions in the chat already um and we will pick them up later so we I think we'll have time 15-20 minutes uh for sure uh depends on on the questions
00:08:10
and comments and so there's room for that as well and yeah I would say the stage is used okay enjoy and sure yeah let's go let's go so uh the talk
00:08:24
I'm going to give today is going to be on uh on hyper media and what I'm gonna try and do so I assume the audience has some familiarity you don't need a ton of familiarity with htmx but I'm going to
00:08:35
explain to you how if you look at HTML and understand HTML as a hyper media how that can be generalized and then how htmx generalizes it and then we're going to look at some practical examples of
00:08:49
things that you can build with that generalization so we'll run through some examples and I'll I'll just go into the details of how each one of them works and how we're using this hyper media model that was sort of I'd say the
00:09:02
original model of the web um and uh you know how how that can drive more sophisticated user experiences than most developers probably think is is possible today
00:09:15
hopefully that'll change every time so let me kick over to my slides and I uh yep I'm gonna do this can I do this I need two monitors I'll
00:09:28
just do it in one so I'll kind of bounce back and forth so there might be some weird pauses as I do that but I'm on a laptop in an airport so um so this is the this is talk hyper media reconsidered and um
00:09:42
uh just to give a quick background on me my name is Carson gross I have a software company that's just me for someone else that works for it um out of Bozeman Montana I've been up here for uh four years now and uh I uh I worked at a
00:09:56
university I teach in the computer science department um and I my I my primary software that I make with my open source with this company besides doing some Consulting is
00:10:07
uh hdmax which I think probably everyone here has heard of you can find out more about it at htmx.org there are some other uh things that I've done so hyperscript.org is a scripting language for the web that's kind of a passion
00:10:21
project of mine and then there's Greg marine.dev which is kind of a funny blog about the stuff that I've learned in the 20 plus years that I've been programming and then we
00:10:33
have a new book coming out I'm hoping to be able to release it next week actually in hardcover but you can read it online for free now at hypermedia.system we'll have a hard like an actual hardcover a
00:10:45
nice book available for sale on Amazon next week as well as an e-book I believe um but you can read it online for free as well if you want to take a look at what that's all about um so
00:10:58
uh that's me um htmx is our most popular the most popular library that I've I've been able to turn out and uh it's it's what's what I call a hyper media oriented front-end Library which means it focuses on hyper
00:11:11
media rather than what a lot of the spa single page application Frameworks do which is they sort of do their own thing they have their their in-memory model that then that reactively uh drives the
00:11:25
user interface well htmx doesn't do that instead it tries to augment HTML as a hyper media the augmented as a hyper media Now htmx isn't the only one there's lots of other good hyper media
00:11:38
oriented libraries out there so uh for example unpolly.com which is out of Germany I believe and hotwire.dev which is from the 37 signals the Ruby on Rails
00:11:49
people and then intercooler.js which was actually the previous iteration of htmax so I would encourage everyone to take a look at all those they all have their different kind of take on how things should work and you know they may they
00:12:03
may or may not fit your needs better than htmx does but I I do want to say that I think htmx is probably the purest hypermudia it's the most hypermedia focused of them and that it really just
00:12:15
builds like a small way or not a small layer but it builds up from on top of HTML instead of giving you other Concepts so another concept that you might find in for example unpolli is a
00:12:28
notion of layers which is sort of a way to structure modal windows on top of one another and that's a very useful abstraction but it's not something that's sort of baked into HTML so htmx foregoes that and so depending on what
00:12:41
level you want to work at hdmax is probably going to be more work to achieve certain UI patterns but it's closer to the metal if you want to think of it that way so you know but again I want to encourage everyone to go and
00:12:55
check out all the uh those options as far as what they might find the most useful for for their own work so because hdmax is so focused on hypermedia I want to talk about what a hyper media is and
00:13:08
my understanding is that this is kind of a mix of younger developers and older developers but um the older developers might have a pretty good sense of what hypermedia is but the younger developers might not a
00:13:20
lot of younger web developers fortunately have not uh really didn't learn about the web when they came uh came of age technologically um react was already the thing and so
00:13:32
you do everything reactively you never learn the fundamentals of what hypermedia is what a link really is probably pick it up along the way but you don't get that deep understanding of what hypermedia is when compared with
00:13:44
earlier on in web development one that was sort of that was all there so um so question is what is a hypermedia and hypermedia is just a media so a text for example that has hyper media controls
00:13:57
within it really the presence of hyper media controls is the crucial thing that differentiates between media and Hyper media and so at right here we've got a little bit of a we've got a simple web
00:14:09
page from HTML and a body in it and it's got an anchor tag in it this A means stands for anchor and this anchor has an href and that is uh that stands for hypermedia reference and uh so this is
00:14:23
an example this is a canonical example I would say of a hypermedia control and this hypermedia control allows non-linear branching within a document so this early on hypermedia had this
00:14:35
very document oriented sort of it came out of the documents world it was invented in order to allow navigation between research documents so there wasn't so much mutation as there was
00:14:47
navigation but it was non-linear so in contrast with books or reading a single paper or something like that you could jump around by clicking on links so that's what made things a hyper media and the anchor was sort of the original
00:15:00
hypermedia control in that regard um I believe it was an HTML to maybe three I always forget the form element was added to HTML and uh when that
00:15:13
happened um the hypermedia architecture switched it was a pretty big jump actually it went from a read-only sort of document oriented system to a system that you could actually build real
00:15:26
applications in because now you have the ability to update not just consume not just read things but also update them and so that turned hyper media from an interesting document oriented
00:15:38
architecture into a full-fledged application architecture so forms allow you to issue posts as well as you get so you can also issue guests with them as well the post was how you mutated things
00:15:50
and sorry there's gonna be an announcement here um so uh what's what's interesting to me or one thing that as I got more mature in my understanding of hypermedia is
00:16:01
that um really there's only two hyper media controls or two main hyper media controls available in HTML you have uh anchor tags and forms and with only those two hyper media controls somehow
00:16:14
we built like all of web 1.0 you know and that was pretty big it was a big deal a lot of stuff happened in web 1.0 I know it's hard to remember now but you know there was just huge number of web applications that were very profitable
00:16:27
um some still you know Amazon came out of that era it's obviously much more sophisticated front end now but really with just these two things the internet was able to pretty much dominate application development for a couple of
00:16:40
decades um and uh so it's I think it's a testament to the power of the hyper media model that even with those two things and with the problems associated with them which we'll discuss in a
00:16:51
moment we were able to build a huge amount of functionality and do all the crazy web 1.0 stuff that we were able to so it's very very impressive to me um but obviously that way of building
00:17:05
things to an extent at least in the thought leader world at least in you know Twitter and what you see online it isn't nearly as discussed these days when we contrasted with for example
00:17:17
react review or smelta or however you say that and so forth where those have a lot more mind share and a lot of people don't even really think very much about hypermedia at all and certainly don't discuss it very much now a big part of
00:17:31
that is that HTML hasn't significantly been updated as a hyper media certainly gotten lots of new features but as a hyper media it really hasn't Advanced very much in the last 20 years
00:17:43
and so it's been sitting there kind of doing nothing and the rest of the web development Community has moved on uh from it uh because of that um and um so and a big part of that I
00:17:55
think is the interactivity problems that you have with standard anchor tags and standard forms so these older web applications some of you might work on these they're sometimes called Web 1.0 applications a problem with them is that
00:18:09
they have this big flash like when you make a transition or when you click on a link or when you submit a form it refreshes the whole page and so there's a clunky feel to it browsers have gotten better at it but they haven't been able
00:18:22
to erase that that sort of feel you know this doesn't feel like uh for example a thick client I feel where there isn't this awkward sort of refresh of the entire page and that and you know in my
00:18:34
opinion is what really drove a lot of people over to the single page application to the JavaScript heavy ways of building applications is they really wanted to avoid that so so it's unfortunate that HTML has not made very
00:18:47
much progress but um there are some ways there's a way or the the underlying uh thesis I would say of htmx if we can actually fix that and in
00:19:00
order to fix that what we're going to need to think about is how can we generalize hyper media how can we generalize this concept of hyper media controls in particular since that's the Crux of what a hyper media is and uh so
00:19:11
to do that let's take a kind of an in-depth close look at what this anchor tag really means so what it means is that to this what this with this code and I think it is code maybe it's not a programming language but it is code but
00:19:24
it tells a browser or a hypermedia client is hey I want you to render some text and when a user clicks on that text when a user when a user clicks so that's one thing clicks on that text so on bang
00:19:39
like on this thing issue an HTTP get to about so there's a network request that's driven by that click on this thing and then I want you to take the hypermedia response that you received
00:19:52
from that I want you to replace the entire screen I want you to replace the entire screen and so I think those are the four fundamental aspects of hypermedia control as hyper media
00:20:05
controls and so then our opportunity is going to be generalizing those those aspects how can we generalize each of them so the first thing we'll start with number two actually because that's just a little bit more logical on this link
00:20:19
well how come how come only links are able to link some forms really are able to issue HTTP requests that doesn't seem like a necessary constraint now there are accessibility issues I'm happy to
00:20:33
discuss that afterwards but nonetheless it seems somewhat arbitrary that only anchor tags and uh forms can issue HTTP requests at the very least it seems like buttons should be able to do so and I
00:20:45
think they're strong arguments and I'll show some demos of examples of a even non-interactive elements like a div for example I think there's at least one good example and I did issuing a request
00:20:57
is actually a good thing um so let's generalize that what if it was possible for any HTML element to be a hyper media control um the second thing is when a user
00:21:09
clicks so that they're the second thing we're going to examine was the first item uh opportunity that we mentioned which is a click occurs so um clicks are an event submits are an event that's fine but there's lots of
00:21:21
events that are issued by the Dom and the Dom bubbling model and all that sort of stuff what's so special about clicks and what's so special about submits what if we generalize that made it possible for any event that the Dom generates or
00:21:36
that we generate our own JavaScript what if you made it possible for them to issue a request based on any of them and then our third opportunity is okay issuing HTTP get to
00:21:49
about what if it's possible to issue any type of requests so if you're familiar with HTTP there's more than just getting posts it's somewhat crazy but in 2023 in standard HTML it's only possible to
00:22:02
issue gets and posts according to the HTML spec from HTML all and that seems dumb um HTTP after all was designed to transfer hyper to transfer hyper the
00:22:14
hypertext markup language so how come it can't access those other types of requests puts deletes patches and so forth and so that's an opportunity for htmx to generalize what HTML already
00:22:28
gives you and give you access to those types of requests as well and then the fourth one and this is really the big one I think because it really goes at the heart of the interactivity problem that you have with most hyper media
00:22:39
driven applications early web 1.0 hyper media driven applications is why do we have to replace the whole screen what if we were able to replace any elements on the screen and once you do that once you break with that idea that we have to
00:22:53
refresh the whole page with this hypermedia request it really lets you it opens up a huge very very large space of features that you can build using pure
00:23:05
hypermedia exchanges and a way that doesn't feel clunky and it doesn't have that flash of unstyled content and so forth so I think this is really this goes at the heart of why JavaScript heavy approaches to web development one
00:23:18
it was that the ability to not have that clunky feel when you're when you're creating an application so these are our four potential generalizations and these are the four potential these are the four generalizations of hdmax make it
00:23:31
possible for any element to issue a high any element to be a hyper media control any event to trigger a particular request any type of request can be made and then we can take the HTML that's
00:23:44
responded the response from that request which will be in a hypermedia format and you'll be able to put it anywhere on the screen so those are the the four generalizations of htmx and here we have a button that's being driven by htmx and
00:23:58
you can see it has some attributes on it so htmx tries as much as possible and you know in the flawed developer so I've screwed some and tax up but I think it's pretty good um as much as possible tries to be
00:24:11
attribute driven just like an anchor has an ahref a hypermedia reference on it so htmixture has to follow that example um and in general tries to follow html's example as closely as possible and so
00:24:23
here we have a button and this button is a hyper media control and it's a hyper media control because you put HX put on it which says okay I want you to issue an HTTP put to the slash like page and
00:24:34
that makes sense for a like because that's something that you want to you want to do once and so that's a good HTTP action for that and so that makes it uh that that that's
00:24:46
what turns this into a hyper media control um so and this is this is the general flavor of of htmax you put attributes into your HTML rather than writing a bunch of JavaScript to do things so htmx
00:24:59
has a bunch of different versions of this sort of uh Pro this is one of the most important attributes in htmax it has HDX HX put get HX post so forth that
00:25:12
let you issue different types of requests so this makes it possible for any element to be to become a hypermedia control in your hyper media driven application and then they can issue any type of request that they'd like
00:25:24
um so it really addresses those two potential generalization opportunities that we have the next attribute down is HX trigger and this obviously I hope is pretty obvious everyone who's watching that one thing I strive for in htmx is
00:25:37
to make things pretty obvious so even if you've never written a line of hdmax you can figure out what's going on um and so this Ajax trigger makes it possible for any event here we're responding to click but we could respond
00:25:50
to Mouse over or key app or whatever we'll look at some examples where we do respond to different events I don't think Mouse over is a good idea with a button but you know you could do it if you wanted to all right and uh the HX
00:26:02
trigger attribute is what allows you to specify this is the event that's going to trigger a hypermedia exchange with a server um and uh so that that addresses that opportunity for generalization of HTML
00:26:16
and it's a little it's a little redundant here actually I should say because by default for a button that the default trigger is going to be clicked so we could emit this attribute in this example but just showing it for
00:26:28
pedagogical purposes um and then the last attribute on here is the and this is again that really important thing here we have an HX Target it has a CSS selector so again we're trying to reuse existing HTML
00:26:41
Concepts so CSS selectors or obvious a big part of HTML and so we allow you to Target whatever thing you want on the page using a CSS selector and so this says it's not essentially issue a put
00:26:56
requests to like when a click occurs and then whatever HTML comes back I want you to put that into the thing with the ID output which is this output element down below so it's going to take the HTML that comes back from that and stick it
00:27:10
into the inner HTML of this output and that can be thank you for liking it could be a heart you know whatever it could be a bunch of different stuff but you know whatever that is it's going to be HTML you're not going to do Json Pro
00:27:22
template you know server client side I should say template processing you're just going to take whatever HTML came back you're going to insert it into the document um so that's a total of seven attributes that uh that address all of those
00:27:36
generalizations that we discussed um and so not not a ton of not not a ton of attributes not a ton of code and that's kind of the point is it's a relatively simple model because it's building on the existing infrastructure
00:27:48
of the web now there's a few more attributes um so for example HX swap would allow you if you wanted to use an HX swap attribute you can specify exactly how the new content is swapped in do you want it to be the inner HTML
00:28:02
do you want to Target the outer HTML do you want to append it and so forth HX indicator is an attribute that allows you to show an indicator when a request is in flight so that users add feedback to Something's occurring that's often
00:28:14
very good to do from usability standpoint HX include allows you to include inputs by default if there's a form wrapping around an element it'll include it but HX include lets you do
00:28:26
that a little bit more dynamically HX select allows you to select a chunk from the return earned HTML so if you only want some you know bit from within a larger document we can select just that
00:28:38
out to be swapped into the Dom um so roughly I'd say there's about a dozen or so core attributes to the library you can check out htmx.org reference if you want to see them all as well as you know
00:28:50
all the events and so forth that htmx triggers I'm pretty rich environment but not the the core of it is very small at the end of the day you can probably get your head around htmx I'd say in a day
00:29:01
or so if you have some HTML slash web development experience so that's great it's pretty small but the question is okay we've generalized hypermedia maybe um what uh what can we accomplish with
00:29:14
that none of this is an interesting intellectual exercise but what what can we actually accomplish and so what I wanted to do is I wanted to go through the examples and just show you show you sort of uh htmx in action let me blow
00:29:27
this up so you can see what's going on here I just want to show you htmx in action nope dismiss that and let me kick over really quick and make sure can everybody see this and everyone
00:29:39
see this good I just want to make sure that we're good here before I before I keep going I think it looks good yeah okay perfect
00:29:56
all right sweet um so so this is I've got if you go to hdmax.org I've got a lot of the slash examples page I've got a lot of examples there of just here's a thing you can do with htmx
00:30:09
um and they're not components or anything like that rather they're just sort of examples like copy and pasteable examples or you know like just to give you some ideas of what what can we accomplish with these tools and so here we have a div that's targeting itself uh
00:30:22
the outer HTML of itself and we've got a button in here that's going to get from the contact slash one slash edit URL a formed edit this contact so Joe Blow which is kind of an americanism but
00:30:35
whatever um so this is a really bad contact app where we've got kind of a uh some divs showing some information and then the ability to edit it and so what this is
00:30:47
going to do is when you click on this button it's going to issue a get to this it's going to get back a form and then it's going to swap that form in for this and did but it's going to do it all in line now that form is going to have an HX put on it which makes sense because
00:30:59
this is an update so we're going to put to contact slash one it's going to Target itself it's going to replace the outer HTML of itself it's probably going to replace itself with something like that so but we also have a cancel button
00:31:11
in here which rather than issuing a put so this is going to be triggered by a submit by default since this is a form but rather than doing that this button is going to say hey just issue a get to that and get the current state of the
00:31:25
contact rather than trying to update it and so um so a little bit of of HTML not too much but with that we can come down here and you can see a working example we can say Joey or let's do something a
00:31:38
little more realistic Joey and I can submit it and it updates or I can click cancel and it doesn't click edit I cancel and it doesn't and it's driving
00:31:50
hyper media exchanges so if you click here you can see okay we had to get we got back the form the form replaced form replaced this so when I clicked here right the form replaced that and then
00:32:03
when I clicked another button it got back some more HTML and replaced that form so it was all hyper media exchanges there was no Json here and okay cool and then HTML has had forms forever why is
00:32:16
that a big deal well note that the scroll state of this page has not changed right I'm working with this HTML I'm clicking cancel again I apologize for the crappy styling I wanted to keep it pretty pure without any Fancy Pants
00:32:29
styling just so you can see what was going on but we're able to keep the scroll State here so you can have this edit anywhere you could have it down at the bottom of some page you don't have that giant chunk where you lose all your
00:32:40
mental state and you can actually see what's going on you stay in one place and so this is it just a simple example of how htmx can take a fairly common pattern you know a form that edits some
00:32:54
information and make it smoother smoother than it is using the standard HD DML model all right so that's one example of htmx in action another
00:33:05
example and this is an example where the div people sometimes will complain like oh you know you shouldn't have divs should never issue a request because you should use a button or whatever well I don't agree with that
00:33:17
necessarily and this is a good example of where I don't think that's true this div issues a get to the slash graph URL and it does so on the load event and this is a synthetic event that htmx
00:33:29
triggers um and what this does effectively is it makes this div lazily loaded so this div will render and then it will issue a new
00:33:41
request to get its actual content and in this case the graph is expensive to calculate and so it takes a little bit um and so I'm going to come down here and hit refresh so you can kind of see so it starts within this indicator as
00:33:54
it's making that request and then when that graph finishes rendering it at that point swaps it into the screen and it's using the the load trigger in order to do that so this is saying okay you know render this Dev with an image which is
00:34:06
kind of a spinner SVG that shows like hey something's happening um and uh when uh when this finishes load the whatever's whatever the HTML response is from this URL into this Dev
00:34:19
so okay why would you want to do that well if this is super expensive to compute you might want the rest of the page to render and I'm thinking of applications where you click on something and there's an expensive computation and it takes a while to get
00:34:32
the UI and maybe you're not interested in that expensive computation maybe that expand of computation isn't going to block you isn't going to block you from doing what you want to do there's another you want to further navigate or
00:34:44
something like that and so this takes the generation of that graph out of the critical path of rendering the rest of the UI so you can use lazy loading just two attributes you can always load anything any HTML content and you can
00:34:58
use that actually as a performance optimization a perceived performance optimization obviously it's a trade-off because it's a little bit more complicated I mean you have multiple requests now but it'll get that first page render very fast like they'll be
00:35:11
able to see what's going on really quickly and interact with it and maybe you know this graph isn't super important to the user so that's an example I think of a situation where a div is an effective hyper media control
00:35:23
even though it's not you know we're not using it as a button or something like that so that that's lazy loading um the next example I wanted to talk about was sortable
00:35:35
and sortable this is a this is what this example shows is how htmx can interact with more complicated JavaScript uh code um so sortable.js is a JavaScript
00:35:48
library that allows you to do drag and drop and so that's the kind of thing that typically you know people like oh how could you do drag and drop in a hypermedia application well yeah you know you do have to do some client-side scripting for sure
00:36:00
um but I've written some code here there's some code written here that hooks up so that anything with a sortable class on it gets initialized with this sortable JS library and that makes it drag and droppable and then um
00:36:12
the the integration with htmx is done by having a form that is marked as sortable so that the divs within it are going to be draggable and droppable it integrates with that with with the
00:36:25
sortable JS Library via events so sortablejs triggers an end event when it's done doing a drag and drop and so we can listen for that event and when I drag and drop finishes we can use that
00:36:36
to trigger a hypermedia exchange with the server and so here we trigger a post to the slash items URL and that should persist you know whatever the new ordering is we're using a hidden input here to keep track of the ordering as we
00:36:49
drag things around and if we come down here you can see as I drag things around it's very fast you can see there's a quick flash of an indicator up here saying oh it's updating and if we look
00:37:03
at the posts you can see every time we finish a drag and drop a post is issued with the order the New Order of these elements and so here we've got a very rich user experience I mean sort of a a
00:37:15
a simple Rich user experience but still nonetheless you can imagine this being useful for drag and dropping tasks or whatever it is and we've integrated it with htmx and with the hyper media model
00:37:28
by using events and so this is something I say I'll say very often I think when you've got um sometimes you'll hear the term island of interactivity and people say oh you should use react or whatever for that
00:37:40
and that's fine you know hypermedia is a tool it's not always applicable sometimes you need heavier Tools in order to achieve what you want like here or we're trying to make drag and drop work um and that's great and the way to integrate that island of interactivity
00:37:53
with a broader hypermedia application in my opinion is to use events and so hopefully those either if you're building the thing yourself you can trigger an event or if you're using a library like sortable jazz it triggers
00:38:05
events and you can use that to hook into a broader hypermedia application quite easily that's built with uh htmx so um so I think that's a good example to answer some of the people who say well
00:38:18
what about right like what about this super complicated thing fine do it using whatever you want it's all good but just trigger events and then you can integrate that thing into a broader hypermedia application which is you know
00:38:30
obviously still very simple has that simple original model of the web um and then the final one that I want to show just because it's kind of a granddaddy of a model that I think it's the coolest one of them all is something
00:38:41
called Active search and active search takes uh is it where you as you're typing into an input the search results filter down and so to do that this is a little more complicated it's definitely
00:38:53
a little bit more advanced uh htmx but uh it's not crazy hopefully you can understand it even if this is your first time looking at hdmax so we've got an input it's of type search types of
00:39:06
type search and uh it's going to do a post to the slash search URL this should probably be a get I need to rework this example but it's post for now it's fine it's all good um so it's going to issue a post to
00:39:19
search fine the input is going to do that and it's going to do so and the trigger here is a little more sophisticated than some of the other stuff we've seen so it's going to do it on the key up event now obviously you don't want to do it on every key up event so if there are arrow keys that
00:39:32
are pressed you don't want to issue any requests your server and so there's some modifiers so this changed modifier says only issue a request if the thing that this is defined on has changed if its
00:39:44
value has changed since the last time and then the other modifier here is is delay 500 milliseconds and this does something called debouncing so obviously it would be bad for them to on every
00:39:56
single keystroke to issue a server request and so what this does is it says okay when a key up occurs wait 500 milliseconds and if another key up occurs cancel that previous one wait
00:40:08
until there's a basically a 500 millisecond pause so that we're not hammering on our server and that General Concept in UI and in engineering is called debouncing so this debounces the requests to that input and then finally
00:40:22
there's a comma which indicates more than one event is going to trigger a request and in this case the search event is also going to trigger it so if you have a search input some browsers will render a little X in it and so when
00:40:34
that gets clicked on there's no key up event but there is a search event that's triggered so a little bit complicated but not crazy I hope you know you can get your head around that and you can read the docs and figure it out pretty quickly
00:40:46
the next attribute that's important on here is the Target and here we're going to say what we're saying is the take the post response the response from the post to this URL and stick it into the search results the thing with the ID search
00:40:59
Dash results again using a CSS selector and so if we look down a little bit further that's the T body of this table that's located below this input and then finally there's an HX indicator which says Hey I
00:41:12
want to use the thing with the class htmx-indicator to indicate that a search is occurring so that people know that something's happening so here's the demo for that excuse me and if I type A and I
00:41:25
wait a second you can see there's a request that goes out and that request came back with some results and those results were put into this table below and if I continue to filter that if I type e for example it filters it down a
00:41:38
little bit more and if I type S it filters it down even more and so I'm looking at what the only people that have ads either in their emails or names or whatever you can see that um I was it was the htmx was issuing
00:41:51
these posts so the search URLs as we went and it was taking the results and just slamming them basically into that tea body down below down below the table so very simple you know hyper media
00:42:03
exchange nothing fancy I hope everyone here can imagine how they might construct a server-side code in order to render the table body here appropriately but nonetheless you have what I consider
00:42:15
a pretty you know this is a pretty a pretty neat uh uh piece of ux that I certainly there's a lot of web apps or web applications even single page applications where I kind of wish they
00:42:28
had this and you were able to achieve that writing only you know four attributes you know a little bit a little bit carrier than some of the other stuff that we've seen but nonetheless this isn't crazy code and compare and contrast for example with
00:42:41
the reactica that would be necessary to make this happen right so I think this is a good example and I like finishing on this one because it's a really good example of just how interactive your hyper media driven applications can be
00:42:53
if you do a little bit of expansive thinking about what can I do with this tool what can I do with this tool and what sort of experiences can I provide this is something that I think most web developers would assume you know
00:43:06
requires a fair amount of JavaScript in order to pull something like this off and in fact it's just some attributes on HTML so pretty cool okay so I'm going to claim that that's a
00:43:19
pretty high power to weight ratio and I'm going to claim that hypermedia is a pretty interesting concept and so hopefully my hope is that htmx as a hypermedia oriented Library sort of
00:43:31
Sparks and I think we're starting to see that uh interest in particularly younger web developers in the hypermedia model and what can be achieved using it um the these Concepts have fallen on hard times
00:43:42
but I think there's there's a sense that maybe react has gotten a little crazy in some cases and maybe isn't necessary and people are searching for more Simple Solutions to uh to to web development I
00:43:56
think hypermedia can provide that for you so um so I'm a hypermudia Enthusiast and uh there there are other hyper media enthusiasts out there in particular web browsers web browsers are really good at
00:44:09
downloading uh parsing and rendering hyper media and so uh maybe we should take advantage of that fact maybe we should take advantage of the fact that these tools have a bunch of infrastructure baked into them you know
00:44:23
the amazing clients that we've got in web browsers maybe we should take advantage a little more advantage of the hyper media functionality that they have so uh so that's my talk that's my talk
00:44:34
uh q a Phillip I can't hear you are you muted or am I muted I was muted now you hear me right sweet thank you oh mute so you don't have to listen to the kids screaming in the
00:44:55
background no the noise was was totally fine uh I think you were pretty good understandable and yeah it was a great session thank you
00:45:06
for that I'm again hooked by it um so yeah Round of Applause I see an audience um they have now time for for questions comments please write it in the chat
00:45:19
um yeah for me maybe I can start with with what my impression was like I I also I mean I started with web development at the end of the 90s when
00:45:30
there wasn't much JavaScript then 10 years later or five years later like after the thtml times so to say jQuery became a thing right then uh the rise of
00:45:44
SBA started um I did angular stuff recently I um got hooked by by swelter quite a lot and
00:45:56
then I found out htmx and I thought whoa this is um it seems like it's closing the big
00:46:06
gap right where we somehow we I felt we as developers got maybe like too much how to say like sucked onto some hype train thingy this
00:46:21
was this uh did a big JavaScript Frameworks and and put way too much stuff um to the client for things which as you made it also clear to me when I
00:46:34
read through the book was or it's already there by the architecture this was rest and hypermeade in general right um so um for me this is that's why I
00:46:45
thought of like okay Back to the Future so to say right it's um and I like the Simplicity I must really say like um to the what you can achieve with that so
00:46:57
yeah I think I think you're right I think people got there was a little bit of like you have to use react to be a serious person right like you have to use react to be a serious developer and um there's if you go to Greg brain.dev
00:47:11
there's a section called fear of looking dumb and I think one thing that we have in our industry is we're all we're everyone is scared of not being considered intelligent because it's it's really bad for your career people are
00:47:23
found I guess sharp enough you're not going to get hired you're not going to be taken seriously in technical decisions and so um it's hard to advocate for a more a simpler uh a simpler technology and you know there are compromises hypermedia isn't perfect
00:47:36
it can't address every technical need out there so you're always going to have a what about that's going to be okay well yeah it just doesn't handle that and so you have to be comfortable saying like look they're trade-offs and I I'm a
00:47:48
Simplicity guy and so I want to do this in the simplest way that works even if it's not maybe as perfect as it would be you know in your mind if we did an FPS I think we have to say that the reality of single page applications on the ground
00:48:00
is nowhere near as nice as a lot of single page application Advocates seem to think it is I've used plenty of terrible single page applications so um so you know I think that's just something specially more senior
00:48:14
developers is if they can you know I don't want to make it a generational thing I really do want to reach the younger kids but I think uh there there is this opportunity for more senior developers to say hey this is cool and this is a good idea and yeah it's easier
00:48:25
and yet can't do everything necessarily quite as smoothly as react can in some theoretical situations or even some practical situations so maybe we use react for that but being saying that in an organization I think for senior
00:48:38
developers is very good because it makes the younger developers okay with like because younger developers are always there's always imposter syndrome there's always you know this Terror of like oh I'm going to be found out they're going to find out I'm not smart and it's like
00:48:50
if if some more senior people can say hey look you know this is too crazy this this isn't where we're adding value in our application we're adding a server side or it's the interaction it's the network effects of the app so we're not
00:49:02
going to dump a bunch of complexity into this part of our app we're going to simplify this so we can use that complexity elsewhere there's an essay I have up on htmx.org assay is called complexity budget where I talk about
00:49:14
what a complexity budget is um do you want to go through the the chat and I I saw some questions sort of yeah let's dig through it the first one I saw was great tool
00:49:29
question yeah great tool the example with inline editing is it possible to trigger on clicking outside the form to cancel yeah good good question it is possible um it would be pretty Sophia you'd have
00:49:41
to use scripting and one thing that I want to clarify with htmax is I we're not we I'm not opposed to using scripting in web apps I think scripting is great I made a scripting language called hyper talk uh or hyperscript
00:49:55
excuse me that's for scripting and web applications um so for something like that a more advanced use case you would need to do some scripting you could do it in JavaScript you could do it in hyperscript you could do it in alpine.js
00:50:06
you know whatever picture poison Alpine GS has a really nice tool for this instead of hyperscript vanilla.js would be a little trickier you'd have to kind of roll it around um so but you would what you would do is you would add some scripting that would trigger an event you have like clicked
00:50:19
away and you would be responsible for writing this the scripting that made that clicked away event triggering and you would put that on the on the cancel button so you set up the listener so that then issued that cancel on that so
00:50:33
um there's an essay on htmx.org essays called hypermedia friendly scripting where I talk about how scripting Works in a hypermedia driven applications and sort of what that feels like and so I
00:50:45
would encourage you to read that if you're interested in the details on that foreign it's not as sophisticated as a single page application plan which is going to be um you're not able to you know
00:51:03
because you're exchanging hyper media you've got this network request and then you've got a chunk of HTML now there's tools that you've got in htmax more advanced tools but it's very easy to you know paint yourself into a corner with
00:51:16
them if you get too crazy with them and so you know broadly I would say try and keep things simple make relatively large exchanges with the server and that necessitates that you're you know that that dick is that you're not going to be
00:51:28
able to achieve the interactivity that you are with like for example vanilla.js or maybe something like react in some cases um and so I think you have to look at what you're building and ask yourself
00:51:39
can this be built or can a Sim maybe a simplified maybe there's some compromises we're willing to make I mean our user experience in order to keep a more simple model but we're still able to improve ux but maybe not quite as
00:51:51
much we could but more complicated you have to just make that trade off so I think that's one of the big ones another practical one is just you know no one's heard of htmx that's changing pretty quickly fireship.net fireship Dev did a
00:52:04
profile of uh of hdmax which absolutely nuked the social media for strength to relax with you yeah I mean yeah yeah crammed a lot into it didn't talk
00:52:18
to me and got Mo I mean I think there wasn't anything that was wrong and I think you hit the ice high spots you know um so I and shoot the guys got 2.5 million subscribers and I think there's been over half a million views of it so
00:52:32
that's a lot of people so um you know so I think if you're if you're trying to hire or build a team and you have people that are committed to react you know if you're a developer and you're trying to just come into the
00:52:43
industry learn react because that's what everyone's hiring for right now I'm not going to tell you to learn hdmax because there's no htmx job posts so um nothing succeeds like success and right now react is that thing and so you
00:52:57
know maybe htmx can do something that comes in on the side internal tools senior developers who have the ability to say like hey maybe we should try this for part of our application um I think that's where that's where you
00:53:09
can bring it in um yeah so I think those are the primary limitations it's just a tool you know I there is a when to use hyper media uh essay on the essays tab that you can read where I sort of go over what my take is on when it's a good
00:53:22
fit and when it isn't it's not a good fit for everything and that's fine I'm not trying to present it as it is but I think there's a lot of web apps that could be built using the hypermedia approach that are today not being using it
00:53:35
what I also like is the that you start basically with this Progressive enhancement mindset you really focus on HTML first and hypermedia and if you use
00:53:49
htmx you just just sort of say sprinkle attributes to it and if there might be situations where you come to some some boundaries even with htmx but yep not
00:54:01
sure where the boundaries are but I'm sure the bigger it gets there might be some boundaries right but um only then I would say okay then you might take a look into like well investigate again even the other
00:54:15
Frameworks could solve this right but um it's starting from behind so to say nowadays quite often that you front end is equal to react equal angle or whatever right and then you go and until
00:54:34
you come maybe to a situation where you need to like change HTML or tackle or css and then well okay these are the you have some challenges there but um yeah
00:54:45
yeah you know I uh boy I just I I think it's what I again I want to stress is it's a tool it's a there's a philosophy behind it the restful the original restful model again go to the essays page if you're interested in the
00:54:59
philosophy there's a lot of stuff there that kind of explains what rest meant and how that all worked and so uh you know my more than convincing people to use htmax I want to just convince people to take another look at hyper media
00:55:12
because hdmax is you know it'll be here in 10 20 years maybe who knows but hyper media and the ideas about yeah I think we're a much more you know they're a more General concept uh
00:55:28
that's pretty much resonates with me as well um yeah good I'm glad hopefully we have some fun it is pretty fun it's a different way of building stuff so you got to get your head around it but it
00:55:43
should be fun you know what else yeah yeah I think you briefly attached it already uh I would say it's it's absolutely possible
00:55:55
um maybe not to some extent but yeah yeah it depends you know the more event oriented a particular heavy JavaScript library is the more advanced IT emits the better uh the interactive
00:56:09
interaction story with htmx is going to be and the less brutal it is to the Dom the better because you know it's one stuff when the Dom starts getting mutated out of band that's when things can get a little bit tricky
00:56:21
um but you know we just saw our sortable.js and that integrates really cleanly um so uh you know I can't talk about a particular validation library but there's no reason it shouldn't work so
00:56:33
thank you uh yeah this is just the standard session cookie so the way web apps have worked since time immemorial is you logged in on a logged in page and it set a cookie a session ID cookie and then
00:56:50
that cookie was typically used on the server side to index into some store either in memory or redis or whatever where the session information for that user their email and so forth were all kept so it's funny because people you
00:57:03
know people are used to front-end development now they think about like these these crazy keys that you have to get and you have to keep in local storage or whatever and the way it has just always worked in web development is
00:57:15
just using session cookies so um so it's kind of it's the old I say like oh it's just the normal way and everyone looks at me like I'm crazy but um but the old it's the old way let's say it's the old way
00:57:27
you exchange cookies just like you do in a normal web request and so the the normal session management works whatever for whatever server-side accessories the reason for upgradation because it
00:57:40
makes a lot of sense but even yeah um in the background yeah there is still J I mean you know I joke that like I had to write a lot of JavaScript to avoid writing JavaScript so htmx is Javascript
00:57:53
and there's unfortunately for better for worse no way of getting around that um but I do think that htmx takes that idea it takes that that takes that infrastructure and repurposes it in favor of a declarative hyper media
00:58:06
oriented approach to building web web applications and so there's would I prefer that htmax was part of the browser absolutely do I think htmx should be html6 yes 100 you know like
00:58:18
that would be awesome I wouldn't have to do all this work and uh so that would be good um so we're stuck where we are and javascript's the thing that's there so we're gonna have to use it and you know
00:58:30
this there are problems associated with it but if you do adopt htmax for your web development one nice thing about that is that you end up writing a lot of HTML and I've got you know you're not
00:58:42
going to write your back end in HTML you're not going to write your domain logic in HTML so what that means is that you're not going to be pressured into using a particular language on the server side and that's in contrast with
00:58:54
the situation with single page applications where you've built this enormous front-end Library your application in JavaScript and the question always becomes how come we're not writing the back end in JavaScript as well we can share domain logic and
00:59:07
authentic you know the validation logic and all that stuff so when you adopt the single page application mindset you're going to be pushed on the back end to adopt JavaScript and so I don't you know
00:59:20
I didn't like that I like a diversity of server side and web Frameworks in general like I'm a programming language person so I like lots of programming languages and uh I think one philosophical goal of htmax is like I
00:59:33
want everyone to be able to do web development in whatever language they like there's a lot of people that let go there's a lot of people that like rust lisp Haskell you know python obviously um you know Java c-sharp whatever it is
00:59:47
uh oh camel like there's a small but very enthusiastic go camel Community that's using htmx and I think that's great I would prefer a web that's like that the web was supposed to be open it wasn't supposed to be a monolithic
01:00:00
culture it wasn't supposed to be everything in JavaScript or everything in anything right it was an open hyper media based system and so early on it was you know Pearl scripts and PHP and
01:00:12
so forth uh CGI scripts and Bash like all sorts of crazy stuff and so that and that's what I would prefer I think it's I like lots of different communities with their own little quirks and you know cultures so
01:00:27
okay cool let's see I think we have say five minutes or so it's fine right so let's go over yeah I'm good some more questions uh I like the conversation
01:00:40
that's great yes pwa um yeah I've not done any work with pwas or with service workers I uh gave service workers to someone else their service
01:00:55
worker support and hyperscript and I just didn't do it um I gave it to another person who knocked out of the park as far as I can tell so I don't have a lot of experience with it I know there are people who are interested in that and uh there are people on the
01:01:08
Discord which you can get into if you want at htmx.org Discord that'll bounce you over to the server there's a pwa channel that we just created because there are people talking about it but
01:01:21
unfortunately I'm just not I don't have enough experience to really talk about that confidently at this point okay how about that components yeah with with server with uh with like standard HT you
01:01:34
know the HTML standard web components it works fine um and you could say well like it's just exchanging HTML so if you've got components components work great um a lot of people want more like the jsx thing and that's not that's not
01:01:48
htmx's Jam you can use a jsx like library on the server to generate through HTML if you want but if you're looking for that cert client-side encapsulation to something like jsx gives you like you're not going to find
01:02:00
that in htmx hmm yep yes I would argue if you did a CPU profile of the death difference between generating the HTML for response and
01:02:22
generating the Json for response it's going to be a round off error CPU burn is you know performance is going to be dominated by your database for almost every application out there and so you
01:02:34
know once you're accessing the database CPU burn is just a round off error um so I mean that's my answer to that the the actual difference between the two size wise is just not significant
01:02:48
string concatenate if string concatenation is your problem performance wise then you've got bigger frisks to thrive and htmx versus react but hey that's one of those what abouts you know like how do you answer it like
01:02:59
well it's going to be more inefficient yeah I mean some level until you start looking at the actual Json responses that are going back and how they're enormous because everything's being jammed into them to make their you know
01:03:11
a general Json API whereas with HTML you can tune it for your particular screen and really get down to only the information that's necessary so you know their trade-offs I'm not saying that htmx is more or the excuse me HTML is a
01:03:24
more efficient representation than Json you know for a tune and for a particular situation because it's not but from a practical standpoint I don't think it makes as big a difference as most people think and I think there's a lot of
01:03:35
situations where because of the nature of Json the responses can get really large with a lot of information that's unnecessary in a way that HTML just doesn't have that issue since it's so specific to a given screen
01:03:48
um foreign yeah yeah that's one of the hard ones um for sure uh keeping focus and like video state for example um uh and uh so that's
01:04:07
um hdmx2 is I'm hoping going to be out at the end of the year and uh there's a new feature in it called a morph swap which is based if everyone anyone who's ever seen morphed on morphedum is an older library that that morphs it tries
01:04:19
to preserve the Dom and it changes the Dom from one Dom to another thing but keeps as many elements in the original as possible and so I've got an updated algorithm called idiomorph which is sort of a you know I tried to take morphedum
01:04:32
and add a little bit of functionality to it to make it a little smarter and how it does merging and that's going to be in htmx 2.0 and it's available now as a plug-in there's an extensions mechanism for htmx so you can download it and
01:04:45
start using it with htmx today and that that addresses that problem of like okay as I'm typing things need get updated um but the story right now for that isn't great so if you look at there's an example of validation form validation in
01:04:58
the examples page and what we do there is we actually Target when you're typing into an email into an input we target the the thing after it the label after it so that we're not uh we're not
01:05:09
replacing the thing that the user is typing into instead we're taking the results and putting them somewhere else those are just the you know that's the compromise of using the hypermedia model right now okay
01:05:23
what else um any tips on catching unexpected errors yeah right htmax has a a really uh extensive event mechanism and so there's
01:05:36
events for almost everything that occurs and so that's another example of where you should start writing some client-side scripting but hyper media oriented scripting where you're handling events and doing things in the UI again I don't want to come across as
01:05:48
anti-javascript or anti-scripting I just you know there's a certain way I advocate doing it it's capturing events and responding to them so htmx tries to just like it is able to respond to other events it tries to be liberal and the
01:06:00
number of events they emits and so that you can know like in this situation do this you know you can know when something happens that you can for example show a pop-up or you know flash a a some sort of growl message or
01:06:13
whatever yeah if you go to htmx.org talk I think there's a bunch of uh sync and then you can search for htmx on YouTube as well but there's yeah I think
01:06:32
the essays and then the book which is at hypermedia.systems is also good if you really want to take some time and get deep or deeper might be a little basic for some people that have been around for a while but it's I think it's a good Refresher
01:06:45
absolutely I can totally confirm this um I I'm I think at 90 reading it's um it's great it's good to hear that it's really helpful for all levels I would say
01:06:58
um I would even recommend it to to Maybe Junior developers right as as it contains and refresher or an explainer on hyper media in general which is often lost nowadays right yeah that's who I wrote
01:07:10
it too I wrote it down the developers yeah I felt younger after reading it yeah I wish I had so younger man holy smoking red I'm like I feel like our age is two decades
01:07:23
uh okay uh let's see I think this all the questions and we are almost over one hour so I don't wanna Stretch Your Presence at the airport
01:07:36
too much longer right yeah I finally got quiet now it's time to get out of here but I appreciate that thanks so much for having me on and uh you know I'm on Twitter you can follow hdmax underscore org and uh I can check out you can
01:07:50
always hit me up on Twitter or whatever and we have a Discord and look for that book and we'll uh hopefully have that out late next week cool I'm I'm one of the first ones over
01:08:02
who buys the book I'm sure of it I I appreciate really like paper books right yeah yeah it's it's a paper book it's hardcover we're only doing like the pro the the Primo version because we figure
01:08:14
it's online for free anyways so if you really want the book you know you can get the hard copy version we have a nice cover so cool cool okay all right
01:08:28
cool lots of praise and Applause yeah I appreciate that everybody I hope you're having fun I hope everyone's having fun be cool you know again it's just a tool it's a good tool but no it's just a tools though we're all having fun right
01:08:41
okay cool then I would say Enjoy your the rest of the evening or the day right it's it's already late afternoon I think so cool again thanks for being with us yeah
01:08:54
absolutely thank you appreciate it guys see you later foreign
End of transcript