Dashbling - hackable React-based dashboarding

Me 2020 squarePosted by Pascal Widdershoven on 29-1-2018

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.

example-desktop

example

Head over to GitHub to learn more about Dashbling. A live demo is hosted here.
Creating your first dashboard is easy via the generator:

1
$ 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 2020 square

Pascal Widdershoven

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

Bij Kabisa staat privacy hoog in het vaandel. Wij vinden het belangrijk dat er zorgvuldig wordt omgegaan met de data die onze bezoekers achterlaten. Zo zult u op onze website geen tracking-cookies vinden van third-parties zoals Facebook, Hotjar of Hubspot. Er worden alleen cookies geplaatst van Google en Vimeo. Deze worden gebruikt voor analyses, om zo de gebruikerservaring van onze websitebezoekers te kunnen verbeteren. Tevens zorgen deze cookies ervoor dat er relevante advertenties worden getoond. Lees meer over het gebruik van cookies in ons privacy statement.