AJAX/JSON API minification?

Question

Many JSON / RESTful APIs have long and verbose key names that amount to most of the bytes making up the file.

For example, from Twitter's REST API:

"profile_sidebar_border_color": "DFDFDF",
"profile_sidebar_fill_color": "F3F3F3",
"profile_text_color": "333333",
"profile_use_background_image": true,
"default_profile": false,
"default_profile_image": false,

Doing this also requires that those names be used in the client files.

For development this is nice, but for production it seems like it would be profitable to send the data with minified (single-letter) keys from the server, then re-inflate on the client.

Done right, this could cut several thousand bytes in the minification of a large client library and more than 50% in the API.

Do library or solutions exist for this purpose?

Answer 1

The gzip & DEFLATE algorithms already work that way. They should already exist in the server layer & every major web browser, respectively.

The difference is that they don't only use single letter keys like "a" or "b" or "c" with JSON. They use a full ASCII table map, which doesn't use JSON. It uses other ASCII characters in addition to a, b & c, like tab, CR, LF, ACK, BEL, etc... Some of the characters look like hearts, clubs, diamonds, spades, smiley faces, etc... They further optimize JSON by using only 1 of each of these characters {}[]:", instead of repeating characters in JSON: {{"a":"1","b":[2,"blue"]},{"c":"3"}].

We don't need to run a JS library to use them. The web server may need to be setup to enable gzip compression, but from what I remember reading a long time ago, DEFLATE is already enabled in each browser by default. It will automatically be used when gzip'd data is detected.

Here is a quick overview of how they work: The HTML + CSS + JS characters are compressed into dictionary maps by the web server, using gzip. So each character would only be represented one time each in that map. Only the dictionary is sent over the wire. The original source code isn't sent. The dictionary knows how to unroll itself, back into the original source files. So it doesn't use any JS mapping keywords nor functions, which oftentimes appear in any CSS or JS .map files.

When the DEFLATE algorithm is used by the browser, it will unmap (decompress / inflate) each dictionary back into a readable HTML, CSS or JS stream. On the client, the browser displays the decompressed version of the dictionary map. That's what we read in various web inspecting tools, using the F12 key. It's a seemless compression / decompression process, which we don't normally see. The DEFLATE keyword can sometimes be seen in the header responses from the server.

Check to see if your web server already uses the gzip & DEFLATE algorithms. The LZ77 & LZ78 back-story is a fun starting point for seeing how high speed communication is possible in today's society. It seems like all of our minification & compression technology (for Internet webpage code, plus image file formats, plus broadcast cable TV, plus cell phone tower data transmission, etc...) is built on that research. Gzip is simply the freeware version of LZW, where LZW is used in Adobe Photoshop .tif files. For a "light read", here is a copy of the original IEEE LZ77 whitepaper.