Friday, September 12, 2014

Excursions in Javascript land: How the Libraries app for bookworm.gr was built

Javascript has always been somewhat of a black box to me, posing in my imagination more like an arcane art rather than a transparent language. Of course, given that it dominates the Web, i assumed it was more a lack of practice than an innate incomprehensibility of the platform. It was quite fortunate therefore that last week i got the opportunity to create my first web application, which also allowed me to use a Javascript library that i have been meaning to check out for quite some time - the Google Data API.

The app lives here. It provides a comprehensive list of public libraries in Greece, searchable by area. The site has been created by Thodoris Georgakopoulos with the purpose of promoting literature and readership in Greece, making the Libraries application a motivator for visitors to engage in reading suggested titles without going through the expense of acquiring the books.

The requirements for Libraries were quite straightforward. It had to make available a list of all known libraries in Greece, ordered alphabetically by location. It had to be searchable, again on the location field, with some ease of use features, like filtering by first letter. The single script that makes up the application can be found here.

Overall there were few, if any, software engineering challenges. The main requirement was that data should be available from and edited in a Google spreadsheet, which immediately made clear the need for access through the Google Data API. You can see the simple call to fetch the spreadsheet data in function fetchTable() which passes the result to the main rendering method. The Google Spreadsheet is a simple Google Drive document that has its permissions set so that anyone with the link can view it, but only specific users can edit it. This allows for embedding the link directly in the script and having no further hosting or processing requirements.

After the DataTable is received, it is iterated over and the data extracted and placed in a new table element with cells setup as the presentation layer expects them, including CSS classes and element onclick() methods. Unfortunately, there are some assumptions in place about the structure of the DataTable object returned because the API does not make available a method for retrieving the backing table or iterating over the data.

In order for search to be intuitive, the search box had to ignore accents and case of the input string. For that purpose, the search query and every text element in the database is normalized through the normalizeGreek() function, which simply does a regex replace of a list of characters with the corresponding non accented, lowercase counterpart. This also revealed another issue - the webpage, including the scripts, have to be served with the encoding explicitly set to UTF-8, otherwise the Greek characters contained are not rendered properly and the search function returns no results.

As for the rest of the application, the UI design is inspired by Thodoris and implemented by nevma, and the data was curated by Stella Kasdagli.

That's all it took, really, The script is evidently small and can probably be made smaller, including reducing the number of required loops over the dataset on every user event. Regardless, it performs reasonably well and utilizes hardly any bandwidth as is. It also proved a quite useful exercise in Javascript and JQuery, which hopefully will allow me to build better UIs for my upcoming data projects.

No comments:

Post a Comment