Yosami

Yosami とは Mithril.js をベースにした SSR + SPA のフレームワークです。

Mithril.js といえば軽量＆高速のフレームワーク(参考: 最速MVCフレームワークMithril.jsの速度の秘密)ですが、
その Mithril.js をコアに使用して軽量＆高速の恩恵を受けつつ、Railsの基本理念「DRY原則とCoC原則」に沿ってコードを書けるようにした、いわばMithril on Railsです。

今回は Hello! World 的なプロジェクトを作りつつ、yosamiの触りを少しだけご紹介します。

想定環境

node 9.x 以上をインストール済み
- 記事の執筆環境 (debian9.0 / node9.2.0)

インストール

たった数ステップでインストールは完了します。

# インストール先ディレクトリの作成と移動
mkdir example-yosami && cd example-yosami

# yosamiパッケージのインストール
npm init -y && npm install --save-dev yosami

# yosamiのインストール
./node_modules/.bin/yosami

インストールが完了するとこのようなrailsみ漂う構成になります。

ページを作る

railsで言うrails g scaffold的なコマンドで、ページを作っていきます。

npm run generate controller hello

Hello! Worldを表示するためのコントローラ、ルート、ビュー、テストなどが自動的に定義されます。

起動してみる

早速、下記コマンドで開発サーバーを起動してみます。

npm run dev

http://localhost:3001/hello にアクセスすると先程作ったhelloページが表示されます。

環境によっては初回コンパイルに時間がかかります。

本番サーバーで起動

次は SSR + SPA で動作する本番サーバーを起動してみます。

npm start # `npm run build && npm run prod` と同等

アクセスしてコードを確認すると、タグがレンダリングされているのを確認できると思います。

本番サーバーはキャッシュ機構や、js/cssの圧縮、CSSを自動でインライン化する仕組みが含まれており、PageSpeed Insightsで高得点を狙える構成になっています。

この最適化手法は、過去に関わったいくつかのプロダクトで使用しており、GTMなどの集計用のタグが含まれていても高得点を叩き出しています。

(外部ベンダーの集計用タグがなければ100点取れてます。)

ページを書き換えてみる

もう少し Hello!World らしいページにしていきます。

ちなみに、開発中は開発用サーバーを立ち上げてください。JSはLiveReload、CSSはHMRで修正が自動反映されます。

表示内容とタイトルの変更

app/views/controllers/hello.js を編集します。

module.exports = function(controller, pipe, _yield) {
  pipe.title = 'YOSAMI PAGE';
  return (
<div class='controllers/hello'>
  Hello! yosami
</div>
  );
};

pipeで上層レイヤー(views/controllers/appliation.js)にデータを渡してタイトルを変更しています。

ルートの編集

/ でページが表示されるように config/route.js を編集します。

TrackRouter.configure(() => {
  get('/', {to: 'hello', as: 'hello'});
});

スタイルの修正

app/assets/styles/controllers/hello.scss を編集します。

.controllers\/hello {
  color: #333;
  font-size: 24px;
  font-weight: bold;
};

上記の変更を加えて http://localhost:3001/ にアクセスすると修正が反映されていることを確認できると思います。

クリックで挨拶を出す

Hello! yosami をクリックしたら挨拶を出し、挨拶の回数を表示するようにしてみます。

ビューモデルの編集

app/view_models/controllers/hello.jsに、挨拶の回数を保存するgreetingsアトリビュートを追加します。

module.exports = class Hello extends ApplicationViewModel {
  static definer() {
    name('hello');
    accessor('greetings');
  }
}

コントローラの編集

app/controllers/hello_controller.jsに、挨拶の表示と回数をカウントするgreet関数を追加します。

module.exports = class HelloController extends ApplicationController {
  static definer() {
    name('hello');
  }

  greet() {
    alert('Hello!');
    this.vm.greetings = (this.vm.greetings || 0) + 1;
  }
}

ビューの編集

app/views/controllers/hello.js に、onclickイベントの設定と挨拶の回数を表示するコードを追加します。

module.exports = function(controller, pipe, _yield) {
  pipe.title = 'YOSAMI PAGE';
  return (
<div class='controllers/hello' onclick={controller.greet.bind(controller)}>
  Hello! yosami
  <p>{ (this.greetings || 0) }greetings</p>
</div>
  );
};

修正が完了したら Hello! yosami をクリックしてみましょう！

うまく動いたでしょうか？
ここまでの内容はこのコミットになります。

今後について

最後までお付き合いありがとうございます。

今回は本当に触り程度の内容でしたが、ドキュメントを書きつつ、機能紹介の記事を書いていければと考えています。

もしよろしければお試しください

yosami-framework/yosami

Rails風のJavascriptフレームワーク「Yosami」を作った