Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends with Tailor

Micro Frontends with Tailor

Ginza.js #7 2019/12/09

Tailor is a layout service, which is used for creating Micro Frontends architecture. In this slide, I introduce a key concept of Micro Frontends and how to implement it with Tailor.

Hiroaki KARASAWA

December 09, 2019
Tweet

More Decks by Hiroaki KARASAWA

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ⾃⼰紹介
    HiroakiKARASAWA

    View full-size slide

  3. 今⽇のトピック
    マイクロフロントエンド
    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/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 事例紹介
    Spotify
    が有名
    某フリマアプリでは…
    Webの取引画⾯ アプリの取引画⾯
    (実はWebView)
    アプリの取引画⾯をWeb
    に組み込む⽅法がないか模索中
    現状、様々な取引タイプでWeb
    の開発が間に合ってない

    「この問題を解決するための⼀つの⼿段としてマイクロフロントエンドを検討している」というだけ!

    View full-size slide

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

    Server-side
    か Client-side

    iframe
    か WebComponents

    いろいろあるが基本は "
    統合層"
    と "
    コンポーネント"
    2 Component3
    Component1
    Integrationlayer

    View full-size slide

  8. Tailor
    今⽇紹介したいやつ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. コード例(テンプレート)

    View full-size slide

  12. 各サービスの動き⽅
    各サーバーでは HTML
    を返しつつ JS
    を HTTP
    ヘッダーの Link
    で指定している
    JS
    では ReactDOM.render
    で各エントリーポイント(
    など)に
    React
    コンポーネントをマウントしている
    ReactDOM.render
    を呼びたいだけなら script
    タグで JS
    を読み込めば良いだけでは?
    はい…
    ReactDOM.render(

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Project Mosaic
    Tailor
    をはじめとしたマイクロフロントエンドのための OSS

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

    View full-size slide

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

    View full-size slide

  18. 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/

    View full-size slide