こんにちは。
よろしくお願いします。
弩.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分 **
