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.
