Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So I wanted to do a quick video today on speedifying your site by dumbing your browser. Just big picture, what does that mean? It means taking all the state, all the client state that's on your browser, and just kind of forgetting about it. You know, it there are other options. If you are putting all your state onto the client, onto the browser, you're basically building a second, you know, you have the full DOM with all your information.
Lazarus:You're building and keeping and maintaining this reactive second virtual DOM. And so there's a lot of cases where that's actually gonna slow you down. That's that's the times when you get, you know, you click something and it's just frozen. And sometimes it can even break a browser. So that's the, you know, the basic idea here.
Lazarus:And let me show you an example of that. This all started with a tweet. Okay. So, opening this tweet might crash your browser. Here's why.
Lazarus:Okay. So the idea is there's a tweet here and I'm gonna play the video, that's there, but you know, since it didn't capture the audio, I'll just kind of explain as it's going. So it's got 24,000 crab emojis. Right? So it's a lot.
Lazarus:But, like I said, the browser is actually very good at doing this. So he clicks it, it's like 4 seconds and then it finally responds. And then he's going into these tools to kind of see the process. The Chrome dev tools profiler information. You can see, they say the paint took like 3000 milliseconds.
Lazarus:So let's look at this. The response comes in with the tweet data. The Twitter internally uses a state management library called redux. So that's where we're talking about this, state on the client. So redux and react are handling this.
Lazarus:They are taking in these 24,000 emojis, these 24,000 crabs. And it's so that's just 500 milliseconds just for the Redux to do the initial process. Then it has to notify the subscribers. So this is that reactivity. Because the client is taking all this state, it has to let everybody know there's been some changes.
Lazarus:Does that affect you? So this is something that, you know, when I'm talking about dumbing the browser, the browser is not going to be doing any of this. So what he suggests, and I I paused it right here because I think it's interesting, what he suggests is to actually do the very complicated problem of not showing all 24,000. So rather than show the 24,000 he is suggesting, that what they should be doing is cleverly hiding, sort of in the same way as a video game would do it. Which is fine.
Lazarus:Like that's what you have to do if you're using one of those setups. You have to not show everything at once because if you try to do this, if you try to do this in the virtual dom, you're going to have exactly what happened to the people, you know, who opened that tweet and it just shut down their browser. So this is the standard solution, for, you know, when you're using something like, React, Redux, Next, Vue, Angular, all of these, they work very hard to hide in the same way that video games do, hide the stuff that you can't see. Which adds a layer of complexity. A very straw a very big layer of complexity.
Lazarus:So this is what I'm talking about. Web 1 point o, server is very smart, knows what to do, client's very dumb. That's the old websites. It just all the browser is there to do is spit stuff out. Web 2.0 you could say, this is the Javascript world, the SPA world.
Lazarus:The server is very smart still because that's your source of truth. Your server still has to be smart. You cannot have a dumb server, otherwise that's a security risk. How are you gonna work with multiple, you know, teams, have to have multiple people at once editing the same data. You cannot do that locally on your client.
Lazarus:Of course you're gonna go to the server. Your server has to be smart no matter what. But web 2.0, your client also has to be smart too. You've got this virtual thing. The client is maintaining the state.
Lazarus:So, the benefits of the client state on the virtual dom, there are a lot. There are those benefits, especially if your data is not if there's not trying to show that much, you can that's why these things exist. You can get this kind of slick performance, but it does not mean that you can't do that without adding new virtual dom. You have a lot of options in the hypermedia world. So what people don't really talk about are what are the costs of adding a virtual DOM?
Lazarus:So that's what this is about. Javascript running locally is slow at scale. When you first go to that page and you have to load that SPA for the first time, and you've got, you know, 5 megabytes of JavaScript coming in, it's not just the size, the network of that JavaScript, it's the processing. The processing, the fact that your browser has to be so smart, it has to know what data affects what other data. Where is it going to be reactive?
Lazarus:There's this huge mapping procedure that needs to happen. And that is what slows it down. The more you work with it, the more you've got the more data you've got there, the more interactivity you add, the slower and slower it gets. That's where you start losing all the benefits of having the client have all the state. Cause you know you're getting these benefits initially where things feel snappy they feel fast, but over time as that grows you see the opposite.
Lazarus:So you know in general they'll say I think you know that the argument is that on your screen, you can only see so much. Right? So why should you worry about displaying all 24,000 things when you can do the clever thing of just having a viewport and, you know, hiding stuff that's not there? Well, I don't know if you have worked with how many, you know, different websites and stuff, you've worked with with clients that are sort of data centric businesses, which is a lot of businesses. Sometimes they have requirements of, for instance, showing everything on the screen at once.
Lazarus:Sometimes you have apps. You know, I was working on an app for writers. Writers like to be able to handle their text the way they wanna handle it. If they hit command f on their page in the browser, they want to find all the times they use the word. They don't wanna use an internal search engine.
Lazarus:Your browser already has a search engine for that page built into it. Right? So there are business times, business decisions that are made where you need to show a lot of data. So this is about those times. You know, if you are just displaying a small amount of data, none of this is gonna affect you.
Lazarus:This is for people who are needing to show a lot of data at once. This is where hypermedia really shines. The concept of the dumb browser. You know, what are your users going to do? You decide that on the server and you give them those controls to the front end.
Lazarus:The front end knows nothing. All it knows is I'm gonna render this HTML. It is unbelievably fast at that. So then you can do things like command f to find things. This is called the the hypermedia as the engine of application state.
Lazarus:So hate Haiti OS. You know, I don't know exactly how to pronounce that, but hypermedia as the engine of application state. What does that mean? That means the server side is deciding what hypermedia controls, what HTML to pass up to, you know, what actions the user can take. It's not that the client has all the actions built into it, and then it's getting, you know, JSON, which says, okay, now do this action, now do this action, allow this.
Lazarus:That has a lot of security problems doing it like that. If you allow your server to be very smart and and understand what the client has, what actions they've taken, and only display the things only give them the ability to do the things that they can do, the browser knows nothing about it. The browser is dumb again. It's just very good at displaying HTML. That's all it needs to do.
Lazarus:This does not mean that we're only, you know, doing the web one point o of showing the whole browser. This is where tools like HTMX come in. You are able to, you know, take snippets of HTML, put them where you want. If you need to edit something, you just replace that one div within the DOM with HTML. That new HTML has all your actions in it.
Lazarus:So this is not a case for going back to web 1.0, even though, you know, it's pretty good. Like, it's pretty nice to just have pages like Craigslist, I don't know, Wikipedia is kind of like that. You know, I don't I don't hate that stuff, but this is not about going back to that. This is about letting your browser shine. It's gonna be unbelievably fast, and we saw this with, I don't know, it was like the McMaster site and stuff, and there's different ways that people are doing this, but the core of the idea is that you're no longer processing everything through a virtual DOM, in JavaScript every time.
Lazarus:The HTML itself contains the complete available API, determines all the actions you can do. So if we're gonna load 10,000 lines of editable posts, I don't even know if you can do that in React. You're gonna have some really fancy hiding stuff. You're gonna do, you know, React, Angular, v I'm not even gonna pick on React. Vue, even something like Alpine, which is, you know, a great sort of solution for doing this kind of small bits of interactivity.
Lazarus:You can add it in just as you need. Even that, it has to create its own JavaScript version of your state. Even that's gonna get slow once you get into these high numbers, once you get into lots of data. So this is just different ways of architecture. I think people get into this mindset where they think they have to do things in a certain way, and they have to keep this virtual DOM, they have to use some of these tools that do that for them, this React and Next and stuff like that.
Lazarus:That's fine if you like those, if those are working for you. But if you find that you need to present a lot of data on the screen at once and you your users need to be able to like control f and look at thousands of rows at once, you might need to reach for like a more hypermedia solution. Make your browser a little bit dumber. It's gonna be way faster.