Gillius's Programming

Pointing Poker

| No Comments

I developed a Pointing Poker backend and frontend web application (GitHub Page) that works well enough for an internal team to use. It requires nodejs on the backend. The front end was built with React.

I built it because I was frustrated with the performance and reliability of public servers, and because I wanted to learn more how to use React beyond a trivial tutorial. It's based on websockets, and all data is immediately replicated between all clients. There's no code to reconnect if the websocket fails or if websockets don't work, but it's worked without a single flaw within an internal network, which is how I've used it.

Thanks to Mischa Berlin for a submission allowing random name generation!

Read on for more details on the implementation.

I mostly followed an article on Medium by Michel Weststrate that I found from the immer documentation. Except, I decided that I still preferred to define domain-specific actions rather than use generic patches, so that the server retains full control over the semantics and conflict resolution.

This was also a project for me to learn React. So there's a little mix of styles in here, as I learned them. There's immer to handle immutabilty and mobx to handle notifications of state. I started the project trying to use no extra libraries, just to master React, but I quickly needed some "help" and introduced these half way through.

Suprisingly, one of the most difficult parts was to figure out how to share code between backend and frontend. Being new to JS development on both sides, I just assumed by using nodejs vs. something like Spring Boot on the backend I would get code sharing "for free". This was no where near as easy as I thought it should be. I struggled for a very long time trying to understand commonjs versus es6 modules, and why I needed babel for the backend when nodejs supports es6 modules, and why the es6 import works slightly differently in nodejs versus babel (from Create React App) -- and the difference no matter how trivial breaks the ability to share the exact same source file on front and backend. In the end I used Babel to transpile my es6 code to commonjs, which both nodejs (using 'require' and babel on frontend (using 'import') could consume, which seemed super backwards to me as the goal was to just use es6 syntax everywhere. I also wasn't stoked about having to introduce a code pre-processor for such a simple project. But in the end, once I got it working, it was very smooth since you can run "watch" with Babel to automatically transpile the code.

Leave a comment