Click here to Skip to main content
Click here to Skip to main content
Technical Blog

JsonR(aw): Lightweight JSON Protocol

, 21 Dec 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Lightweight JSON protocol proposal.

Lightweight JSON protocol proposal: JsonR(aw)

Update: 

  • GitHub
    • Now has a functional Client-Side JS deserializer
    • Added testbed/playground to see savings  
    • Added Sample Project (2012-12-22) ..Merry X-MAS  ! 
      • Includes: C# serializer, JS deserializer, Sample ASP.NET Website

Intro

At the beginning there was XML, and then came along JSON . Not only was it much lighter than XML by suppressing all those opening & closing tags, but it was also directly compatible with browsers being JavaScript at it's base. In the meantime we have gained lots of tooling & libraries to work with this great format, and browser vendors progressively started supporting it natively.

I however work on a site that consumes enormous amounts of Ajax data, and over 80% of those requests are returning collections of this & that. Immediately i thought of what a waste of bandwidth it was to be sending all those Key/Value pairs over the wire each time, when in reality the Values themselves could do just fine!

The proposal below is an advanced version of what i have been using for years now, and think it would be cool if everyone could benefit from it. When we implemented a simplified version of this, it cut our bandwidth by over 40%.

The Proposal

Simplified and lightweight protocol where key/value pairs are either separated and later recombined, or where keys can be completely omitted and later added via implicit casting or via a hint to the objects real type.

Gains are in the order of +102% to -1% per/object, and become more obvious in collections

JSON (classic) 156 chars

var object = {
    "Pseudo" : "Jason",
    "Age"    : 31,
    "Photos" : ["123.jpg", "222.jpg"]
    "Friends": [ 
           {
               "FirstName": "Bob",
               "LastName" : "Hope"
            },
            {
                "FirstName": "Foo",
                "LastName" : "Bar"
            }
    ] 
};

JsonR (Implicit) 77 chars

var object = [
    "Jason",
    31,
    ["123.jpg", "222.jpg"],
    [["Bob", "Hope"], ["Foo", "Bar"]]
];

JsonR (With Hint) 89 chars

var object = {
    Type  : "User",
    Values:[
        "Jason",
        31,
        ["123.jpg", "222.jpg"],
        [["Bob", "Hope"], ["Foo", "Bar"]]
    ]
};

JsonR (Without Hint) 153 chars

var object = {
    Keys:[
       "Pseudo",
       "Age",
       "Photos",
       {"Friends": ["FirstName", "LastName"]}
    ],
    Values:[
        "Jason",
        31,
        ["123.jpg", "222.jpg"],
        [["Bob", "Hope"], ["Foo", "Bar"]]
    ]
};

JsonR (Full Signature) 164 chars

var object = {
    Type: "User",
    Keys:[
      "Pseudo",
      "Age",
      "Photos",
      {"Friends": ["FirstName", "LastName"]}
     ],
     Values:[
        "Jason",
        31,
        ["123.jpg", "222.jpg"],
        [["Bob", "Hope"], ["Foo", "Bar"]]
     ]
};

P.S. If you are good with recursion in your language of choice, or would like to participate in any possible way. Then you are more than welcome to come and join the project being set up on GitHub right now.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Robert Hoffmann
Software Developer (Senior) Index Multimedia
France France
Internet & Technology related professional since 1994. Passionate about WEB 2.0 and Community/Social networking related type Websites, or anything that is tech related to bridging the gap between the User and his everyday Multimedia Experience.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Questionbad link? Pinmemberstefanveliki13-Dec-12 5:52 
AnswerRe: bad link? PinmemberRobert Hoffmann13-Dec-12 5:57 
QuestionExamples of usage Pinmemberstefanveliki11-Dec-12 5:06 
AnswerRe: Examples of usage [modified] PinmemberRobert Hoffmann11-Dec-12 5:32 
Currently i only have the simplified version (without recursion) i was talking about.
 
C# Server Side Collection Wrapper:
 
public class AjaxArray
{
	public AjaxArray(string[] keys)
	{
		Keys   = keys;
		Values = new List<ArrayList>();
	}
 
	public void Add(ArrayList item)
	{
		Values.Add(item);
	}
 
	public List<ArrayList> Values { get; set; }
 
	public string[] Keys { get; set; }
}
 
Response Server Side:
 
// Result = {"Values":[[31,"Robert"],[45,"Bob"]],"Keys":["Age","Pseudo"]}
public string GetUsers() {
	// Sample Collection
	var users = new [] {
			new { Age = 31, Pseudo = "Robert" },
			new { Age = 45, Pseudo = "Bob" }
	};
		
	// Ajax Response Start
	var response  = new AjaxArray(new [] {"Age", "Pseudo"});
	
	foreach (var u in users) {
		response.Add(new ArrayList() {u.Age, u.Pseudo});
	}
	
	
	return Newtonsoft.Json.JsonConvert.SerializeObject(response);
}
 

JS client side:
 
function merge(obj) {
	/// <summary>Merges a custom json array into a name/value json collection</summary>

	// Empty or missign object
	if (typeof (obj) === 'undefined' || obj == null) {
		return null;
	}
 
	// Nothing to merge here, return original object
	if (typeof (obj.Values) === 'undefined' || typeof (obj.Values) == null || typeof (obj.Keys) === 'undefined' || typeof (obj.Keys) == null) {
		return obj;
	}
 
	var out = [];
 
	jQuery.each(obj.Values, function (i, o) {
		out[i] = {};
		jQuery.each(obj.Keys, function (ii, oo) {
			out[i][oo] = o[ii];
		});
	});
 
	delete (obj.Keys);
 
	obj.Values = out;
	return obj;
}
 
Now just take the server response, pass it to merge(), and you get a key/value collection back .. 40% bandwidth saved Smile | :)
 

Like i said, this is a simplified version and it does not support recursion, but it does get the job done (the jQuery part is not needed at all either). Hopefully i'll be able to post an advanced version on GitHub soon, and will definitely update this article as soon as i have something more concrete to share.
 
Hopefully others will want to add their skills, and we can have a few implementations for different languages. In the end it's a simple concept, and we are still dealing with JSON Smile | :)

modified 11-Dec-12 10:44am.

GeneralRe: Examples of usage Pinmemberstefanveliki11-Dec-12 5:57 
GeneralRe: Examples of usage PinmemberRobert Hoffmann11-Dec-12 6:05 
GeneralRe: Examples of usage Pinmemberjibesh21-Dec-12 15:18 
GeneralRe: Examples of usage PinmemberRobert Hoffmann21-Dec-12 15:24 
GeneralRe: Examples of usage Pinmemberjibesh21-Dec-12 15:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411019.1 | Last Updated 22 Dec 2012
Article Copyright 2012 by Robert Hoffmann
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid