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.