Phoenixとは、ElixirのWebアプリのフレームワークで、自動的にアプリのひな形を作ってくれます。特徴的なのは、公式ドキュメントでは、オートリロードを簡単に行えることが紹介されています。これは、たとえばチャットアプリなんかに便利そうです。例えば、Lingrというチャットサイトがありますが、このLingrは、ブラウザを自らリロードして新しい投稿を読み込まなければなりません。ここで、Phoenixの特徴は、リロードキーを押さなくても、新しい投稿が見られるので便利ということですね。
Mithrilは、「VirtualDOMを採用したデータバインディング型JavaScriptフレームワーク」というものらしいです。ご指摘があったので修正しました。
ここでは、Node.jsのBowerを使ってインストールすることにします。ちなみに、Bowerとは、RubyでいうところのGemfileのような働きをするツールのことで、最近ではよく使われています。私自身、例えばサイトを作る際にも、ライブラリのインストールと組み込みは、このBowerを使うことが多いです。インストールする依存ライブラリやツールをbower.jsonに書いて、bower installします。Bootstrapなんかもルートにbower.json置いてあったような気がしますね。忘れましたが。
それだけbower.jsonを使って依存関係と必要なものを書き出すようにしている開発者は多いです。
さて、基本的な説明が終わりましたので、実行するコマンドを見ていきます。まずはテンプレートの作成と必要な物のインストール手順です。
#phoenixでテンプレートを作成
$ mix phoenix.new ./chat_phoenix
$ cd chat_phoenix
#bowerでライブラリのインストールと依存関係の書き出し
$ npm install -g bower
$ bower init
$ bower install mithril --save
ちなみに、今回は、既にサンプルアプリを作成している方のコードを参考にしながらアプリを見ていくことにします。写経に近いです。
https://github.com/niku/ff_stack_chat_example/
すごく分かりやすいです。ありがとうございます。
# lib/chat_phoenix.ex
$ cd lib
$ curl -O https://raw.githubusercontent.com/niku/ff_stack_chat_example/master/lib/chat.ex
$ diff chat.ex chat_phoenix.ex
1c1
< defmodule Chat do
---
> defmodule ChatPhoenix do
11c11,13
< supervisor(Chat.Endpoint, []),
---
> supervisor(ChatPhoenix.Endpoint, []),
> # Start the Ecto repository
> worker(ChatPhoenix.Repo, []),
13,15c15
< # worker(Chat.Worker, [arg1, arg2, arg3]),
< worker(Chat.LoginUser, []),
< worker(Chat.Message, [])
---
> # worker(ChatPhoenix.Worker, [arg1, arg2, arg3]),
20c20
< opts = [strategy: :one_for_one, name: Chat.Supervisor]
---
> opts = [strategy: :one_for_one, name: ChatPhoenix.Supervisor]
27c27
< Chat.Endpoint.config_change(changed, removed)
---
> ChatPhoenix.Endpoint.config_change(changed, removed)
# web/static/js/app.js
$ cd ../web/static/js
$ curl https://raw.githubusercontent.com/niku/ff_stack_chat_example/master/web/static/js/app.js -o app_tmp.js
$ diff app.js app_tmp.js
#---省略
# web/channels/room_channel.ex
$ curl -sL https://raw.githubusercontent.com/niku/ff_stack_chat_example/master/web/channels/room_channel.ex
#---省略
$ curl -O https://raw.githubusercontent.com/niku/ff_stack_chat_example/master/web/channels/room_channel.ex
コードはこんな感じになってます。
次に、Phoenixで作られたプログラムをElixirでプレビューしてみます。GitHubのRepositoryをCloneしてそのまま使えます。この際、ルートにあるpackage.jsonが使われます。
$ git clone https://github.com/niku/ff_stack_chat_example
$ cd ff_stack_chat_example
$ nmp install
$ mix deps.get
$ mix phoenix.server
$ iex -S mix phoenix.server
--------------------------
$ curl -sL localhost:4000
参考:
こちらのブログ記事も本当に分かりやすく書かれています。素晴らしいです。