MicroFrontends

「マイクロフロントエンド」を読みました

DAZN の Luca Mezzalira さんが書かれたマイクロフロントエンド を読みました。簡単な書籍レビューを残しておこうかなと思います。 なぜマイクロフロントエンドを使うのか 従来のモノリスなフロントエンドから、マイクロフロントエンドに置き換えることで、…

Micro Frontendsで組成するフラグメントをWeb Componentsで定義してModule Federationで共有する

Micro Frontends(以降、MFE)で組成するフラグメントを Web Components で定義して Module Federation で共有する方法を、ざっくり紹介します。 サンプルコードは、次のリポジトリにあります。 https://github.com/Silver-birder/playground/tree/main/node/w…

クライアントサイド(ES Module)でMicro Frontends

2021年、あけましておめでとうございます。本年も宜しくおねがいします。最近、体重が増えてしまったため、有酸素運動を頑張っています。 本記事は、昨年の冬あたりから検証していた クライアントサイド統合でのMicro Frontendsについて話そうと思います。検…

Cloudflare Workers (Edge Workers) で Micro Frontends

今回、またMicro Frontendsの構築を試みようと思います。構築パターンの内、サーバーサイド統合パターン、特にエッジサイド統合を試しました。 その内容を紹介します。サンプルコードは、下記に残しています。 github.com Edge Side Include (ESI)って? Edg…

Micro Frontends を調べたすべて

Photo by Dil on Unsplash Micro Frontendsに関わる記事を100件以上読みました(参考記事に記載しています)。そこから得たMicro Frontendsについてこの投稿に記録します。 また、調査メモについて、次のリポジトリに残しています。 github.com 発端 実績企業 …

Zalando tailor で Micro Frontends with ( LitElement & etcetera)

Photo by Kenny Luo on Unsplash Zalando社が開発したTailorを使って、サンプルWebアプリをMicro Frontendsで構築してみました。Tailorはサーバーサイドで統合するアーキテクチャです。クライアントサイドは、Web Componentsで作られているLit Elementを使っ…

Ara-Framework で Micro Frontends with SSR

Photo by Artem Sapegin on Unsplash みなさん、こんにちは。silverbirder です。 私の最近の興味として、Micro Frontends があります。 silverbirder180.hatenablog.com 今、Ara-Frameworkというフレームワークを使った Micro Frontends のアプローチ方法を…

Micro Frontends を学んだすべて

Micro FrontendsというWebフロントエンドアーキテクチャがあります。 このアーキテクチャを知るために、書籍を読み、簡単なサンプルWebアプリを開発しました。 そこから学んだことをすべて議事録として残したいと思います。 モノリシックな Webアプリケーシ…