Full Web Apps with FastAPI Transcripts
Chapter: View models and services
Lecture: View model pattern visualized

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Before we start writing code around this view model pattern,
0:02 let's just take a high level conceptual look at where it fits in the whole web
0:06 application process. So on the left we have what I imagine,
0:10 some kind of HTML form where data is being exchanged with a browser.
0:15 So the form represents like, say,
0:17 the Chameleon or Jinja template. And it's got all the data that the users typing in
0:21 and is going to be submitting back to the application.
0:25 The application may also need to provide some data to that form.
0:28 Like, for example, if there's a drop down of countries that you wanna pick
0:30 Well, you've got to send over those countries to that form. Most likely you
0:34 don't want to hard code that into the HTML. This view model,
0:38 its job is going to be to manage that exchange.
0:40 So on the left, we've got a browser with an HTML
0:42 form that is driven by a template. On the right,
0:46 we've got a big action method because, what happens here? when they submit this form for
0:50 in this case, registering for our site,
0:53 they're gonna put in their first name, their last name,
0:55 their email address. Maybe they've gotta checkoff a re-captcha type of thing to make sure that
1:00 they're not some kind of bot,
1:02 and so on. Our website, our action method
1:05 over here, our view method is going to actually need to look at that and
1:08 say, well, did they supply a first name?
1:10 Yes or no? Did they provide a last name?
1:12 Yes or no? If they don't provide the last name,
1:14 tell them they have to provide the last name.
1:16 If they provided an email, make sure that it's actually a proper valid email,
1:20 not just some random text. Did they provide a password?
1:24 Is it secure enough? Like all of those things have to happen.
1:27 And then we go and create the user.
1:29 And at each step, if something goes wrong,
1:31 we need to send back a message like,
1:33 hey, this didn't work. And very importantly,
1:36 we need to round trip that same data, if they typed in first name and last
1:41 name and email. But email wasn't right,
1:42 we want to reload that form with the same first name,
1:45 the same last name and the same email and just say,
1:48 here's what you typed, but please correct it.
1:50 That is a really important part
1:52 here as well. So the job of this view model is instead of writing all of
1:56 that just in this one view method,
1:58 this action method, which makes testing hard,
2:00 which makes editing the code or adding features really hard.
2:04 We're gonna break this action method into another part,
2:06 using this view model. So it will have a small little action method.
2:10 And the view model will be a class whose job is to understand all the data
2:14 that the page needs, all the data that the user is supplying,
2:18 how to round trip it and how to validate and report errors on it,
2:21 as I just described. And then this action method is just going to say,
2:24 hey, they submitted the form,
2:25 please load it up and tell me if it's good.
2:27 If it is, I'll create the user.
2:29 If it's not good, we'll just send back that same data you have along with
2:32 the error message. That's the idea of these view models.
2:35 And like I said, it sounds like Pydantic would be a really nice choice
2:40 here. But there's a couple of problems. Pydantic, when it runs into errors,
2:43 it doesn't hang on to the data anyway and then let you send it back.
2:48 It just crashes and says, hey,
2:49 we tried to accept this data.
2:50 It wasn't right. Sorry. And while that's super perfect for what you need in
2:55 an API, it's not what you want for a web page.
2:59 We'll see some concrete examples of this later when we actually write the registration method in
3:04 the next chapter. But for now,
3:06 let's just put it to the side that Pydantic models are perfect and such a cool
3:11 library and way to work with data exchange with FastAPI for the API
3:15 side. But they don't make as much sense when you're trying to make
3:18 a web application with HTML templates. We'll come back to this in more detail,
3:22 and we'll see exactly why that is, later.
3:24 Here's what the view model pattern looks like and how we're going to use it to
3:28 isolate the data exchange between the HTML template and some of our code and not mix
3:33 that in all over the place.
3:34 Make it easier to test that data exchange validation,
3:36 and it will keep our view methods nice, clean and simple