I created this demo project for a couple of reasons. Firstly, at work I was on a backend engineering team that was primarily a Kotlin-based, but there was a chance that we’d have to start developing some web applications. There was an existing React application that was using NodeJS, but I had been hearing a lot of good things about using Deno to run backend Typescript applications. If you’re not familiar with Deno, it’s an alternative to NodeJS and is also built by the same creator as NodeJS. It seeks to resolve a lot of Node’s issues with a fresh new design.

Particularly, I liked the built-in safety of Deno. Unlike NodeJS, it requires you to grant permission to the application to initate network calls, read your environment files, or write to the filesystem. What’s more, a fair number of NodeJS libraries run all sorts of scripts on your system when you install them. If you’ve ever used NodeJS in its early days, it was common for a rouge library (library churn was just as common then as it is now) to do something unexpected to your system. Stories like this are still happening.

I decided to set a task for myself to see if it was possible to create an application that fully used Deno (so no Deno API backend with NodeJS still serving up a local dev version of the static assets). My other design parameter was to use plain React instead of Deno’s React like framework “Fresh”, mostly so that I could find out how much effort it would be to switch out the Javascript runtime. For the demo’s functionality I decided upon creating a web-based Kanban board–mostly as it would be something that I could use myself.

The end result was a self-contained application that runs fast and has a good developer experience. It definitely took a bit to get going, but once I got the skeleton of the project going I was having a lot of fun adding new features. In order to put React through its paces I decided that HTML5 drag and drop functionality was a must-have (no one wants to manually select a destination lane for each of their tasks). I used the library react-dnd-html5 to achieve this which made the drag and drop functionality really easy to setup.

The app was not without its challenges, the main one being that a lot of the applications are built in a way that is somewhat coupled to Node. For example, for CSS I wanted to use Tailwind, but there were some issues with one of Tailwind’ deps that expected it to be running on NodeJS. Luckily, I was able to create a near identical developer experience with WindiCSS instead, which is very similar to Tailwind in that it is also a functional CSS framework. Dependency management for packages that are normally managed with NodeJS was another difficulty. The application was originally written before Deno 2.0, which I’ve heard has been adding a lot of quality of life improvements for managing these libraries.