How to deploy a Kitto dashboard on Heroku?

Kitto provides detailed instructions in the wiki for Heroku deployment. You need to set up a Heroku app with Elixir and Node.js buildpacks, then push your code. The guide covers configuration, asset compilation, and scaling.

Kitto or Grafana for monitoring dashboards?

Kitto is better for custom, interactive dashboards with real-time updates using Elixir and React, while Grafana is optimized for time-series data with built-in integrations. Choose based on your tech stack and whether you need flexibility or out-of-the-box solutions.

Can I use TypeScript with Kitto widgets?

The README doesn't mention TypeScript support; widgets are in JavaScript with React. You might need to manually configure Webpack to add TypeScript, which could introduce complexity and is not officially documented.

How to create a new widget in Kitto?

Add a new directory under widgets/ with a JavaScript file that imports React and the Widget base class. Define your component and reference it in the dashboard HTML using the data-widget attribute. The Webpack setup automatically bundles it.

Does Kitto support authentication for dashboards?

The core framework doesn't include authentication features. You'd need to implement it separately, such as at the web server level or by extending the Kitto application, which adds development overhead.

What's the performance impact of Kitto's SSE on the server?

SSE is lightweight for one-way streaming, but with many concurrent clients, it can increase memory usage. Kitto's Elixir backend helps manage this efficiently due to its concurrency model, but scaling requires monitoring.

Open-Awesome

kitto

MITElixirv0.4.0

An Elixir/React framework for building real-time, interactive dashboards with supervised jobs and React widgets.

Visit Website GitHub

959 stars54 forks0 contributors

What is kitto?

Kitto is an open-source framework for building interactive, real-time dashboards. It uses Elixir for backend job processing and React for frontend widgets, allowing developers to create dashboards that stream live data efficiently. It solves the problem of building scalable, maintainable dashboards with real-time updates.

Target Audience

Developers and teams needing to build internal or public-facing dashboards with live data, especially those already using or interested in Elixir and React.

Value Proposition

Developers choose Kitto for its combination of Elixir's concurrency and fault-tolerance with React's UI flexibility, offering a robust, scalable solution for real-time dashboards that is easy to deploy and monitor.

Overview

Kitto is a framework for interactive dashboards written in Elixir

Use Cases

Best For

Building internal team dashboards with live metrics
Creating real-time monitoring dashboards for infrastructure
Developing public-facing data visualization dashboards
Prototyping dashboards quickly with React components
Deploying dashboards on Docker or Heroku
Streaming data to multiple clients with Server-Sent Events

Not Ideal For

Teams not already using or willing to adopt Elixir and React
Projects needing only static or infrequently updated dashboards
Applications requiring a full-stack web framework beyond dashboard functionality

Pros & Cons

Pros

Supervised Job Reliability

Jobs run as concurrent, supervised processes with exponential back-off on failures, ensuring robust and fault-tolerant data fetching as highlighted in the key features.

Efficient Real-Time Streaming

Uses Server-Sent Events to broadcast updates to multiple clients with low memory and CPU overhead, enabling scalable real-time dashboards without heavy resource usage.

Modern Frontend Development

Widgets are built with React and assets are bundled via Webpack, providing a component-based UI with a contemporary toolchain for interactive visualizations.

Easy and Flexible Deployment

Supports deployment on Docker, Heroku, Distillery, and systemd, offering multiple options that simplify production setup across different environments.

Cons

Technology Stack Barrier

Requires proficiency in both Elixir for backend jobs and React for frontend widgets, creating a steep learning curve for teams new to these technologies.

Limited Application Scope

Focused solely on dashboards, it lacks features for general web application development, making it unsuitable for projects needing broader functionality.

Additional Build Step

Production deployment requires compiling JavaScript and CSS assets with Webpack, adding complexity and potential points of failure in the build process.

Open Source Alternative To

kitto is an open-source alternative to the following products:

Dashing

Dashing is a Sinatra-based framework for building real-time dashboard applications that display key metrics and data visualizations.

Frequently Asked Questions

Related Projects

phoenix

Peace of mind from prototype to production

A declarative, extensible framework for building Elixir applications.

Stars2,403

Forks388