MVC in a "rich" web UI

2005-04-30 08:24:52 AM
Okay, I admit it, I tend to "hack". I really, really try to do the whole
design thing, but eventually (usually sooner rather than later) I get to the
code window and just start typing. I like to think that I am proto-typing (my
Anyway, I outlined a few "design" elements to "web enable" our home-grown
OPF on the plane one day. I started a web UI on the return trip. It seemed
pretty workable. The whole idea was to separate the M from the V from the C
and let them work as independently as possible. I think I succeeded,
somewhat, and it went something like this:
A web page was a "view". The web page was allowed to READ the model (OPF) in
any way it wanted. The web page also had widgets that represented "requests"
to be sent to the controller. For example, clicking the "Search" button on a
particular page would do this:
1. Create a "SearchRequest" object.
2. Populate some properties on the "SearchRequest" object (i.e. text to
search for).
3. Submit the the "SearchRequest" to some global Controller object.
This was nice because the search page didn't know anything about searching.
It just knew how to create a search request and submit it to the controller.
The controller would then:
1. Validate the request object.
2. Execute the request object (each request object has an "Execute()"
3. Dynamically determine the "view" (web page) to display the results of the
request based on the return code of the request (the possible return codes
for each request are stored in a database).
4. Transfer the HTTP request to the new "view" (web page).
The first few pages were nice. No page dependencies, no complex code either
in the page nor in the code-behind files.
Then I started fiddling with the UI. I wanted things like iframes (so only
part of the page refreshes) and pop-up windows for editing data. The model
fell apart because I can not figure out how to marry the server side code to
the client side javascript necessary to make the web pages "rich".
For example, my "rich" web UI has a "main" page with two iframes. One of the
iframes contains a navigation tree and the other a work space. When you
click an item in the navtree it displays the appropriate page in the work
space. This is nice because only the work space iframe refreshes. You don't
get the flicker and lose your scroll position. it is also pretty straight
forward - if you don't mind hard coding URLs into the navtree. Under my MVC
model, the various links in the navtree would have simply created a request
that is sent to the controller and the controller would decide which page to
display. However, the controller would be invoked in server side code inside
the navtree page. How can the controller get the new "view" (web page) to
display inside the work space iframe of the main page? Even if I could make
this work, I wouldn't like the fact that the navtree would require a
post-back to the server just to navigate to a new page. It would effectively
double the number of HTTP requests (one for the navtree and one for the work
space) whereas before I only had one HTTP request. Not very efficient at
The temptation is to abandon the "pure" MVC pattern I had originally and
remove the distinction between "view" and "controller". There would only be
a "GUI" (controller & view) and a "BO" (model). As long as I am not coding
business rules into the code-behind files of web pages (ack!) I think it's
still pretty "safe".
The priorities are:
1. It should look like a browser-based application (not a "web site").
2. It should be "responsive" (no excessive post-backs or page refreshes).
3. It should be scalable (adding more hardware is easy, re-designing an app
is not).
4. It should be easy to maintain (you see how far down the list MVC &
patterns fall).
FYI - The app is not for general consumption. I don't mind telling our
customers they have to use a particular version of a particular browser. I
just wanted to head off all of the obligatory "you'll never make a "rich"
web UI that is cross-browser capable". I know, I am not trying. :)
Thoughts? Ideas? Anyone implemented the MVC pattern in a "rich" web UI? If
so, is it available on the net?