The Neuronen Schmiede concerns itself with topics related to software development. One focus are robust web applications.

Datsu - An Open Source Ember.js Darts Calculator

Permalink

For the impatient: Datsu demo, frontend repository and backend repository.

A few weeks before christmas 2014 Hannah Langhagel gifted the edgy circle office a custom made dart board in the shape and style of the company logo including nine darts.

The gift was well received and we discovered that darts is an excellent and fun game. We started using dartrechner.de to keep track of our games. Unfortunately the custom made dart board started to disintegrate around two thousand thrown darts and we had to order a real one.

In addition we were very unhappy with the darts calculator we were using. Its design and usability were subpar and we had to play “double out”, meaning you have to hit one of the smaller segments on the outside to finish a game. And to be honest we were, and still are, not good enough to play it that way.

At that point I decided to build an darts calculator for our own needs. The result is called Datsu and you can use it to keep track of your own darts games or just play around. There are also open source repositories for the Ember.js frontend and Laravel 4.2 backend on GitHub.

I’m certainly not a designer but I try my best to create nice looking things even when I’m on my own in a project. After looking at existing darts calculators, settling on a vocabulary, finding a color scheme and making some sketches in my notebook I opened up Sketch 3. With the help of a grid consisting of columns and baselines I came up with a design I would call reasonably good looking for my skills.

As mentioned in the headline Datsu is built with Ember.js. Ember CLI makes it really easy to start new Ember.js projects. Since I didn’t want to create a custom backend I convinced myself to try Firebase.1

Creating the actual dart board in SVG was a fun exercise and reminded me how awesome SVG is. Wiring it up in the end with an Ember.js component was an easy task. Getting to a state where I could use Datsu was in general pretty straightforward up until to the point where I decided it was time to write tests.

At this point I removed Firebase from the project and started writing my own backend. Writing tests with an Firebase backend is impossible unless you are willing to do one of three things:

  • Let your tests run against Firebase directly which makes them slow and requires constant internet access.

  • Create a fake Firebase server from scratch that you can use in your tests.

  • Use an entirely different adapter for you models like RESTAdapter or ActiveModelAdapter while running the tests so you can use established solutions like Pretender.

Since I was not willing to do any of those things I started writing my own backend in PHP with Laravel 4.2. The reason why I picked PHP instead of Ruby, which I normally use for all of my backend projects, is rather simple. I can only run simple Ruby scripts on my webspace from Host Europe. So instead of setting up a custom server for Datsu I bit the bullet and saw Laravel as another experiment to broaden my horizon.

Turns out Laravel is pretty great apart from PHP and all its issues. I even discovered things where it is ahead of Ruby on Rails in terms of out of the box experience. Once I had the backend up and running my attention turned back to the Ember.js application.

I spent a lot of time adding animations and handling slow connections. Explaining all that goes beyond this posts scope which original was “tell the world about Datsu”. If you have specific questions or want me to write an follow up on certain topics tell me on Twitter or by email.

  1. I would never do that in a serious project, handing over all your application data to a third party where you have no control over it is a no-go. Even more so since Firebase is a Google thing.