htmx: Writing JavaScript to Avoid Writing JavaScript, by Carson Gross

[Music] sure um well uh i'm going to give a presentation i'll i'll kind of rip through the start just so we can get to the uh just so we can get into the code um to focus on a little bit uh just so you can see what you can do with htmls but my talk is called on javascript and the subtitle is writing javascript to avoid writing javascript and what i want to do is i want to give a very brief history of web development and then talk about a potential fork in the road where the industry went one way and i'm proposing that we go back and examine that fork and maybe think about what uh could have happened if uh we'd taken the other the other fork in that in the road at that point so um i am a contrarian by nature um i i feel like this goose is my spirit animal um so i'm gonna cause some problems uh on purpose here on js day for jetbrains so i apologize for that i also love this meme um this is the inventor of lisp mccarthy who is a professor at stanford and uh he uh he just he has that look and sometimes when i look at web development um i i sympathized with this look um i feel like we're all doing it completely wrong so let me explain how we got here and uh what i think we could be doing different in some cases at least i'm a pragmatic um at the end of the day so you're at this conference to learn about javascript um and in particular you're here to learn about the latest and greatest libraries and techniques that have risen in the last couple days and maybe to memorialize some of the many libraries and techniques that were invented a few weeks ago which are now passe we're not using those anymore this is javascript so it's always the new the new stuff here um and that's that's part of the culture at this point in the javascript community there's been a lot of dramatic change even by the tech technology sector standards that the javascript community is particularly bonkers and as a javascript developer it's crucial that you stay on the leading edge of this fro front end technology wave and back end increasingly in order to remain employable um but i'm not going to talk about any of that i'm not going to help you stay employable at least not in the short run instead i'm going to talk about something old and boring something that is dare i say stable html i know html is boring it's dumb like it's this janky ui description description language we have to use and they haven't done anything interesting with html in almost a decade html5 is almost a decade old now so really just this boring and annoying uh ui infrastructure that we have to use when we're building our javascript applications but it turns out that we can fix it and in particular we can fix it with javascript so let's do a brief history of the web web development started back in really more the late 1990s and it was based on this notion of hyper media this was a new concept uh not a new concept in general but it was a new concept of in broad adoption and so we're all used to html that's the hyper media that we we work in for the most part i mean this was a really a radically new way of building and distributing software um and it should be contrasted with the older earlier thick clients that were being built so if you're old enough uh like me to remember thick clients in the 80s and 90s they were uh they were you know applications that you ran locally and that communicated with some system um over sockets typically and that was not a hyper media interaction rather that was a data interaction with the back end um so roy fielding is a gentleman who was present sort of when the web was being spun up he was a crucial engineer a lot of the fundamental technologies that were built up like around the apache web server and so forth and he gave us a couple of terms um he wrote up his his uh phd thesis included this these terms rest and then hadeas hadeas wasn't actually called out specifically in the paper it was something that kind of got tacked on later but there was this notion of rest and hadeos that came out that described the early weapon it's important to understand because you've probably heard these terms used in terms of json apis but when they were initially coined there were no json apis this was a description of the web there's a description of the way the web worked where there were servers exchanging hypermedia back and forth just a very different model so what was this new model that roy described well it was stateless there weren't persistent connections it was layered that's not that important i mean it had this this interesting feature that really was i think the core distinction between uh between the web uh architecture and earlier thick clients um in that there was a uniform interface and what that means is that um you had a client that is a web browser that would retrieve it a representation of a resource say go to google.com and it gets back some html it represents that resource and the client didn't really know what was going on at that end point it just got back html and so the the the um the network interactions were ag the client was sort of agnostic uh towards what was coming back could be a contact that was coming back it could be a car information around the car the the browser itself didn't know anything about what contacts were or what cars were or what search was all it knew was how to render html and so it gave it this very new and unique network architecture that was very flexible kind of janky in some ways but very flexible in others very resilient so that can all be briefly summed up as web 1.0 and if you've ever heard the term web 1.0 it's easily used as a as a criticism of older style web apps um and uh things were things were great in web 1.0 stuff was you know we were delivering pet food which i guess actually they're trying to do again um and it was really a an amazing time but there was one problem the uis were pretty terrible so this is what amazon looked like back in the day they were pretty terrible and uh so um to address this problem these these sort of terrible uis people started working in this technology that was almost by accident included in early browsers javascript uh created by brennan ike and javascript one combined with a new technology called ajax allows you to start making web requests uh uh to the back end to a back end outside out of band not not in the same way you would normally with links and forms this allowed for much richer web applications to be built um and eventually these applications became so large that um people started building infrastructure to manage these uh these applications and so this is where angular and react and now vue and all these other um libraries have come out of it they've sort of been all piled into this notion of single page application frameworks single page application for single page applications where the focus is no longer on exchanging hyper media with a server and transitioning between pages but rather is focused on sort of micro transactions done over json everyone here is familiar with this this is what probably 99 of you do on a day-to-day basis and i get it now i'm going to tell you why you shouldn't be doing it that way no not yet we'll get there so um the sba movement really did away with this notion of pages and moved to a very javascript-centric view of the world so you've got a javascript model living in memory html is there but it's usually client-side templates some sort of you know janky it's a janky gui description language that we have to use because that's just what's there um and uh you know as again as i said this is what everyone expects people to talk about at conferences like this but i'm not going to do that i'm not going to do that instead of teaching you about new things that can actually land you a job i'd like to go back to that fork in the road where the uis were not good um we had this problem where like this full page refresh problem and we decided to go down the javascript spa path and think what if we hadn't done that what if instead of going down that path what if we had said all right how can we extend hypermedia to give us a better to give us a better user experience let's stay within let's take this other route and let's stay within the world of hyper media but let's figure out how we can make hypermedia more effective for building for building web applications so on this fork what if we had said well okay what if anchor tags and forms weren't the only types of elements that could issue requests and what if we allowed other events to trigger requests not just click or submit and what if finally put patch and delete and all that stuff was available in just vanilla html if i didn't have to use javascript to get access to that stuff and then finally and this is the really important one what if uh we said hey we don't need to replace the whole screen with this hypermedia interaction instead we need to replace just some part of the screen with the hypermedia interaction so what if we drove hyper the html forward so that it could do all this stuff and it turns out that if we had done that if we had done that then we could have we could implement a lot of ui patterns purely in html so things that right now you probably think of as needing javascript such as active search or inline editing lazy loading and infinite scroll these are all examples of features that today people would say to themselves well i need to kick out to javascript to do any of this stuff but unfortunately they didn't advance html very much past html5 um so we're kind of stuck with it or are well it turns out that we have a technology that's built into the browser that lets us go beyond what vanilla html gives us javascript so what if we used javascript to fix html what if we use javascript to avoid using javascript i think we can all agree that would be a wonderful thing can't we um so that brings us to htmlx htmx is my attempt to do exactly that it's a small relatively small javascript library that allows you to implement a lot of modern ux patterns without writing any javascript and staying within this original model of the web within the hypermedia model of the web and so here is some code and we're going to kick over and look at this uh live in a second but here's the code for implementing active search active search being when i type into an input the search results come up uh automatically so there's no javascript it's just declarative it's just declarative html and we can implement a much better ui so what hdmx consists of is a series of attributes which can be put on elements in your dom and they tell htmlx what to do so for example here on this input we're going to issue a post to the search url we're going to trigger that request when a key up occurs that and no key up has occurred in the last 500 milliseconds that debounces the input so we're not hammering the server and when we get the results back we're going to put them into this search results div in our ui by using this hx target attribute then finally we're going to show an indicator so that people know something's going on as we search all right this is a this is all it takes to implement a much better uh user interface for something like active search all right so we're when we do this we're not we're not expecting back json from the server htmlx doesn't expect json back from the server rather it expects hypermedia expects html back from the server and so we're staying very much within the original model of the web we're exchanging hypermedia with a server we're just doing it in a more advanced way than we would have previously would have given just the normal tools that html gave us and so we have a much more expressive hyper medium now and we can implement quite a few uh quite a few features so let me kick over really quick out of my presentation and just show you if you go to htmx.org examples there's an active search example underneath it there's a bunch of other examples as well that you can look at but again we have our code here we have an input we have a hx post saying post this post to this url we have a trigger that says key up changed delay colon 500 milliseconds this is saying on the key up event if the value has changed in the input so don't send a request if someone hits an arrow key and doesn't change the value and if no other key up has occurred in the last 500 milliseconds um then issue a request that debounces the input so we're not hammering our server take that result and jam it down into the thing with this with this id and you can see down here in this table the t-body has that id in it and uh so on all of these example pages i try to i try to put some actual live code in and what you can see here is uh we can type ae and sure enough it searches and we scroll down a little bit and you can see these are the results that have ae um and if we add s it's gonna filter down further so we're filtering down the results here we're getting the results back from the server in html form and we're jamming them into this table great and this is all the code that it took this is all the code quote unquote html is not a programming language i've been reliably informed but that's all it took in order to enable this again once again firmly within the original model of the web so wonderful and there's also you can if you'd like when you're on the htmx page you can uh there's a little sort of indicator or a little section that shows you exactly what requests were made so we can see there was the initial state with all this uh with all this html and then we issued a post to search with ae and then we just got back the table rows that were just the results and then the next post i typed s and so we just got back those two roles result rows that have aes in them all right so again staying firmly within the original model of the web a few attributes allow us to implement a much richer user experience uh in the hypermedia paradigm great everything's wonderful let's go back to the presentation so thank you javascript for making it possible by using you to not use you we will never forget you javascript but we will never use you again you will you all use javascript for the rest of your careers it's fine am i seriously advocating abandoning javascript yes absolutely 100 no i'm not um javascript's a fundamental technology for the web and all web developers should learn it and the vast majority of jobs for the next decade at least are going to involve uh are going to involve javascript um of front-end jobs i should say regardless of that fact and i recognize that i'm sort of an outsider here or contrarian at this conference i do think that it's useful even if you think this is crazy to go back and take a look at hypermedia and when appropriate consider using a hypermedia approach rather than today's javascript-centric approach um it's it's the advantages of this model are simplicity reliability there's an incremental nature to it that's really nice you don't have to bite off a whole framework to get things going you can just throw active search on one spot in your app and everything's good but the hypermedia concept i think has been abandoned largely abandoned today in favor of json apis and there was a lot of good stuff there so i think it's worth even if you're not sold on hdmx thinking a little bit about the hypermedia architecture which has been lost um someone tom mcwright has a blog and at one point he was asking he was looking at the situation with spas and thinking you know what if thing what if we're wrong we've been wrong before and the industry has been wrong before i don't think the industry is wrong here necessarily in adopting uh javascript so much but i do think that we're doing ourselves a disservice by not considering the hypermedia model and tools like htmx that use that model rather than the more rpc oriented javascript model that is so dominant this is at the top of if you go to hdmx underscore org which is the twitter account this is the pinned tweet and uh this is i think if you if you do if you do like the hypermedia approach i recommend printing this out and taping it to your computer somewhere because we're there's not a bunch of us right now but i think it's a small but growing group that's recognizing hey there was something neat to hypermedia and using some of these new more modern tools that are emphasizing the hypermedia approach maybe we can we can build some new and interesting applications all right so i hope i've caused problems on purpose [Music]

Channel: JetBrainsTV

Views: 1,239

Keywords: JetBrains, software development, developer tools, programming, developer

Id: u2rjnLJ1M98

Length: 18min 35sec (1115 seconds)

Published: Thu Oct 21 2021