𝍌 Single Page Application with Riot.js
3 min read

𝍌 Single Page Application with Riot.js

𝍌 Single Page Application with Riot.js

To practice what we have learned in the module 'Web Technologien 3' we completed a web application project. The goal was to create an issue tracker with:

  • Responsiveness in look and feel
  • Persistent Issues (localStorage)
  • Load from and save to a server (REST)

Mockup

This is a mockup to show the visible feature set of the issue tracker. It is not meant to be a screen design, we were free to design the application. For example, we were free to display the priorities of the issues in a way that we would think is good user interaction.

Mockup with feature set

HTML / CSS Prototype with Web Server

When starting with a new front end application, it is sensible to create the markup first and style it before you start adding any client logic.

So we looked at the mockup and added our ideas of how the issue tracker should be structured. We wrote the markup in HTML and styled it using a CSS style-sheet in a separate file. Since we wanted to save time and did not want to come up with our responsive design we used Bootstrap. No Functional logic were implemented in this milestone.

To serve our static mockup we used the web framework Express to create simple web server.

const path = require('path'),
  express = require('express'),
  app = express(),
  port = process.env.PORT

app.use('/', express.static(path.join(__dirname, 'public')))

app.listen(port, () => console.log('listening on port ' + port))

Logic

To make the issue tracker a functional application, we needed to add the missing logic. To convey what we had to do, this milestone was broken down into specific use cases with user stories.

Use Case: Adding and mutating Issues within the project

  • As a user, when I have selected a priority, given a date, entered an Issue title and have clicked "Create Issue", I want the new issue to appear in the issue list.
  • As a user, after I have created a new Issue, I want the input fields to be cleared.
  • As a user, when clicking the check-box of an Issue, I want the "completed" state of the Issue to be toggled.
  • As a user, when clicking the "trash" icon, I want the Issue to be deleted.

Use Case: Persisting data to the Browser

  • As a user, I want the project's data to be saved to localStorage.
  • As a user, when I refresh the browser (or close and re-open the tab), I want all previously entered data (that is projects and issues) to be loaded from localStorage for instant feedback.
  • As a developer, when creating a new Issue, I want a new UUID to be created and saved as client_id.

RiotJS

To implement this front-end as a reactive Single Page Application we used RiotJS.

It offers:

  • Custom tags
  • DOM Expression binding
  • Dynamic updates
  • Passing Options
  • Mounting tags
  • etc.

RESTful API

Persisting data to a server

Many web applications offer persistence to a back end. The issue tracker is no exception. We used a modern approach and persist the application's data in a RESTful manner.

UML diagram of Database

Issues User Stories

  • As a user, when creating an Issue, I want a new Issue to be created through the RESTful API in the scope of the current Project.
  • As a developer, after having created an Issue through the RESTful API, I want to save the id in localStorage to the existing entry with the UUID so that in the future I can reference the correct Issue.
  • As a user, when editing or deleting an existing Issue, I want this mutation to be reflected through the RESTful API in the scope of the current Project.
  • As a user, when clicking the check-box of an Issue, I want the "completed" state of the Issue to be toggled through the RESTful API.
  • As a user, when clicking the "trash" icon, I want the Issue to be deleted through the RESTful API.
  • As a user, when reloading the page, I want the Project id to be loaded from localStorage, so that a RESTful request can be made to load the Issues from the back end.

Deployment

Now that our front end application is feature-complete. It was time to put it on the Web, so everyone can start using it!

Our Result

We deployed the issue tracker on Heroku. Check it out here.