KittoはElixir/Reactで開発され、ダッシュボードを作成するためのフレームワークです.
用途
例えば、ゲームサーバにおいて、Kittoは、SSE(サーバイベントフロー)を介して管理サーバに接続するサーバの動作状態指標を取得し、リアルタイムモニタリングの目的を達成する.
必要なテクノロジー

React.js

Elixir

インストール

mix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.2.3.ez

要求

Elixir: 1.3

Erlang/OTP: 19

Dashboardの作成

mix kitto.new 

配置
インストール依存

mix deps.get && npm install

サーバの起動

mix kitto.server

ゲージグリッド
Kittoは複数のダッシュボードをサポートする.各ダッシュボードはパス/dashboards/で示す.
1つのダッシュボードはReactコンポーネントを含むGridsterメッシュで構成されていますdashboards/sampleのディレクトリの下にダッシュボードのサンプルコードがある.
次のコードクリップは、ダッシュボードに簡単なテキストコンポーネントを配置する.

最も重要なデータ属性は次のとおりです.

data-widget使用するWidget.

を選択

data-source Widgetのデータソースを指定する.

.
ジョブmix kitto.new を使用して計器盤を作成すると、jobs/ディレクトリの下にいくつかのサンプルジョブが存在する.
ジョブ・ファイルの構造は次のとおりです.

# File jobs/random.ex
use Kitto.Job.DSL

job :random, every: :second do
  broadcast! :random, %{value: :rand.uniform * 100 |> Float.round}
end

上記のコードは、監視する(supervised)プロセスを生成し、このプロセスは毎秒1つのイベントを生成する.
Widgets widgets/のディレクトリにあるWidgetsはWebpackによって自動的にコンパイルされ、計器ディスクにロードする.
Widget例(widgets/text/text.js)

import React from 'react';
import Widget from '../../assets/javascripts/widget';

import './text.scss';

Widget.mount(class Text extends Widget {
  render() {
    return (
      

        
{this.props.title}
        
{this.state.text || this.props.text}
        
{this.props.moreinfo}
      
    );
  }
});

各Widgetは、data-sourceの属性で指定するソース更新データを用いる.
配置
プロジェクトのコンパイル

MIX_ENV=prod mix compile

製品環境用のリソースのコンパイル

npm run build

サーバの起動

MIX_ENV=prod mix kitto.server

プロジェクトには2つの例が付属しています

http://localhost:4000/dashboards/sample

http://localhost:4000/dashboards/jobs

ディレクトリ構造

assets-すべてのダッシュボードで使用されるJavascript、CSSファイル.webpack.config.jsファイルを参照して、それらがどのようにロードされているかを理解します.

dashboards-ダッシュボード情報を記述するための.html.eexファイル.

jobs-データ検索の実現.Widgetsにデータを提供するための.

.

lib-Jobが使用するElixirモジュール.

widgets-各WidgetのすべてのHTML、SCSS、Javascriptはここに置かれています.