HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 2: Active search
Lecture: Concept: Supporting deep linking

Login or purchase this course to watch this video and the rest of the course contents.
0:00 You probably heard me make a couple of disparaging remarks to web apps that don't support
0:05 URLs. I mean how insane is that?
0:07 I have a web app, and I can't link to things in it.
0:10 And yet so many of these single page apps created with Vue or React or other
0:15 frameworks, Angular and so on. They get themselves started and then you have to just
0:20 generate the javascript to move into different locations, and they often don't take the time to
0:25 support deep linking that is being able to link to a current state of the application
0:30 somewhere that's not just the homepage.
0:33 Yes, I know that they can do it, but often they don't.
0:36 And we also saw the same thing for htmx.
0:39 We could have supported deep linking but our first pass at it just didn't, right? and
0:44 we could have stopped there. But we decided no,
0:46 actually, let's do a little bit of extra work.
0:49 If there is a request from htmx,
0:51 we'll do one thing, but we're going to actually do all of the work necessary if
0:55 a full deep link comes in to render it.
0:58 So if there's just a request for part of the results,
1:01 this is the active search in the typing in the input box.
1:04 We're going to run this branch of code, and we're going to return the partial search
1:07 HTML result passing the data that we got from the search.
1:12 If it's a full page request,
1:13 we're going to return this and the trick that really made this work was the
1:18 PartialSearchViewModel. We just call it SearchViewModel in our actual code we
1:21 wrote. That always does the search if there's search text present,
1:26 so it doesn't care how it got the search text.
1:29 It just runs the search if it has something to search for.
1:32 So it's always going to work regardless of which scenario we go down here.
1:36 And the other is our video/search/html.
1:39 That had to assume there might be search results,
1:42 set the value of the input box and then render them at the bottom, again using
1:46 exactly the same partial idea that we have right here.
1:49 So there was very little work to do it,
1:51 but if you don't take a few steps to make it happen,
1:54 it just won't happen. Alright,
1:55 add deep leaking support to your apps, it's easy and your users will thank you.