Simple, Fast Frontends With htmx

hi everyone and welcome to today's webinar organized by jetbrains i'm paul everett pychar and developer advocate and i'll be your host the topic for today's webinar is simple fast front end with htmx i'm really happy to be joined today by carson gross the creator of hdmx and intercooler.js before that carson runs big sky software i think the big sky gives it away i think it's montana is that right that's right yup i can do geography teaches computer science at a university which someone on twitter said that was really cool and as the cto of lead dyno welcome carson thank you i'm really happy to be here i've been uh very pleased to see how much hdmx has been accepted by the python community so i'm you know it's been it's been great especially the django and flask communities have really been hitting it hard and uh it's been nice to be able to give them a tool that lets them stay in their preferred framework and in their preferred programming language yeah and uh for everyone that's out there that's watching and listening a couple of points first carson is everywhere all the time recently including uh talk python michael kennedy did an interview with you a couple of weeks ago i thought it was really good um and uh the the other part of this and in fact you were just in a net one as well the other part of this oh my god this is like the thing that i care about the most in my life and so i might get a little loud those of you over there in the comments that i'm looking at right now anchor thank you that's a great comment if i get too loud let me know because over enthusiasm and microphone distance is a bit of an issue carson your mantra is um your technical approach is to look for hot new trends in the industry and then do the opposite of that i love you a little bit about your background the what and the why of htmlx and hell i don't care tell us what you think what is the web sure uh well that and that is true i'm a contrarian by nature um i've just always been that way um and uh that's fine uh it's you know sometimes it's uh it can be a little it can be difficult uh and i it can be obstinate at times so as i've gotten older i try to temper that a little bit but i do think the industry is you know the computer industry is subject to trends and uh some bad ideas have come and gone um one that sticks out in my mind you know just because it happened early in my career was enterprise java beans uh the 1.0 version and i remember being really upset with the way that went down and so i have sort of always looked with a jaundiced eye at the latest and greatest stuff to come out of the thought leaders in the industry and i think htmx and intercooler before that reflect that there were sort of reactions against the complexity of much of the front end uh uh many of the front-end frameworks that were coming out in the javascript world um so you know i maybe try and thing approach things from a little bit simpler perspective uh trying to go with the grain of the web we'll talk about what the web is um uh as far as htm x htmx is a way to add interactive behavior to a web application just with attributes in your html directly and so it tries to take html and improve html rather than saying okay html is a thing that you're going to have to produce eventually but you're going to focus on javascript you're going to be producing javascript code to make your ui work and so it's really trying to take html as hyper media or hyper medium and extend it give you more power within html kind of staying within html um and that that kind of folds into what my idea of the web is which i didn't really understand i've been programming in the web for a long time i started in the late 90s um right when the web was getting going doing cgi scripts and stuff like that applets if you remember what an applet is um and uh but i didn't really i feel like have a very good understanding of what the hyper what hypermedia was what html was at a fundamental level and what the the the restful architecture was for the web until um i built intercooler js and as i was building intercooler.js i had people pointing out to me hey this is really this is neat because it's an extension of the hypermedia model of the web and you know eventually i read stuff and understood stuff well enough to to really get that and so um htmx and intercooler before that are really trying to take the this hyper media idea you know you have a document it has hyperlinks and other things going on in it and then it's exchanging in a stateless manner in a restful manner with the back end sort of simple large grain requests is the way roy fielding would say it and updating html it's just html going back and forth and so to me that's what the web is um you're the thing that made the web so amazing and so reliable and so flexible was this idea of hypermedia and uh so hdmx again is trying to take that and give you more let you accomplish more within that original idea within that original conceptual model i was just thinking that uh if the ui of the web really is going to be put your html and css inside javascript that's minified and tree shaken and you want to go view source that we've come a long way um so thank you for putting html back into the web i'm gonna by the way i'm looking at carson here and i'm looking at comments over here and misha points out that there's a really good interview um with django chat that you did a couple weeks ago as well i really enjoyed that one also yeah the django chat that was a great talk and you know python bytes was awesome too it's been it's been great a little exhausting i'm i'm an introvert by nature yeah i'm sorry and uh cars and i were joking that in the future we'll do this dressed as daft punk so that you can be an introvert and we can add a little bit of fun to this um my lead in was a little bit off i say i'm the pie chart developer advocate i'm pycharm and webstorm which really means i'm python and web but you're not python and you're not pycharm you're actually a webstorm customer happy user yep yeah absolutely um i well i have a subscription to everything i have that all so um and i use uh rubymine intellij what's the c c and c plus one c lion i use c line for some of my classes um so i'm an intellij person um and uh web so hdmx intercooler and hyperscript which we might talk about um are all developed in webstorm it's just i picked up uh intellij tools uh excuse me i picked up intellij so jetbrains tools uh very early on in my career um i actually first saw saw it at google when i interned at google for a little bit and uh that was one of the they supported two editors emacs and uh intellij and so i picked up intellij all right uh thanks for the kind words um yeah absolutely people may ask uh carson doesn't do python and so you may say how can you bring a non-python person to a pycharm webinar i'll explain but first carson you like to say how can you explain that yeah how so h-o-w-l that's a stack that i've made up and i'm trying to get people to use um so there's jam sack and uh what's lamp right yeah and there's a bunch of different sacks that you can use and so hal stands for hyper hypertext on whatever you'd like and uh the the idea there is that if you use hypertext as your exchange as your exchange with your back end then you can use whatever back end you'd like and that's in contrast with the situation where you're using json if you're using json on the front end or as your exchange with your back end and uh presumably writing a lot of javascript on the front end there's a lot of pressure for you to adopt javascript on the back end and so um you know i uh with htmx my hope is that people can use whatever back-end technology they'd like for example python now python's been growing very dramatically in the last few years whereas uh javascript's actually flatlined a little bit um in the last five years and so uh it's a shame if people feel pressure to adopt javascript on the back end just because that's what they happen to be using on the front end and so hdmx there's some other technologies i think fall under this idea as well but hdmx by putting the focus back on html and by emphasizing this exchange of hypermedia with the server allows you to use whatever you want on the back end python go julia you know there's a lot of languages that people are very passionate about and so fine that's fine and if you adopt html as your exchange with your server then you're welcome to use it it's just templating on the back end and so uh so that's the idea with that is you know you should be able to use whatever you want not everyone likes javascript i don't like javascript that's all right i've written a lot of javascript now i wouldn't use um for something but i wouldn't want to write javascript yeah exactly as someone who doesn't like javascript i've written an awful lot of javascript to avoid writing javascript um uh but uh you know so it just my hope is that it opens the back end up and so hdmx is back-end agnostic in that sense we don't put any requirements on you on the back end and so if you want to use net python flask versus django whatever it is it's fine hdmx will work with it just let's put an exclamation on that uh carson is exactly right the major javascript frameworks are busy on the next step that will really encourage you to render on the server that is the big thing coming and so for us in the world of python we need to be able to have a story that scratches the itch of why people want some of this interactivity in the front end okay let's talk a little bit about how we're going to do this webinar it's going to be different why because i care a lot on this one i'm doing the driving and i'm going to show um demos from the htmx website and carson's going to sit in the peanut gallery it's going to explain he's also going to tell me where i got things wrong so with that in mind let's go through a little bit about the format of the webinar we'd like to make this webinar as conversational live as possible as you can see already so should you have any questions or problems during the webinar please feel free to ask them at any time during the presentation right over there in the youtube chat that question about why don't you like javascript carson shall be explained in the next 45 minutes uh we'll have a few pauses during the webinar probably after each demo where carson and i will answer your questions we the pie charm team and others will be over there answering questions right now on the youtube chat don't wait for the end ask your questions as soon as you have them usually the most important question is is this thing being recorded yes it's currently being recorded and the recording will be available in this youtube channel basically immediately every webinar i do i've done 5 trillion webinars in the past five years i make the same joke every time in five minutes somebody's gonna ask if this thing is being recorded look over there wait for it see when it's gonna happen so with all of that set we're ready for the first demo if we could go ahead and switch over nope we're already switched over i'm going to get over into the browser and get to the demos first we're going to be following along the examples on the hdmx website i've taken them i've converted them to some that are static pages on disk some that are fast api and a quick demo of django at the end don't ask me to publish this i did i got in a little over my head i got to clean up my software before i share it but for for your viewing pres pleasure we're going to be going through some of these demos and taking a look at them so we'll go ahead and begin and uh carson will follow along i'll give a demo i'll talk about a little bit and then carson will talk with me a little bit i'll switch over to side by side and we'll explain the what the why and the how of this demo and then i'll come back and take a look at some of the questions so click to load this demo is i i started with this one because i felt like it's like the easiest one to understand it works off of files off this like a static site generator doesn't require a backend app server like django or fast api it's just a get but it's like already awesome because it lets you go scratch the itch that might make you switch to the 15 000 npm packages of gatsby you can howl stay with your own stack and walk up to this and click and get more data from the back end now how is it doing it over in the source we have a button that says hx dash get and why don't i go over to pycharm and we'll take a look at this one so this is the example in um jinja 2 basically rendered to a static html file and what we have is this is the first run and it's got one row of data in it we don't want to load all the data because it would be too big of a payload we want the user to be able to go get the next data and so what we have is a button and we add this attribute to it uh by the way i was able to add this in webstorm slash pycharm with alt enter and teach it to learn that attribute name and get rid of the warning so what i'm saying is when you click this button htmx is going to jump in and it's going to take over that click handler and it's going to use this as a dsl to feed the javascript that carson already wrote for you and we're using the csl to give three instructions go get this page when the page comes back shove it in replace me and then use this strategy for how we do the update it could be in our html outer html etc and then maybe along the way we might have a little loading indicator all right this all worked really well for me the first time carson i will put you up side by side with me and talk a little bit about this example yeah actually would you mind if uh if we looked at the code just yeah sure is that all right i think that'd be good uh good for me so um yeah so what this is you know as you kind of went through it the hx get is saying uh when someone does something in this case it's a button so that's by default that something's going to be click it's going to retrieve that vna jax call and that html is going to come back and it's going to take that html and swap it into the dom somehow and so you've got hx swap down below which says outer html and so what that's going to do is it's going to replace the entire table row with the id replacement with whatever content comes back and presumably that's going to be two rows of content in that in page two right so the original row and then this new row um so uh and that's the basic idea with hdmx is a few attributes that tell the telehdmx hey go and get some html and then swap it into the dom somehow so that's the big idea here and you can target whatever you want a couple things i'd say here in this example is um if for hx target you have a you have hash replacement and that's a css selector that we're all hopefully familiar with um in this case what you could do instead of a uh hash replacement is you could say closest space tr and uh what that would do is it would replace the content of the closest uh matching uh selector which in that case as a parent the closest tr is exactly that idea and then you could drop that id from that table row and that might be a little cleaner a little bit more you know it's your call um that's this could i joked during the tech check with carson this could be a 17-hour webinar because i've got like 50 things that just popped in my head with one of them being uh you support bubbling yep so can you explain what i just said um so uh when you mean bubbling you mean event bubbling yeah like as far as yeah so um so h hdmx tries to take concepts that you're already familiar with on the web and use them and so the uh most of the attributes that you have in htmlx are inheritable and so you could move for example hx target up um to a to you could you even move it up to the tr if you wanted to um so i mean there's a bunch of different ways to skin this gap but um and uh you could change that from closest tr which is a little redundant to just this yeah to this and then anything inside of that table row now the default target for it is going to be this you can override it by putting another hx target on something if you want to target some other element but but that's the idea is that hdmx has this concept of inheritance and that lets you avoid repeating yourself some people don't like it you don't have to use it and it does violate um something that i call locality of behavior and that you're moving the behavior away you're moving the behavior away from this button and now you kind of have to look in two places to understand exactly what this button does and that's just uh something that's you know you have to make a a judgment call as an engineer as to whether or not that's a better way to go the other thing that i want to say about this example is it swaps the outer html and in a paging example like this it would be more common in my experience to instead to i think it's append after um there's an hx swap hold on i'll have to look it up don't worry about we got a lot of questions to answer yeah okay so but uh normally the way uh with something like this is you actually append the content after the the row rather than replacing the whole thing with the entire new table and that's just because that's the way a paging library would typically work but this is perfectly acceptable just to zoom back out and summarize we're going over to questions carson is talking about some big things the biggest one to me is html is just okay yep he also likes to talk about hypermedia as the engine of application state we'll have a demo on that where you get to wax prolific about it and then finally this uh locality of behavior yeah um and so there are some articles out there being written about you wrote that one back in the intercooler days if i remember correctly no locality behavior i wrote about it but locality of behavior there's an essay on htmlx on the talk page if you go to html.org talk there's a locality of behavior essay and that's it's a term it's a term i'm trying to popularize as uh in contrast with separation of concerns in particular most web developers are familiar with separation concerns where you pull things into different files and there are advantages to that but there's also disadvantages which you can the primary one being it's hard to understand what a button does and why it looks like it looks like it does just by looking at that button you have to go into a bunch of different files and uh each with hdmx you tend to put the stuff on the button and so it's much easier to understand oh that's what this button is doing um in contrast with like you know jquery handlers over in some javascript file or whatever and alpine js are kind of getting popular for similar things which i'm going to do a speed round through questions i apologize for going so fast if any of you want to follow up with me for longer semi-accurate answers come find me on twitter anchor makes a good point you will still need things like alpine js for the islands that's another idea that's starting to spread is that use javascript for your islands not for your entire page question about what language we're back in python or javascript i'll let the title of the webinar what do we think about wasm i will answer that one forget about it for the next three years at least it's got a long way to go before you will ever be using it um a question from anthony how does this actually work very well okay next question no sorry how does this actually work is this listening to mutations in the whole page and looking at hx-attributes that then just apply some dom changes i believe the answer is no actually anthony corrects it listening to events do you want to take that one yeah um just when content is loaded hdmx scans the dom for these attributes and hooks and event listeners so it's not super sophisticated and we do we don't uh just because it's so expensive and typically not needed if you adopt a a good hypermedia model we don't listen for mutations you can do it uh if you'd like and there's a small javascript api for working with hdmx to when you have uh out of what i would call an out-of-band mutation to your dom and new attributes are added and so you gotta hook stuff up again um but it's not a bit it's not a focus of the library so um okay one last question you're on a time limit because i know you could do three hours on it so keep it under 30 seconds i know the answer because i heard you talking uh i think to michael kennedy about it um does the mat should the metal language htmx get adopted by the dom standards committee in the w3c i yeah i do think htmx is how html should work in my opinion um i think they should look hard at it and obviously not adopt the syntax but if they want to drive html forward as a hyper medium then yes this is in my opinion this is the way to do it there are standards like html include and some things related to that and you think oh wow that's it that's what i wanted but it's really about importing javascript at the end of the day i mean yeah all roads go through javascript okay let's go on for html can't get nervous or html no kidding hey i went through my i put all my chips on xhtml2 x forms and x-link yep i know didn't work out for me i sympathize okay toggle message this is a pretty similar one in a way this is even simpler um the default message gets changed to something loaded from the server and this is really simple but what i want to do on this one is reload this and show the network in action all right and i'm going to leave it as all i'm going to do an exercise for the audience which one of these should i click if i want to see the request generated when i click on default message anyone anyone let's see how everyone does on this i'm gonna click it so there you go in the background it did an xmlhttp request to go get something that was a response type of html and then did its little trick to jam it into the dom um carson any hidden complexity there no not really um you know we've got a div here which some people might complain about because there's accessibility issues with that um and so uh you know but it's all it's doing is uh when it ran it ran into that div and it saw that hx get is it said okay well it's a div the default action on divs and most stuff is uh click so let's add a click listener and when someone clicks that we're going to retrieve this content and the default action is to replace the inner content of the current element and so you can you can change all that with attributes like hx target hx swap nhx trigger excuse me so you can change all those things but by default that's what it's going to do so makes a real simple example like that all right over to one that gets into a little bit more uh snazziness um lazy loading what happened was when i loaded this this arrived after it's not actually in the original content uh what in what happens is we have some new stuff from from htmx called trigger and this is saying basically what event am i looking for to happen click or something like that well i'm looking for the page load event carson a second will tell us what actual event we're looking at for that and then when that happens go perform this action and for that little bit of time i mean if i had a slow server you would see this in there a little indicator and then because of the hdmx styling i've got something available to grab and do a little bit of css styling on carson how's that for an explanation and do you want to explain some of the mechanics no i think that's really good um this is a great demo um this so lazy loading in particular i think is extremely useful um it's a little surprising to people but this is really good for perf issues so very often you'll have a ui that has some part of that ui that is very expensive to calculate and unfortunately in the original web model that meant you had to wait for the entire ui to complete before you could stream back all the html well with this pattern you can pull out that expensive part to a separate request and let the entire page render and then show a spinner as you compute this more complicated uh more expensive part of your ui and that can make the perceived performance of your your uh your web application much better so this is a great pattern very useful i probably use this pattern uh as much as anything else particularly when i'm doing perf work and i think everything you've explained is is great um the the styling that you're doing there's a we won't get into the details of it but there's a there's a model for swapping in new content and so what you're saying there is as this thing goes from what's called the settled states to the final state make its uh opacity one and kind of fade it in that gives that nice transition effect you're looking for um and so that's another good example where htmlx is trying to work with the technologies we already have in the uh in the web transitions which typically had to write javascript previously to use them and now you don't because htmlx provides these sort of checkpoints for you to write transitions between which is really nice so a couple things to ask you on that is that whole setting of the css class this one and then unsetting it during the lifecycle of the directive is that all just within this directive yeah that's part of the infrastructure um htmx has a swapping model so i can get the it's i won't go into the it's pretty complicated but it lets you write transitions uh between without having to write javascript so if you have if you have a div for example that has a class one on it and it switches to class 2 when it's replaced in the content then you can write a transition from class 1 to class 2 in css and that transition will occur because of the way swapping is done internally in htmlx it's a little elaborate i won't go into too many details on it but uh it's all there and there's documentation on it i would call that advanced html speaking of documentation uh css transitions is what you're talking about right now later we'll talk about animations uh lots of good content uh in these docs um one thing i want to add you made the comment about your brake accessibility by having a div be clickable and stuff like that i'm using the bulma css library and it's got five trillion ways to make things a link that shouldn't be likable yeah you know i'm sympathetic to the um to the accessibility folks but i also think sometimes they can hurt their own cause just by being a little bit doctrinaire about it and so i like a cooperative idea like hey let's try and move this way and but you know i i don't know i understand where they're coming from and by i've tried to start using buttons as my default element rather than divs okay um how about you take some questions uh is it possible to do auth stuff with hdmx i'm not going to show a demo of it so i'll let you handle this one yeah um auth works what i call what i call the normal way so cookie based session based authentication if you're using something like django for example there's almost certainly an a a bunch of good authentication libraries if it's not available default out of the box and so the traditional way on the web is you know you'd have a login page you'd log in that would establish a session cookie and then that session cookie was your identity and so because htmx is working in that html model it just works what i again i call the normal way um and so that's you know each back end is going to have its own authentication mechanism that's the preferred way to do it and so you can just use that for your login page and you're good to go because cookies are sent the normal way with hdmx there's no header or anything like that if you have the cross site scripting tokens and so forth then those need to be wired into the requests the way that htmx works is it includes the closest enclosing form of an element and so that will include that token if it's a hidden input for example and then there are ways to you know there are various plugins that have been created to integrate hdmx with for example the big one that i'm aware of is hdmx django um and my understanding is that wires that uh token and automatically you will see a demo of csrf support in jenga yeah so you know it's kind of i would again i'd call it the normal way um there's nothing fancy going on here it's certainly uh our job over in the world of python to create really useful recipes um showing with the major frameworks how to do some of this stuff uh ruslan i think we answered about accessibility craig asked do you have a testing preference for htmx i know you talked about this in one of your podcasts yeah um i i don't have a preference but i use um is it mocha chai yeah and then um senon js's mock server um those are i'm not i don't like the way the java community or javascript community excuse me um builds their software for the most part and so um just because lots of dependencies lots of things flying around um but uh but that's what i ended up using um and i i hdmx is a browser-only library so you don't have to use any there's no build step you can just include it off of cdn and it just works and so because of that i have to do browser testing and browser testing unfortunately isn't a big focus of the javascript community these days as far as i can tell anyways and so i had to do a lot of work to make that all work well but in fairness i mean it does work and we have a pretty extensive test suite for hdmx so i have a 12 part video series on react type script and tdd in webstorm and pycharm and hello world takes about five seconds for a single test to run does not spark joy gabe asks a question about um providing credentials uh such as jot tokens for authenticated api endpoints i think that's outside of the scope of htmlx yeah well we're just really quick um hdmx does have an event model you know one and one of the primary events is config htmlx colon or config request and so you can hook into that event using a javascript handler and then put whatever header you want into the the ajax request so we can work with all that stuff it's just not a big focus there's actually a declarative way to do it as well but so we can we can work with that if necessary but it's a little bit more work sure and if it um if there isn't something out of the box you have an extension model yep and extensions are drop dead simple yep yeah really that was a big focus of mine yeah okay and craig if your question was about testing full stack htmx with django or fast api or something in python this is something i'm interested i've been a tdd unit test and when i want to test html i use beautiful soup but this requires javascript and so if i want to do end-to-end testing taking a look at the dom isn't enough and so pilenium is something i'm interested it's selenium python that feels like cyprus they advertise okay on to the next uh example and um let's see infinite scroll i'll go through this one and but i want to speed up and get to these two so that we can then get over to the backend stuff so infinite scroll is this was a little hard to demo because my div over here goes a long way so i put it inside an overflow div but as i'm scrolling along i get near the end and when i get to the end i want more stuff to load so i got to the last one now how did that work i put let me go into pipe charm i put on the last one little sprinkles and this is back to the whole dsl declarative you don't have to write javascript carson's giving you a dsl in fact he's going to give you a dsl called hyperscript which is even more of a dslr for this an attribute oriented dsl where you just fill in the blanks and the correct effects happen and the correct effect here is when the revealed event happens i want you to do this stuff and it's just not that complicated no it really isn't you wanna you wanna cover this a little bit yeah just you know again infinite scroll i'm not a huge fan of the pattern uh in many situations but there are places where it's appropriate and uh so yeah you wanna get page two um that would presumably be encoded as you're generating this on the back end you know what page you're on so you put the next page on this last row and then you want to trigger on revealed and uh so that revealed event is a synthetic event that hgmx creates when something scrolls into into view there's also intersect which uses intersection observer which is a little bit more uh advanced unfortunately so htmx tries to be ie 11 compatible um it has been in the past and so intersect doesn't work on ie so you just have to be aware of that you're giving up ie compatibility if you use that event and then hx swap here is saying after end and so what that's saying is add the content that comes down from the server after the end of this current tag of this table row and so that new content is going to get jammed in there and that new content presumably will have another final row that has something very similar but has the next page on it and so you just put scroll on down and you can throw an indicator in there if it's going to take a while and so forth but i think this is a great example of you know three attributes to achieve something that's considered a fairly sophisticated ui pattern on the web and we don't have to we don't have to break out of the html model to do that these are all attributes that a normal you know html somebody's familiar with html should be pretty comfortable with these things i mean the one question we have is more like a comment why don't we like javascript for me i spend most of my time these days in javascript and i don't necessarily mind javascript but i'm a python person i'm a python in the web person and i dislike this idea that the ui of the web now has to be written in javascript and everyone else's job is to pump json to it that html is no longer a thing it is an api that's called by javascript engines so that's my answer about not liking javascript i like it for progressive enhancement but i do not like having to write my entire ui in javascript i want any language how to be able to work on the web anything you want to add to that uh yeah i think that's that's a good answer um i i'm a programming language person i created i've created a couple programming languages in my life and there's just design decisions about javascript i mean there's that meme joke that's like javascript and javascript the good parts if you've ever seen that picture of the two books um it's just it's not a it's not a great programming language it's very familiar i'm not you know ruby which is what i spend most of my time in these days i'm also not a huge fan of there's a lot of language decisions that were made in there so i think it's okay to work in a language you're not a huge fan of um you know i just prefer a more structured language typescript looks like it might be all right i haven't done any i haven't done any significant amount of work in it so but part of it is just subjective you know i like some people really like lisp that's okay i also don't like that i need 2 000 npm packages to write modern yeah javascript stuff so definitely the is that it isn't that i don't like javascript i don't like javascript everywhere yeah and that infrastructure like the the infrastructures as with java and the j2e world i feel like javascript has sort of cultural issues that have come up and that make it tough to work with depending on your style of development um so you know but it's subjective i'm not going to turn and talk you out alike in javascript okay on to hadeos the worst acronym in all of computing which is a shame because it represents such an important idea i'll let you pinch the idea i'll give the demo and then we'll come back and show what's being done sure so uh you're right it is a it's a bad acronym um but uh and it's not explained very well either so let's see if i can do a better job of it so hypertext is the engine of application state you may have heard of if you did hear about it you probably heard about it in terms of a json api and almost certainly and why we're not doing haiti us um but what hype uh hedos is uh effectively is that when you're building a web application like a real web application that the the hyper text should be the engine of application state and so it's your hyper text or your hypermedia that should be representing what is going on on the server and then you exchange a request with the server and that server streams down new hypertext hypermedia that says okay here's the new state of the system so like you know just to pick a simple example i make a put or a post to cause something to change on the server and then the server says okay it makes that change on the back end and then streams back some html representing the new state of the world on the server and all that state is there in the hyper media it's not living in a side store in like a json model or whatever on the client side rather it's encoded directly in the in the document itself um in the hypermedia itself and so um there's a lot of really big advantages to that model the the biggest one i think the most obvious one is that when that new html comes back it contains all of the actions that are now available in the system right so if i you know i click some button to mutate say a contact i archive them well when that media when the the hypermedia comes back from that um that new hypermedia can contain everything i can now do with an archived contact inside of it all the buttons and so all the actions that are available are within that and the outer system the the model the the code that's been written that's loaded already the javascript code no it doesn't need to know anything about that it's all right there in that little bit of hypermedia and so that's that's how the state of the application is encoded in the hypermedia itself and so it's a really powerful idea it's very flexible when contrasted with for example thick client applications as they were built in the 1990s even through to today and in some ways i feel like many of the javascript frameworks are encouraging us to go back to that older model where you know what the endpoints are right like in a in a thick client you have to know this is like people like oh give me your api docs well in a really restful hadios based system you don't need to know the api you just need to know the entry point and then everything surfaces itself through hypermedia and so that's the big idea that's that's what uh hadeos is and that's that's how it's useful and that's why it's so flexible and so that's what we're trying to the resurrection the real thing is anyone who's ever used a web browser knows exactly what it is yeah i i have links that i can click on to go edit i mean it's right yeah it's it's there um in your uh article let me see if i can get to that it's under essays right yeah under uh talk okay all right down at the bottom yes okay so these uh get into this discussion a little bit um yeah let's get into the demo and then let's talk about how it works and then get back to a couple of really good questions so the demo here is tabs yep in other contexts we would go reach for 2000 npm packages and a bundler and a level your complexity budget would be shot before you got the demo out the door instead this is the demo and as i'm clicking i'm going to the server and getting the tab content now how am i doing that i have a let me make this okay yeah so i'm saying here's a div it's got some tabs and uh what i want you to do is it's triggered by after a hundred milliseconds go load tab one put it in here use this swap strategy and tab one looks like this and it's got the handlers for clicking on each tab in it so we've got two basic handlers one which is load the tabs or load the first tab and then from then on the server is in charge by sending hyper media that describes all the possible actions three tabs yeah and then when i get to tab two it looks pretty simple it's got it says uh tab two is active not tab one and here are your other two things that you can do yep so i'll stop with that because the hyper uh script version of this is really compelling but i'll stop with this let you talk about it and then let's get over to some questions yeah so and you know normally if you're doing web development and say flask or whatever if you have a templating system you normally pull this navigation out to a shared template between the three so you wouldn't have to repeat yourself and that's one thing about hdmx is it pushes the the factoring problem of your software to the back end and so you just have to do the normal thing or something you already know yeah um so um so it wouldn't be quite as repetitive as this um but uh you're very you're right in that once again all of the state of the system is being captured by html and http requests and so there's no you don't have to maintain any additional fanciness if you go to the original page for this um by the way they're here this isn't factored the way you described is this is a static site generator version there is no other thing sitting back there right yeah and that's you know again that's fine that's a fine way to factor your stuff if you're using a static site generator that's fine um so um here what you might do instead of issuing another request for tab one is you might just inline that tab one html content directly in this thing just to avoid that additional request right originally and then i removed it yeah and so you're you're factoring it out based on whatever your technology basically take all of this yeah put it in here right and get rid of this you can get rid of that guy which is but you know it again it depends on what your back end technology what you have available and hdmx is back-end agnostic so you do whatever works best for the particular technology that you're using and that's fine um questions um how does this compare this is a really good question because it's bigger than what maxime is really i mean he's asking a big question but it's even bigger talking about ruby how do you compare hdmx with turbo links and stimulus hotwire yeah yeah um uh it's definitely a competitor with them um htmx i feel like comes at the problem from a different perspective than those technologies so uh dhh and 37 signals they the way that they approach software is they like a big system or not necessarily big but they like total solutions that's right and so they provide infrastructure that makes everything just work um so there may be if you want to think of it in a metaphor in a metaphorical way they're more like apple you know you just plug it in and it works and that's great until it doesn't if you're familiar with apple stuff whereas htm x comes at it from this different direction saying let's take html and push it forward as a hypermedia and so because of that it's a little bit lower level you have to understand html i think a little bit better in many ways but on the other hand it's a little bit more powerful and so maybe it's you know a little closer to linux in that sense and that if you know what you're doing once you build up the basics you can do a lot more and it's much more flexible but it's not that total solution that kind of just works necessarily so um and i you know i i would say hmx is maybe a little more incremental you can sprinkle it in a little bit more easily progressive enhancement yeah you can uh uh it's just a smaller you know uh it's just a smaller library overall and then it's really trying the mindsets are just different it's like let's push html forward i would say is the htmlx mindset but the thing that i say it's why this is a bigger question than maxine is asking is there's a trend going on where um there's a backlash against javascript fatigue there's a back which is a developer experience issue but there's a backlash on web rendering about javascript being on the critical rendering path yeah and there are several initiatives including by the creators of angular to do and solid js and all these other things that are like don't give me a vdom don't make me have to rehydrate don't make me do all these things before you get your time to interactive yeah let's do html again and so this is part of a bigger trend yeah well generating html on the server side is not significantly more expensive than generating json typically and that that's usually not what is it's not on your critical path anyways like once you hit a data store on your back end the string concatenation is a round off error like it's just it doesn't matter you know you could emit the collected works of william shakespeare and it'd be fine um you know so uh so that doesn't matter and then you have to say you know html parsing on the front end is in c plus plus and it's really really fast oh gosh and so contrast that with even the fastest parsers written in javascript or any logic written in javascript whatsoever and it's just it's a no-brainer so it can be a much faster uh technology for the infrastructure and i think you're starting to see that as they try and back off um back to you know doing server-side rendering but then you ask you gotta ask yourself well okay why do we have javascript here for interactivity well here's another tool you can use to achieve your similar interactivity and as this kind of touches on something sander is pointing out not only does it massively speed up kind of like rendering time and all that stuff it also speeds up development time especially if you already have a stack that you're massively productive in yep that's right there's a ton of very good ideas that in web development that were dropped when web when the server side became a dumb json producer and didn't do anything else except produce json um there a lot of things just kind of went away that we great tools that we had developed on the back end so templating libraries um caching sessions understanding sql really well you know that's something people you know now they want they want graphql on the front end and i'm going no you don't you want sql on the back end sql is there's a lot of really good tools around it and that's going to give you what you want you can produce whatever html you want and then just stream that to the front end and you're good to go um so i think the question i think i know the answer to it sorry for for breaking off um maybe a possible future feature of htmx uh to find an htmx element that can be mapped to json say a button hits an api endpoint receives json to convert it to html guess what game first there's something called let me go over here called extensions yeah it's under reference yeah there you go and client-side templates yeah so um i can't remember which template languages are touched on in there but yeah i think there's three of them okay yeah like handlebars and nunchucks and stuff like that why don't i just click on it and find out click on it there you go so gabe i think that uh i think that scratches some of the edge it's not going to do the semantic part that you want about issuing the requests or whatever but you can just run an extension for it um yeah yeah so there's some examples here um of how how you can work with uh json apis if you need to all right and then uh craig has a point we can skip over that it's just about my example not being as good as it would be um i'll come back to some more of the demos so we can get back to the questions so we can get back to the demos okay my friend you get a chance to make your pitch same demo but in the demo we just did the tab bar had to be redrawn by the server wouldn't it be great and what sucks is when you swap in the div you might get the flash of one of the style or whatever or the collapse and expand because the div is being removed wouldn't it be great if it was just this changing but we still had some way to move the is selected sure would um and i will say htmx does make it possible to have nice animations on tab changes so we do we do a lot of work to make sure you don't get that flash of unstyled content that you're talking about um but at the same time a lot of people are um very comfortable with uh front-end scripting for this sort of stuff and so hyperscript is a a sibling project of htm x which is front-end scripting uh the way i would do it and uh it's a different type of programming language it's very event-oriented um and uh it has a sort of natural language that we'll see here in a second so let me get it centered and then you can handle line number three the idea is in this demo we moved the tab list back into the original page right and the only thing we really need to get now is the contents is the part that has to be changed how do we handle it with this little guy right here and that's what you're going to talk about yep um so yeah exactly so now rather than streaming back to the tabs and the content below we're just going to stream down the content below and then on the client side we're going to switch that is active class between the tabs and uh so the way that we're going to do that here is with hyperscript and the way hyperscript works is um you embed using the underscore attribute which i'm sure will make some people a little bit antsy but i like it you embed a small script and this is the syntax of hyperscript and it says on htmlx colon afterload so on that event when that event hits this div do something and what that's something is is take the dot is active class so that uh that's a literal in the language uh hyperscript has support for css literals embedded directly in the language so you don't have to use strings for them take dot is active for event target and event target is in this case when uh uh on after on load it's going to be the tab this is going to be triggered on the tab that was clicked and you can actually believe it or not you could change this to take that is active for and then the word the and then say event apostrophe s target instead of dot you can do apostrophe s there for the events target um and uh this i think is uh it's kind of hyper hyperscript is not for everybody it's a language i will note that because my example switched to bulma and it's got a different set of tag hierarchy yeah this example doesn't work i thought this was going to fix it and it didn't okay so it never moves the is active so this is a bug in my current demo which is why i didn't actually show the demo sure no problem but in general this is the idea on the front end is you want you're going to want to if you want to write some scripting that enhances the stuff that's going on with your normal hdmx you can use something like hyperscript if you're very brave or alpine js is another uh good example of a front-end javascript framework that plays really well with these events that are admitted by great articles on django htmlx tailwind css and alpine js there's a tutorial on that whole combination yeah here is a brief write-up about hyperscript with a link to the website which looks like this yeah okay let's take some questions and then get on to the fast api demos oh my god i did not manage the time very well it's one o'clock already okay so um yes with python ginger to the back end htmlx would indeed be a great choice because you already know how to do html you already know how to do modular snippets of html with macros and things like that um let's see there's a question about wasm but we handled that earlier uh gabe is answering some questions thank you gabe trend is building for these combinations of alpine js and htmx et cetera you're right htmx is made for the future there's a question about building a community around this i've got that in our wrap-up so we'll handle that um and then a question generic question uh no just a comment that this is a completely different approach to a very basic problem out of the box thinking very interesting so that is i agree on all of that i appreciate that let's switch over to some dynamic stuff that isn't just get we'll do deleting a row and then i'll have to i'll have to speed through these a little bit uh i'm in charge i grant us 20 extra minutes okay i'm good until 11 30 so okay it's nice being those okay deleting a row so i'm sitting on here i will open up the network and i will click on deleting the first row it will do a dialog confirmation that i didn't have to write any code to get wow that's great and when i say ok you animate the disappearing of it in issue and http delete and friends the fact that i have access to verbs not named get in post is a great and marvelous thing that should have been in html a long time ago yeah man man uh yeah that's a great example i do note there's a little looks like a little bit of a gremlin there with those two quotes but we'll maybe figure that out um but uh yeah this i think is a good example you're clicking on the button you're replacing the current row presumably with no content with that empty content if we go and we look at the response unfortunately it has some characters in it and those characters are going to be interpreted by hdmx as oh this is what's going to replace that table row and so that's what's happening we're going to take a look at the culprit here this is in my fast api demo this is deleter row and the endpoint returns that yeah i guess i would guess that's because it's a json response does that can that be an h2 an html response maybe sure i don't know if there is an html hopefully i can still have the status code that i want yeah for sure you should be able to rerun this that's my that's my guess i'm not familiar with this server side framework let's find out there you go well carson is a python expert now excellent i'm not an expert put that on your resume absolutely um but you know one thing can you click on another row and i want to talk about how that fade out works so first of all actually yeah actually uh can you cancel and uh just inspect inspect that button because i want to look at the attributes and just show how uh that's so that confirmation came up uh is uh can you scroll to the right and is it on here or is it up above did you factor it up i just want to show ajax confirm oh there you go it's right there ajax confirmed so this has been hoisted up onto the table body and so what that's going to say is that any action that occurs in here we're going to confirm with this text before we perform it and so when you have deletes you typically want to say hey wait a second make sure you want to do this and so um you know this is that's how that's achieved which is nice you don't i mean putting it putting the handle on every row is not a good thing yeah exactly and so that's an example where you've you've in order to avoid repeating yourself you've hoisted the attributes up the dom so that's a great example um and uh and then when you click on one of these buttons it's going to take that new content which is blank and when it's swapping it in when it's swapping it in it's going to transition the opacity of the old content to zero you've got a nice css transition here and that's how you get that nice fade out here's the styling again you you are in charge of adding and removing these css classes right we have a declarative interface to make all that stuff happen and then i have access to css styling i don't have to do css in javascript or something so i click exactly confirm and i get that nice animation exactly and you know hdmx will do the right thing as far as waiting for it to finish and then swap the stuff in and so forth so really again we're trying to surface these technologies that are available in the browser in html stuff that typically you had to crack open javascript in order to get at them are now available to you just using plain html yep um one question came in again about webassembly in my book totally independent of webassembly which can't yet talk to the dom yeah yeah and so hdmx is very very very much about the dom yep hdmx is really again a return to that model to the original model of the web hypermedia let's let's use hypermedia for stuff hypermedia i'll skip the animations demo and do in-line validation because this really paints the scene for progressive enhancement in places where just html out of the box isn't a good enough user experience so i did not i i ran out of time i didn't restyle this for bulma so it's a little bit ugly but it's a form we'll look at the code in a second and i put in x at y dot org and when i lose focus the server tells me i can't do that and i'm like well wrong i can do that actually so let's take a look at this i'll get out i'll go back to pycharm and give us a little more room on this yeah this is inline validation and the demo this is everything that we got to look at i mean this isn't like you know 50 dependencies and all this other stuff uh but it is i'll admit this one was a little squirrely for me so okay um kind of the inner outer part got me a little bit so i'll let you give the explanation of what we're what we're doing yeah so um this is an input and so the default action on an input in contrast with a button so on a button the default action or the default trigger i should say is going to be click with input it's going to be changed and so when someone changes this input we're going to issue a request we're going to issue a request in line validation slash check email and there's an indicator that'll show as of that check is being done and what you're going to do when you get that content back is you're going to swap in this entire enclosing div so the ajax target in this case has been hoisted up onto the div we're using this keyword which says this is the target now we're going to replace the entire html of it so we're not going to swap in content on the inside we're going to swap the entire thing out for whatever comes back and so again typically on the server side what you do is you would factor this part of your template out into a separate file right because that's you know that's this is the granularity that we're looking at here we want to factor this out and then you would just render that as a partial here and then also in your inline validation slash check email there you would render that same smaller template to return the content and this content would then you know you do your normal uh check to see if it's unique on the server side and potentially slam an error class on it or whatever you want to do but that would be the same hopefully in both the ajax situation as well as the non-ajax situation and so because of that you'd have the same logic in both places and all you would have to do is just re-render excuse me re-render this small little bit so so that's the idea here um you know yeah and back to the question why why we hate javascript let they turn javascript off in the browser this will still work yeah yeah you do you know you're having a blank spot where the jsx would have rendered right you you you always have to do your checks again on the server side right you can't trust validations that are done purely on the client side htmx does also integrate with the clients with the html validation specifications so there's a spec for uh for doing um validations on the client side and um so htmx will respect those validations run them before it tries to issue a request so you can't integrate with that yeah so you can't integrate with that if you want um but for something like this where you need to check whether or not an email is unique um you're gonna have to make a server request and so the next way is to do that by exchanging hypermedia with the server rather than a little bit of json i just realized i buried the whole lead on this entire thing which is hdmx means you don't reload the page right so you do things like preserve scroll position you preserve form input etc so for example i'm going to scroll down so that input validation goes off the screen and when i go and do this my scroll position doesn't change that's right the rest of the page doesn't blink yep everything in the dom stays where it was um there are some things that i wasn't showing actually i'll show it with this as i go i i hdmxified the demos so as i move through these i'm using hx dash history or push push push url to interact with the history to update the url of the browser so there are some history api ways to invoke all of this as well let me get to very simple you don't need to get into the muck of that api that's right which is a terrible big mock especially cross browser so one point uh i'll read this in its entirety since it's a nice pat on the back for you okay i think carson is making history here we might see a different direction for web development specifically especially for light sites like on feature phones that cost fifty dollars in emerging countries that are low on resources yeah well i appreciate i don't think i'm necessarily i don't know i uh i like hdmx quite a bit i think it's a good model i think if we're you know it's just it's taking the web seriously taking the web architecture seriously um and hypermedia is just a great idea so um yeah i don't you know i think uh i appreciate that comment but um i think at some level i'll be dumb enough to want to do it the simple way too there's a comment about the combination of htmx and chameleon templates both being attribute based thank you for saying that i was actually the one back in 99 that kind of came up with uh the predecessor of chameleon uh so page templates um on to let's see i'm gonna stop on the fast api demo not show the app well i'll just show the active search real quick so we have a little bit of a delay to do debouncing and all of that and it's just really really simple uh stuff you know i've got a post and i've got a trigger a delay a target all of these directive attribute things that we've seen before so it's okay with you i'm going to switch over to the django htmlx package okay do a quick demo and then we'll wrap up i will keep this under like three or four minutes this is the demo package that ships with htmx what is htmx a django hdmx it's a python package you can install from pi pi with pip that does some of the pre-wiring of uh hdmx for you including it in templates and stuff like that so you in your django app you say i've got this is installed app i have middleware several different middlewares that i can add to this um and then i can go right my templates in a way that include these things let me show you how i can alt enter in all of our ides and add that so it doesn't give a warning and this was a little bit of what carson was talking about before plumbing it deeper into your app server for things like csr csrf token so i'm going to play this demo click on the link and adam the creator of this has four demos one of them is csf rf oh no yes that is odd but this is eve is not odd and um it's doing cs rf along the way partial i'll do partial rendering at the end middleware tester just wants to see did i click on something yes i did watch the timestamp here that's pretty fast yeah for round trip again it's you're seeing here how we're not reloading the whole page when you click that right it's really nice to be able to do that but we're also sending back small snippets that have less latency less server time being generated on the server less parse time all those kinds of things rather than sending a full page yep which leads me to partial rendering and this is an idea that's really well explored in the html django htmlx package this idea that you're breaking your base layout into partials of pages for example partial rendering uh what we can what what he does in this demo is the part that we want to send back on these hdmx interactions is it the whole page we also don't want to have to uh kind of like inline or repeat over and over and over we want a snippet to be usable when we ask for the whole thing we want to snip it to be usable when we only ask for part of the thing right and this demo shows examples of that yeah it's very common it's it's very common in your controller to check so htmlx when it makes a request includes the hx dash request header equals true and so it's a very common pattern on back ends is to say is that header present if yes render just the small bit of the ui if not render the whole ui surrender with the layout and all that sort of stuff and that makes as well when you create deep links you know when you have one problem you have with a lot of javascript based web apps is you can't support deep links well htmx supports this ajax push url to push the url up into the uh into the browser but then the browser needs to be able to handle both the hdmx request as well as the normal request and so depending on your backend framework there are various ways to achieve that sometimes the middleware does it you know just depends the thing you're describing is where a lot of javascript based routers go to die yep they can't quite handle the hash based syntax or the push state and tax and all these other things yeah if only if only there were you are some sort of resource locator that was universal [Laughter] in in a protocol that was aware of it yes yeah maybe he's a hyper media of some sort okay um we will go ahead and start the wrap-up portion of this so that you can get out remotely on time before we wrap up i'm going to come back to something that was asked near the beginning what's next for htm x and hyperscript and would you like people to get involved uh yeah so um htmx i feel like is pretty uh pretty close to being done so there's not a lot to contribute there except for examples and then work on server side stuff so htmx being purely front end i think examples with particular frameworks on the back end so people have stuff to get going with would be very helpful and then also like hdmx django creating packages that sort of make hdmx dovetail well with whatever backend you prefer would be very helpful i'm always i my primary source of compensation is github stars so i'm always appreciative if people head over and start the repo on on github um and we do have a pretty active uh discord which is friendly i try and keep it pretty friendly and so you're welcome to jump on there if you want to chat about this stuff html or excuse me hyperscript is a little bit more speculative and a little bit crazier but i think that's also almost uh is getting pretty close to complete as well but if you're into programming languages you can jump on the discord and there's a hyper hyperscript channel as well and uh i guess extensions people can write extensions right yeah you could write extensions um you know if you have a way to contribute to go scratch some itches that other people might like uh there's a ticket i don't know if this would be extension i think it's currently extension helmet is a popular meme in the javascript world about components that need to update the head and dealing with the head is a tricky wasteland and so there might be some places uh tickets and things like that that would be pretty interesting for people to contribute on sure all right thanks uh carson for joining us on this joy ride through htmx in the world of python and really thanks a big thanks for htmx itself and advocating all these back to basics back to the future believe in the web story that's really starting to emerge uh in the last year i know it must be exhausting so major kudos and thanks yeah well you know it goes to show you never know because if you'd asked me i i put intercooler out in 2013 and if you'd asked me you know five years ago if this was ever going to make a comeback i would have said no but i also would have said you know everyone would be writing everything in javascript and so funny how things work out and i appreciate you and i appreciate all the you know podcasters who have had me on to talk about it particularly when hdmx isn't specific to your you know domain sure but but hopefully it lets people work in the demands that they like and if it you know helps people stay within the hypermedia uh hyper media model then uh that's great all right uh we'll finish up with a word from our sponsor if you'd like to get more information on pycharm please go to our website at jetbrains.com pycharm look it's another one of those universal resource locators if you haven't already please check out they're everywhere yeah we can't have enough of them uh check out our pycharm blog where you can find up-to-date news about pycharm releases hmm something might be happening pretty soon and other events such as this webinar in addition to our educational webinar educational resources we would love your feedback uh on this webinar we actually pay attention to the survey so if you register please fill it in i'll pass the news on to carson as well about any comments you have or any topics that you would like to see covered in the future come and chat with us on twitter about this topic or about webinars or pycharm or the web or anything that you've got on your mind that is all from us today thank you to our esteemed guests and even more to our esteemed viewers i like to finish with a little bit of pandering thank you for joining us today and hope you have a great rest of the week thank you paul you

Channel: PyCharm by JetBrains

Views: 4,919

Rating: 4.9788361 out of 5

Keywords: PyCharm, webinar, htmx, carson gross, javascript, WebStorm

Id: cBfz4W_KvEI

Length: 81min 49sec (4909 seconds)

Published: Thu Jul 22 2021