Pascal Widdershoven – 29 January 2018
561 words in about 3 minutes
At Kabisa, we’ve been using Dashing for years for internal dashboards that are displayed throughout the office. I’ve always loved Dashing because it just provides simple building blocks that allow you to do anything. The process of getting information on a dashboard is as simple as:
- Write some data fetching logic in Ruby, schedule it to run every X minutes.
It’s just code. As a developer, I love this. Many dashboarding tools out there exist that allow you to drag and drop widgets on a page and connect it to ‘data sources’, but truth is data comes from many different places that all have their unique APIs and structures. Being able to write some simple code and have all the flexibility that comes with that is very powerful.
One problem that Dashing has is that it has began to show it’s age. Especially it’s frontend, written in Batman.JS and Coffeescript running on Sprockets is no longer on par with modern development stacks like React with ES2015+ and tools like Webpack.
About a year ago I needed to make some changes to the dashboard again and did not want to bother with Coffeescript and Batman.JS anymore so I decided to rewrite the frontend in React and Redux.
From a frontend perspective it worked really well. Defining widgets with React components is a delight and Redux makes it easy to feed data from the SSE (Server Sent Events) stream into the components. Besides that having a Webpack based build setup is awesome compared to the Sprockets setup that comes with Dashing out the box.
Now this approach was not without it’s drawbacks. We kept using the Dashing Ruby backend for data fetching which was rather cumbersome as you had to run 2 servers to develop the dashboard. Besides that the data fetching and widgets feel very detached, since they’re written in completely different languages.
Data is pulled in at regular intervals, streamed, or pushed into the dashboard via a REST API.
It looks great out of the box, but can be fully adapted to your taste using CSS or Sass.
The default layout is Flexbox based and fully response.
Head over to GitHub to learn more about Dashbling. A live demo is hosted here.
Creating your first dashboard is easy via the generator:
$ yarn create @dashbling/dashboard ~/Code/my-dashboard
I’d love to get your feedback. Feel free to ping me or create an issue on GitHub if you have any questions.