Select text to annotate, Click play in YouTube to begin
00:00:01
[Music] i'm matt swartley with chariot solutions and i would like to introduce you to carson gross who runs big size big sky software excuse me which has produced
00:00:22
htmx hyperscript intercooler.js and many other open source tools he also teaches computer science at montana state university uh carson is going to speak with us today about hypermedia and specifically
00:00:35
about how hypermedia driven applications can help cure javascript fatigue so please welcome carson gross thanks a bunch matt um i'm gonna go ahead and share my screen here
00:00:48
make sure i get the right one sure and i gotta make sure my audio is sharing all right i think we're good to go all right well uh thank you again for that
00:01:00
introduction matt um i am uh today gonna talk to everyone about uh hyper media and uh hypermedia is one of those concepts that is so familiar to us that uh we probably
00:01:13
haven't thought very deeply about it in a long time and so i'm hoping in this talk i can uh show people who uh haven't thought about hyper media maybe for a long time uh that there's
00:01:25
new and interesting stuff happening in it and uh sort of not in the html in the proper html spec but outside of that space and the the subtitle is curing
00:01:37
javascript fatigue using the original architecture of the web and the idea is um that you maybe or someone you love may be experiencing java fatigue javascript fatigue
00:01:49
and um they're they may be looking around for a solution to it and i think that by going back and re-examining exactly the way the original web worked looking
00:02:00
at that as an architectural decision and maybe thinking about how we could adopt that architectural decision for modern applications maybe we can have a have a chance at carrying javascript fatigue um and i have to admit i'm a little bit
00:02:13
of a little bit of a goose uh in untitled goose game here i like uh just sort of poking the bear and i have a very contrarian nature so
00:02:26
a fair warning in advance so um javascript fatigue um you may have heard this term before but what is it exactly well if you've gone to javascript and front-end conferences for the past
00:02:39
decade and a half what you've probably noticed is that there's been an explosion of technologies in the javascript world and it can be very difficult to keep up with not only
00:02:52
the latest library that's out there but even the latest versions of existing libraries there's a huge amount of churn that has just become sort of endemic to the javascript world
00:03:05
and part of that is you know we're exploring a new medium we're exploring a new infrastructure there's a lot of ideas that are being tried out but i think there's also some cultural
00:03:16
aspects that have it's taken root where people are looking for the new new thing um in javascript and i don't blame them for that that's the culture but i think we're also getting to a
00:03:28
point where we have to maybe take a step back and ask ourselves we've got some pretty complicated tools at this point and is the cost of that complexity worth it is are the benefits that we are
00:03:42
accruing from that complexity worth the the cost of this complexity and javascript fatigue is i think a general expression of this sense of being overwhelmed by
00:03:54
the amount of uh by the amount of uh of technology of javascript technology that you have to deal with on a day-to-day basis so um this video does a much better job of capturing the humor of the situation
00:04:07
than i ever do i recommend highly going and looking it up it's interview with a senior js developer in 2022 i'm just going to play a small clip really yeah we used react we actually use preact we actually use svelter we
00:04:19
actually went back to vanilla javascript yeah we're using a library for this well that we rewrote to vanilla javascript because it wasn't efficient we're stuck with this messy language now i love it javascript yeah
00:04:32
so that's javascript um and uh i think you're probably really yeah we use react with that you're probably familiar with that general sense that whole video is definitely worthwhile it's very well done uh a pretty hysterical
00:04:45
um video to watch uh maybe in a sad haha sort of way um if you're a front-end developer um but uh it captures uh this the sense of being overwhelmed by the amount of change and churn and that we have to
00:05:00
deal with so um i'm going to suggest because i'm a contrarian by nature again um that maybe it's time to pause and reflect and to think about okay how did we get here
00:05:11
were there any other options how did we end up in this spot and were there any other options that we could have taken what would the web look like if we had taken one of these other options and uh i think to answer these questions
00:05:24
we need to revisit we need to sort of go through how the web developed because to understand how we got here you have to understand where we started and the problems with that original model or where we started with the web so
00:05:37
um the web started back in in the mid to early 1990s and it was based on this notion of hyper media hypermedia was the big cool idea with it and the hyper media that you're probably most everyone's familiar with at this
00:05:50
point is a hypertext called html that's what we use on a day-to-day basis for doing web development um and what's i think certainly i didn't appreciate it at the time but um
00:06:04
hypermedia and html in gen in particular is it's a radically new way of distributing software um so uh you you should be compared with older thick client models so the way it worked you
00:06:17
know in the 1980s you downloaded a thick client application and downloaded an application and then it spoke some often proprietary language to a back end and retrieved data and then displayed it
00:06:30
to you and you click buttons or whatever and updated stuff and it was this big thick piece of technology well hypermedia did away with all that and instead introduced this notion of a browser and the browser was a pretty
00:06:42
magical piece of software and let's talk about why the reason why browser is such an interesting piece of technology was actually recognized i mean the people who are building this knew hey this is very different very
00:06:54
interesting and roy fielding who was one of the original engineers on the apache project this and he wrote a uh a famous paper his dissertation on this
00:07:07
topic um so and what he recognized was that the web wasn't just like kind of a neat new thing you know for district for showing images or like small bits of information
00:07:18
but it was a new uh network architecture he recognized this was a this is a new network architecture and he wrote again his thesis on this and that's uh where we get the terms rest and haiti us from
00:07:31
so rest in haiti us come from this uh paper that he wrote and uh this new network architecture can be described as follows it was stateless and it was layered and then it consisted of something called a uniform interface
00:07:45
and the uniform interface was particularly revolutionary i don't feel like this has been very well explained and i don't have a ton of time to spend on it in this talk but it really was the uniform interface that i think
00:07:57
made the web so unique and what the uniform interface means is that a general purpose web browser could interact with any any sort of backend so a contact application
00:08:11
clothing store email pet food like anything and that was pretty revolutionary to have this single client that could interact with pretty much any sort of application and the the
00:08:23
reason it was uniform is the uniform interface was hypermedia so the browser didn't need to understand what a contact was instead it could just know what html was and display it and then sure a contact
00:08:36
application could be created in this so it just had to know how to render hypermedia and so the client became decoupled from the backing the back the backing model the
00:08:48
server-side model in a very interesting and new and unique way so this ended up being super flexible and you can tell it's super flexible because of all the different web applications that have been built against a single
00:09:03
client basically the web browser um and what i want to do is i want to take a quick walk through a specific example just to show you the difference between the hypermedia approach and then
00:09:16
the data oriented approach so which today you would probably use a json api so let's look at two we have two requests over here that i want to examine these are both http requests they're responses excuse
00:09:30
me one in html and one in json so this is a hypermedia and this is json which i would call a data or an rpc style api um so they're both representations
00:09:43
as you can see if you take a second to look at them they're both representations of a bank account that's in good standing the thing to notice or where you start to see the power of hypermedia is that
00:09:55
the hypermedia representation of this resource encodes not only the data about it but also all of the actions that are available on this piece of data
00:10:08
the json version on the other hand is a little more efficient it's a little bit tighter but it really doesn't have this additional information in it it doesn't have what i what we would
00:10:19
call a uniform interface in that this here this status needs to be interpreted by the client and turned into these actions so the actions aren't encoded in the response that are
00:10:31
available on this account rather there's a status and then you have to know as a client what a status means and you write that code say okay if it's active then they can click on these buttons or whatever
00:10:43
now again that's in contrast with this hypermedia which is able to just say here's the things that are available in a drop-down or this is obviously very simple html so and what this means is that a client
00:10:57
that is interpreting this data api is required to understand the concept of a bank account and is required to understand what a status means hypermedia representation doesn't require that of a client all the
00:11:11
hypermedia representation requires of the client is that it understands how to render hypermedia to a human so let's consider a situation where this account goes into an overdrawn status what is the what do the responses look
00:11:24
like well the html response you can see is much smaller there's only the ability to make a deposit the json response looks pretty similar to the preceding to its preceding
00:11:37
version it's just changed the status to an overdrawn to the value overdrawn and so the client needs to understand what that means and only render the appropriate
00:11:49
actions based on that well a browser doesn't need to know that at all browser doesn't need to know that it doesn't know what overdrawn is doesn't even know what a bank account is doesn't know anything about that instead it just knows i have to render this and
00:12:02
everything is defined in terms of hypermedia and that's it i can do that for a bank i can do that for a contact application i can do that for an email client whatever
00:12:14
and uh the the the browser will continue to just render html and so this gives you a huge amount of flexibility so if you change this api if you change this api then all of your
00:12:27
clients need to be updated to understand okay i've added a new status not so with the hypermedia model in the hypermedia model the browser just sees the new what you know if you add an action if you
00:12:40
remove an action if you add a new status whatever it is just sees the new html and renders it to the end user and that's it that makes it very very flexible so that is i think a good
00:12:51
contrast between a hypermedia api and a data api that's why hypermedia is so flexible and that's why so many applications were built so quickly in hypermedia it also is why hypermedia
00:13:05
applications tend not to be as concerned with api churn as data apis are data apis are more concerned with churn because there's sort of side channel knowledge that's necessary in
00:13:18
order to interpret this properly here everything is encapsulated within the hypermedia response all right so that's great that was web 1.0 and things were amazing the flexibility of
00:13:32
this new medium allowed people to build a huge number of services and reach millions and then billions of people there was one problem though and that problem was that the uis were pretty terrible so this was amazon
00:13:45
1.0 amazon doesn't have the best api or best ui in the world in general but still this was pretty bad um and uh people and not only just the look of it but also the feel of these
00:13:58
applications they felt clunky so you click on a link and you'd wait and this little dinosaur would like run around a star or something like that there was all sorts of crazy stuff going on early on but it just didn't feel
00:14:09
great and so uh a technology was added to the browser almost accidentally called javascript and brendan ike was the person who created this and kind of famously jammed it in very quickly
00:14:24
and javascript was then combined with a new technology called ajax which was at ajax which was brought to us by microsoft people tend to forget that which allowed you to make these web requests sort of behind the scenes so
00:14:38
out of band not in the normal click a link or submit a form mechanism that the web was originally built on so it's outside the normal hypermedia flow and people loved it people loved it
00:14:51
because now you could build much richer user interfaces on the web you so you have better ux you had a cool new programming language you could mess around with and eventually these these
00:15:02
applications became so large and you know just with so much code that frameworks emerge in order to man uh to manage them so uh and these eventually became known as single page frameworks and that's
00:15:15
because of the fact that since these requests were handling uh were being issued in the background they tended uh to not change the the nav bar and so it felt like there was a single page that was able to do everything for you in
00:15:28
contrast with a multi-page application which is the more traditional model where you click on link and go to a new page so the spa movement did away almost entirely with this notion of of pages
00:15:41
and frankly did away with the notion of hypermedia and moved to this very javascript centric json interaction driven mechanism so you typically had a javascript model and you
00:15:53
do today this is sort of the standard model for many people you have a javascript model living in memory and then html just becomes something that you produce from that often in a reactive manner you produce
00:16:05
from that backing model so this is the now the dominant paradigm in web development and i i'd like to point out in uh you know in talks like this that this is
00:16:17
in some ways a return to an older model of software development this is an older client server model so you don't have hypermedia typically being exchanged with a server anymore we've abandoned
00:16:28
that in many cases and instead we're exchanging json and that's a fixed format data api and the the technologies around json are increasingly moving
00:16:41
towards a more rpc uh remote procedure call like uh shape and feel that's that's the direction they're heading and i understand why that is i understand why that is
00:16:54
but i want to consider a different a potential different direction we could have gone with the web so what if rather than addressing the web
00:17:04
1.0 clunkiness with javascript what if we had instead improved html what if html had become more expressive would that have helped what if we had
00:17:17
made it such that in html any element could issue a request rather than just links and forms right right now we have links that can issue a get and we have forms that can issue a get or a post
00:17:31
why should only clicks and submits be the events that actually trigger a server interaction it seems limiting and unnecessary um so what if we did away with that what if we generalized that
00:17:44
that idea of allowing any event to trigger uh a a a server interaction what if we surfaced all there's all these other actions these other http actions that are currently only available in
00:17:56
javascript right like put patch delete you know these very useful for implementing restful systems actions in http that just aren't ex they're just unfortunately not available
00:18:09
in uh in a standard html and then i think the most important one to think about is what if um what if these hypermedia interactions didn't have to replace the
00:18:21
whole page what if they didn't have to just have this big giant chunk every time where they pull down a full new web page and then replace the whole screen get that flash fun style content
00:18:33
all the bad stuff that's so now browsers have gotten better at it admittedly um but still it just doesn't feel right to me that that's a constraint imposed on the
00:18:45
hypermedia model and at some level i like to say what if html had kept going what if instead of going off and you know doing webgl and all this stuff what if they had said hey let's keep pushing html
00:18:59
forward as a hypermedia and if they'd done that could we implement modern ux patterns in pure html without needing javascript so things like active search inline editing
00:19:13
infinite scroll and lazy loading well maybe we could have maybe we could have but we didn't unfortunately or they didn't i should say so we're stuck with html5 and uh and
00:19:25
what it gives us or are we well it turns out we do have a technology that allows us to extend the functionality of browsers and that technology is javascript
00:19:36
so what if we use javascript to fix html um i think that would be pretty funny i think that would be pretty funny and it turns out it is actually pretty funny um so i've done that in a library with the
00:19:50
help of some friends some internet friends anyways i've done that in a library called htmx and htmx is a small it's about 12k i think library that allows you to implement many of these modern ux
00:20:03
patterns that we're used to reaching for javascript immediately for using hypermedia just using plain old html and uh htmx hdmx itself is written in javascript but
00:20:16
an htmx user someone who's actually using hdmx to achieve something typically doesn't write very much javascript or often they don't write any javascript at all so we're actually using javascript to avoid using
00:20:29
javascript which is pretty funny so to give you a concrete example of what hdmx looks like here's some hdmx code and i put code in quotation marks because
00:20:41
i've been told that html is not a real programming language that may be true but nonetheless i think when we get done with this example you'll see that it can be quite expressive even if it's not a full programming
00:20:55
language so the way htmx works is you add attributes sort of declarative attributes in line in your html and those attributes are interpreted by the hdmx library and
00:21:09
functionality is added to the the page based on them and um so here we've got i think a total of four attributes so let's just go through them really quickly um so this says hx post so what that
00:21:22
means is this input is going to issue a post to the search url um fine that's fine what why would it do that one well it's gonna do that when
00:21:34
it's triggered and it's triggered uh the trigger specification is here under hx trigger you can see key up changed delay 500 milliseconds and what that is saying is on key up so when the key when a key
00:21:48
is released and when the value of this input is changed wait 500 milliseconds and if no more key ups occur then issue that request so this is called debouncing this debounces
00:22:00
that so that we don't issue a request on every key up that would obviously hammer our server so this is what the trigger is saying on key up when the value is changed if a key up hasn't occurred in 500 milliseconds issue a post
00:22:14
and then finally it's or not finally but almost penultimately i guess i should say we're going to issue a request and we're going to get back hypermedia so we're expecting back hypermedia what are we
00:22:28
going to do with that hypermedia well we're going to stick it somewhere in the dom where do we want to stick it well there's another attribute called hx target that lets you specify using a css selector i want you to take that result
00:22:40
that comes back from that url i want you to put it into this element in the dom and so that element is the search thing with the id search results and then finally because when ajax
00:22:52
requests are occurring it's good to often it's often good to show the user hey something's going on we call out an indicator a spinner effectively to show the user hey something's going on you
00:23:04
don't need to keep typing or whatever it's just good ui practice to let them know what's going on so um there's no javascript here there's no javascript at least not any javascript that's been written by the by the htmx user
00:23:17
but nonetheless we're going to get some pretty darn dynamic behavior out of it and we can implement a pretty cool user interface and again i want to point out that the response that comes back from the server
00:23:29
is just more html and that html is going to be placed in this element so we're firmly within the original model of the web we're exchanging hypermedia in a coarse grained manner that's the way roy
00:23:41
fielding would say it with the server we just now have a much more expressive hyper medium html is just much more expressive so we can do more cool stuff with it so i want to kick over and show a live demo
00:23:54
of this you can go to htmx.org to check out htmx in general and there's an example section and under the example section there's an active search and there's all the code for it
00:24:06
and all of my examples i try to have a live example let me kill this actually i'm going to reload this page just so it starts empty so there's an example down here that's
00:24:18
just this code and that's exactly the code that we just went through and uh so what you can see is we've got an input here and you can open up this little thing underneath and it'll show you the mocked requests that
00:24:30
are happening but if i type a and i wait a second and sure enough it's going to issue a post and it's going to get back some raw html now this is doesn't have it's not it's an html partial it's only bits of
00:24:42
hypermedia that are flying back and forth but you can see we got back a bunch of table rows and sure enough those got placed into this table and if i continue to filter it's going to keep
00:24:54
filtering down you can see the search that was put up and some stuff some uh content that was returned from the server some html some hyper media that was returned from the server so if i type aes
00:25:06
kind of filters down to the last two people that have aes and their whatever in their emails or something like that all right but you can see again we've got this situation where we have a pretty dynamic we have a pretty dynamic user interface
00:25:20
that is built entirely using hypermedia concepts so active search is something that i use many sites they could they could use uh something like an active search whenever i run into a table i'm like man i
00:25:33
if it doesn't have active search i sure wish it did and uh this is a very interactive feeling uh user experience but it's done entirely in terms of hyper media
00:25:46
so so that's a good example and i again i encourage you something a lot of people don't believe what you can accomplish with htmx but there's a huge number of examples things like for example click to edit which
00:25:59
allows you to do inline editing and all that is done in line and that's achieved purely with hypermedia there's no there's no user land there's no user javascript that's been
00:26:11
used for that it's all driven using html going back and forth all right so by using javascript to improve html hypermedia we're actually able to avoid
00:26:23
using javascript javascript it turns out can be part of the cure for javascript fatigue this is dramatically simpler code than writing a huge you know react a huge bit of react infrastructure for
00:26:37
example to deal with uh to deal with active search all right so that's pretty cool and again there's a bunch of examples i encourage you to go through on the examples page on
00:26:51
htmlx.org does this mean does this mean that we should just go ahead and delete the quarter million npm packages that are on all of our systems should we toss the javascript the good
00:27:05
parts book that we bought from o'reilly into the trash uh the answer is no the answer is no we should not do so because javascript is a fundamental
00:27:17
core technology for the web it's a it's going to be part of web development for the rest of all of our lives and uh furthermore even in a pure hyper media
00:27:30
application like we're looking at here scripting is still an important part of the web scripting is still an important part of the web so rest the restful uh architecture is a network architecture
00:27:44
it says nothing in particular it's the only thing the only constraint that it really imposes on the client is that the client interact with the server via hypermedia but scripting was included as an
00:27:56
optional constraint in roy fielding's phd on the architecture of the web and so i think it's important to understand that context when you think about things like javascript and how the
00:28:09
javascript might fit into a hypermedia oriented application so in a hyper media oriented application or excuse me a hypermedia driven application that's the term i'm trying
00:28:22
to use scripting becomes a way to enhance the hypermedia so it doesn't become a way to interact with it doesn't become a replacement for the hyper media becomes a way to
00:28:33
to augment the existing infrastructure it doesn't replace it and in particular it doesn't replace that network interaction that coarse grain hyper hypermedia application large chunks of hypermedia flying back and
00:28:47
forth and i want to show you an example that i think captures this concept really really nicely and that is an example use of sortable.js and sortable.js is a library
00:28:59
that you can use to make it possible to do drag and drop with uh with html elements on a page and it's a great little library and so i have some javascript code that i've written up here and it's using the
00:29:13
htmx onload function so that it's going to get run every time new content is loaded by html and what it does is it just looks for everything with a class called sortable on it and then initiate and then uh initializes
00:29:26
the sortable library on that thing and so that sets it up so that drag and drop works on it you can read up on how exactly you use sortable.js but pretty simple little javascript library and very nice
00:29:39
um and uh below we have some hypermedia and that hypermedia you will note has the sortable class on it so this form inside of it has some uh well
00:29:52
the divs that are inside of this form uh will be made drag drag and droppable effectively um by this little bit of javascript up here but what you'll note is that this code
00:30:04
doesn't interact with the server it doesn't interact with the server instead this form listens for an end event so recall hx trigger is a an attribute in htmlx that lets you listen
00:30:17
for a particular event that's fired well it turns out that sortable very nicely triggers a lot of events and one of the events that it triggers is the end of it i might pick a slightly
00:30:30
more specific name to sortable for that but it's fine that's the name of the event and so what we do is we say okay when a drag and drop occurs on the end event we want to post
00:30:43
this form to the slash items url we're going to post it to the slash item url and we're going to exchange that as hypermedia so this is going to be a hypermedia exchange but nonetheless we
00:30:56
are able to use sortable.js in our app we're able to improve the hypermedia that we're able to improve the hypermedia we're able to improve html's usability but when it
00:31:08
comes time to communicate with the server we're going to stay within this original model of the web so we're still firmly in the hypermedia model and you can go to htmx.org
00:31:21
example sortable and see an example of this in practice so here's that code that we were just looking at and sure enough you can drag and drop things and you can see there's a little updating deal that happens up there as uh as we
00:31:35
reorder and it's posted to the server now you didn't you don't have to do it this way you could have for example a click to reorder and then reorder everything and then click to save all of that could be done but the important part here from a
00:31:48
hypermedia perspective is that the interactions with the server are done via coarsegrained hypermedia interactions it's hypermedia that's going back and forth so when we post we
00:32:00
get back a new set of html which is swapped into the dom and it's updated you can see there's a little indicator that shows us it's updating as well all right
00:32:13
so scripting is still fine scripting is good i've written a whole language for scripting actually called hyperscript so if you're crazy and if this stuff really grabs you and you want to see some other crazy stuff that i work on
00:32:27
you can go to hyperscript.org and this is a front-end scripting language and design i really sometimes feel like my job was to destroy javascript i don't know i like this you can check it out
00:32:38
but uh so scripting is part of the web infrastructure and i don't want to discourage people from using it when appropriate but in a hyper media driven application in any event
00:32:51
scripting should be used in a particular manner it should be used in a way that augments the hypermedia rather than replaces it so um the final thing i want to say is what
00:33:04
if we took a wrong turn as an industry here you know it's happened before i've seen i've been around a while as the grain my beard suggests and i've seen some pretty wrong turns i've seen some some bad ideas come out of some very
00:33:16
large and very popular tech companies um and uh so what if we re-examine this what if we go back and look at the original architecture of the web and what if adopting that original architecture could lead to simpler more
00:33:30
flexible and more coherent web applications in many cases people have a sense that something has gone amiss in web development right now there's a general sense that hey you know this just seems really really crazy
00:33:44
um and i think that's right and i think that for many applications not for all because nothing is right for all you know there's no there's nothing that's right for everything but for many web applications uh they
00:33:56
could actually be built much in a much more simple and straightforward manner using a technology like htmlx or hypermedia in general than using the more popular modern javascript frameworks
00:34:08
so here's a famous quote but or not famous here's a quote by tomic wright who's a online sort of thought leader in the web development world what if everyone's wrong we've been wrong before and i agree with that we have been wrong before
00:34:21
um you know again i've been around long enough to see the industry be wrong about stuff for for a long time and i think that abandoning hyper media entirely was definitely wrong doesn't mean again that hdmx is right for
00:34:34
everything and hypermedia is right for everything um but it's right for a lot of stuff and it's right for a lot more stuff than you probably think you know right now without having taken a hard look at tools like htmx
00:34:47
and there are other tools that are out there that are in this same space like you got hotwire onpoly is a great library that does that and there's actually a really great mobile hypermedia believe it or not
00:34:59
called hyperview like hyperview.org this is a this is a hyper media that is designed for mobile so it actually speaks
00:35:12
a more mobile-centric uh language hyper media language and you're able to do a lot more with it than you can with just sort of html um so there's a there's some interesting innovation happening in
00:35:24
the hyper media space most of it not in the big not at the big companies and not not in the big uh not in the big tech groups or anything like that but there are people working around the edges
00:35:37
they're working on making hypermedia a more viable modern web application piece of infrastructure so i hope that i have called caused some problems on purpose um and i'm happy to
00:35:48
happy to chat about this um if you're interested in this stuff again htmx.org is the place to go and if you want to jump on the discord you can go to hdmxorg
00:35:59
htmx.org discord and that'll bounce you out to the discord chat that we use to talk about all this stuff so all right and i think
00:36:12
i think that's it for me i think that's my talk all right thank you very much carson i'll put some of those links into the uh room b uh slack channel okay
00:36:24
i appreciate the uh appreciate the presentation let me take a look and see what kind of questions that we have um sure uh from slack if you don't mind yeah absolutely um just someone early on something
00:36:39
someone said uh thinking aloud why not just encode the actions in the json yeah that's a good question like so people have tried that and you'll see there's a
00:36:51
martin fowler did a whole thing on the something hierarchy what is it called the richardson maturity hierarchy for restful apis and
00:37:04
there's been this conflation of rest and json in my opinion so json isn't a natural hypermedia and so people have tried to impose
00:37:15
hypermedia concepts on top of it but i i would note that it hasn't been super popular um it just it just has not been adopted broadly by uh by industry um people for whatever
00:37:30
reason and i think it's because json isn't a native hypermedia um have just not made uh a lot of headway with that approach to building json apis there's a deeper reason for uh for i think
00:37:43
problems for that there's a deeper reason for that and actually to um just give you a link let me go to intercooler.org intercool it now integral js sorry one second there's actually a talk on this
00:37:57
intercooler js.org um the deeper sorry about my dogs uh the deeper reason for the uh for this problem uh there's a hedonist for humans
00:38:13
essay on intercooler jazz and i think what you what it boils down to is that when code when you have a json api that aci is being consumed by code and what makes hypermedia so powerful is that the
00:38:26
browser is rendering that ui for a human and so a human can interact with dynamic data that's returned from the browser from the server in a way that a
00:38:40
code that's interacting with json cannot and so it just ends up that hypermedia is powerful for humans and we can see that by the success of the web whereas it appears not to be as powerful when
00:38:54
paired with a client consumer like a json api would have so um rest does not equal json plus http i agree all right so our earlier question was i
00:39:07
feel like the conventional way to request that data is is a get in sending it via the url any any reason why that active search request wouldn't be a get request i think that was in reference to
00:39:19
your search yeah yeah let me go and look at that that's a good point um i thought about doing it as a get i don't know i just did it as a post but i agree um the right thing to do and i let me hold on examples
00:39:31
the right thing to do here in active search is to make this a get and then also probably to push the search term up into the browser so it's copy and paste but there's a way to do that
00:39:43
what is it htmlx push url so if you turned it into a get you could actually have it so that it and used hx put push url it would actually push up into
00:39:56
the the nav bar and you'd get that nice copy and pastable search and i've done that example before i just for whatever i did this example super early and so i just haven't updated it but that's a good point i agree with that criticism
00:40:09
all right someone uh wrote cool stuff great poc how many people companies are using this is their traction is there attraction well i'd like to refer you to the front page i'm very
00:40:20
happy to announce a couple months ago i was happy to announce that jetbrains have sponsored the project um so craft cms big sky software you've never heard of because that's my company and then comspace but um yeah i think
00:40:34
we've got a big vote of confidence from jet brains so i you know there are lots of companies that are using it it's relatively new it's only been out for about a year
00:40:46
almost two years now there was intercooler js which was the previous version but that was in the jquery ecosystem and so that this is a clean room dependency free library for building hyper media driven
00:41:01
applications and i think there's a lot of momentum building around it the django community just has really latched onto hdmx so i think you'll see that's where you'll see stuff coming out
00:41:12
of all right next question here is there a point in sufficiently complex applications where htm x hits its intrinsic limitations yeah and a spa is a better choice if so
00:41:25
what questions would you ask to determine whether hdmx might not be a fit yeah i think that's a good that's a great question i get it a lot um htmx makes a lot of sense the the more your web application can be
00:41:38
built with coarse grain uh um hypermedia interactions um and so you know if you're google maps for example like that's probably not a good fit for htmlx because there's lots of
00:41:51
needly stuff lots of little things that need to happen another example i think that it wouldn't be good for hdmx would be google sheets because you have highly dependent lots of crazy stuff happening in the ui
00:42:03
that's just not amenable to exchanging hypermedia with a server on the other hand the the settings pages for both of those applications might be something that is very amenable to hdmx
00:42:16
and so hdmx itself is very lightweight it's dependency free very straightforward to use and so i would recommend in those situations maybe considering hdmx for the simpler stuff and then when
00:42:29
necessary for the parts of the app that really demand it that don't that you're not able to represent with coarse grained uh hypermedia interactions um maybe you kick out the view or alpine or
00:42:42
uh reactor or whatever you're comfortable with for that stuff um i do want to say however that i would go through the examples page on htmlx.org and see just what's achievable using a pure
00:42:53
hdmx or excuse me a pure hypermedia approach to building things because i think you might be surprised how much you can build just in this model and it's much simpler model so save that complexity budget you know on your
00:43:06
settings page and use it for the part of the part of the app that uh that makes sense all right so uh let's see next question here isn't it isn't it a violation of
00:43:18
separation and concerns that the data for the table example comes back with table row table tags in it mixing data and presentation yeah um yeah i guess at some level it
00:43:30
does i i view it as a hyper media exchange though and so um there i'm not a big separation of concerns guy and actually thank you for bringing that up because on the talk page if you scroll down on
00:43:44
htmlx.org there's a locality of behavior essay and locality of behavior is a design principle that i prefer intention with separation of concerns um but
00:43:57
uh in the the example cited we're just exchanging hyper media you know it's it's the the what we're getting back is hyper mean it's not a json api and there's no intrinsic
00:44:10
uh there's no intrinsic reason from a separation concern standpoint why that should matter that what we're getting back is hypermedia we're putting it we're letting the browser interpret that hypermedia and that's it um and so i
00:44:23
don't think it's so much of a separation of concerns uh uh issue where you might you know another point that comes up is what if i have a mobile client a mobile client can't use my hypermedia api and i
00:44:34
agree with that and so i think you should have a hypermedia application for example for your web app and then offer a separate json data api because there are just different needs for those and there's
00:44:48
another essay on the site uh where is it hypermedia apis versus data api so you can read that if you want my my thoughts on that topic all right great um
00:45:02
okay so here's a i believe it's a question yes conceptually this doesn't seem that much removed from something like angular directive where you attach an attribute to the dom element and expose new
00:45:14
behavior and it's all written in typescript but this assumes you don't use angular routing and other spanish i wonder if part of the issue is the opinionated nature of most front-end frameworks yeah
00:45:27
it does have a flavor of uh of angular directives but i really want to stress again think about the hypermedia exchange aspect really the crux here is that we are exchanging hypermedia with
00:45:41
the server so when i go to when i go to examples and for example like let's do let's do infinite scroll just because that's kind of a neat one so we scroll down to the bottom here and
00:45:54
some new stuff shows up and some new stuff shows up and we look at the requests what you can see is that we're exchanging hyper media we're not exchanging json and that's
00:46:06
again in stark contrast with most modern spa frameworks where javascript is given primarily primacy of place there's a client-side model and then however that syncs with the back
00:46:17
end is like its own problem it's its own thing when you're not exchanging hyper media so the the core distinction between hdmx and most spa libraries i think lies in
00:46:28
this idea of embracing hypermedia as the medium of exchange with the server and then this notion of taking the existing infrastructure the existing concepts in
00:46:41
uh the in html and just uh expanding on them so we try and take html and build incrementally on top of it instead of saying htm html is this thing we have to
00:46:54
produce to get a ui out of the browser but all of that management and all that the state and everything is going to live in javascript so i'd say that's the big that's the big distinction between
00:47:06
what htmlx is is doing and what sba libraries are doing so the big conceptual distinction and i do agree rails is restful any anyone who's built anyone who's used
00:47:22
html has built a better restful api than probably some of the most seasoned json api builders because html is a hypermedia and so you almost
00:47:33
have to do it that way all right i think that's the uh that's the end of the questions so far okay um we've got about 10 minutes or so uh
00:47:50
left is there anything that you would like to uh definitely give us a lot of food for thought here and is there anything you want to uh leave us with yeah that was a little packed you guys want to you want to check out the let's
00:48:03
take a look at hyperscript um really quick so uh whoops not hyperview hyperscript um so as i said you know i think scripting is an important part of
00:48:19
the web and uh but i um i wanted i wanted a scripting language that paired well with uh htm x and so uh
00:48:31
just i'm a programming language as a person that's what i studied in grad school and you know i teach the compiler's class here and stuff like that and so um i just decided you know what let's do
00:48:42
it let's let's build another scripting language for the web and i based it on an old uh language called hypertalk which is again i'm showing the gray in
00:48:54
my beard here but there was a a a system for building user interfaces on the mac that was available you know back in the 90s like late 80s
00:49:06
early 90s called hyper card and hyper card was this sort of it was the web before the web but everything was local you didn't have network stuff unless you put in additional plugins in um
00:49:18
and uh there was this scripting language there was a part of that development infrastructure that was called hyper talk and it had this funny lang like natural language look to it
00:49:29
and uh so i decided when uh when i kind of finished up htm x and i wanted this scripting language that i would uh take a crack at porting that concept of hyper talk uh
00:49:43
to or of hypertalk to the web and i decided to call it hyperscript because that was available um and uh so this is what it looks like so let's go take a look at the docs that's kind of a crazy example but
00:49:56
um so uh basically what you do and again the person who is concerned about the violation of separation of concerns is going to be similarly concerned here you put your scripting language directly
00:50:09
on elements so here we have a button that toggles the red class on the button when you click it and so you can see here when we click goes back and forth between red and blue
00:50:21
and uh it's using hyperscript to do that so on click toggle the red class on and you can see this is probably pretty jarring for most of the people watching this but you can see a few things first of
00:50:34
all we embed the script directly in the html which i wanted because i like it because again i like here's an example of some hyperscript
00:50:45
and what you'll note about it is that is number one embedded directly in the html which is a little unique although alpine js is making this more popular in the javascript community and number two it's got this funny
00:50:58
natural language flavor to it so on click toggle the red class on me if i click this sure enough it toggles back and forth between red and blue and it's toggling this red
00:51:10
class on the button and so this scripting language quite elaborate there's a lot going on here there's some pretty crazy features in it but this was a scripting language i
00:51:22
created to in in you know this is sort of my take on a scripting language that augments the web or augments the hypermedia model rather than replacing it and uh i wanted it to
00:51:35
be event oriented which is this is taken straight from uh hyper talk the scripting language again for hyper card this on whatever do something um and so i feel like it fits
00:51:47
really well with a particular style of scripting that i want to encourage in hyper media applications so um this is very speculative compared to htmax so um i think you know if this is
00:52:00
something you're interested in uh jump on the discord there's some people that are very interested in it as well and we're happy to talk about it there's a lot of interesting stuff that you can do with it um
00:52:13
you know there's this notion of transparent excuse me it's async transparent so you don't have to worry about resolving promises or anything like that the runtime takes care of all that for you it's just a very light
00:52:25
touch scripting language that lets you do some some white user interface scripting that can really augment the existing hypermedia infrastructure of the web quite easily so
00:52:37
um so that's i think an interesting another interesting project that's associated with hdmx if people are interested and i'm happy to talk about this if anyone wants to this is br this is my passion project um i like hdmx
00:52:50
quite a bit um and i you know i'm very passionate about hypermedia but hyperscript is definitely like my this is my baby so cool
00:53:04
very very good all right i think um i think that's all the questions yeah i see a couple people see a couple people typing so i wanna if anyone's gonna if anyone's got any hype for me like you're insane yes i am
00:53:19
insane correct you're correct we can we can certainly continue the discussion on uh in this in the slack channel too yeah i'll hang out in the slack channel
00:53:30
if you want to you want to cut it over and you're following along just as well as i am on this carson yeah thank you fred thank you eric thank you sue the coder i appreciate that
00:53:49
all right well i think um i think uh we'll uh call it complete sounds good and thank you very much carson i really appreciate your time and uh the presentation uh for
00:54:01
everybody that in attendance thank you for attending and also for all of the questions i think that was a nice uh nice discussion to uh to end the session great
End of transcript