in Coding, Projekt

First steps with Ractive.js

During the summer I had a little bit of free time. I had no university courses, almost no on-going projects and was only working for two days a week. So I decided to build a small web app.

Since I was couriosly waiting for some grades to arrive in the online portal of my university, I decided to build a (mobile) app to check this.

I decided to build the app with Python on the server and some sort of JavaScript framework on the client. Many of my fellow students were talking about AngularJS, but I wasn’t sure if I should take such a big framework for my first steps (I never used a framework like this in JavaScript before). Then I stumbeled over this link on HN. It was about an Angluar-like framework called Ractive.js.

Ractive.js

Ractive.js provides two main features (in my opinion):

  1. It provides a two-way data-binding. This means that you can hand-in a JSON object and directly bind its attributes to HTML elements. So you don’t have to update certain HTML elements manually (e.g. via JQuery).
  2. It provides a template rendering. This means you can write HTML templates (as simple *.html files for example) with mustach-syntax and render them on the client via JavaScript. To develop single-page applications gets very easy with this.

The server part

First of all, I did the server part. I used a combination of twill and Beautiful Soup to parse the web portal of my university. This was (and still is) a little bit slow, but at least no big deal. Then I build a small API to access these via AJAX. I used this API later on to update my page. E.g. the call http://127.0.0.1:5000/grades would return a JSON containing all of your grads:

I have build similar APIs for your personal schedule, for our canteen and some more.

The client part

For the client part, I used Pure (CSS framework) and (of course) Ractive.js. This made my templates really short and gave me a good experience on both, classical browsers and mobil. Here’s the full template to render the grade-table:

I simply loaded the template (which is actually a *.html file) in my main-template. Afterwards I have it in a variable called gradesTemplate in this example:

Then I am able to render it, e.g. by adding an appropriate click-listener to a link. The listener will fetch some data via AJAX and render the templated (loaded before) with it:

I’m not completly happy with using JQuery, but to put it all together was quite easy.

The result

Here are some screenshot of my final version (it’s not running online and you would need an account of my university to use it, so some screenshot are the best I could provide).

The code

You can find the code on BitBucket:

Best regards,
Thomas Uhrig

  • Brian Bravo

    Thank you for sharing this! It’s given me insight into how I can use Ractive.js.

    Noob question: How are your model updates persisted to the server? Did you use ajax for this? Thanks 🙂

    • Thanks for your comment Brian! Yes, you can do this with AJAX. You would create a two-way-databinding (see http://docs.ractivejs.org/late…, so when somebody edits an input field, your JSON model would be updated. Now you can create a button to save and send your JSON to your server (do a POST or PUT). Seehttp://examples.ractivejs.org/… for an example how to listen for a submit button in RactiveJS.

  • Thanks for your comment Brian! Yes, you can do this with AJAX. You would create a two-way-databinding (see http://docs.ractivejs.org/latest/two-way-binding), so when somebody edits an input field, your JSON model would be updated. Now you can create a button to save and send your JSON to your server (do a POST or PUT). See http://examples.ractivejs.org/comments for an example how to listen for a submit button in RactiveJS.