# Wednesday, October 17, 2007
« ToJavaScript Extension Method | Main | Separating design and code with HTML and... »

My latest screencast is online: Mobile Model in MVP web app

This screencast continues from the work I demonstrated in a previous screencast: http://channel9.msdn.com/Showpost.aspx?postid=344711
When implemented a Model-View-Presenter pattern client-side in JavaScript there is a need to get data from the server. Rather than make this divide explicit with HTTP request, etc, I have used the idea of a model object that moves between the client and server.
So the programmer simply writes the client and server pieces of functionality and lets my framework do the plumbing.
I use code generation and Script# to make writing a client-side web app much more seemless than the usual javascript/XML/JSON/web service madness.
I'm developing the ideas shown here in a project at the moment. If there is sufficient interest I may extract a framework to give to the community.
How do people feel about this approach to web development? What kinds of additions/modifications should be made?
p.s. I have a bit of a cold at the moment, so sorry for the croaky voice in the recording!

.net | c# | mvp | programming | ria | screencast | tier_split | web
Wednesday, October 17, 2007 9:32:19 PM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [11]  |  Related posts:
Generating Javascript Template Functions from Expression Trees
Announcing ProntoCMS
Name needed for new open source CMS
Should I open source my new CMS?
Hasic – A kick-ass view engine for asp.net mvc
HTML Forms using VB XML Literals
Tracked by:
http://morningside.edu/mics/_notes/pages/viagra/index.html [Pingback]
http://blastpr.com/wiki/js/pages/nexium/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/nexium/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/paxil/index.html [Pingback]
http://blastpr.com/wiki/js/pages/paxil/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/cymbalta/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/effexor/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/tramadol/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/ultram/index.html [Pingback]
http://blastpr.com/wiki/js/pages/celebrex/index.html [Pingback]
http://blastpr.com/wiki/js/pages/claritin/index.html [Pingback]
http://blastpr.com/wiki/js/pages/synthroid/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/celebrex/index.html [Pingback]
http://blastpr.com/wiki/js/pages/melatonin/index.html [Pingback]
http://blastpr.com/wiki/js/pages/prozac/index.html [Pingback]
http://blastpr.com/wiki/js/pages/lexapro/index.html [Pingback]
http://blastpr.com/wiki/js/pages/clomid/index.html [Pingback]
http://blastpr.com/wiki/js/pages/coumadin/index.html [Pingback]
http://blastpr.com/wiki/js/pages/cialis/index.html [Pingback]
http://blastpr.com/wiki/js/pages/effexor/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/claritin/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/prozac/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/hoodia/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/celexa/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/lexapro/index.html [Pingback]
http://blastpr.com/wiki/js/pages/zoloft/index.html [Pingback]
http://blastpr.com/wiki/js/pages/viagra/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/lipitor/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/wellbutrin/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/prilosec/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/clomid/index.html [Pingback]
http://blastpr.com/wiki/js/pages/hoodia/index.html [Pingback]
http://blastpr.com/wiki/js/pages/lipitor/index.html [Pingback]
http://morningside.edu/mics/_notes/pages/coumadin/index.html [Pingback]
http://promocija.com.hr/promocija.com.hr/includes/js/docs/52060005/index.html [Pingback]
http://thejohnslater.com/pix/img/docs/73486930/index.html [Pingback]
http://swellhead.netswellhead.net/docs/42306518/index.html [Pingback]
http://ipsilon.hr/ipsilon.hr/cms/4/lib/docs/55227677/index.html [Pingback]
http://blog.netmedia.hr/wp-includes/js/docs/08493171/index.html [Pingback]
http://pspdesktops.com/fileupload/store/docs/18769945/index.html [Pingback]
http://swellhead.netswellhead.net/docs/92808772/index.html [Pingback]
http://add2rss.com/img/design/docs/90861918/index.html [Pingback]
http://martinrozon.com/images/photos/docs/61904307/index.html [Pingback]
http://promocija.com.hr/promocija.com.hr/includes/js/docs/36483653/index.html [Pingback]
http://martinrozon.com/images/photos/docs/56637999/index.html [Pingback]
http://discussgod.com/cpstyles/docs/25383456/index.html [Pingback]
http://temerav.com/images/menu/46200403/index.html [Pingback]
http://split-dalmatia.com/split-dalmatia.com/images/docs/84431573/index.html [Pingback]
http://thebix.com/includes/compat/docs/15870923/index.html [Pingback]
http://thebix.com/includes/compat/docs/44694113/index.html [Pingback]
http://coolioness.com/attachments/docs/03698289/index.html [Pingback]
http://pddownloads.com/docs/08296030/index.html [Pingback]
http://entartistes.ca/images/images/docs/81367526/index.html [Pingback]
http://discussgod.com/cpstyles/docs/62161481/index.html [Pingback]
http://slaterjohn.com/downloads/2col/28436634/index.html [Pingback]
http://hrvatska.biz/wp-includes/js/docs/80692203/index.html [Pingback]
http://temerav.com/images/menu/20420171/index.html [Pingback]
http://temerav.com/images/menu/05559064/index.html [Pingback]
http://seo4u.at/images/docs/68897595/index.html [Pingback]
http://lecouac.org/ecrire/lang/docs/49649526/index.html [Pingback]
http://promocija.com.hr/promocija.com.hr/includes/js/docs/48335156/index.html [Pingback]
http://lecouac.org/ecrire/lang/docs/20007231/index.html [Pingback]
http://vladan.strigo.net/wp-includes/js/docs/09763218/index.html [Pingback]
http://blog.netmedia.hr/wp-includes/js/docs/44378735/index.html [Pingback]
http://legambitdufou.org/Library/docs/15090396/index.html [Pingback]
http://split-dalmatia.com/split-dalmatia.com/images/docs/34320152/index.html [Pingback]
http://allfreefilms.com/wp-includes/js/46226552/index.html [Pingback]
http://swellhead.netswellhead.net/docs/84545083/index.html [Pingback]
http://temerav.com/images/menu/96509501/index.html [Pingback]
http://blog.netmedia.hr/wp-includes/js/docs/91708760/index.html [Pingback]
http://legambitdufou.org/Library/docs/38152786/index.html [Pingback]
http://promocija.com.hr/promocija.com.hr/includes/js/docs/37348396/index.html [Pingback]
http://witze-humor.de/templates/images/docs/83157240/index.html [Pingback]
http://martinrozon.com/images/photos/docs/75270452/index.html [Pingback]
http://witze-humor.de/templates/images/docs/69259068/index.html [Pingback]
http://islands-croatia.comislands-croatia.com/includes/js/docs/60974094/index.ht... [Pingback]
http://legambitdufou.org/Library/docs/64933533/index.html [Pingback]
http://jivest2006.com/docs/40579018/index.html [Pingback]
http://easytravelcanada.info/js/pages/3/clomid/ [Pingback]
http://ina-tv.sk/img/cialis/ [Pingback]
http://easytravelcanada.info/js/pages/5/hoodia/ [Pingback]
http://easytravelcanada.info/js/pages/11/ultram/ [Pingback]
http://sevainc.com/bad_denise/img/2/celexa/ [Pingback]
http://easytravelcanada.info/js/pages/6/lipitor/ [Pingback]
http://easycanada.info/js/pages/cialis/ [Pingback]
http://easymexico.info/images/img/cialis/ [Pingback]
http://sevainc.com/bad_denise/img/3/claritin/ [Pingback]
http://easycanada.info/js/pages/viagra/ [Pingback]
http://simplecanada.info/js/pages/13912893/ [Pingback]
http://easytravelcanada.info/js/pages/8/paxil/ [Pingback]
http://sevainc.com/bad_denise/img/7/nexium/ [Pingback]
http://easytravelcanada.info/js/pages/5/effexor/ [Pingback]
http://sevainc.com/bad_denise/img/11/ultram/ [Pingback]
http://sevainc.com/bad_denise/img/6/lexapro/ [Pingback]
http://easytravelcanada.info/js/pages/8/prilosec/ [Pingback]
http://sevainc.com/bad_denise/img/11/tramadol/ [Pingback]
http://easytravelcanada.info/js/pages/12/viagra/ [Pingback]
http://sevainc.com/bad_denise/img/1/celebrex/ [Pingback]
http://birds.sk/img/cialis/ [Pingback]
http://easymexico.info/images/img/viagra/ [Pingback]
http://easytravelcanada.info/js/pages/7/nexium/ [Pingback]
http://easytravelcanada.info/js/pages/9/prozac/ [Pingback]
http://sevainc.com/bad_denise/img/4/cymbalta/ [Pingback]
http://inatelevizia.sk/ad/img/viagra/ [Pingback]
http://sevainc.com/bad_denise/img/5/hoodia/ [Pingback]
http://sevainc.com/bad_denise/img/9/prozac/ [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/collin-farrell-sex-tape.htm... [Pingback]
http://odin.net/images/pages/35694472/stories-housewives-seducing-husbands-frien... [Pingback]
http://odin.net/images/pages/35694472/gay-greger.html [Pingback]
http://odin.net/images/pages/52807681/sexy-thai.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/penis-too-small.html [Pingback]
http://odin.net/images/pages/52807681/drug-test-shop-penis.html [Pingback]
http://odin.net/images/pages/35694472/sexy-pinup-girls.html [Pingback]
http://odin.net/images/pages/35694472/jenny-maccarthy-nude.html [Pingback]
http://odin.net/images/pages/52807681/naruto-hentai.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/99493954/foot-fetish-video-s.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/asian-massage-ct.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/oops-celeb.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/index.html [Pingback]
http://odin.net/images/pages/52807681/the-girls-next-door-centerfold.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/xxx-pictures-of-celebritys... [Pingback]
http://odin.net/images/pages/35694472/anglina-jolie-nude.html [Pingback]
http://odin.net/images/pages/52807681/red-hot-chilli-peppers-tell-me-baby.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/access-to-sex-web-sites.ht... [Pingback]
http://odin.net/images/pages/35694472/baby-got-back-by-throwdown.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/camping-naturisten-free-pi... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/underwater-girl-nude.html [Pingback]
http://odin.net/images/pages/52807681/teen-fashion.html [Pingback]
http://odin.net/images/pages/52807681/chimpanzee-sex.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/dress-up-online-games-for-l... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/adult-free-preview.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/free-sexualy-graphic-love-s... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/free-sex-positions-clips.h... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/pics-of-sexy-women-in-west... [Pingback]
http://odin.net/images/pages/52807681/buriram-bar-girls.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/taylor-hayes-free-pics.htm... [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/teen-trends-courtney-doll.h... [Pingback]
http://odin.net/images/pages/35694472/celeb-up-skirts.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/free-mature-bbw-porn.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/hentai-spider-man.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/inspirational-business-sta... [Pingback]
http://cidesi.com/images/metro/metro2/pages/99493954/chyna-porn-movie.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/99493954/animal-sex-bondage.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/nude-fake-celebs-pics.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/tylene-buck-bikini-movies.... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/oral-sex-instruction-pictu... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/bikini-dare-pics.html [Pingback]
http://odin.net/images/pages/52807681/sex-women-muscle.html [Pingback]
http://odin.net/images/pages/35694472/time-square-webcam.html [Pingback]
http://cidesi.com/images/metro/metro2/pages/32162341/old-film-girl-in-love-with-... [Pingback]
http://cidesi.com/images/metro/metro2/pages/99493954/cheerleader-erotic-stories.... [Pingback]
http://odin.net/images/pages/52807681/boys-and-girls-grinding.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/busty-ebony-retro-sylvia-m... [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/adult-swim-crest.html [Pingback]
http://odin.net/images/pages/35694472/gay-justin-berfield.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/53348735/st-pauli-girl-distribution... [Pingback]
http://cidesi.com/images/metro/metro2/pages/99493954/adult-porn-comic.html [Pingback]
http://gatewayplayhouse.com/photos/cai/pages/35807953/xxx-asian-anal-milf-free.h... [Pingback]
http://www.google.com/ig/add?feedurl=http://www.callerbase.com/ [Pingback]
http://callerbase.blogspot.com/ [Pingback]
http://www.wowgoldtricks.com/phone/areas [Pingback]
http://feedjit.com/stats/callerbase.com/toppages/ [Pingback]
http://friendfeed.com/ninjaomatic [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-soma-online.html [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-tramadol-online.html [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-valium-online.html [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-viagra-online.html [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-phentermine-online.ht... [Pingback]
http://www.signalprocessingsociety.org/community/forum/buy-ambien-online.html [Pingback]

Wednesday, October 17, 2007 10:07:08 PM (GMT Daylight Time, UTC+01:00)
Will you be publishing the source code for the project you used in the screencast? I would love to have a deeper look at it.
Jamal
Thursday, October 18, 2007 10:58:11 AM (GMT Daylight Time, UTC+01:00)
To release the code, I'd have to release my code generator tool as well...
So as long as people don't mind install a VS custom tool then OK :)
I'll try to get something online soon.
Thursday, October 18, 2007 11:18:28 AM (GMT Daylight Time, UTC+01:00)
Code is here:
http://www.aboutcode.net/files/SplitModel.zip

Custom VS tool that does code generation. Install this...
http://www.aboutcode.net/files/Equin.CodeGenerator.zip
Friday, October 19, 2007 1:58:54 AM (GMT Daylight Time, UTC+01:00)
Thanks Andrew
Jamal
Thursday, November 01, 2007 12:17:19 PM (GMT Standard Time, UTC+00:00)
Hi Andrew,

Thanks for the screencast and code; I've been taking a close look. The one thing I don't understand (I'm somewhat new to MVP) is why you send the model data back and forth? The app seems to work identically while transmitting far less data when I modify Equin.Modelbase.Async as follows:

//Dictionary args2 = new Dictionary("model", model);
Dictionary args2 = new Dictionary("model", new Dictionary()); // null threw an error

Maybe it's just the nature of the example you chose.

Thoughts?
Hugh Lynch
Hugh Lynch
Thursday, November 01, 2007 2:43:59 PM (GMT Standard Time, UTC+00:00)
Sending the model to the server allows state to be passed back and forth.
Consider a page where a user enters a table of items to buy. This list of "data rows" needs to be sent to the server. Rather than have a Save method with parameters, it seems more natural to implicitly pass the Model's fields.

Similarly, when loading data on the server, we want the values assigned to model fields to appear client side without a load of explicit code.

Note that you can "trim down" the data sent by overriding the BeforeXXX() methods.
Thursday, November 01, 2007 6:31:49 PM (GMT Standard Time, UTC+00:00)
Thanks for the reply.

It is definitely nice to be able to pass a compatible model back and forth, but passing the whole model with each call seems ungainly. Is the client supposed to re-render the full model after each call? Or compute a delta from its previous copy?

I wonder how hard it would be to use a checkpoint and delta design, where the client sends a delta (addItem("foo")) and a version indicator for the model (an int or timestamp). The server compares the version with its own, decides whether to apply the delta and returns an error or a list of deltas for the client to apply along with a new version indicator. In the normal case, the version would just increment and the list would contain just the delta sent. This typical response could be shortened to OK.

Regards,

Hugh Lynch
Friday, November 09, 2007 8:32:04 PM (GMT Standard Time, UTC+00:00)
really like what you are doing here...
The only thing that confuses me a little is
the whole support built in for passing the model around.
Since both javascript (client) and .net (server) are
capable of parsing xml (or json) documents and fragments,
why the extra effort? Is it a script# limitation
that you are trying to go around?




Wednesday, November 14, 2007 1:11:20 AM (GMT Standard Time, UTC+00:00)
Hey,

i really like what you have doen here. Gotta say that first.

But, i spent a week using the .net framewrk 3.5 and it has something simialr backed in with Ajaz.
Basically, you can take a SOAP Web Service, but expose it as a JSON service by just a declaritive attribute.
So its reflection based at runtime.
It also is able to generate the Model from the c# model as a Javascript object structure.
And it genertaed the proxy.
All this is reflection based and at runtime.
Bad points about it:
1. Its reflection based and not software factory based, so the comile time erros dont show.
2. Its slow because its reflection based.

Also, the first thing i thought of when i saw what you are trying to do was an i cant believe i am suggesting this is "DaatSets". Yes the old clunky containers fro years ago,. The thing about the Data Set was that it had the Difffram concept that basically allowed the Model to know that a line item had changed, and only send the change. You could hold the DataSet in the server session and then just do the old "DataSet.Merge()" in c# to merge in any changes.

Again, i am not suggesting this is a solution, but more cluching at straws of ideas that might help you.

Also, you probably know about Ext#. They too are using Script# to genertae javascript from c#.

And of course there is MonoRail in the Castle project.


Really like what you are doing here. Few people seem to really think about the mismatch that exists today, and if solved its a big big win. Please keep going on this. I want a framework to do this :)

And Nicky open source Script :) mate ...

ged
Tuesday, December 04, 2007 7:49:52 AM (GMT Standard Time, UTC+00:00)
Thanks for this learning !
Saturday, March 08, 2008 6:53:36 AM (GMT Standard Time, UTC+00:00)
Cool, the post.

Thanks for the information.
Comments are closed.