From React To HTMX

oh shoot that was awesome so I don't think about how much codes you have to hecation to get that thing to think don't my goodness all right for those that don't know this is from uh Django conf 2022 from react to htmx on a real world SAS product so it's not like some toy application it's actually a real world thing going from the full power of react industry standard react to HDMX which everyone says is the world's worst thing ever and they have a horse head for a logo or something like that and in their web industry for 15 years I've been a jungle developer for five years I work at context yes it's the French word for context um I don't think I can even understand this why is there an e at the end is that what French people do you guys put ease at the end of things and I'm here to talk to you about an experiment we we've been running at my work uh it's about replacing react with htmx on a SAS product that was already in production and it's a good experience okay so this talk is about realizing what is possible when it comes to a modern UI Rich UI on the web so I'll start by breaking some misbeliefs about front-end development I will show you our UI I will show you some code then I will tell you our story and finally I will share some thoughts and learning about all this I am pretty excited about this um I love this meme by the way this meme is fantastic 2004 2021 same thing so um this is the the cover of htmx Twitter account um it's Creative Commons by the way um you've heard for too many years now that uh for a rich ux on the web you need you have to go the react way you have to to build an API and build a single page app and you will have everything you need probably the reality is a bit more open than that yeah because what makes a ux rich probably there is something about making the user forgetting they're looking at a web browser um for example when the user acts on your interface and they changes the the application State you want to react to this change and you don't want to reload the full page because yes so 2005. um to be fair pay the The View transition API coming up and all that does kind of change a lot of these perspectives I always I know I always harp on this just shut up front end Masters right when you click links you're literally doing a full page reload uh but like you can't really feel it because they just have such highly optimized interface that it is not really bad and when they integrate when the view API becomes everywhere it's just going to it's going to look like a non-page transition and it's going to be fantastic and so when you look at this you you have to think to yourself how the heck is this thing so fast how how is this guy how's this guy right here Netflix by the way what is that all about but uh there's like a this is really cool right it's really it's probably the fastest page I've ever visited exactly there's a lot of really cool things about what they've built and you can see it in the speed and even even Mark the the guy who wrote a lot of this or some portion of that code by the way he wrote jQuery date picker the guy who wrote front end Masters wrote jQuery date picker anyone from the old web loves jQuery date picker can we all agree that's the greatest library ever created in the universe okay I know damn hell yeah this guy's great anyways uh very excited about it he loves he actually even said some some things that are positive about htmx he's like huh that's pretty cool which is like a huge like for him to say pretty cool that's a decent sized one gold standard today picker it is the gold standard for date picker another pouch is you you want to have some beautiful UI elements smooth reliable reusable accessible like the ones you've got on your phone I'm gonna go 1.5 speed simply because uh since he's not obviously a native English speaker I don't want it to become too hard to understand him especially since a lot of you aren't native English speakers then you're listening to somebody on high speed not natively speaking English who then you have like the translation becomes too great so we're gonna keep it with 1.25 and you've heard that to get all this you need to go the JavaScript application framework way like react on something else but when it comes to reacting to application State changes you you will hear that you need an application on the client side to to duplicate the application State on the client side to to be able to react very smoothly probably there are other ways and htmx is one of them so HTML Big Sky software let's go Bozeman Montana stop it grounds next what is it basically it's listening to JavaScript events in order to fire some Ajax calls get him getting some HTML fragment and inserting this HTML fragment into the Dom that's it when it comes to web components because that's I was that's what I was talking about when when I said reached UI elements the the best way the the design pattern to get rich UI elements is to build isolated reusable components that that are pieces of HTML codes CSS code and JavaScript code that will work together in order to get some beautiful UI elements that you will be able to reuse anywhere in your application and even in other applications and we were told that in order to achieve that we need JavaScript application Frameworks that force you to think component oriented oriented and to get web components now is it possible on the server side in jungle world yes it is I think this is actually a really good kind of uh uh observation he's making because if you remember when react was originally sold it was sold as the v in MVC it was just the view part and you really started thinking really you know you really started thinking in this very component like model perspective that was a little bit different but then data fetching and everything started kind of all flooding towards it because it became kind of you know a golden Hammer in some sense and so then all of a sudden you were no longer it was no longer an MVC pattern but some sort of like M but then it's like MVC C right like it started like bringing in all the logic into react or into the react portion of the code it's very interesting this guy implemented some library that that allows you to to get web components within Django templating and I will show you some code about it now it's demo time um our UI in our product in production um how disappointing would it be that if he whips it out and it's just like literally a page of text it's like no styles he's like I'm about to show you it okay are you ready clicks over and it's just like the world's most disappointing website of all dive you're just like quite sophisticated screen that I will show you uh and when it comes to ux I will present it briefly first and then I will dive into two features I want to show you to illustrate application State changes and UI elements all right come on let's see this so oh that's really nice so this is a um a screen that is um at the top you get a navigation timeline did you see that this bottom part loads in later so so it comes and loads and all this and then this thing's waiting and then it comes in remember to be completely Fair he's at a conference there's like 200 300 Wi-Fi receivers in the same room as he is which means that the the reception just sucks so even under a heavy amount of like uh packet loss is probably like 40 even under that it's still loaded pretty Snappy this is a um a screen that is quite Central in our user experience at the top you've got a navigation timeline when you click on one of them you get a beautiful animation you get some stuff that reloads on the bottom of the page I can close that one for now on the right column you'll get a text see that it just close it can be a huge text but it's just text the rendering is very quick stacked is split into articles the Articles can be seen just when opening the table of contents I can mark an article as favorite When I close my table of contents My article has been marked as my favorite here is it client-side application State Management no it isn't okay who hears a little bit shocked that that's just htmx that's all server side driven functionality with virtually no JavaScript executing at all other than the htmx little hook-ins to send stuff this is okay so I I wasn't expecting this level of sophistication honestly I was not expecting this level of sophistication I was not it's htmx it's just a JavaScript event triggering some very very located reload on the left side you've got a list of items that are related to the text this list of items can be quite huge here we have more than 1000 items in this list it's huge and it works it loaded just fine and this list can be filtered for example by articles there are two 10 items related to article 2. sorry the quality htmx stuff I can also search something that will match um projectors shoot it's from a potato an actual potato and let's reset now let's dive into [Music] um one feature that illustrates quite sophisticated application State Management wow that you you could think it is at least so in this facet filter I have all my articles with counters of results and at the top of the of the filter I have a special bucket here which is all the Articles I'm interested in all the articles I marked as favorite so for now I have only Article 1 and Article 2 as favorites so the counter is 127 results because it's 117 Plus 10. what happens if I'm not interested in article first anymore just here the Contour has been updated is it some client-side application State Management no is there some JavaScript for achieving this no zero nine of JavaScript this is just htmx all the way do you want to see how it works awesome so think about how much code you have to have in your application to get that thing to work oh my goodness get get gas oh no this is the the jungle View for the watch button I hope this is readable on big screen uh obviously I have a post method and uh when I built my if I showed again showed again okay so what happened is this may not seem very impressive but this is like a classic hard issue in general in web development which is you have somewhere within your code that updates a uh a value and somewhere else on the screen the completely unrelated component they have to react to that thing right this is where Redux tens of thousands of lines of code have been put in to State Management just to do this one little thing no one wants to use like no one hey whoa are you suggesting a global event bus we don't do that here we do tens of thousands of lines of code to prevent us from having a global event bus okay we don't do that around here but anyways so you can see right here he's talking about how to get a couple of them do you want to see how it works yeah favorite let's reset all right now let's dive into [Music] um management that you you could think it is articles with a count here which is all the Articles I'm interested in all the articles I marked as Facebook right here so now I have only Article 1 and Article 2 as favorites so the counter is 127 results 117 plus 10. there we go what happens if I'm not interested in article first anymore just here the Contour has been updated from client-side application statement agent no is there some JavaScript for achieving this no zero line of JavaScript this is just htmx all the way do you want to see how it works let's dive in I know this doesn't sound impressive because honestly increase the resolution you can't okay this is an older video you can't see it uh remember this is a video in 720p of a screen that's probably projecting in 480p so you're getting like double resolution by the way hmx solution is this is an event bus I know because event buses are the way to do it honestly event buses have always been the way to do things and people will do anything but use an event bus they'll do anything in the world but use an event bus which is wild Chad's saying it is an htmax actually JS it's like saying it's JS is it's actually dude is that not the fast uh actually that's just C plus plus you're executing okay Fred so uh this is the the jungle View for the watch button I hope this is can we take a second here though as developers he just just I want you to just say it in English what happened he clicked a button and a number updated and we're all over there like holy oh my God oh my God oh my God oh like what has happened to our brain can we all agree that that feels a little stupid when you say it out loud when you say it out loud do you feel stupid because you should because it is stupid that we're that impressed it means that we've added complexity out of this world to things maybe that shouldn't react right this is react break this is framework brain that fitting everything through a framework might hurt us emotionally why I can't hang out with people it's why I can't hang out with people this is how you feel in front of non-de like non-devs you do something you're like holy cow and they're like what it's barely working you're like no you shut up you don't know what just happened there did you see that number go up that throbber was like throb throb throb boom double upgrade same time and they're like I don't even know what you're saying you're like you shut up it's amazing when I built my HTTP response becoming yellow or green according uh according the post yeah all right oh so I saw this I was reading about this laugh HTTP header which is a special HTTP header that htmx understand on the client side now my small counter here actually it's the whole line in my HTML template which is here look at that beautiful with a bunch of htmx attributes and this empty div is about to to get its content from the server on page load and also when an article is watched and when an article is unwatched this is quite simple isn't it and again you have some events application set management without writing a single line of client-side code the second feature I wanted to show you is about rich UI by the way people always be like well what if you don't what if you weapon if you don't have internet well you're not going to be using the web page anyways you're not going to be unmarking things and having it saved anyways what is all this stuff you're talking about almost no company I know of has a rich offline experience other than Google Docs okay don't give me that don't give me that offline business okay every one of you are all talking inside of twitch chat talking about the importance of offline without actually ever using things offline elements actually you've seen them already it's these facet filters we have three of them what if you don't have jsons Sophisticated You element because it's a custom drop down you make your page for SEO htmx actually does fall back and work very very well for non-javascript but nonetheless this is just it just I hate that say what if there's no JavaScript yeah react's gonna work really well there tough guy react is gonna just be a just just just do fantastic your little used clients are going to execute so well oh my goodness you're right you're absolutely right already did probably such things um I can close it when actually anywhere close it by hitting escape and there is some internal search oh there is no article I'm not an articles it's called one an article 9 for example um this is some JavaScript of course because it is client-side pure user interaction nice but these elements are actually web components made on Jungle site so I have a face set template which is a regular Django template that will take some input the the bucket the values what the user selected Etc and this face said this HTML template is working with in my static folder components face it I have some CSS code and I also have some JavaScript for example did he not hold on did he not just have Tailwind okay where's Tailwind what is this what is this child's project it's a little baby little baby child's project is that what we're looking at little baby little baby little babies I don't want to see this stuff his uh his English accent is actually exceptionally great I work with quite a few French people on ironically I don't know what it is about infrastructure in French people but I work with a lot of them and I swear this guy has an incredible English accent uh for because you can hear it you can he or a credible uh English French accent in his English it's really really good it's very very good we use stimulus uh on JavaScript but you can use whatever you want look at that and all of this is working together through uh jungle components and jungle components allow you to declare a component here that make that bring together the template the CSS and the JavaScript oh cool and that makes you able to to pass some data into it and this is how you achieve UI web components on set aside with jungle components and how do you use it I will open my well it's actually really cool template again and here it goes we were there two minutes ago you have your component s so it's really completely reusable I have another one here for another field in my data and I passed the buckets into it I pass whatever you the user selected in order to to mark them this way and very cool I have slots slots allowing me to to do special stuff to customize for example this filter you've got some color dots names here it goes I have my slot and I have the possibility to customize some stuff in there so it's reusable it's isolated we can unit test it if we want we can upgrade it add some features independently from its usage in our application and that's the whole point of web components so that's the end of the demo part that is really really good I hope at this point you are convinced that yes our UI is quite quite Rich offers a rich user experience and no our code is not spaghettical because we don't have code htmx does everything almost everything for us there is something to be said that you could affect rud app with some templates and you could get interactivity to that level I mean yeah they're the I mean he did show a couple sprinkled in javascripts it's true there's a couple sprinkles of JavaScript fair fair but nonetheless like it's just crud Plus templating and that was an incredible that was that was a very sophisticated app is HTML not a programming language absolutely it's not a programming language no it's a money generator experience at context all right and the road wasn't always like this the protest this project started in 2017 um it's a quite complex project especially on the back-end side there are many domain complex domain stuff but on the front end side in 2017 we were a very very small team it was our first SAS product and we asked around us how do we do that and everybody told us the same thing it's 2017 guys go the react way build an API build spa and you will achieve a client-side application application State Management you will get a separation of concerns between your backend and your front end you will get web components it's the modern way to go so we tried it we hired a JavaScript developer we I was in charge of the API among other things and it was quite of a kind of okay we were able to kind of okay is like 25 percent you got a half of a half that means it's you're not that's bad that's called it sucked it's kind of okay that's called sucking mid-mid okay it was like here's mid and then like another mid you know what I mean production but what is the hdmax recently because the the API contract was not a little bit because the the dumb tree was way too deep and as you as you have seen we have lots of information to to put into the browser um and uh we had a very very low team velocity and that was a big problem because we were trying to launch a product we were trying to to have people buy our product so we needed to to be agile about it and uh uh there were you know 2017 that's when hooks came out right uh just just to make sure because they're in like modern react right uh react hooks when did they come out ah okay so so they came out a little bit a little bit afterwards okay so you worked on quote-unquote Modern one so there was a lot of higher order components during those days uh okay I could understand that it was it was a harder landscape to do good react no code quality on the front-end side because the JavaScript he was overwhelmed with all the complexity of making an Spa um so when I heard about Phoenix live view in The Elixir world when I heard about hotwired in the Ruby world when I heard about unpoli htmx I had an idea I created a proof of concept I duplicated our UI which was all react I duplicated it with several rendered Django templates and just a bit of htmx in one month of work the code was ugly as hell but the proof was there it was working the performances were good let's refactor it one month later we had web components we had uh code quality we had we even had tests that we didn't have before on the on the react World so consequences on the ux were there some negative consequences on the ux no we we made no trade-offs I can't think of a feature we used to have and we don't have anymore and it opened it even opened some new possibilities some new opportunities um for example on the the left column you've seen earlier which has many many many items on the react World uh the the cons no Pros yeah yeah country was so deep and so heavy that this colon was able to display only 50 items at a time and so it's scroll to display to replace the 50 items Etc and oh I hate those virtual scrollers as light as possible Dom tree we are able to display thousands of elements and no lags that's actually super cool because you know there is a cost to to having to displace smaller amounts of things you are making a very chatty client and trying to get these you know you're trying to get the data constantly whereas when you just load when you have the availability to just load what you need you can actually make a lot of less of those calls and then the remainder of the calls are all like mutations of data um we measured time to Interactive um on three scenarios jungle and react jungle API and react on first load then on second load and with htmx htmx is at least as fast as the react second load on first load is way faster and it happens that in our use case users often get to our UI through a deep link that they receive by email so the first load is really important to us and I assume that this the second load is largely going to be server time is hopefully what we hear and react was just not the right fit for it the memory usage on the client side is also very lower much lower so this is good news because we will we will stop hearing our users crying for a new laptop every six months which is good for the planet that's what happened to the team obviously the JavaScript developer left oh the JavaScript developer left okay I was about to say did I just hear an rip because there's four and now there's three something something htmx taking jobs htmx takes jobs because we didn't need here anymore but feels bad um feels bad the other two uh we were quite stuck in our back end only role the the the most beautiful demonstration I did after each Sprint was an API endpoint with Json the now we are full stack and we are able to collaborate with designers and also obviously continue working on our complex backend issues but um we have a much wider scope and this is much more exciting as a developer at least from my perspective um and this allowed also as to to explore new this part is so important too it is you because you know there is something I mean okay so to be fair I don't necessarily want to always be doing front end and all that and maybe you don't want to do front end so being able to be exclusively back end is a very huge bonus but if you want to play that full stack row if or full stack roll and you want to be able to see kind of things change you want to be able to kind of go on both sides like this is really really exciting right he finally sold out I finally sold management uh methods I don't know this is a really important thing right here make the developer in charge of there's also one more thing that I think is really important right here is that full stack devs if they're all doing the same thing how much what do you think you get out of this as a company what you get out of this is that you have devs who could really like help out on a myriad of things whereas when you have this separation going on right here what you actually get out of it is like this these these isolation issues where it's very hard when there's a real back end tough thing you can't really send the full stack guy in full stack guy's not you know he's he's only good sort of good on both right oh this guy cannot help out on any front end things right like you make a two engineer requirement on almost every single bug fix and it causes some weird issues whereas with this you don't have that you have much more of an adaptable tree a team that can actually do a lot more and so there is something very magical about having a product that you can everyone can work on everything right there is something very very important about that picture from the beginning to the end by exploring data I think they want to explain uh scenario working with the developers it's great this is what I want to see that's this is uh these are lines of code oh baby we deleted 15 000. look at kid look at this you go it went up a little bit in Python but look at the down look at the look at this thing look at the difference 21 000 lines of JavaScript like okay so when people say that JavaScript sucks this is one of the reasons why to write something it feels so easy to write but you end up writing so much more code you don't write boilerplate but you write tons of logic that's not needed necessarily lines of code the JS depths also are wild I want to understand that now why didn't we talk about that what does this mean right here he has 49 python oh subdaps oh four okay yeah okay I see it okay I thought because I was trying to line it up this way I thought even they're like I was trying to line it up that way okay my bad my bad this is wild though yeah no um when it comes to you uh because I'm a bit here to convince you but the building to give you 40 seconds for five seconds I think you need to make your own decision you need to ask yourself what do we need more as a team as a business um because in the beginning of this presentation I told you that he recommended react to me uh talked about reacting to application State Management okay this is over uh talk they talk to me about web components okay this is handled they talk to me about separation of concerns and from that perspective with htmx we have um less separated uh code base and uh to me it's a good thing because I like to be a full stack developer but if your team let me just take a second did they blur his shirt it looks like his shirt is blurred that camera this is just not that great it's used to separation a heavy separation of concerns between backhand and front end Maybe um htmx is not the best way for you but it says react what htmx gave us is Project agility we are now able to ship much faster much much faster uh we we have no more uh endless debates about API contracts Etc interesting uh so if product agility is uh a big thing for you maybe you should consider htmx another question is what is front-end development um if some of you hate CSS Maybe maybe you should consider um an architecture that allows you to focus on the back end and let other people work on the front end but that doesn't necessarily mean reactor JavaScript application framework but if you think that front-end development is about taking some data from the database and exposing exposing the data to the user in a beautiful way interact with your data every day so store the data into the database maybe htmx is the way to go I'm I think I'm done almost um here are the key takeaways form for you the first one is is if you had some thoughts about htmx does it work on a real project a real product yes it works people are paying for the UI that you've seen earlier so it works um for a small team like us on a B2B SAS product it makes us very happy so if you're in the same position or if you're in a similar position maybe it would make you happy so and the most important thing is that with htmx with jungle components as well now you're able to to make your own choice about what architecture will we Implement for our front end this time I'm really done I would like to give a special thanks to my colleagues at context I'd like to to tell you that this awesome company gave me to you the opportunity to work on this presentation in my working time my working time so this is great good that's very good and like the people you see here gave me feedback about the presentation they helped me rewrite it three times but it was great and the girls of the tech team took care of I will take stuff while I was working on this presentation so this is good and thank you for your attention uh you can you can't find me anywhere else than on GitHub I have no social network um and I have one more thing if there are some French here we are hiring so let's meet later good God oh that got loud at the end uh that was awesome that was awesome that was so cool okay you gotta just take a second and appreciate that like if you would have saw that application you would have said there is absolutely no way that htmx could have done that application or at least your brain right would anyone in here genuinely would have thought htmx was the way to go with that it looked very interactive right there's a lot of throbbers there was menus coming in there was overlays there was like everything going and you figured there's no way that's not that's not an htmx site there's no way uh but yeah it's not only hvx of course it's not only htmx they had a couple like bits of JavaScript which is totally it throbbers you're into it yeah I'm into it too baby that's why we say it I don't what else would you call them but uh huh throbbers you don't know what throbbers are really I'm not gonna google it but you you just know that uh can't hear you uh but there is something about that that is actually extremely impressive which is perhaps my Paradigm has been wrong this whole time and maybe perhaps maybe we've gotten it wrong for the last little bit just throwing it out there I know I'm asking it again I don't I still don't see why hmx is better maintaining State on this uh server seems Seems harder or at least no no it's not it's it's it's definitely easier because you have one place of Truth the thing is with a with react you have two places of Truth at all points now with react server components all you've done is just make it so now you have a new problem client server spaghetti issues right and this is why so many people have such a hard time with it is because there is this whole new paradigm you have to try to come up with and not shoot yourself in the foot constantly and so it's having one place that's authoritative is always true it will always 100 be true xss is not a real thing when I say it's when I say it's not a real thing I mean yes of course if you send down to this client HTML the HTML will happen it's up to you to not send down xss it's not like that problem somehow goes away when you use react you can still do the same thing to yourself it's just now your server has to your server is the one that just goes this is the correct thing you're templating right like when you use golang templates when you when you go over here and you use uh you know golang uh look at me I've been using golang for like 14 seconds when you use this it right away comes with this idea that it prevents xss from happening right this whole document is about security features it just prevents it from happening so you write the code you want and you don't accidentally do the wrong thing right why does everyone because because we think in terms of direction right we think and like you don't ever think about something by itself and what I mean by that is that no one thinks about the front end and goes oh I'm a blank slate tell me about how this thing works no they go okay this is how a front end Works react how does this work I don't I don't see how I can do this over here this must be bad right that's like that's how our brains work this is why it's hard to learn new things things that are completely novel is because your brain tries to take what it knows and tries to map it to something you don't know and that's always just super hard right that will always end forever be a super hard thing to do and so there you go leptos plus htmx I've been doing a goaling I'm trying out golang I did leptos it's all I'm always super hard exactly picks just a constantly novel like dude he's novel all the time and sometimes some people get a little uncomfortable with how novel he is and you know we're trying to let him know maybe not like maybe not all the you know maybe not all the time you need to the name is the primagen

Channel: ThePrimeTime

Views: 284,891

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: wIzwyyHolRs

Length: 40min 0sec (2400 seconds)

Published: Sat Aug 12 2023