Single Page Applications for ASP.NET MVC

I want to introduce you to a new way of building Single Page Applications (SPAs) using ASP.NET MVC. There’s no new JavaScript framework to learn. You don’t have to write any JavaScript at all. All it takes is a sprinkling of magic dust provided by the Navigation for ASP.NET project to transform a razor view into an SPA. Read on to peek behind the magician’s curtain.

What’s wrong with the old way of building SPAs?

The current crop of SPAs use JavaScript templating libraries to render HTML on the client, causing them to exhibit some unpleasant symptoms

  • Slow to load The JavaScript must be downloaded and executed before any HTML can be drawn. First time visitors will experience the worst load times.
  • SEO-unfriendly The content is invisible to search engines because web crawlers are reluctant to execute JavaScript.
  • Narrow browser support Templating libraries limit support to modern browsers, with old machines being unable to perform the CPU-intensive somersaults client rendering demands of old browsers.

What’s different about the new way of building SPAs?

With the new way of building SPAs the rendering is done on the server. This gives it immunity from the above symptoms but what turns it into an SPA? The Navigation for ASP.NET project does by turning full page refreshes into Ajax requests that return only the changed HTML.

If it sounds simple that’s because it is. To prove it I’ve taken Gmail, the poster child of the SPA generation, and rewritten its core navigation in less than 100 lines of code and without any JavaScript.

An example navigation of clicking a message in a conversation is shown below followed by the corresponding tiny Json response string.

Navigating to a message in a conversation

{"Link":"/inbox/0/2?id22=o&id15=o","Title":"cupiditate molestiae natus voluptatum repudiandae et","Panels":{"message15":"<div class=\"open\">\r\n<a data-include-current=\"true\" data-navigation=\"refresh\" data-to-keys=\"id15\" href=\"/inbox/0/2?id22=o\">Kaylin Bradtke</a> <p>Dignissimos voluptatem vero vel aut harum suscipit dolor rerum. Et nesciunt vel repellendus. Laborum exercitationem qui ab maxime labore ad at maxime.</p>\r\n </div>"}}

Stay tuned because in upcoming posts I’ll lift the lid further on building SPAs with Navigation for ASP.NET.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s