調和のとれたコンポーザブル プラットフォームの構築

今日のペースの速いデジタル環境では、適応性、拡張性、保守性が高いソフトウェア システムの必要性がこれまで以上に高まっています。

従来のモノリシック アーキテクチャは、その剛性と複雑さのために、これらの要求を満たすことができないことがよくあります。 Harmony は、高効率と柔軟性を備えたコンポーザブル プラットフォームを実現するように設計されたフレームワークです。

この記事では、Bit を活用した Harmony が最新のアプリケーションの構築と保守の方法をどのように変えるのかを探っていきます。

ハーモニーとは何ですか？

Harmony は、コンポーザブル アーキテクチャを作成するために調整された、ミニマルでありながら強力な依存関係注入フレームワークです。 Harmony を使用すると、開発者が独自に開発した Bit コンポーネントをつなぎ合わせることができるため、チームはモジュール式であるだけでなく、進化するビジネス ニーズに適応できるアプリケーションを構築できます。 Harmony はフルスタックのコンポーザビリティをサポートしているため、フロントエンドとバックエンドの機能を一貫したプラットフォームに統合するのに最適です。

ハーモニーの主な特徴

• プラグイン可能なアスペクト: アスペクトと呼ばれるモジュール式のビジネス機能は、プラットフォームに簡単に統合できます。

• ランタイムの柔軟性: Node.js とブラウザ環境の公式サポートにより、さまざまなユースケースにわたる互換性が保証されます。

構成可能性が重要な理由

コンポーザビリティにより、組織は次のことが可能になります。

• 迅速に適応: 既存のシステムを中断することなく、新しい機能を個別に追加または更新できます。

• 再利用性の促進: 共有コンポーネントを複数のプロジェクト間で利用できるため、重複が減り、一貫性が高まります。

• コラボレーションの促進: チームは、お互いに足踏みすることなく、孤立した側面やコンポーネントに取り組むことができます。

調和のとれたコンポーザブル システムの構築

前述したように、Harmony システムの構成要素はビット コンポーネントです。ただし、ビット コンポーネントはソフトウェアの任意のユニットのコンテナであるため、すべてのビット コンポーネントが使用できるわけではありません。

Harmony は、特定の設計のコンポーネントを使用して、他の側面との間で「サービス」を利用および提供できるようにします。これらは、フロントエンドのみ、バックエンドのみ、またはフルスタックの機能にすることができます。

アスペクトは、より大きなシステムに接続して完全なソリューション、つまり新しいアプリケーションを形成できる単一のビジネス機能を表します。

アスペクトは、「スロット」API に登録することで他のアスペクトを拡張します。この制御の反転により、統合を構成するシステムではなくアスペクトが統合を担当するため、チームは最小限のオーバーヘッドで機能やビジネス機能を構成できるようになります。

たとえば、次の Harmony アプリはサーファー服のオンライン ショップです。

そのオンライン ストアを担当するチームは、サイトにブログを追加することにしました。 Bit プラットフォームで適切なアスペクトを検索した結果、このブログ アスペクトを見つけました。これを使用したいと判断し、Hamrony アプリケーションに追加しました。

/**
 * @coponentId: learnbit.apparel-waves/apparel-waves
 * @filename: apparel-waves.bit-app.ts
 */ 

// imports...
import { SymphonyPlatformAspect } from '@bitdev/symphony.symphony-platform';
import { ApparelWavesPlatformAspect } from '@learnbit/apparel-waves.apparel-waves-platform';
import { BlogAspect } from '@learnbit/blog-pbc.blog';

export const ApparelWaves = HarmonyPlatform.from({
  name: 'apparel-waves',
  platform: [
   /**
    * ascpects register themsevles to the 'platform' aspect which
    * is the entry point for this application
    */
    SymphonyPlatformAspect,
    {
      name: 'Apparel Waves',
      slogan: 'Making waves in fashion',
      domain: 'apparel-waves.com',
    },
  ],
  /**
    * aspects can run in multiple runtime environments. here, aspects 
    * provide functionalitis to the NodeJS services and to the web frontend apps
   */
  runtimes: [new BrowserRuntime(), new NodeJSRuntime()],

  aspects: [
    /* 'apperal waves' aspect extends the system with its 
     * own unique functionalities. this aspect is maintained by 
     * a team that composes the apsects for their own solution.
     */
    ApparelWavesPlatformAspect,
    /**
     * the blog aspect extends the system with content 
     * management capabilities. it is maintained by the blog PBC team.
     */
    [
      BlogAspect,
      {
       /**
         * the blog aspect also provide a config api for this app to use
         * in this case, since the the blog uses the Contenful platform,
         * the fusion team need to provide it with their own Contentful space ID
         */        
        spaceId: 'contentful-spaceId',
      },
    ],
  ],
});

export default ApparelWaves;

ブログ アスペクトは、いくつかの方法でプラットフォームに自身を登録します。

1. これは、コンテンツ取得用のノードを使用してシステムの GraphQL スキーマを拡張します。これは NodeJS ランタイムで行われます。

2. /blog ルートを使用してシステムのルーティングを拡張します。これはブラウザ ランタイムで行われます。

3. ヘッダーを拡張して、/blog への「ブログ」リンクを追加します。これはブラウザ ランタイムで行われます。

NodeJS ランタイム

/**
 * @coponentId: learnbit.blog-pbc/blog
 * @filename: blog.node.runtime.ts
 */

export class BlogNode {
  constructor(private config: BlogConfig) {}

  async getBlogPosts() {
    const blogData = new BlogData(this.config);
    return blogData.getBlogPosts();
  }

  static dependencies = [SymphonyPlatformAspect];

  static async provider(
    [symphonyPlatform]: [SymphonyPlatformNode],
    config: BlogConfig
  ) {
    const blog = new BlogNode(config);
    const gqlSchema = blogGqlSchema(blog);

    symphonyPlatform.registerBackendServer([
      {
        gql: gqlSchema,
      },
    ]);

    return blog;
  }
}

export default BlogNode;

ブラウザのランタイム

**
 * @coponentId: learnbit.blog-pbc/blog
 * @filename: blog.browser.runtime.ts
 */


export class BlogBrowser {
  constructor(private config: BlogConfig) {}

  static dependencies = [SymphonyPlatformAspect, HeaderAspect];

  static async provider(
    [symphonyPlatform, header]: [SymphonyPlatformBrowser, HeaderBrowser],
    config: BlogConfig
  ) {
    const blog = new BlogBrowser(config);

    symphonyPlatform.registerRoute([
      {
        path: '/blog',
        component: () => {
          return (
            <apolloblogprovider spaceid="{config.spaceId}">
              <bloglobby></bloglobby>
            </apolloblogprovider>
          );
        },
      },
    ]);

    header.registerLink([{ label: 'Blog', href: '/blog' }]);

    return blog;
  }
}

export default BlogBrowser;

この例のブログ アスペクトでは、Contentful コンテンツ管理システムを使用します。企業のアスペクト エコシステム内で購入したサービスに一貫した「言語」を提供し、それらが効果的に通信し、シームレスに連携できるようにします。

/**
 * @coponentId: learnbit.blog-pbc/blog
 * @filename: blog-data.ts
 */

import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client';
import type { BlogConfig } from './blog-config.js';

export class BlogData {
  constructor(private readonly config: BlogConfig) {}

  private contentfulClient = new ApolloClient({
    link: new HttpLink({
      uri: `https://graphql.contentful.com/content/v1/spaces/${this.config.spaceId}`,
      headers: {
        Authorization: `Bearer ${process.env.CONTENTFUL_ACCESS_TOKEN}`,
      },
      fetch,
    }),
    cache: new InMemoryCache(),
  });

  getBlogPosts = async () => {
    const { data } = await this.contentfulClient.query({
      query: gql`
        query GetBlogs {
          pageBlogPostCollection {
            items {
              title
              slug
              author {
                name
              }
            }
          }
        }
      `,
    });
    return data.pageBlogPostCollection.items.map((item) => ({
      title: item.title,
      slug: item.slug,
      author: {
        name: item.author ? item.author.name : null,
      },
    }));
  };
}

次のステップ

「ブログ」スコープを探索する (ブログの側面を含む)

これらの Bit スコープにアクセスしてデモの側面を探索し、Bit ワークスペースにフォーク (コピー) してすぐに開始できます。

ブログスコープにアクセスしてください

「Apparel Waves」スコープを探索する (Harmony プラットフォームを使用)

Apparel Waves スコープにアクセスしてください

Bit の公式ドキュメントにアクセスする

少し。コンポーザブルなソフトウェア。

Bit は、コンポーザブル ソフトウェア開発のためのビルド システムです。

bit.dev

以上が調和のとれたコンポーザブル プラットフォームの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。