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