vite と single-spa で作るマイクロフロントエンド基盤
超巨大フロントエンドを分割する基盤を作ろうとしたものの紹介します。 この記事の前提 巨大フロントエンドを分割統治したい SSR は考えない モダンブラウザのみ対応する(IE11 非対応) この記事では single-spa とマイクロフロントエンドの紹介はしません。こちらの記事を読んでください。 マイクロフロントエンド入門 single-spa でマイクロフロントエンドを検証する - mizdev single-spa はアプリケーションのライフサイクルに簡単な規約を導入するもので、おそらく一番使われてるものです。これを基本的に vite と組み合わせて各アプリケーションを構成しますが、 webpack でも同様のことは可能です。 動いてるもの デモ ここで実現したこと 共通ヘッダ 異なる環境でビルドされたコンテンツをルーティングごとに切り替える react-router のアプリと vu
single-spa でマイクロフロントエンドを検証する
マイクロフロントエンドとは [翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用 自分の理解だと、フロントエンドを一定以上にスケールさせようとすると、レガシーの古いビルド境界や、コンウェイの法則によるチーム単位のコンポーネントが出てくる。 これらをメタに管理するシステムを作って、複数のビルドを協調させる試み。 実装 マイクロフロントエンドの実装に必ずしもライブラリを使う必要はないのだが、調べた感じ、single-spa というライブラリが土台にある。 ドキュメントに中国産が多い。大きなSPAをたくさん作るお国柄な気がする。 single-spa single-spa マイクロフロントエンドの用の土台となるルーティング機能、各コンポーネントのライフサイクルだけを管理するもの。 このドキュメントでは System.js や import-map を推奨しているが、無
Micro Frontends
Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this article we'll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. As well as talki
マイクロサービスを基にしている複合 UI を作成する - .NET
このコンテンツは eBook の「コンテナー化された .NET アプリケーションの .NET マイクロサービス アーキテクチャ」からの抜粋です。.NET Docs で閲覧できるほか、PDF として無料ダウンロードすると、オンラインで閲覧できます。 マイクロサービス アーキテクチャは多くの場合、データおよびロジックを処理するサーバー側から始まりますが、通常、UI はモノリシックとして処理されます。 ただし、より高度なアプローチとして (マイクロ フロントエンドと呼ばれる)、マイクロサービスに基づいたアプリケーション UI を設計する方法もあります。 これは、サーバー上にマイクロサービスが置かれモノリシック クライアント アプリのみでマイクロサービスが利用されるというのでなく、マイクロサービスによって複合 UI が生成されることを意味します。 このアプローチの場合、ビルドするマイクロサービスは
フロントエンドはマイクロサービス化の恩恵を受けられるのか？ — Micro Frontends パネルディスカッションレポート(前編): Microservices Meetup vol.7
こんにちは、qsona (twitter) です。FiNCでは先日 2018/7/31 に Microservices Meetup vol.7 (Micro Frontends) を開催しました。 本イベントでは、teppeis さん, Yosuke Kurami (Quramy) さん, Suguru Inatomi (lacolaco) さんの御三方にご協力いただき、約1時間にわたりパネルディスカッションを行いました。様々な論点について議論が及び、とても充実した内容になりました。ご協力いただき、とても感謝しています。ありがとうございました。 本記事では、この中で行われたディスカッションの内容の大筋を書き起こし、また、最後に簡単な総括をしたいと思います。なお、本記事は100%正確な書き起こしではなく、編集を行っております。意図を損なわない努力をしておりますが、文責は qsona にある
[翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
モダンな Web アプリを異なる JavaScript フレームワークを使う複数チームで開発するためのテクニック はじめに この記事は翻訳記事です。 原著者の許可をとって翻訳・掲載しています。 原文はこちらです。 翻訳者 マイクロフロントエンドとは？ マイクロフロントエンドという言葉は 2016 年の終わりにThoughtWorks Technology Radarで言及されました。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 現在の Web のトレンドは多機能でパワフルな SPA です。 SPA はフロントエンドとバックエンドを切り離すという、マイクロサービスの考え方に基づいています。 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロン
フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog
Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro Frontends に関して考える機会があったので、Micro Frontends とはなんなのか。何をどのように解決しようとしているのかという内容を紹介します。 Micro Frontends とは Micro Frontends という考え方は ThoughtWorks Technology Radar にて2016年に初めて登場したと言われています。日本語で言うときは複数形は無視して "マイクロフロントエン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
microfrontends/english.md at master · phodal/microfrontends
Micro Frontends in Action