Todon’tMVC

TodoMVC is a site that helps you choose between JavaScript frameworks, letting you pick the one with the smallest code base or nicest data-bind syntax, for example. But it doesn’t tell you which performs the best. So which one deserves the title of the fastest TodoMVC? None of them. They’re all slow…very…slow. Keep reading to find out why they’re so sluggish and for a new TodoMVC implementation that leaves them all scrabbling in its wake.

At first glance they look fast, many capable of adding 100 todos in less than a second. But from a user’s perspective this is a pointless measure because it takes a good few seconds just to type in the name of one todo. A more important metric is how fast the site loads on first visit. There’s plenty of research indicating that this is where the milliseconds really count and can mean the difference between keeping or losing a user. And this is where these JavaScript frameworks uniformly suck.

Quickest on the Draw

Why is getting initial content to the user the Achilles’ heel of these JavaScript frameworks? It’s because they use client-rendering, where the HTML is created using JavaScript. Before any HTML is drawn to the screen a substantial JavaScript file must be downloaded, parsed and executed. This can add seconds to the first visit load time. But we’ve already got a fast way of getting initial content to the user. It’s server-rendering, where the HTML is created on the server and returned fully formed in the first request.

But won’t disbanding these JavaScript frameworks in favour of server-rendering mean that performance will suffer for all actions other than the first visit load? Not if we use the Navigation for ASP.NET project which makes building server-rendered Single Page Applications easy. After the first load it uses Ajax to retrieve only the portions of the page that have changed and uses the HTML5 History Api to keep browser history working.

Which is the fastest TodoMVC? Navigation TodoMVC is the fastest.

When you’re considering how to build your next Single Page Application have a look at how good the server-render story is for your JavaScript framework of choice and then take a look at Navigation for ASP.NET.

Advertisements

4 thoughts on “Todon’tMVC

  1. I was a bit sceptical of this and I had a look at and when I checked the network tab of Chrome’s dev tools there was a lot of stuff being sent and received. Am I missing something?

    Like

    1. Always good to hear from a sceptic. The other TodoMVC implementations are offline samples, they don’t make any network calls. If you’re building such an app then my Navigation project isn’t suitable because it relies on the web server to generate the HTML.

      But most people aren’t building offline apps and if you converted the other TodoMVC implementations to store the data on the server they’d have an equal amount of network traffic.

      Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s