Django & RiotJs - part I

I've wanted to learn a javascript frontend framework for some time now and looked at Angular, React and VueJs, but didn't quite get the hang of any of them. Much of my programming experience is based on how a programming language, library or framework makes me feel and none of these tickled me in the right places.

In the search for a javascript counterpart on the clientside I got a bit dizzy of the size of some of these JS-frameworks and the fact that almost all of them made such heavy use of node.js on the server side and in development. I wanted to use Django for the server side and include my javascript the old fashioned way. At least in the beginning. So I searched for minimalistic frameworks and came across RiotJs. It doesn't have as much documentation as the others and there are not as many youtube-tutorials either, but RiotJs is minimalistic so there is less to learn as well. It tickled me - in several of the important places.

After some small experiments I created a project that actually solves an actual problem for a local skateboardclub my son is part of. And the following project describes some of my findings using django and riotjs in a project.

This is ripped right out of the of the project on GitHub


A base project for a django rest framework based API with a RiotJS-based client-side.


Local testing

git clone
cd django-riotjs-base
python -m venv venv
source /venv/bin/activate
pip install -r requirements.txt
python migrate
python collectstatic
python runserver

Go to localhost:8080

Docker testing

git clone
cd django-riotjs-base
docker-compose build
docker-compose up

Go to localhost


  • Django
  • Django Rest Framework
  • RiotJs (Frontend javascript)
  • Axios.js (Ajax calls)
  • Swagger & Core API (API documentation/testing)
  • Materialize CSS (Stylesheet based on Material Design)
  • jQuery for all-things Javascript
  • Docker setup with docker-compose and PostgreSQL database and nginx as proxy for easy testing and deployment.


  • localhost:8080/index : a simple view using riotjs and a custom web component/riot-tag.
  • localhost:8080/api/core-docs/ : Core API documentation
  • localhost:8080/api/swagger-docs/: Swagger API documentation
  • localhost:8080/api/ : root of the example API

Future plans

  • Different kinds of authentication and user registration using api
  • Frontend/client in seperate node.js-based project
  • Websockets or pusher integration to avoid pulling to get updates from the server
  • Make much of the same in other clientside frameworks to get experience.
  • Look at Materialize RiotJs-based components allready available and integrate them.


0.1.0 : Initial release

Show Comments