Why do Facebook, Twitter and GMail render all their data to the browser as JSON as opposed to HTML?

Question

If you login to Facebook, Twitter or Gmail and view source, you'll notice something very peculiar. All your Tweets and mail are rendered as JSON. There are no angle brackets. My guess is, this data is all dynamically rendered to the DOM. If you inspect any element on the page, you'll see tons of divs and other HTML elements. None of which was served in the original markup. The questions are:

1. Why would these 3 huge sites take time out to do this?
2. Wouldn't it be faster to just use HTML?
3. Is it to save on bandwidth since the JSON payload is smaller to serve than HTML?
4. Is it because these sites are heavily based on AJAX? My guess would be the former, but I have no idea. I'm not sure if you have to work for Google Twitter, or Facebook to know why this is, but this tactic is shared between the 3 sites, so I figure they have a common goal in mind. That makes me think it's more of a general thing.

Answer 1

There are several reasons for their design that are commonly applied:

1. As the previous answers mentioned, caching can be utilized in the browser and JSON payload is lighter
2. They are providing a clean separation between the service, the UI logic and data following the MVC pattern
   • JSON as a Model
   • JavaScript UI Widget as View that renders the data
   • Service layer as the Controller that provides the business logic/service that feeds into the UI Layer

3. API driven architecture and separation mentioned in point #2 above allow the company to provide multiple channels delivery without too much rework. Consider if we want to build Twitter App for Android:

   • JSON as Model stays the same, nothing needs to be rework here as the data is the same
   • We now will change the View from HTML to Android Native UI, in this case we will need to code the UI layer code
   • Service Layer as Controller remains the same and we dont' have to do anything here

   As you can see, this model provides a way for Google/Twitter to deliver into multi-channels without having to rewrite their logic. The same applies to Mobile WebView vs. normal Desktop WebView. All we need to change is the UI Layer and not the Data or Controller layer.

This is why they are taking time to think about the design and architecture it as such. A tight coupling between the data and presentation would require them to rework a lot of code in order to be delivered in multiple channels. It's not about JSON vs. HTML or just the web but more of an architecture decision that would allow them to deliver their content to multi-channels (iOS, Android, third party App, Mobile WebView, Desktop View, Desktop App, etc). What you see in their HTML source is the manifestation of their strategy in WebView channel.