最近、私はYouTubeのチャンネルに短いビデオをマイクロフロントエンドについて簡単に説明しました.この記事では、私はなぜマイクロフロントエンドを使用する理由についていくつかの考えを共有し、どのように簡単にRaguを実装することです.

なぜマイクロフロントを使うのか？

今日では、マイクロサービスは、チームがバックエンドで独立に到達するのを助ける人気があります.マイクロサービスモデルを使用している企業でさえ、フロントエンドのモノリスではまだ疲れている.
マイクロフロントエンドのアーキテクチャがどのように見えるかを理解するために、eコマースを例に挙げましょう.

電子商取引は、複数のドメインと分野を持つ複雑なアプリケーションです.時間をかけてすべての複雑さを扱うチームだけを想像するのは難しい.

フロントエンドモノリスの取扱い方法

フロントエンドモノリスを扱うのに、2つのアプローチが主に見られました.最初のものはフロントエンドチームを持つことです.このアプローチによる主な問題は、あなたのチームが製品APIチームでない限り、バックエンドチームは自分で価値を提供できないということです.

もう一つの一般的なアプローチは、共有フロントエンドモノリスを持つことです.通常、このアプローチを使用する企業はまた、チームが互いのPRSを承認する「オープンソース企業」の考え方を持っています.

このアプローチでは、チームはより自律性を持ち、外部依存関係なしで値を提供することができます.しかし、彼らはまだ大きな複雑なコードベースを共有するいくつかの痛みポイントに直面している.彼らは所有権の欠如、コードベース上での基準の欠如、マージの競合、苦しいメーカーの決定過程があまりにも多くの人々を含むように直面する可能性があります.

マイクロフロントアプローチ

バックエンドでは、会社は長年これらの痛み点に対処するために、マイクロサービスを使用していました.マイクロサービスのアイデアをフロントエンドに拡張する場合

それからチームは彼らの配達プロセスで完全な自治を持つことができました.

Raguアーキテクチャ

RAGUは2つの主要なアプリケーションにまとめられています.ragu-server and ragu-client . RAGUサーバは、多くのRESTful MicroServiceと同じように、マイクロフロントエンドとしてコンポーネントを公開します.
各マイクロフロントエンドは、コンポーネントを解決するために、RGUクライアントが使用するMicroFrontend HTMLと他のプロパティを返す独自のリソースURLを持っています.

RAGUクライアントは基本的にMicroFrontendリソースURLを受け取り、マイクロフロントエンドをレンダリングします.

アプリケーションを作成するにはapplication entrypoint これはragu client . また、我々は多くを持つことができますragu servers 我々が必要として.それは1つをお勧めしますragu server ドメインごと.

RAGUコード例

Raguは技術不可知論です.あなたの好きなフレームワークでRaguを使用することができます.この例では、我々は反応を使用します.

npm install ragu-server

RAGUには、プロジェクトを構築するスクリプトが付属しています.あなたがする必要があるのはconfig これらのスクリプトのファイルをpackage.json .

{
  "scripts": {
    "ragu:build": "ragu-server build ragu-config.js",
    "ragu:start": "ragu-server run ragu-config.js",
    "ragu:dev": "ragu-server dev ragu-config.js"
  }
}

設定ファイル

設定ファイルを作成するには、ragu-react-server-adapter 図書館.

npm install ragu-react-server-adapter

The ragu-config.js は以下のようになります:

const {createReactRaguServerConfig} = require('ragu-react-server-adapter/config');

module.exports = createReactRaguServerConfig({
  compiler: {
    assetsPrefix: 'http://localhost:3100/component-assets/'
  },
  components: {
    namePrefix: 'my_project_name_'
  }
});

反応の詳細についてはragu-config.js ファイルをチェックしますhttps://ragu-framework.github.io/#!/ragu-react-server-adapter
楽しい事実:ドキュメントは、実際にマイクロフロントエンドです.Herokuの無料サーバーによってホストされていますので、ロードする時間がかかります.

RAGUサーバ：コンポーネントの公開

RAGUサーバはファイルシステムベースのルーティングシステムを持っており、コンポーネントURLがコンポーネントディレクトリの名前と一致することを意味します.すべてのコンポーネントはragu-components ディレクトリ.

マイクロフロントエンドとして反応コンポーネントを公開するには、コンポーネントを返す関数をエクスポートする必要があります.<project_root>/ragu-components/hello-world/index.jsx :

import React from 'react';

const HelloComponent = () => (<div>
    <h2>Hello, World</h2>
</div>);

export default () => <HelloComponent />

RAGUの主な利点の1つは、それがあなたのアプリケーションの薄層であるということです.あなたはそれが動作するように、アプリケーション全体を変更する必要はありません.実際に、コンポーネントをマイクロフロントエンドとしてエクスポートします.
このリポジトリをチェックしてください.

カルロスマニラ / RAGUサーバの反応例

こんにちは反応

マイクロフロントエンドこんにちは、世界を言う!

走る

npm install

開発サーバ

生産サーバー

例1 :シンプルなハローワールド

Renders a React component saying hello:

component directory

Component Preview

Component URL

例2：こんにちは、小道具と世界

Renders a React component saying hello for a given name:

component directory

Component Preview

Component URL

例2：こんにちは、世界の状態

Renders a React component saying hello for a pokemon a given pokemon id:

component directory

Component Preview

Component URL

The state is loaded from the PokéAPI. It is nice that the state is always fetched from the server. It means the client receives the component completely resolved.

RAGUクライアント：マイクロフロントエンドを使う

Your application entrypoint can be anything: A React SPA, a VueJS application, a node application that renders HTML, or even a single HTML page. You don't need to learn a whole new framework.

For React, there is a client to make the integration even more straightforward.