Skip to content

Instantly share code, notes, and snippets.

@calmery
Last active February 24, 2019 13:24
Show Gist options
  • Save calmery/7cc01d7ba0886ab7b57ff3c9078b92dd to your computer and use it in GitHub Desktop.
Save calmery/7cc01d7ba0886ab7b57ff3c9078b92dd to your computer and use it in GitHub Desktop.
  • [翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
  • バックエンドのマイクロサービスと連携した各アプリケーションのライブラリ,フレームワークに依存しない UI,処理を提供するフロントエンドのモジュールのこと
    • 特徴
      • どのアプリケーションでも使用できる
      • フレームワークに依存しない
        • 技術選択が自由になる
        • 連携には DOM の API を使用する
          • Web Components など(Polyfill が必要そう)
      • インポートすれば全ての機能を利用できる
      • パーツ毎に独立させる
        • ヘッダーとか
      • ブランドイメージを維持する
      • スタイルガイドの延長線として機能する
      • 一つのモノリシックとしてでなく個別に動くのでメンテナンスしやすい,落ちても被害が全体に及ばない
      • 認証のマイクロサービスを例にする
      • 認証の機能を持つバックエンドのマイクロサービスがフロントエンドの UI,処理まで提供する
      • 各アプリケーションはインポートすることで認識の機能を UI,処理を含め利用できる
        • 連携は DOM の API を利用する
    • 欠点
      • ファイルサイズが大きくなる
      • 読み込みに時間がかかる
        • 機能ごとにファイルが分かれている
        • 機能ごとに Lazy Load を行う
        • キャッシュが個別に設定できる
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment