JSON is “faster” than XML

Using JSON data in lieu of XML will make your Metro apps 46% faster!

It’s true.

Rendered JSON data is smaller than XML. Which means JSON requires less time to travel.

Even better, Windows 8 offers full support for JSON! Metro UI controls can be bound to JSON data. Also, common JavaScript functions, such as JSON.parse(), are natively supported. JSON is a first class citizen in Windows 8.

“But, I don’t have JSON data. I have XML data.”

Don’t worry – I’ll get to that.

The Facts

Using Fiddler, we will measure the resulting file size and network transfer time of an RSS feed in XML and JSON format. For our sample data, we’ll use the wildly famous, unbelievably spectacular and world renowned Internet show,  “The Metro Developer Show” </shameless plug>

Below, a screenshot from Fiddler depicting the network transfer times of our RSS feed in XML and JSON format. 62 seconds vs. 33 seconds!

XML – 62 seconds

JSON – 33 seconds

Of course, the above screen shots uses a theoretical network speed of 6KB/sec. This would never rarely happen. But it could. And why not code for the lowest common dominator!?

Let’s take a look at file sizes. Below, we see the resulting file sizes of the RSS feed in XML and JSON format. What a difference!

XML – 376,744 bytes

JSON – 201,529 bytes

Less data. Less time. Everyone wins!

How To Parse XML as JSON with 2 Lines of Code

Many of us avoid using JSON data because, simply put, we don’t have access to our data in JSON format. You will now! The below code snippet shows an XHR JavaScript request made by a Windows 8 Metro App coded in HTML5/JavaScript. The secret? We use Google’s API for AJAX as a conduit. We send Google our RSS feed URL and Google sends it back as JSON!!!

All we need is 2 lines of code. One line specifies the URL of our XML feed. The second line encodes our URL and concatenates it with the base URL for the Google API. Then we make our normal XHR request. Instant JSON data endpoint! Free, fast and highly available!

Obligatory Introductory Paragraph

Let’s face it – you aren’t going to read this opening paragraph. In fact, if you’ve gotten this far, congratulations. Most of you have clicked on the metro tiles below and returned to twitter, reddit, etc. For those of you who have – go to the next paragraph!

Myself and Chris Clark Sell, Microsoft DPE and man behind Metro Weekly, have been working to bring Windows 8 metro tiles to the web. The idea is to create fully functional, metro-like, Windows 8 tiles using HTML, CSS and JavaScript.  The project is creatively entitled “metro-tile” and can be found on GitHub.

We’re just getting started! I encourage you to fork it, refactor it, add to it, clean it, nuke it and submit pull requests. If you are new to GitHub (frankly, who isn’t) read,  “The quickest and easiest “Getting Started w/ GitHub” article you’ll ever read!”

Potential Use Case Scenarios

• Front and back tile support with data display & tile flip animation
• Data binding w/ Knockout.js w/ data provided by an ASP.NET Web API
• RSS Feed auto-parsing and display
• Drag and drop w/ auto arrange

Live Demo

Safari and Chrome only; IE10 *should* work but it doesn’t