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 URLs. I mean how insane is that?
0:08
I have a web app, and I can't link to things in it. And yet so many of these single page apps created with Vue or React or other
0:16
frameworks, Angular and so on. They get themselves started and then you have to just
0:21
generate the javascript to move into different locations, and they often don't take the time to
0:26
support deep linking that is being able to link to a current state of the application somewhere that's not just the homepage.
0:34
Yes, I know that they can do it, but often they don't. And we also saw the same thing for htmx.
0:40
We could have supported deep linking but our first pass at it just didn't, right? and we could have stopped there. But we decided no,
0:47
actually, let's do a little bit of extra work. If there is a request from htmx,
0:52
we'll do one thing, but we're going to actually do all of the work necessary if a full deep link comes in to render it.
0:59
So if there's just a request for part of the results, this is the active search in the typing in the input box.
1:05
We're going to run this branch of code, and we're going to return the partial search HTML result passing the data that we got from the search.
1:13
If it's a full page request, we're going to return this and the trick that really made this work was the
1:19
PartialSearchViewModel. We just call it SearchViewModel in our actual code we wrote. That always does the search if there's search text present,
1:27
so it doesn't care how it got the search text. It just runs the search if it has something to search for.
1:33
So it's always going to work regardless of which scenario we go down here. And the other is our video/search/HTML.
1:40
That had to assume there might be search results, set the value of the input box and then render them at the bottom, again using
1:47
exactly the same partial idea that we have right here. So there was very little work to do it, but if you don't take a few steps to make it happen,
1:55
it just won't happen. Alright, add deep leaking support to your apps, it's easy and your users will thank you.