Clientside JavaScript goodness

July 29, 2011

As part of the hiring process to a certain company, I was asked to create a basic RIA (Rich Internet Application), with the primary focus on the client side (there doesn’t even have to be any actual communication with the server – all data can be created as mock data inside the js). Feeling a bit inspired, I decided to document how I went about it. First off, the assignment stated that if I use HTML5 for storage, I’ll get bonus points. I think I should lose points for using it, since it appears it’ll make my life so much easier. HTML5 allows you to save data on the client end, either for the current session (i.e the current window/tab) or for the entire time the user’s browser is open (i.e. across all pages in your domain). No need to send data back to the server or use other hacks. Yes, a cookie does the exact same thing, but a cookie’s “destiny” (and as a result – its size and robustness) is to save small stuff, like preferences or a user ID (which entails going back to the server for additional data. Every time, on every page). HTML5 lets you save almost any data structure inside a mapped data structure (a dictionary). Now obviously this raises quite a few security concerns. But you just have to think a bit about what you decide to save on the client side. Since this is a “mock” project, that will not be an issue. So first things first, let’s set up a quick web site. I’ll use Google WebAppEngine – it’s fast and easy. So you can see what I did here. We also need somewhere to host the code. Google to the rescue once more. Since my server side is going to be meaningless (I only load static HTML pages, with no content provided from the server), I better see how to configure app.yaml so it’ll route my urls properly:

application: apple-of-israel version: 1 runtime: python api_version: 1 handlers: – url: /stylesheets static_dir: stylesheets – url: /static static_dir: static – url: /js static_dir: js – url: /index static_files: static/index.html upload: static/(.*) – url: /employees static_files: static/employees.html upload: static/(.*) – url: /.* script: helloworld.py

this configuration means that when I navigate to localhost:8080/index – I get referred to my index.html file. The same for employees. For now I left the helloworld routing – which means that localhost:8080/ routs to a phython script, which prints an html of hello world. I could have used that routing to create my html in python, but that just seems silly, and also defeats the purpose of taking the load off the server and having the client do all the work. The static redirection is needed for hrefs inside the html pages that link to other static html pages in the site. The stylesheets redirection is needed for when my html pages request the css file inside the stylesheets folder. “Which css?” you ask? The one I got for free here. The js folder routing is for javascript files. obviously. OK, let’s attempt and store some data between pages using our newfangled HTML5. We’ll add this code to index.html:

<script type=”text/javascript”>

sessionStorage.setItem(‘userName’, ‘tom’);              // defining the session variable

alert(“Your user is: ” + sessionStorage.getItem(‘userName’));   // accessing it

alert(“Hello ” + sessionStorage.userName);                   // another way of accessing the variable

</script>

and the following code to districtNorth.html:

<script type=”text/javascript”>

sessionStorage.setItem(‘userName’, ‘tom’);              // defining the session variable

alert(“Your user is: ” + sessionStorage.getItem(‘userName’));   // accessing it

alert(“Hello ” + sessionStorage.userName);                   // another way of accessing the variable

</script>

Well, that was pretty easy. So I am now able to move around different static HTML pages, and I also have a local datastore. Awesome. Time to create my mock data, find some cool javascript libraries and start using and manipulating that data. Well, the mission mostly required me to display a list of people who pick apples in different sectors of Israel. The actions which a user could perform were listed. So naturally, I started with creating mock data of bunch of apple pickers.

Late edit – due to having to finish the task on time, I kinda stopped writing about what I’m doing at this point. For some reason I haven’t published this post right away (probably felt ashamed at not documenting the entire process).

also , if anyone is interested in knowing – I got the job 🙂

Advertisements