ASP.NET server-side logic and client-side 2D visualization with HTML5

Question

I am doing some research for a project that is kicking off soon and would like some input on what options I have here.

Basically, this is more or less how it should work: The user should be able to draw certain shapes, like polygons and based on different properties, such as position etc. of the shapes, calculations are being performed on the server side and the results are sent back to the client.

I have a .NET class library that contains class representations of the shapes (circle, polygon, lines etc.) as well as all the calculations needed. All this is wrapped up in a project class and serialized into a database because the user should be able to login, save his work, load it at another point in time and continue.

All drawing should be done on the client using HTML5 Canvas and JavaScript and the business logic, such as calculation are done on server side. The issue that I need to resolve here is the two-way communication and sharing of complex (polymorphic) objects between the client and the server and I would like to avoid having one .NET shape-class and one JavaScript shape-class because it results in redundant code.

One possible solution would be to serialize & deserialize the classes into JSON. However, the classes contains quite alot of data (most of which is not interesting for the client) and means alot of data transfered back and forth. This could be resolved using DTO classes but then I am back at having two classes containing common information.

Are there any other solutions/techniques to go for here? Anyone have any experience with this type of problem?

Thanks in advance.

Answer 1

Given that you're using ASP.NET (not MVC), I think adding DataContract / DataMember attributes to your existing .NET classes would be the way to go, along with a client-facing WCF service. That way you can serialize existing classes into JSON, but still select which properties get serialized.

If you're not familiar with data contract/ WCF/ AJAX stuff, this site has some good jumping-off points: http://wcf.codeplex.com/