SlideShare a Scribd company logo
社内ツールを作って得た気づき
AngularとElixirの
新しい関係
@isyumi_net 谷出陸
お前誰よ
名古屋でプログラマーしてます。
自宅 -> Dart
会社 -> Go/TypeScript
問題提起
最近のフロントエンドまじ面倒くさい
確かに便利になった
Angular or React
手続きではなく変数でViewを管理できるようになった
型安全な言語
Dart
TypeScript
状態の管理は依然、面倒くさい
解決策1 Redux
安全になったのはいい
コード量が増えたのが辛い
解決策2 Rx的なものを使う
全てをイベントストリームとして捉える
そこそこいい選択肢
頭使う
辛い
わかってくれる人?
僕らが触れている
状態とは
どのようなものか
状態のスコープ
サーバーサイドからのデータ
例)チャットのメッセージ一覧
ユーザーの入力
例)チャットのインプットフォーム
なぜ辛いのか
Webアプリのライフサイクル
1. サーバーからデータを取ってくる
2. Modelにキャッシュする
3. 表示する
4. ユーザーの操作でModelを書き換える
5. サーバーに書き込む
つまり
真実が
サーバー
クライアント
二つある
フレームワーク対決!Angular VS React仮想パネルディスカッ
ション
https://html5experts.jp/yoshikawa_t/14459/
MVC二階建ての部分の引用
(4/1 編集 特に許諾とかとってないので消しました)
1階建てにしよう
お題
社内で使うリアルタイムチャット
同じオフィス(=ローカルネットワーク)にいる
提案
AngulaとElixirの新しい関係
AngulaとElixirの新しい関係
具体的に
クライアントをAngularで書く
WebSocketでPhoenixに接続
Phoenixでは全てのStateをメモリ(Agent)で保持
ユーザーのイベントは全てWebSocketで送信
Phoenixで全員に最新のViewの状態を配信
WebSocketからやってきたデータをAnguarにそのまま渡す
1階建てになった!
良かったこと
開発時間の短縮につながった
パターンマッチがあるためActionの解釈がしやすかった
おそらくHot Code-Swappingが効いてくる
デメリット
vimの設定が大変だった
遅い
vagrant上で1000ms
EC2 東京リージョンにサーバーを置くと 1100ms
Redux的なものをElixirで手書きしなければいけなかった
ズバリそのものというライブラリがなかった
結論
時期尚早だった
未来は感じた
社内のちょっとしたツールならOKという時代も来るのでは
ありがとうございました
Make Dartlang Great Again

More Related Content

PDF
pact-jvmではじめるコンシューマー駆動契約
PDF
技術書へのいざない
PPTX
Introduction to JIT Compiler in JVM
PPTX
最速C# 7.x
PPTX
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
PDF
TDDのこれまで、そしてこれから
PPTX
C#で速度を極めるいろは
PDF
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
pact-jvmではじめるコンシューマー駆動契約
技術書へのいざない
Introduction to JIT Compiler in JVM
最速C# 7.x
Blazor0.6.0を用いたスクリプトレスWebアプリ開発の可能性
TDDのこれまで、そしてこれから
C#で速度を極めるいろは
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化

What's hot (20)

PDF
Swift 構造体の時代 #yidev
PDF
Jvm言語とJava、切っても切れないその関係
PDF
Riverpodでテストを書こう
PDF
hooks riverpod + state notifier + freezed でのドメイン駆動設計
PDF
Swift の可変値と不変値 〜 前回の続き(おまけ)〜 #cocoa_kansai
PDF
カッとなって作るpost-commit
PDF
『アプリケーション アーキテクチャ ガイド2.0』のガイド
PDF
これからの「async/await」の話をしよう
PPTX
.NET vNext
PDF
XP祭り2017 LT 「DevOps再考」(改題)
PPTX
Net fringejp2016
PDF
Bluetoothでgo!
PDF
プロトコル拡張の話? #WWDC21cafe
PDF
OpenCVをAndroidで動かしてみた
PDF
MakeGoodで快適なテスト駆動開発を
PPTX
C#の書き方
PDF
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
PDF
インフラエンジニアのお仕事(オンプレ)
PDF
Test like a team.
PDF
今日からできる!簡単 .NET 高速化 Tips
Swift 構造体の時代 #yidev
Jvm言語とJava、切っても切れないその関係
Riverpodでテストを書こう
hooks riverpod + state notifier + freezed でのドメイン駆動設計
Swift の可変値と不変値 〜 前回の続き(おまけ)〜 #cocoa_kansai
カッとなって作るpost-commit
『アプリケーション アーキテクチャ ガイド2.0』のガイド
これからの「async/await」の話をしよう
.NET vNext
XP祭り2017 LT 「DevOps再考」(改題)
Net fringejp2016
Bluetoothでgo!
プロトコル拡張の話? #WWDC21cafe
OpenCVをAndroidで動かしてみた
MakeGoodで快適なテスト駆動開発を
C#の書き方
サーバーサイドな人がフロントエンド技術と仲良くするはじめの一歩
インフラエンジニアのお仕事(オンプレ)
Test like a team.
今日からできる!簡単 .NET 高速化 Tips
Ad

Viewers also liked (18)

PDF
Error handling in Erlang and Scala
PPTX
Elixir-Conf-Japan-2017-session-ohr486
PDF
How to Become a Thought Leader in Your Niche
PDF
"16 Trends Shaping the Future of Ethical Leadership"
PPTX
Math Discourse colloquium with Dr. Lucianna de Oliveira and Ms. Judith O'Loug...
PPTX
1. la persona de pedro
 
PDF
Demystifying blockchain
PPT
Pos E-commerce e Marketing Digital
PDF
sharechart Technical Newsletter vol-2 issue-65
PDF
A Case Study in Attacking KeePass
PPTX
ところで皆さん、上司の承認を得るプレゼンが目的でよい?
PDF
Webinar B2B e-commerce
PDF
Conversion en negocios digitales: aprendizajes y acciones para mejorar la con...
PDF
البرمجة الزمنية لتركيب التكييف فى الفيلا Work progress program by getco
PDF
"Innovar compartiendo", Edusionat
PDF
パケットキャプチャの勘どころ Ssmjp 201501
PDF
Wikipedia and Libraries: what’s in it for you?
Error handling in Erlang and Scala
Elixir-Conf-Japan-2017-session-ohr486
How to Become a Thought Leader in Your Niche
"16 Trends Shaping the Future of Ethical Leadership"
Math Discourse colloquium with Dr. Lucianna de Oliveira and Ms. Judith O'Loug...
1. la persona de pedro
 
Demystifying blockchain
Pos E-commerce e Marketing Digital
sharechart Technical Newsletter vol-2 issue-65
A Case Study in Attacking KeePass
ところで皆さん、上司の承認を得るプレゼンが目的でよい?
Webinar B2B e-commerce
Conversion en negocios digitales: aprendizajes y acciones para mejorar la con...
البرمجة الزمنية لتركيب التكييف فى الفيلا Work progress program by getco
"Innovar compartiendo", Edusionat
パケットキャプチャの勘どころ Ssmjp 201501
Wikipedia and Libraries: what’s in it for you?
Ad

Similar to AngulaとElixirの新しい関係 (6)

PPTX
Elixirと他言語の比較的紹介 ver.2
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PDF
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
PDF
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
PPTX
TypeScriptからひも解く方向性
PDF
Drupal 8.4.x の core にみるフロントエンド開発の現状紹介
Elixirと他言語の比較的紹介 ver.2
サーバサイドエンジニアが 1年間まじめにSPAやってみた
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
TypeScriptからひも解く方向性
Drupal 8.4.x の core にみるフロントエンド開発の現状紹介

AngulaとElixirの新しい関係