Posts tagged jQuery
Big changes under the hood and a couple of minor ones above
A few weeks ago we pushed out an update to our APIs on our live instance of LORLS and this morning we switched over to a new version of our front end (CLUMP). The changes introduced in this new version are the following
- Collapsible sub-headings
- Improved performance
- Better support for diacritics
Collapsible sub-headings
Following a suggestion from an academic we have added a new feature for sub-headings. Clicking on a sub-heading will now collapse all the entries beneath it. To expand the section out again the user simple needs to click on the sub heading again. This will be beneficial to both academics maintaining large lists and students trying to navigate them.
Improved performance
In our ever present quest to improve the performance, both actual and perceptual, we decided to see if using JSON instead of XML would help. After a bit of experimentation we discovered that using JSON and JSONP would both reduced the quantity of JavaScript code in CLUMP’s routines and significantly improved the performance.
Adjusting Jon’s APIs in the back end (LUMP) to return in either XML, JSON or JSONP format was quite easy once the initial code had been inserted in the LUMP module’s respond routine. Then it was simply a matter of adding 4 lines of code to each API script.
Switching CLUMP to using JSONP was a lot more time consuming. Firstly every call had to have all it’s XML parsing code removed and then the rest of the code in the routine needed to be altered to use the JavaScript object received from the API. This resulted in both nicer to code/read JavaScript and smaller functions.
Secondly a number of start up calls had been synchronous, so the JavaScript wouldn’t continue executing until the response from the server had been received and processed. JSONP calls don’t have a synchronous option. The solution in the end was to use a callback from the function that processes the JSONP response from the server and with a clever bit of coding this actually enabled us to make a number of calls in parallel and continue only after all of them had completed. Previously the calls were made one after the other, each having to wait for the preceding call to have been completed before it could start. While this only saved about half a second on the start up of CLUMP, it made a big difference to the user perception of the systems performance.
Better support for diacritics
This was actually another beneficial side-effect of switching to JSONP over XML for most of our API calls. In Internet Explorer it was discovered that some UTF-8 diacritic characters in the data would break its XML parser, but because JSONP doesn’t use XML these UTF-8 characters are passed through and displayed fine by the browser. Of course we do sometimes find some legacy entries in a reading list, created many years ago in a previous version of LORLS, which are in the Latin-1 character set rather than UTF-8, but even these don’t break the JavaScript engine (though they don’t necessarily display the character that they should).