Transmitting a huge amount of data from a Web server to the client [closed]

Question

I'm starting a new project that will render a complex graph using HTML5 canvas.

Currently, we have a Windows Forms implementation and we want to migrate it to the Web. So, the layout, the drawing objects and all drawing metadata are generated in C#. We only need to implement the drawing, and we will use HTML5 canvas.

The server side will be ASP MVC. It will calculate the drawing model, and will send it to the client. Then the client will use the canvas to represent the data.

The problem is that the drawing model sometimes could be huge. Maybe 10Mb-50Mb of metadata. What is the best way to send all drawing data from the server to the client?

Use the model to an script in the page that creates the drawing objects in JavaScript

This would be the standard way. I will generate a model with the drawing objects in C# and then I will convert those objects to JavaScript.

• PROS: Easy to implement
• CONS: The page will be heavy.

Returning a JsonResult from controller that return the drawing data

I could get it using jQuery, for example. This option failed because I reached the maxJsonLength property. I know that it can be changed in the web.config but it doen't seem to be a good idea. 3.

• PROS: Easy to implement, could use ajax to load drawing objects from the server and report progress to the user.
• CONS: Doesn't seem to be a good idea changing the maxJsonLength property in the Web.config.

Generating a temp script file with the drawing data in server and including it in the client page

The server will generate the drawing data in a JS script file. Then the server will include this page as a JavaScript in the client page, so the drawing data will be loaded in the client. This load could be done using ajax also.

• PROS: Is like download a file, if it's very big it will not be a problem.
• CONS: More difficult to implement. Need to manage temp files and we need to know when the file has been transmitted and then delete it.

Other alternative

Any other options will be welcome, since I'm not an expert in HTML programming.

Answer 1

I think somewhat different approach I will take. I will use servicestack, here I am assuming that you have your business tire separated. Now, instead of canvas I ll go with backbone js or angular js. There are quite a few other frameworks for UI generation. Now, using require js like library I push only that details that are needed for UI generation or push HTML with UI that is needed for UI. So, here speed will be more and page will be light weight. Once minified Javascript come to client it will not load but used only to calculate and render html portion on page. And single page application will be as fast as desktop. Almost that much. I hope this is useful to you. I have added links if you need more details please let me know.