Thursday, August 9th, 2007

JSPON Browser: Persistent JSON

Category: JSON

Kris Zyp have released a JSPON browser, a free, open-source tool for browsing and manipulated JSPON persisted object graphs/data sources. JSPON is a JSON extension for robust access and manipulation of persisted objects that includes definitions for how to support object and array identification, referencing, lazy loading/partial graph transfer, object modification, prototype definition, and more. The JSPON specification can be found at

Try out the JSPON browser, learn more about JSPON, and view some examples within this persisted object graph. I recommend that you try out the JSPON browser with Firebug net monitor, ieHTTPHeaders or your favorite net monitor so you can see what data is transferred as you traverse object graphs and manipulate the data, and gain an understanding of how JSPON works. This url connects the browser to one of my JSPON data sources, but the browser can connect to any data source that might provide JSON data according to the JSPON specification. The following properties of the root object from the example url illustrate some of the major aspects of JSPON:

  • types – Just the different types of values that can be transferred with good ol’ JSON: string, boolean, number, array/list, object, and null. This includes a real dat a object (defined by JSPON).
  • referencing – This demonstrates how identification/referencing allows circular referencing and multiple references to single objects. This is a graph of the Doe family, and the properties refer to the family members by relation, but since the objects are referenced not just copied, the graph can be infinitely recursively drilled down, and it is still the same objects being accessed.
  • lazyLoading – Lazy loading can be seen when drilling into any part of the persisted graph that has not been loaded yet. Properties can reference data that has not been loaded yet and you can see how values are loaded into the graph as needed. JSPON provides definition for the identification and lazy endpoints so this client browser can provide lazy loading for any JSPON data source.
  • inheritance – This is an object that is defined to inherit properties from another object. This object is inheriting from the object referred by the type property. In other words the object with the id of dyna/107650 (note: all objects have an implied URL) has a prototype or delegate that is the object with the id of dyna/107653. If a property is changed or added in the delegate object, they will be reflected in the instance object, unless the instance object defines that property. In this case the stringField property is defined in the instance and all the other properties are inherited from the delegate object. The basis property refers to the delegate/prototype object. The browser provides coloring to help know what is inherited and what is not.
  • modifiableData – This object has been defined by the server to be publicly modifiable, so you can create and modify objects on my server. You can go ahead and add new properties and modify values in this object. You can delete properties if it looks like there are plenty of other ones, but please refrain from deleting all the properties, we want to keep it fun for everyone. You can modify properties and watch your HTTP traffic to see how the object modifications are sent back to the server. You can view the headers (the Access-Level header) to see how the definitions for access levels is transferred to the client from the server. Of course, a server shouldn’t and this server doesn’t count on the client to enforce the access levels, but maintains its own securit y as well.
    • structuredObject – This object has a structure definition, in the structure property (provided that no one has deleted it, it is publicly modifiable), and it is defined to allow only a string value in the stringOnly field, and only a number in the numberOnly. You can try to change value of the numberOnly property to have letters in it, and it should complain.
  • crossDomain – The browser supports the JSON-P protocol for cross domain transfer, so this persisted object graph actually spans domains, and references objects from another host within the graph. Of course, the usual warnings about using cross-domain dynamic scripts applies, you don’t want to use the browser to connect your high-security objects with an untrusted source using JSON-P, but rather use a proxy, but in this case the foreign host is one of my own domains (, so it is trustworthy. This property refers to a list of persitent objects that represent the pages on my site. Having persisted object graphs that span domains can make mashups have a much more consistent object model.
  • differentSources – This object references JSPON objects that represent different source mediums. There is an SQL database (HSQL), an XML file, and an RSS source. The server can expose all of these data sources as JSPON, and they can even be modified using the JSPON browser, and server can make the appropriate SQL updates, or XML file changes (OK, the RSS isn’t modifiable, and you can’t modify any of these data sources, because I haven’t given you that access level). This demonstrates the flexibility of JSPON as persistence protocol for different mediums of data (and it also demonstrates the capabilites of the Jsponic server that is used). If you want access to modify the SQL tables, or the XML files, let me know, and I can set you up with an account.
  • perseverePreview – This is all built with my soon-to-be-released Persevere Ajax persistence framework which maps remotely persisted data to JavaScript objects in the browser with orthogonal persistence. This property refers to a persisted function object that gives a little preview of the capabilities, and uses the persistence mapped objects to access a persisted property ( When accessing properties, the framework will transparently perform lazy loading through JSPON of any data that has not been transferred. Then the function sets a new value in this.modifiableData.randomNumber . This value is automatically persisted to the server and should be available if you come back to the page later (if someone else hasn’t changed it). Since the data is mapped to JS objects, you can also look at this object graph in JS debugger (like Firebug). Add a watch for the global variable “rootObject”. The debugger won’t be capable of lazy loading, but you can see everything that has been downloaded.

JSPON Browser

Posted by Dion Almaer at 11:05 am

3.5 rating from 38 votes


Comments feed TrackBack URI

how about client-side persistence with DOM Storage or Google Gears?

Comment by carmen — August 9, 2007

Well, the main idea of JSPON is provide a means for remotely mapping persistence to a server, since virtually all web apps are primarily based on persistent information on a server (such as in databases). Client storage doesn’t require any communication and is generally for the purpose of offline usage. Now as for the client framework (Persevere), it is designed to do JS object mapping via a JSPON implementation, but I would love to add the ability to alternatively do JS object-relational mapping to a Google Gears databases sometime. With object mapping that worked with JSPON or google gears, persistence could be done to the client or server with zero API/code differences.

Comment by Kris Zyp — August 9, 2007

Hi Kris, you can take a look on the Gears ORM developed by Uriel Katz:

Comment by Andrés Testi — August 9, 2007

Kris, congrats on getting this out the door! Kris showed this to me at the Ajax Experience show and told me about the interesting work he is doing around this stuff.

Brad Neuberg

Comment by Brad Neuberg — August 11, 2007

Leave a comment

You must be logged in to post a comment.