构建和谐的组合平台

Patricia Arquette原创: 2024-12-22 22:17:15616浏览

在当今快节奏的数字环境中，对自适应、可扩展和可维护的软件系统的需求比以往任何时候都更大。

传统的整体架构由于其刚性和复杂性而常常无法满足这些需求。 Harmony 是一个旨在实现高效、灵活的可组合平台的框架。

在本文中，我们将探讨由 Bit 提供支持的 Harmony 如何改变我们构建和维护现代应用程序的方式。

什么是和谐？

Harmony 是一个简约但功能强大的依赖注入框架，专为创建可组合架构而定制。通过使开发人员能够将独立开发的 Bit 组件拼接在一起，Harmony 使团队能够构建不仅是模块化的而且能够适应不断变化的业务需求的应用程序。 Harmony 支持全栈可组合性，使其成为将前端和后端功能集成到内聚平台的理想选择。

和谐的主要特征

可插拔方面：模块化业务功能（称为方面）可以轻松集成到平台中。
运行时灵活性：对 Node.js 和浏览器环境的官方支持确保了不同用例之间的兼容性。

为什么可组合性很重要

可组合性使组织能够：

快速适应：可以在不破坏现有系统的情况下独立添加或更新新功能。
促进可重用性：可以在多个项目中利用共享组件，减少重复并提高一致性。
促进协作：团队可以在独立的方面或组件上工作，而不会互相干扰。

构建和谐的可组合系统

如前所述，Harmony 系统的构建块是 Bit 组件。然而，由于 Bit 组件是任何软件单元的容器，因此并非每个 Bit 组件都可以。

Harmony 使用具有特定设计的组件来允许它们使用其他方面并提供“服务”。这些功能可以是仅前端、仅后端或全栈功能。

方面代表单个业务功能，可以将其插入更大的系统中以形成完整的解决方案，即新的应用程序。

Building Composable Platforms with Harmony

方面通过注册到其“槽”API 来扩展其他方面。这种控制反转允许团队以最小的开销来组合功能或业务功能，因为方面负责集成，而不是组成它的系统。

例如，以下 Harmony 应用程序是一家冲浪服装在线商店。

负责该在线商店的团队决定在他们的网站上添加一个博客。在Bit平台上寻找合适的Aspect后，他们发现了这个Blog方面。他们决定使用它，并将其添加到 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;

Building Composable Platforms with Harmony

博客方面通过多种方式将自身注册到平台：

它通过用于内容检索的节点扩展了系统的 GraphQL 模式。这是在 NodeJS 运行时完成的。
它通过 /blog 路由扩展了系统的路由。这是在浏览器运行时完成的。
它使用附加项扩展了标题，即指向 /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,
      },
    }));
  };
}