I got a few emails from users who are technical enough to ask a question related to how the data is stored within MockuTiger. The gist of the emails were "why not use XML for data storage?"

Here are some technical details before we deal with the question.

MockupTiger UI is fully coded in Javascript and HTML. There is no other technology or plugins used to render the widgets in the browser. It uses HTML5 Canvas for displaying all the objects. jQuery is the Javascript framework.

So when everything is done in Javascript it becomes natural to keep the data store as JSON

What I like about JSON

  • XML is too bulky compared to JSON
  • XML is too verbose. So many tags repeating just makes it difficult to read
  • JSON on the other hand is minimalistic.
  • There are no tags, just curly brackets and square brackets and semi-colon differentiate between the object types. Rest all is strings
  • A JSON string converts to Javascript objects
  • Modern browsers have native JSON support

So when I was deciding on how to store the data on the server, I had three options

  • Store the JSON strings as individual files
  • Convert the JSON to XML and then store it as files
  • Convert JSON so it can be stored as objects and attributes in the database.

Converting to XML was thrown right out the door. It just did not make any kind of sense.

JSON format is very open format, just open it in any text editor, read it or modify the values right there.

XML may be good for data-exchange but no longer it convinces to be an ideal data storage format.

I was against any kind of conversion process because it meant processing overhead both incoming and outgoing.

So ultimately I started saving the JSON in a .PHP extension file.

Here is how the PHP file looks with the JSON data contained inside the variables

Image

The component 'grid_table_d0' is defined inside using a variable $mobj and the whole object definition is sitting there as a text string which is simply a JSON string.

The benefits of using PHP

  • use "include" inside my main engine to have access to the entire object defintion
  • The array variable $mobj gives full access to the entire page defintion
  • Tech savvy users can use this php file for further integration into other applications of their choice
  • Easy documentation - just scan the array and dump it in a nice format, yes??
  • Implicit security -- How? Well, when you try to pull these object definitions by directly pointing using browser URL, they show up blank because there is nothing in the PHP script that is echo'd out to the browser.

So finally the current storage mechanism is

  • Store high level object definition in the MySQL database
    • Only the Page name is stored in the database table
    • The entire page details are stored as JSON strings contained in the PHP variables
  • FUTURE: Store the JSON strings as HTML5 localstorage

So do you think we still have a case open for XML?

Related posts:

  1. Cool things about MockupTiger
  2. Mockups update: Projects and Mockup save feature
  3. Javascript memory leaks – code cleanup
  4. Mockups – Personal Edition
  5. PHP API for member database

Posted in Internals, Other