<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

JSON LIBRARIES - PART I

Software Development, Software Solutions

By Justin Freeman

In my work as a consultant over the years, I have been fortunate to work with many technologies. One of my favorites is JavaScript. Back in the early days of image maps, JavaScript was a real chore, having limited functionality. As the years have gone on, however, JavaScript has emerged as a very helpful technology. One of the reasons is the extensive development of JSON libraries. If you are new to JSON, you know there are several JSON libraries to use. The big question usually is: which one should I use? I’m here to give an overview of some of the JSON libraries I have used over the years, and some helpful tips on deciding which one to use, and how to use it effectively.
The first JSON library I will talk about is Dojo since I’ve had the most experience with it.

SETUP

In the earlier version of Dojo, setup was a piece of cake. You included your Dojo files (uncompressed or compressed), added in your imports and you were off and running. Here is an example of what I mean.
[js]
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="dojo/dojo.xd.js">
// ]]></script>
<link href="<span class=" />dijit/themes/tundra/tundra.css" rel="stylesheet" type="text/css" />
<link href="dojo/resources/dojo.<span class=" />css" rel="stylesheet" type="text/css" />
<link href="dojox/grid/resources/Grid.css" rel="stylesheet" type="text/css" />
<script type="text/<span class=">// <![CDATA[
javascript</span>">// <![CDATA[
// ]]></script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.RadioButton");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.Dialog");
dojo.require("dijit.ProgressBar");
dojo.require("dijit.Tooltip");
dojo.require("dojox.layout.ContentPane");
// ]]></script>
// Start your dojo code here
[/js]
You put this in a tile and now you had Dojo ready to go for all your pages. It doesn’t get much simpler than that. In the latest versions of dojo, it is a little more complicated, as now it has been optimized for speed. Now instead of loading the entire library of Dojo, your JavaScript should only load the functions that you need.
[js]
<script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async: true"></script>
require(["dijit/form/Form", "dijit/form/NumberTextBox "],
function(Form, NumberTextBox){
// Start your dojo code here });
[/js]
In the end, this does make setup a little bit difficult in my opinion. However the speed improvements will definitely be beneficial to your application, especially if it is JavaScript intensive. USABILITY Dojo has everything but the kitchen sink for you to use. If you need to create data forms, it can do that. You need to post data via an AJAX request? It can also do that quite simply:
[js]
require(["dojo/request"],
function(request){
request.post("senddata.action", {
data: {form.toObject(“aform”) }).then(function(response){
console.log("response:", response); },
function(err){ console.log("error:", err); }); });
[/js]
This is actually one of the changes I like with recent versions of Dojo. The code is much simpler and easier to read. With Dojo, you can use events to have certain things triggered once a button or a link is clicked. You can also query the DOM very easily, manipulating certain elements of the screen depending on your needs. One of the more useful tools in Dojo is object stores. In my work with stores, they were used to back select boxes, tables and other html objects so they could easily be loaded and changed and, if necessary, data manipulation in tables. Here is an older example of Dojo with object stores:
[js]
dataJson = ; dojo.addOnLoad(function(){ agrid.setStore(new dojo.data.ItemFileWriteStore({data: dataJson})); }
[/js]
 
[html]
950px;margin-left: 10px;margin-bottom: 5px;border: 1px solid #000000" cellspacing="3" cellpadding="3"></pre>
<table id="agrid" style="width: <span class=;"></table>
<pre>
<b>Store Name</b> <b>Store Number</b> <b>State</b> <b>Zip Code</b> <b>Status</b>   //
[/html]
Here this function creates a table backed by some JSON. It also has a dojo.connect function which allows you to call any JavaScript function to either manipulate the data in that row or call out to another action in your web application and do something else. Object stores are very powerful and useful. They also don’t take a lot of code to use.

DRAWBACKS

As you can see, Dojo has just undergone a major transformation it terms of syntax and initial loading of the Dojo libraries. If you are new to Dojo, this won’t be an issue. However, if you had any experience with Dojo previously, they are some very noticeable differences. I have found it difficult to transition from the earlier Dojo versions to the current version. The syntax differences are very noticeable and I am sure they will get easier with time, but I don’t think it is an easy transition.
One issue I did have with the earlier versions of Dojo is the paging of a significant amount of data in dojo stores. The performance on this was dreadful and, in this particular project, we ended up paging the data on the server and making a call to the server each time for the data instead of loading all the data at once. I realized that the object stores were probably not optimized to handle large amounts of data. I am curious to see if the newer versions (most notable Dojo 2.0) will handle this any better.
In the end, I think Dojo is still a very powerful and very useable JSON library. I feel the syntax issues will go away with time and you will end up with a tool that will certainly help with your JavaScript development.

TAGS: Software Development, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts