Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Client and server-side validation
Lecture: The viewmodel design pattern

Login or purchase this course to watch this video and the rest of the course contents.
0:00 You've seen view models in action
0:01 let's review them as a concept.
0:04 When you look at a web application
0:06 at a very high level
0:07 we have the browser and our job
0:09 is to send html to it.
0:11 In this case, the html defined a form
0:13 that's going to be submitted back.
0:15 So you see we're doing HTTP POST to register.
0:18 And there's some data being passed along.
0:20 Now in a naive sense
0:22 we might write a really complicated
0:25 long method to process this register request.
0:29 So here is a big action method.
0:31 Why is it big?
0:32 It has to get all the data out of the form.
0:34 Let's imagine, there's six or seven
0:35 fields it's got to pull out of there.
0:38 It has to validate them.
0:39 If they don't validate
0:40 it has to send back an error message.
0:41 And then, and only then does it actually
0:44 do what it's supposed to do
0:45 register the user.
0:47 So that's a lot of work.
0:48 And it makes these methods hard to test
0:50 it makes them hard to read
0:52 hard to maintain, error prone and so on.
0:55 If we could separate that
0:56 if we could put the place where we get
0:59 the data from the form and validate it
1:00 and make that the sole purpose of the entire file
1:04 is to validate the register form
1:05 well then, that's way easier.
1:07 Way easier to test and we can separate
1:09 the validation and getting of the data
1:11 from the other things.
1:12 We move that validation and that data acquisition
1:15 apart and put it somewhere else
1:16 into this thing we call a view model.
1:18 So we still have out action method
1:19 but now the view model knows about
1:22 the data exchange, it does that.
1:23 It knows about the validation.
1:25 And we just have the action method work with this.
1:28 The action method now becomes sort of orchestration
1:30 for the high level steps that need to happen here.
1:33 So at a high level
1:34 this is what the view model pattern looks like.
1:37 Let's see how it makes things
1:38 simpler when we use it.
1:40 So over here, we're going to look inside
1:43 that register method, and like I said
1:44 in theory, it could be really complicated.
1:47 But in practice because we're using view models
1:49 it's quite simple.
1:50 We have the get post redirect pattern still
1:52 so the top register under score get, this shows the form
1:56 and it doesn't matter how many
1:58 fields there are, what default data has to be there
2:00 it's basically just going to look like this.
2:03 Register view model and pass off the to_dict stuff.
2:07 It's up to the view model
2:08 to make sure the default data is there.
2:10 Things like, data that drives dropdowns are there and so on.
2:13 So this is pretty much it.
2:15 And then when we go and do our post
2:17 again, we're going to go to our view model
2:20 we're going to pass it the request
2:22 it's going to now validate that, right?
2:25 We don't need to validate it in the GET
2:26 because it's empty, it's always going to have errors like
2:28 "Your name's missing"
2:29 Yeah, I know 'cause we're showing the form.
2:31 But here we need to validate it.
2:33 And then we just check.
2:34 Anything go wrong?
2:35 Well, show them the error message
2:37 and give them back their data.
2:39 That's super easy.
2:40 Doesn't matter how many thesis' there are
2:42 how much validation there is
2:43 this is what we do.
2:45 And then we actually do the thing we're trying to do
2:47 in this case, register the user
2:49 based on the data we already have.
2:50 We know we have it because
2:52 it passed the validation on the line above
2:54 that if statement above.
2:55 But if it failed, we'll just set
2:57 another error message and pass that back.
2:59 If it succeeds, here's the redirect part
3:01 of the get post redirect pattern.
3:03 We've now registered them as a user
3:05 and we just send them back to /
3:07 or /account or welcome
3:09 or where ever we send them to.
3:11 This code is super easy to test
3:13 and it's very maintainable.
3:15 Moreover, you know exactly where to go
3:17 to look at the validation and data exchange
3:19 for registering.
3:21 It's in viewmodels/account/registration/viewmodel.
3:25 Boom, really nice design pattern
3:27 and here it is in action.