HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Welcome to the course
Lecture: Vue, React, and htmx: A quick comparison
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's take just one minute and do a quick comparison of some of the major frontend
0:05
frameworks that are very commonly suggested for building these types of applications with htmx.
0:10
We're going to look at VueJs, which is my favorite for full on web frontend frameworks. We're gonna look at React, and then I'll compare that with
0:19
htmx, which we've already seen. But we'll throw it up on the screen one more time.
0:24
So we're going to look at three similar but not actually the same applications.
0:29
I didn't find one that had all three implemented just the way so I could compare them exactly. So what I want you to take away from what you see here
0:36
in this VueJS application is sort of the kind of code that we have to write. So here we're going to create an application. You can see it has a name,
0:44
VideoPlayer, it has a Navbar component, it has some data elements like loading and videoLoading and comment and replies and so
0:54
on. And then it has some methods like chooseVideo or addLike or disLike or add comment. And these are the logic of the application that we might write.
1:02
It makes changes to the local data model, but we also do need a way to push that back to the server, that's not shown here.
1:08
But also, look at the scroll bar, get a sense like how many pages is that? 10? 8? I don't know. There's a lot of stuff happening.
1:16
So this while it may look complicated is only a small fraction of what we're looking at here. Okay, so this is Vue. Again,
1:22
I like it pretty well. It is also on the HTML side, attribute driven, which is nice. Here's another thing, in React.
1:29
So here we are exporting a function which registers the application, and you can see that it's very full of callbacks.
1:38
So we have like window.addEventListener, which takes a lambda expression here. Then as part of that, we're going to go to the navigator and add a
1:47
callback and then and so on. So you can see there's like nested little lambda expressions all over the place, and again this is not super clean.
1:56
This is fairly intense javascript right here, on the front end. Ok this is the active search example.
2:02
We saw the `click to edit` example before. It has a couple of things. It has the input, which has four hx tags, and it has a body of
2:12
results at the bottom, and you can see within the table there's a tbody where it says search-results. So as we interact with it,
2:18
it's going to do a POST to /search and then stick the results in the search results there. Done, no more scroll bar.
2:25
Again, the React one, this is only four or five pages. The Vue one was 10. This, this is all of it. And you might say, well there's the server side,
2:34
there's going to be a lot to that. It's honestly probably about as much code as you see on the screen,
2:39
but in Python. Hopefully this comparison gets you excited about working with htmx, and I've been going on and on about this,
2:46
about how clean the code is and how simple everything is. It's true, and here's just another example of it.