こんにちは。 よろしくお願いします。 弩.netといいます。 AngularとElixirの新しい関係について提案します。 私は、名古屋でプログラマーをしています。 家ではDartを、会社ではGoとTypeScriptを書いています。 今日切実に訴えたいのは最近のフロントエンドがまじで面倒くさいので Elixirで何とかしたいということです。 たしかに、部分的には便利になりました。 AnguarやReactを使えば手続きではなく変数でViewを管理できるようになりました。 例えば、bool値でメニューバーが開いているかtrue/falseで宣言すれば、 間違いなく画面でメニューバーが閉じたり開いたりします。 ** 1分 ** また、DartやTypeScriptなど型安全な言語で開発できるようにもなりました。 僕は名古屋出身だで、型安全な言語で開発しりんよとおばあちゃんに言われて育ちました。 東京都民の皆様も安心と安全を区別するのが得意なフレンズと聞いていますので、 ぜひ生JSを書くのはもうやめてDartやTypeScriptに移行していただきたいなと思います。 しかし、状態の管理という面ではまだまだ課題もあります。 一つの解決策としてReduxがあります。 しかし、安全性は高まりましたがコード量が増えたのでやはりまだ辛いです。 また、Rx的なものを使うという選択肢もあります。 全てをイベントストリームとして考えるというは良いアプローチだと思います。 しかし、知能に限界がある人にはなかなか使いこなせないです。 結局まだまだ辛いんです。 わかってくれる人 そこで僕は、状態とは何かについて考えました。 僕らが触れている状態には二種類あると思います。 サーバーから来たデータとユーザーが入力したデータです。 チャットのメッセージ一覧をサーバーから取得します。 そして、それに対して返信を書き込みます。 この時、「ありがとうございます」とインプットボックスに書き込む途中の ありがとうご　という変数、これも状態です。 ** 2分 ** フロントエンドのライフサイクルで考えると辛さのポイントが分かってきます。 まず、サーバーからデータを取ってきます。 それをローカルのモデルにキャッシュして それを表示します。 ユーザーが何か操作したら、モデルを書き換えます。 送信ボタンが押されたらサーバーに送信して その結果が取得できたらまた１〜５を繰り返します つまり、サーバーとクライアントに二つのモデルがあるんです これは少し前にバズってたAngularとReactについての対談です。 ここに 問題の核心をつくフレーズがあります。 MVCが二階建てになってるじゃないかと。 じゃあ、1階建てにしよう 僕が取り組んだのは社内リアルタイムチャットです。 チャットワークやスラックを使えばいいと思いますが、 特殊な社内システムと連携したり社内用語を入力補完して欲しかったりすることありますよね。そういうチャットです。 また、チャットメンバーは同一ネットワークにいるものとします。 ** 3分 ** こういう設計はどうでしょうか。 これはよくあるFluxの図です。 このViewの部分だけをブラウザで実装し、残りは全部Elixirでかけないか。 そこでPhoenixです。 具体的には、 まず、Viewは全てAngularで書きます。 WebSocketでPhoenixに接続します。 Phoenixでは全員のState、つまり、メッセージ一覧やあるユーザーのメニューバーが開いているかいないか、何番目のタブを開いているかをAgentで管理します。 ユーザーが何かをクリックしたり送信したりしたら、全てWebSocketでイベントを送信します。 PhoenixでStateを書き換えて最新のViewをWebSocketで配信します。 そして、そのデータをそのままAngularにわたします。 ** 4分 ** 1階建てになりました。 挑戦してみて良かったこととして、 開発時間はすごく減りました。 特にパターンマッチがあるためActionの解釈が楽でした。 まだやったことはないのですが、ホットコードスワッピングがあるためWebSocketを使ったアプリでもデプロイが簡単だと思います。 しかし、デメリットもありました まず、Elixirを書くのにVimの設定が大変でした。 また、まだ理由はわかっていないのですが、vagrant上で実行しても、つまりネットワークレイテンシがほぼゼロでもリクエストからレスポンスまで1秒近く待たされます。 ここは引き続き調査します。 Reduxそのものというライブラリがなかったので自分で書かなければいけないものも多かったです。 結論としては まだ時期尚早だと思いました。 でも未来は感じました。 ちょっとした社内ツールならOKという時代はきそうです。 ありがとうございました。 ** 5分 **

1. 社内ツールを作って得た気づき

2. AngularとElixirの
新しい関係
@isyumi_net 谷出陸

3. お前誰よ
名古屋でプログラマーしてます。
自宅 -> Dart
会社 -> Go/TypeScript

4. 問題提起
最近のフロントエンドまじ面倒くさい

5. 確かに便利になった
Angular or React
手続きではなく変数でViewを管理できるようになった

6. 型安全な言語
Dart
TypeScript

7. 状態の管理は依然、面倒くさい

8. 解決策１ Redux
安全になったのはいい
コード量が増えたのが辛い

9. 解決策２ Rx的なものを使う
全てをイベントストリームとして捉える
そこそこいい選択肢
頭使う

10. 辛い

11. わかってくれる人？

12. 僕らが触れている
状態とは
どのようなものか

13. 状態のスコープ
サーバーサイドからのデータ
例）チャットのメッセージ一覧
ユーザーの入力
例）チャットのインプットフォーム

14. なぜ辛いのか
Webアプリのライフサイクル
1. サーバーからデータを取ってくる
2. Modelにキャッシュする
3. 表示する
4. ユーザーの操作でModelを書き換える
5. サーバーに書き込む

15. つまり
真実が
サーバー
クライアント
二つある

16. フレームワーク対決！Angular VS React仮想パネルディスカッ
ション
https://html5experts.jp/yoshikawa_t/14459/

17. MVC二階建ての部分の引用
（4/1 編集 特に許諾とかとってないので消しました）

18. 1階建てにしよう

19. お題
社内で使うリアルタイムチャット
同じオフィス(=ローカルネットワーク)にいる

20. 提案

23. 具体的に
クライアントをAngularで書く
WebSocketでPhoenixに接続
Phoenixでは全てのStateをメモリ(Agent)で保持
ユーザーのイベントは全てWebSocketで送信
Phoenixで全員に最新のViewの状態を配信
WebSocketからやってきたデータをAnguarにそのまま渡す

24. 1階建てになった！

25. 良かったこと
開発時間の短縮につながった
パターンマッチがあるためActionの解釈がしやすかった
おそらくHot Code-Swappingが効いてくる

26. デメリット
vimの設定が大変だった
遅い
vagrant上で1000ms
EC2 東京リージョンにサーバーを置くと 1100ms
Redux的なものをElixirで手書きしなければいけなかった
ズバリそのものというライブラリがなかった

27. 結論
時期尚早だった
未来は感じた
社内のちょっとしたツールならOKという時代も来るのでは

28. ありがとうございました
Make Dartlang Great Again