NHL Finns Project Update

elixirphoenixpostgresqldevelopmentpreactdigital ocean
NHL Finns site

I wrote about a side project, the NHL Finns site about 6 months ago. The site and the tech have been working great and I’ve been preparing some updates for the next season that starts tomorrow, October 3rd. Currently the live results page looks very uninteresting as the season hasn’t started yet.

I wanted to bring some more functionality that should be of interest to hockey fans. Some of them are:

NHL Finns site 1. Adding graphs to be able to visualise different stats
NHL Finns site 2. Showing statistics since 2010, not only the current season
NHL Finns site 3. Navigation between different game dates in the results section

Some things have been fixed and most likely some others broken:

  • Improved responsiveness on different screen resolutions
  • Make database operations even faster (by avoiding them) by caching using Cachex

Additional features are also in the pipeline. Some of these depend on the MySportsFeed feed data being updated:

  • Serving the site also in English
  • Player pages with stats and graphs
  • Player contract information with salaries
  • Draft picks
  • Your favourite feature?

Feed updates

A lot of the changes are based on updated data feeds from MySportsFeeds. The new version of the API is more consistent and it is easier to work with what comes to fetching and parsing data. There is also more data available, for example, related to player contracts and salaries. Even though I’ve been storing this data from the feed to the DB, it’s not exposed in the UI anywhere just yet.

Graphs and visualisation

I’ve been also looking into different graphing libraries that could be used to visualise stats while still keeping the site performance good. The shortlisted ones were in the end Chartist.js and Chart.js. Chartist was smallest file size wise but it required some extra work to get plugins working that are needed for some of the upcoming features. The plugin ecosystem was also not quite as extensive as for Chart.js, especially when using the charts in Preact components.

In the end I settled for Chart.js using the React wrapper (react-chart-2), which looks nice and is relatively fast to load. The site still loads faster than other sites like it but I’m not too happy about the extra 150kb that was added. There are only a few charts on the site at the moment but more will be added.

Not related to these libraries, but more as a generic comment, it’s crazy how quickly the bundle size increases when adding a library that depends on another library that depends on yet another library. I’m trying to avoid most of the cruft with the platform used on this and some other upcoming projects.

Summary

Elixir and the Phoenix Web Framework have been a solid base for this work. Code stays organised and easy to refactor when needed. The functional programming style makes it easier to reason about the code and its effects. Ecto, the most commonly used Elixir DB library is a pleasure to use and makes writing even complicated queries possible and also allows for raw SQL fragments when needed.

One of the main advantages of using Elixir and Phoenix is the performance. Seeing server response times like the ones below show the potential in the language and the web framework.

NHL Finns site

The upcoming Phoenix.LiveView feature could make building dynamic web sites much simpler. See the keynote from Chris McCord from ElixirCont 2018 (starts at about 11 minutes in although I recommend watching the whole keynote) or this post on The Level Journal for additional details. The feature is not yet complete/available but it looks like it could be the perfect solution for different kinds of dashboards updating live information. There might be some hiccups with some of the new feeds on the first days but otherwise everything should be ready for the season start.