#teppeis_sushi でクライアントサイドDDDについて発表した
#teppeis_sushiというイベントで、Faao - ドメイン駆動設計で作るGitHub Issue Client -という話をしました。
Electronやブラウザなどで動くfaaoというGitHubクライアントを書いていてそれの技術的な話です。 クライアントサイドでDDDを取り入れた設計になっていて、その設計や規約の作り方やそれを守る方法についての話をしました。
Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という無料から買える書籍では、ドキュメントとコードを同じ速度で成長させていくためにはドキュメントに対しても自動化が必要であるなど(コミュニケーションの話なども)が書かれています。
それらを参考にして、レイヤーの違反を自動的に見つけたり、Faao - UseCase architectureのようにコードからユースケースの図を自動生成したりなど、モデリングへのフィードバックループができるようにしているという話です。
#teppeis_sushi 前回も台風でしたね
— azu (@azu_re) July 4, 2017
Vue.jsでSSR
#teppeis_sushi vue.jsでSSR - k2wanko
— azu (@azu_re) July 4, 2017
- Firebase
- lambdaのようなものが増えた
- Node.jsが動くのでVue.jsのサーバサイドレンダリングができる
- Server-Side Rendering — Vue.js
- Firebase Realtime Database | Firebase
#teppeis_sushi Firebase裏がわにfastlyがいる
— azu (@azu_re) July 4, 2017
最近Electronでローカルプロキシを作っていてこまったこと - kyo_ago
#teppeis_sushi Reduxを使ってStateとドメインと二重管理してる感じ。DDDの恩恵をあんまり受けてない感じする
— azu (@azu_re) July 4, 2017
- クライアントとサーバで両方データがある感じ
- クライアントのデータはサーバのキャッシュにすぎないので嘘のデータに見える
- サーバへ送信するまでの一時的なデータであるならばそれは無理してモデル化するべきなのか
#teppeis_sushi クライアント側のデータだけで動くものなら意味があるのかもしれない。
— azu (@azu_re) July 4, 2017
クライアントサイドに嘘のデータを持っている感じる。
- クライアントのデータはキャッシュでしかないならば、サーバに比べてDDDの魅力がオチている
#teppeis_sushi ちょうどいいところ落とし所を見つけるの重要なのでは by TDDのDDD談
— azu (@azu_re) July 4, 2017
- ドメインの共有はIsomorphicで辞めたほうがいいかも
- ドメインはクライアントとサーバで異なる
- サーバから見たドメインは所有という概念がなかったりする
- クライアントとサーバのドメインはアクターが異なるのでドメインモデルも異なる。 なので、クライアントとサーバで同じドメインモデルを共有することはできないのでは
- サーバは「自分が持っている」という概念はないので
#teppeis_sushi クラサバ時代のおじさんたち「ようやくその境地にやってきたな」
— azu (@azu_re) July 4, 2017
#teppeis_sushi ユビキタス言語は共有していいけど、それ以外の共有は難しいのでは
— azu (@azu_re) July 4, 2017
大規模フロントエンドのDDD - 83
- 8人でやってるフロントエンドのチーム
- スキルレベルがバラバラ感
- Angular1だったものを2にする設計を始めた
「Just Angular!」 #teppeis_sushi
— Local Proxy (@kyo_ago) July 4, 2017
- 設計を担当して質問を受け付けるようになった
- 些細な質問なども殺到して個人が開発する時間がなくなった
#teppeis_sushi レビューが一人に集中。
— azu (@azu_re) July 4, 2017
@ 83
- 質問ルームをslackチャットに作ってそこでやってもらったら質問が分散した
- サーバのAPIを作ってる人とクライアントサイドを作って流人は別。
- コンテキストがそもそも違う。 そこで腐敗防止層としてのDDDを取り入れる
- サーバから渡ってきたものをリマップしてクライアント側に主導権を持てるように
- AngularはViewは決まってるけど、設計は別に決まってない。
- 無理難題が振ってくることがあるので、ngrxじゃなくて普通にrxをベースにして開発した
- モデリングをちゃんとやることでコピペコードは減る
#teppeis_sushi 「DDDとCQRSやってるよーいうと引かれる」
— azu (@azu_re) July 4, 2017
- 1画面を作るのに7 APIを叩く
#teppeis_sushi 「BFFを作ればいいのでは」
— azu (@azu_re) July 4, 2017
Faao - ドメイン駆動設計で作るGitHub Issue Client - - azu
- クライアントサイドでTypeScript + Almin + DDDでの開発
- Living Documentationについて
いいドキュメントは自動化されてなければならない #teppeis_sushi
— OKUNOKENTARO (@armorik83) July 4, 2017
最も良いドキュメントは必要になるまで読まなくて良いドキュメント #teppeis_sushi
— Yosuke FURUKAWA (@yosuke_furukawa) July 4, 2017
ESLintは良いドキュメント、エラーになるまで読まなくて良い #teppeis_sushi
— Yosuke FURUKAWA (@yosuke_furukawa) July 4, 2017
本の読み方 - t_wada
- 本は未来方向には書けなくて、過去方向にしか書けない
- 技術書を読むときは発刊された年数をちゃんと見る
- 特に翻訳本はやたらと古い場合がある
- DDD本はRailsが出る前に書かれたけど、翻訳はRailsのずっと後
- 絶版ショック
(トッパン|ピアソン)ショック、単に絶版、様々な要因でOOA/OODの書籍がほぼ死滅し、訳書が出るタイミングが遅かったDDD本だけがオーパーツのような存在になった結果、日本ではDDD ≒ OOA/OODになってしまったという奇妙な状況の背景の話をした #teppeis_sushi
— Takuto Wada (@t_wada) July 4, 2017
Rx6の話 - laco
#teppeis_sushi RxJS 6で何が変わるのかの話 https://t.co/XtDXct5F0m
— Laco (@laco0416) July 4, 2017
#teppeis_sushi bufferの挙動がfindのバグ経由でBreaking Change "rxjs/CHANGELOG.md at 6.0.0-alpha.0 · ReactiveX/rxjs" https://t.co/BXIRrMQmE0
— azu (@azu_re) July 4, 2017
- バグ修正によるBreaking Change
- Rxを拡張してるユーザーには影響がある
api.aiの話 - vvkame
聞けてなかった
2017年のフォームの話 - 会長
#teppeis_sushi 2017年のフォームの話 - 会長
— azu (@azu_re) July 4, 2017
- Reactでのformの値の管理 unctrolledとcontrolled
- FBとしてはcontrolledで管理して
- ちょっと複雑なフォームをやるとバリデーションが複雑化する => controlled推奨
#teppeis_sushi jQueryなどの昔ながらのバリデーションライブラリはunctrolledで作られてる。
— azu (@azu_re) July 4, 2017
#teppeis_sushi ちょっとまって!
— azu (@azu_re) July 4, 2017
2017年 いろんな所にstateがある。
どこにstateを保存するのが正しいの?
- React/Redux/永続化されたState
- どこで何を管理する?
- Twitterはハイブリット的な構造
- 入力中はコンポーネント、適宜Reduxへ
- ユーザー入力中に外からpropsで値がすり替わるとIMEなどで問題が起きるため
- 処理速度的にコンポーネントに閉じたほうが良いこともある
#teppeis_sushi 再生時間みたいなMediaを考えると処理速度的にはコンポーネントで描画は行って、ドメインに定期的に状態を反映する形
— azu (@azu_re) July 4, 2017
ES class fieldの話 - teppeis
#teppeis_sushi Symbolでやれることをsyntaxでやる意味がない。
— azu (@azu_re) July 4, 2017
- hard protectionは言語としてできることを目指すべき
- Reflectとかで闇雲見られるようにはしない
#teppeis_sushi 見えちゃうとお前ら使うだろ。使えないようにするのが正義
— azu (@azu_re) July 4, 2017
flutterの話
「Flutterを知らないおじさん達へ」 #teppeis_sushi
— Local Proxy (@kyo_ago) July 4, 2017
いつのまにかDartの話にすり替えるあくろすあざとい。 #teppeis_sushi
— OKUNOKENTARO (@armorik83) July 4, 2017
OS再実装したりブラウザ再実装したり…。 #teppeis_sushi
— OKUNOKENTARO (@armorik83) July 4, 2017
Web Packaging - jxck
- draft-yasskin-dispatch-web-packaging-00 - Web Packaging
- Webページを丸ごとパッケージングする Web Packagingとは - ASnoKaze blog
- ネットワークが遅いところで物理的p2pでサイトを見てるケース
- mhtmlみたいな
- データ・フォーマットなのでIETFへ
- ギリギリにGoogleから投げつけられてきた(いつもの)
#teppeis_sushi ネットワークが悪い国ではmhtmlをsdカードでやり取りしてる。
— azu (@azu_re) July 4, 2017
もっとカジュアルに共有できるようにしたい
- dispatchというWGで議論されて、どこで議論するべきなのかを決める
- WGができたら結構すごいことになるかも
- Service Workerの横つながりみたいな話がでてくるかも
- 次回のプラハ会議に注目
その他
#teppeis_sushi 未だに2年前と同じ話をしてる es module
— azu (@azu_re) July 4, 2017
- Nodeの進捗がよくわからない
- CSPとバグとお金
おわり
Big boss is watching you #teppeis_sushi pic.twitter.com/Yxz03NerJq
— Yosuke FURUKAWA (@yosuke_furukawa) July 4, 2017
おめでとうございます
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。