Dashbling - hackable React-based dashboarding

Me 2016 square

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:

  1. Write some data fetching logic in Ruby, schedule it to run every X minutes.
  2. Write some HTML, CSS and Javascript to make it visible.

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.

To improve this I decided to write a new backend to replace Dashing. I’ve long wanted to open source the React frontend but didn’t because it was too cumbersome to setup with a Dashing backend. By writing a new backend too I had the opportunity to create a nicely integrated experience where both the frontend and data fetching are implemented in Javascript and there’s no need to run multiple servers.

Enter Dashbling. Dashbling is a modern reimplementation of the core principles of Dashing. It’s a Node.js backend server (written in Typescript), with a React frontend and a Webpack build system. Both widgets and data fetching logic are written in Javascript and widgets can easily be shared via NPM modules.

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.

Happy dashboarding!

Me 2016 square

Pascal Widdershoven

Full Stack Developer • Github: pascalw • Twitter: @_pascalw

At Kabisa, privacy is of the greatest importance. We think it is important that the data our visitors leave behind is handled with care. For example, you will not find tracking cookies from third parties such as Facebook, Hotjar or Hubspot on our website. Only cookies from Google and Vimeo are used in order to improve the user experience of our visitors. These cookies also ensure that relevant advertisements are displayed. Read more about the use of cookies in our privacy statement.