Micro Frontends with Tailor

G I N Z A . J S # 7
2 0 1 9 / 1 2 / 0 9 Hiroaki KARASAWA

⾃⼰紹介 HiroakiKARASAWA

今⽇のトピックマイクロフロントエンド What are Micro Frontends? The term Micro Frontends
first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith. Michael Geers - https://micro-frontends.org/

まずはマイクロフロントエンドについて⼀つのページの異なる部分を全く異なるアプリケーションとして開発しよう ←TeamA ←TeamB TeamC→ 何らかのWebサイト

まずはマイクロフロントエンドについてモチベーションはバックエンドにおけるマイクロサービスとだいたい⼀緒サービス単位のチーム構成で意思決定速度の向上デプロイの独⽴化技術選択の⾃由化他いろいろ

事例紹介 Spotify が有名某フリマアプリでは… Webの取引画⾯アプリの取引画⾯（実はWebView）アプリの取引画⾯をWeb に組み込む⽅法がないか模索中現状、様々な取引タイプでWeb
の開発が間に合ってない ※ 「この問題を解決するための⼀つの⼿段としてマイクロフロントエンドを検討している」というだけ！

マイクロフロントエンドの⼿法統合の仕⽅はいろいろ Run-time か Build-time か Server-side か Client-side か
iframe か WebComponents かいろいろあるが基本は " 統合層" と " コンポーネント" 2 Component3 Component1 Integrationlayer

Tailor 今⽇紹介したいやつ

Tailor is a layout service 統合層において賢いことをしてくれる各コンポーネントは個別にサーバーを⽴てて何かをサーブするだけでいい統合層は iframe の使い⽅に近い
Server1 TailorServer リクエスト Server2 Server3

コード例（Tailor サーバー） ←テンプレートのパスを指定 ←リクエストの処理を丸投げ

コード例（テンプレート）

各サービスの動き⽅各サーバーでは HTML を返しつつ JS を HTTP ヘッダーの Link で指定している
JS では ReactDOM.render で各エントリーポイント（<div id="body"/> など）に React コンポーネントをマウントしている ReactDOM.render を呼びたいだけなら script タグで JS を読み込めば良いだけでは？はい… ReactDOM.render( <Body/> body, ); <divid="header"></div> <divid="sidebar"></div> <divid="body"></div> リクエスト Sidebar Header Body

script で JS ファイルを指定しても動く

もちろん Tailor を使ったほうが良いことがある HTML はバックエンドで組み⽴てられるので初期レンダリングが速い fragment タグに attribute を指定することで細かい制御ができる

fragment に指定できる attribute primary - 対応する fragment のステータスコードをページ⾃体のステータスコードに async -
fragment の実⾏を遅延する（初期描画に不要な要素に指定してブロッカーになることを防ぐ） timeout - 指定された時間の後に結果を取得できない時描画しない fallback-src - src のリソースを取得できないときに代わりに使⽤される他にも、ローディング系イベントにフックしてパフォーマンス測定ができたり

Project Mosaic Tailor をはじめとしたマイクロフロントエンドのための OSS 群 Skipper - マイクロフロントエンドのためのすごい速いリバースプロキシ Innkeeper
- Skipper のルーティングを管理するためのツール他 - https://www.mosaic9.org/

補⾜コンポーネント同⼠のコミュニケーションはどうやる？特にサポートはない CustomEvent を使ったり共有 Redux ストアを参照したりできそう認証はどこでやる？ Tailor
が動いてるサーバーに最初にアクセスされるのでそこで出来そう実験で使ってみた程度なので他にも考えることあるかも（予防線）

FURTHER READING Micro Frontends の理論と実践  - 価値提供を⾼速化する真のマイクロサービスのあり⽅- https://speakerdeck.com/nobuhikosawai/the-theory-and-practice-of-micro-frontends フロントエンドエンジニアは Micro
Frontends の夢を⾒るか https://tech.mercari.com/entry/2018/12/06/162827 Micro Frontends https://martinfowler.com/articles/micro-frontends.html Tailor made Micro Frontends https://craftsmen.nl/tailor-made-micro-frontends/

Micro Frontends with Tailor

Micro Frontends with Tailor

Hiroaki KARASAWA

More Decks by Hiroaki KARASAWA

Other Decks in Technology

Featured

Transcript

G I N Z A . J S # 7

⾃⼰紹介 HiroakiKARASAWA

今⽇のトピックマイクロフロントエンド What are Micro Frontends? The term Micro Frontends

まずはマイクロフロントエンドについて⼀つのページの異なる部分を全く異なるアプリケーションとして開発しよう ←TeamA ←TeamB TeamC→ 何らかのWebサイト

まずはマイクロフロントエンドについてモチベーションはバックエンドにおけるマイクロサービスとだいたい⼀緒サービス単位のチーム構成で意思決定速度の向上デプロイの独⽴化技術選択の⾃由化他いろいろ

事例紹介 Spotify が有名某フリマアプリでは… Webの取引画⾯アプリの取引画⾯（実はWebView）アプリの取引画⾯をWeb に組み込む⽅法がないか模索中現状、様々な取引タイプでWeb

マイクロフロントエンドの⼿法統合の仕⽅はいろいろ Run-time か Build-time か Server-side か Client-side か

Tailor 今⽇紹介したいやつ

Tailor is a layout service 統合層において賢いことをしてくれる各コンポーネントは個別にサーバーを⽴てて何かをサーブするだけでいい統合層は iframe の使い⽅に近い

コード例（Tailor サーバー） ←テンプレートのパスを指定 ←リクエストの処理を丸投げ

コード例（テンプレート）

各サービスの動き⽅各サーバーでは HTML を返しつつ JS を HTTP ヘッダーの Link で指定している

script で JS ファイルを指定しても動く

もちろん Tailor を使ったほうが良いことがある HTML はバックエンドで組み⽴てられるので初期レンダリングが速い fragment タグに attribute を指定することで細かい制御ができる

fragment に指定できる attribute primary - 対応する fragment のステータスコードをページ⾃体のステータスコードに async -

Project Mosaic Tailor をはじめとしたマイクロフロントエンドのための OSS 群 Skipper - マイクロフロントエンドのためのすごい速いリバースプロキシ Innkeeper

補⾜コンポーネント同⼠のコミュニケーションはどうやる？特にサポートはない CustomEvent を使ったり共有 Redux ストアを参照したりできそう認証はどこでやる？ Tailor

FURTHER READING Micro Frontends の理論と実践  - 価値提供を⾼速化する真のマイクロサービスのあり⽅- https://speakerdeck.com/nobuhikosawai/the-theory-and-practice-of-micro-frontends フロントエンドエンジニアは Micro