Micro Frontends の理論と実践 - #AWSDevDay Tokyo 2018

マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018 2018年11月2日に行われたAWS Dev Day Tokyo 2018での講演「Micro Frontends の理論と実践
 -価値提供を高速化する真のマイクロサービスのあり方-」のまとめです。 資料はこちら。 https://speakerdeck.com/nobuhikosawai/the-theory-and-practice-of-micro-frontends
0
qsona @qsona

クライアントサイドはマイクロサービスの恩恵を受けているのか?という問いかけから。 #AWSDevDay

2018-11-02 15:22:48
藤井崇介 @ZooBonta

Micro Frontendsの理論と実践 テンション高め。 #AWSDevDay

2018-11-02 15:23:21
qsona @qsona

技術異質性、各サービスごとに別の技術を使えるというのはもちろん、技術的負債を引きずりにくいという意味がある。 #AWSDevDay

2018-11-02 15:26:22
藤井崇介 @ZooBonta

フロントエンドモノリス=バックエンドはマイクロサービス化されているのに、フロントエンドはモノリシック #AWSDevDay

2018-11-02 15:28:10
qsona @qsona

実際に IKEA, Spotify などが Micro Frontends に取り組んでいる。 #AWSDevDay

2018-11-02 15:31:18
ひぃ @mr_hisa_child

UI合成するための解決手法はiframe、またはWebComponentsがある。 #awsdevday

2018-11-02 15:32:38
城陽人 @minamijoyo

マイクロフロントエンドはバックエンドがコンポーネント単位で画面返す。JSONじゃなくてWebComponetsで返す。 #AWSDevDay

2018-11-02 15:34:15
qsona @qsona

温まったところでおもむろに会社紹介w #AWSDevDay

2018-11-02 15:35:00
qsona @qsona

技術異質性 & 合成可能性 に意味があったので Micro Frontends を取り入れたという話。実際に、現実にある問題を解決している。 #AWSDevDay

2018-11-02 15:38:32
Motonori Iwata @mobcov

あー、なるほど。htmlのbuild&deployタイミングが依存してくるのか speakerdeck.com/nobuhikosawai/… #awsdevday

2018-11-02 15:40:50
qsona @qsona

Micro FrontendsにおけるCache Bustingの話。ビルドが分かれているので、jsのファイル名変えたのがindex.htmlにアトミックに反映できない。統合レイヤーがindex.htmlをSSRして解決 #AWSDevDay

2018-11-02 15:42:59
qsona @qsona

Micro Frontends 間での global state をどう共有するか。Fluxのアナロジーで解決できる。コンポーネントがActionを投げてStoreに反映していたように、各Micro FrontendがCustom Eventを投げてそれを統合レイヤーがディスパッチして反映する。 #AWSDevDay

2018-11-02 15:45:59
Yosuke Furukawa @yosuke_furukawa

Micro Frontends で Store も統合しちゃうのか、というのは是非がありそうな気がする。StoreはMicro側に持ったほうが良くて、イベントの送受信でお互いが協調するという方がむしろ Micro Services 的じゃないかしら。 #AWSDevDay

2018-11-02 15:45:48
qsona @qsona

Global State をもたせるのは本当に必要なものだけ、と思っていますが、その「本当に必要なもの」がなんなのかは議論かなと思っています(そんなものはない可能性もある)。 基本は各サービスに持つべきなのは100% agreeです #AWSDevDay twitter.com/yosuke_furukaw…

2018-11-02 15:47:36
Motonori Iwata @mobcov

micro frontendというか普通にcomponent設計のベストプラクティスな感がしてきた #awsdevday

2018-11-02 15:48:47
qsona @qsona

複数のWeb Components間の状態変化の共有どうするか?普通のSPAならReduxのように1枚岩のStoreがあるのが主流。Web Components に分かれていても、1つのサービスから提供されているならStoreを共有できる。複数サービスにまたがるならCustom Eventsで投げる。 #AWSDevDay

2018-11-02 15:50:32
qsona @qsona

1つ前の @yosuke_furukawa さんのセッションであった BFF (Backends for Frontends) というのもフロントエンドの統合の問題を解決するもの。それと Micro Frontends はどう違うのかという話。どっちを使うのか、プロダクトや組織の状況によって大きく違いそう。 #AWSDevDay

2018-11-02 15:56:29
Motonori Iwata @mobcov

microfrontendの配信は同一hostなのかな? #awsdevday

2018-11-02 15:57:34
Roy Hiroyuki OSAKI @Hiroyuki_OSAKI

#AWSDevDay micro frontendsも面白かった。統合レイヤー、漢字で書いたらgoogle日本語さんでは東郷麗夜になる。。

2018-11-02 15:58:34