Why Learn HTMX?? | Prime Reacts

why should you use hyper medium the trade-off though is that a uniform interface degrades efficiency since information is transferred in a standardization a standardized form rather than one in which is specific to the application needs absolutely this is true the rest interface is designed to be efficient for large grain hypermedia data transfer optimized for the common case of the web but resulting in an interface that is not optimal for other forms of architectural interaction Roy Fielding okay okay I can buy this I can I mean in the sense that if you build output specifically for your needs right so if you went and you used a full binary format you did zero allocation architecture and you went all in on it you could make something that's extremely Performance Based like just based all around but it's only for your you know application that's like you know like you can imagine all game all games they don't just use Json and transfer that over UDP to trans you know to go through Players position updates right that'd be crazy they you wouldn't be able to have a game if you're trying to do Json encoding and decoding they're going to use something significantly more efficient but you'd make a trade-off when you do that right no matter what you use you always make a trade-off uh let's see hyper media is often significantly less complex than a spa approach would be for many problems okay reasonable I forgot to put this we are obviously fans of hyper media and think that it can address at least in part many of the problems that the web development world is facing today okay I agree uh hypermedia allows your application API to be much more aggressively refactored and optimized okay uh hypermedia takes the pressure off of adopting a particular server technology since you do not have extensive JavaScript front-end code base okay yes with HDMX and the additional ux possibilities that it gives you we believe that many modern web applications can be built using HTML and the hyper media Paradigm so this is htmx in a nutshell that's what that's what it's doing so with that being said as with all technical choices there are trade-offs associated with Hyper media in this article I'll give you some ways to think about it if hypermedia will be a good fit for your application or feature you are building this is Beautiful by the way notice right here that there's no this is the way to build this the best it's just this is good I like it here are reasons you could like it but it may not be for you this is probably a much better way to sell any sort of framework ever right because that's not typically how you're sold on Twitter typically how you're sold on Twitter is if you're not using this you're falling behind if you're not doing this you're doing the wrong thing let's find out a transitional applications in hypermedia before we get into details of when hypermedia is a good choice We would like to clarify that adopting hypermedia is not an either or decision when building a web application for most singly of single page applications utilize hypermedia after all as a bootstrap mechanism to start the application absolutely it is talk have Spas ruin the web Rich Harris gives us the term transitional applications that is the application that makes both hypermedia and non-hypermedia spot Concepts oh I kind of want to watch that at some point um that is applications that mix both up whoopsies we have responded to Mr Harris's talk in a more detail here oh we're gonna have to look at that but suffice to say we violently agree with him that a pragmatic transitional approach to the web development is the best you should use the rights tool for the particular job you are working on okay so again I am I'm on board with this I'm fully on board with this uh when let's see where we would like to disagree with Mr Harris is where the line is between features that can be implemented effectively in hypermedia and features that require more sophisticated client-side approach we feel that with hdmax Hyper media can go much much further than many web developers today believe is possible and further that for many applications uh it can address many or all of our ux needs okay seems I mean seems a little crazy uh hypermedia is a good fit if if your UI is mostly text and images if the mother of all htmx demos David guilla guilo how do you say that name I'm just gonna say uh I'm gonna just call it GUI lot uh David guilot of the context show how to replacing react with htmx leads to a 67 percent reduction in total code base along with numerous other eye-popping results uh as a result we would like to claim that every team moving from react to hdmax would experience these results the fact is that the context a web application is extremely amenable uh to the hyper media style so I guess I'd have to look at this uh here let me just pop this thing up really quickly is there like an example I guess I'd have to we'd have to watch this one we'll look at this djangocon the Django yeah yeah right uh all right anyways all right if your UI is cruddy another area where hypermedia has a long track record of success is cruddy web applications in the Ruby on rail style if your main application uh mechanic is showing forms and saving the forms into a database hyper media can work very well with hdmax it can be very smooth and non-constraints to a simple list view detailed view approach many server applications take okay if your UI is nested with updates mostly taking place in well-defined blocks okay one area where the hyper media can start going a little wobbly is when the you have a UI dependency that is that spans structural areas of the screen a good example of this and one that often comes up is when discussing the hyper media approach is the issue uh count number shown in the issues Tab and GitHub okay okay for a long time when you close an issue on GitHub the issue count on the tab did not update properly GitHub in general although not exclusive uses hyper media style application ah exclaims the spa enthusiasts see even GitHub can't get this right well GitHub fix the issue but it does not demonstrate a problem with a hypermedia approach how do you update how do you update disjoint parts of the UI cleanly htmx offers a few techniques for making this work and context a in their talks uh discuss handling the situation very cleanly using this approach okay because this is like a very typical problem which is that you just have various parts of your UI that when new data gets updated you could have multiple things updating at once I I I feel like I understand this I get this event approach hmm typically we would just use a bunch of Json right you communicate up in Json you get back Json and we just go yeah uh let us grant that this is an area where hypermedia approach can get into trouble to avoid this problem one potential strategy is to co-locate dependent elements for a given resource within a given region or area of the screen in an application an example consider the contact application whose details for a screen for displaying and editing a contact has an area for basic contact information an area for contacts emails count blah blah an area for contact's phone number and the count of those phone numbers uh the UI could uh be laid out in the following manner okay that makes sense everything looks just fine uh in this scenario each subsection has its own dedicated hypermedia endpoints okay perfect uh the trick here is that the email and phone counts are co-located on the screen with their collection which allows you to Target just that particular area for updating okay I mean I get what they're trying to say here which is just you could limit all like notice that all these changes are very limited to the region and so co-locating data to changes or co-locating screen real estate to changes I mean I I get the idea I don't know if I want to be constrained that way but I get the idea right I get the idea do I like it I don't know I don't know right uh an area effectively let's see each area effectively forms a sort of server-side component independently of the other areas on the screen they all are nested within a broader con uh contact detail user interface yeah so this is probably one thing that uh react server components really tries to highlight or do well is that each one of these allows you can just take this component and put it somewhere else and it just works and so how do you do that effectively in htmx I don't know yet I don't know yet but it seems kind of exciting a side note uh UI driven uh hypermedia apis uh note that our previous hypermedia API in our endpoints in this case is driven by the UI if we have a particular UI layout that we want to achieve and we adapt our API to that if the UI changed we would have no qualms with the complexity changing our API to satisfy the new requirements this is a unique aspect of developing with Hyper medium and we discussed more detail here okay of course there may be UI requirements that do not allow for grouping of dependent elements in this manner and if this technique mentioned above aren't satisfactory then it may be time to consider an alternative approach okay perfect this is great right this is actually a really great argument for when you should and shouldn't use it if you need deep links and good first rendering performance a final area where hyper media outperforms the other options is when you need deep links that is links to your application that go beyond the landing page or when you need excellent first render performance since hypermedia's natural language of the web and since uh browsers are very good at rendering HTML given a URL this approach is hard to beat for traditional web features such as these is this true do we have a yes or no on this one I can't tell it's hard to tell you know what I mean it's hard to tell if that's a yes or no I can't I mean one could I mean why does it have better performance couldn't technically couldn't react render the same thing where's the best place to subscribe if you're not on YouTube hitting that subscribe button then go to Twitch and drop that Amazon Prime for me Prime who's on Amazon but Amazon won't let me legally recognize that I am Amazon Prime okay they don't like that because they already have an Amazon Prime so if I say them both then you know I might as well just call this a rust stream and get in trouble with the foundation she if your UI has many dynamic interdependencies as we discussed in the above section nested uis one area where hyper media can have trouble is when you let's see when there are many UI dependencies spread across your UI and you can't afford to update the whole UI this is what Roy Fielding uh was getting at in the quote at the top of the article the web was designed for large grain hypermedia data transfers not for a lot of small data exchanges particularly difficult for hyper media is to handle when these dependencies are Dynamic that is they depend on information that cannot be determined at the server-side rendering a good example of this is something like a spreadsheet a user can enter an arbitrary function into a cell and introduce all sorts of dependencies on the screen on the Fly okay I I would you know that makes sense I guess yeah that it probably makes more sense to have something else right however for many applications the edible row pattern is an acceptable alternative to a more General spreadsheet like behavior and this pattern does play well with hypermedia by isolating edits within a bounded area okay so in other words if your application has changes in which cause many disparate components to update then probably not good if you require offline functionality hyper media let's see hyper media distributed architecture leans heavily on the server side for rendering uh representations of resources when a server is down or unreachable the architecture will obviously have trouble it is possible to use service workers to handle offline requests although this is a complex option agreed completely and it is easy to detect when hyper media application is offline and show the offline message and many thick clients applications do as well absolutely I mean if you're offline and you try to go on Twitter it's not like you're going to have a great experience all of a sudden uh just because they don't use hdmax right it doesn't make any sense with that but if your application requires full functionality in offline environment then hypermedia approach is not going to be acceptable okay okay if your UI state is updated extremely frequently another situation where hypermedia is not going to be a good approach is if your UI state is updated frequently a good example is an online game that needs to capture Mouse movements putting a hypermedia network request in between a mouse move and a UI update will not work well and you would be far better using uh far better off writing your own client-side State Management for this game and syncing with the server using a different technology absolutely so this makes sense but I mean this is in some sense stadia stadia did this so one could argue you could use this approach if you want stadia-like performance which is that good is that bad probably not what you're wanting if you're writing if you're writing a purely server-side rendered game you know that's a lot of effort and so I don't think I think if you're using HTML and JavaScript and you're writing a server-side game you're probably doing the wrong thing can we all argue that's probably you're probably using the wrong language at this point of course your game may also have a settings page and that settings page might be better done with Hyper media than whatever solution you use at the core of your game there's nothing wrong with mixing approaches it's a transitional Style yeah HMS does have websocket support I'm curious about that I'll I'll investigate that maybe tonight who knows uh negative latency here we go let's go baby predictive Mouse Movement we should note however that this is typically easier to embed Spa components within a large hypermedia architecture than vice versa isolated client components can communicate with broader hypermedia applications via events in a manner demonstrated on the drag and drop sortable JS plus htmx example okay if your team is not on board the final reason not to choose hypermedia isn't technical but rather sociological currently hypermedia isn't uh simply isn't a favor in the web development many companies have adopted react as their standard library for building web applications many developers and Consultants have a bet have bet their career on it many hiring managers have heard of never heard of hypermedia let alone htmx but put react on every job post out of habit it is much easier to hire for this is just a fantastic reason for what technologies you should choose to get hired invert this argument are you looking for a job what should you learn learn the thing that has the most applications out there if you see go Java JavaScript react learn those be good at them that way you can get hired somewhere right people always forget this that everyone gives you the secret handshake out loud go to lead code learn how to invert a binary tree handshake slap those hands get everything done so you just nail it go to your friends have them ask you questions when was the last time you struggled at your job and tell us about it how did you resolve the issue you go in there and you give the star approach you give the situation you walk through everything and Bam Bam Bam Bam Bam and you get hired because you choose all the right Technologies and you practice how to interview and Bam It's Magic it's crazy how magical it is when you just look at the very not so secret secret handshake of getting hired and it works every time well this is frustrating it is a real phenomenon and should be born uh in mind with humility although Kentucky uh was able to rewrite their application quickly and effectively in hdmax not all teams are as small agile and passionate nor are all applications such a slam dunks for this approach it may be better to adopt hyper media around the edges perhaps for internal tools first to prove its value before talking about it broader or taking a broader look at it first off I love this uh but then you might hate your react job yeah you might hate your reaction but guess what you get a react job okay you get a react job such that you can move into a better job you know how easy it is to talk to a recruiter when they go why are you trying to go to the back end and you can be like this well I've been doing react now for about a year and I find that the my favorite parts are actually when I'm developing the API or even going further in I love being able to reach into the back end and work on that side I do react because right now that is what my job is and I'm looking for something different I'm wishing to expand my skill set and I've been practicing it a whole bunch in my free time wow that sounds really good it sounds like you're a person who's a real go-getter and knows what you want geez we would like you on our team right like it's just like a slam dunk I love reaching into the back end who doesn't love which did right why speaking so fast I always speaks fast what are you talking about uh something is better than nothing yes you missed a dab opportunity I don't dab uh okay I don't dab the only kind of dab I'll do is a Bill Gates dab that's it I'll only Bill Gates dab I'll never do any other form of dabbing this is exactly what's happening to me yeah how do I leave embedded do exactly what we just said what uh to give you an example of two famous applications that we think could be implemented cleanly in hypermedia consider Twitter and Gmail this seems like a great hypermedia place like when I think about the application this seems fantastic both web applications are text and image heavy with coarse grain updates and thus would be quite amenable amenable amenable to a hyper media approach two famous examples of web applications that would not be amenable to hypermedia approaches are Google Sheets and Google Maps Google Sheets can have a large amount of States a lot large amounts of States within their interdependency between many cells making it untenable to issue a server request on every cell update Google Maps on the other hand responds rapidly to Mouse movements and simply cannot afford a server round trip for every one of them both of these applications require much more sophisticated client setup uh than what hypermedia can provide of course the vast majority of web applications are nowhere near the scale and complexity of these examples and almost every web application even Google Sheets or Google Maps has Parts where potentially the hypermedia approach would be better simpler faster cleaner I agree with all these isn't Twitter already uh struggling with their server round trips they're they're struggling in different reasons the problem is is that when you lean super heavily into micro microservices there does come a point where you cross a boundary and you now have 400 microservices and every request requires you talking to like a hundred separate microservices there's just they're you you effectively create your own Thundering Herd right and it's just like that's all that's happening it's just Thundering Herd everywhere right uh so that I mean there's a real problem with that and it becomes really hard to understand what's happening I understand the benefits of microservices obviously I work at Netflix and I've seen us be able to you know work around a lot of these issues but nonetheless it's not there is no good answer it sounds like bad micro service usage well that's the hard part how micro should your micro service be right how good or bad should it be I don't know how big how small how much did you put in one how monolith should you go I don't know that's it's hard right it's hard add your share of pain with it too yeah left PAD as a surface absolutely having hyper media as a tool in your tool chest will improve your ability to address engineering problems as a web developer even if it doesn't become your favorite Hammer there there is a good theoretical basis for this approach practical benefits of many application and it is with with the grain of many web of many of the web in the way other approaches are not and then ends with a nice haiku what does grug think grug wrote this this is grug you know that right grug is designed by the guy who also designed htmx think about it grug probably agrees is my guess uh yeah this was good this was actually really good I I really am uh I I really am excited about learning htmx enough because I keep having to build these tools and then it's just like hey can you build a simple UI for it and I find myself spending way too much time building a UI and a lot of it is just getting like State and updating and this and that and blah blah blah blah all correctly when now that I'm discovering if you will htmx a lot of it I'm like oh I could have done that oh I could have done that oh yeah that was probably what I wanted to do oh I like this too that's what I want to do right like a lot of it is actually pretty straightforward for me you know a lot of internal tools they're very very simple right you just like have a text box that you put a uuid in and then it gets a bunch of information about it right like internal tools are very very one-dimensional you put in a uuid you get out of CSV that you can download you put in this you get out that right like they're very very very very simple oh no something I need to think about so guess what the name I don't have anything clever to say here so the name is the prime engine okay hey appreciate hey hey thank you very much for all those likes and Subs I can't believe it we made it over a hundred thousand did you hear that did you hear that can you believe it can you can you believe it we actually like if you go to youtube.com the prime time ago like look at this look at that how did this happen 103 000. how the hell did that happen why are you guys watching this what are you doing with your life the name is a hundred and three thousand again

Channel: ThePrimeTime

Views: 119,467

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: AOzy44b2gko

Length: 21min 28sec (1288 seconds)

Published: Fri Jul 07 2023