Harmony를 통해 컴포저블 플랫폼 구축

오늘날 빠르게 변화하는 디지털 환경에서는 적응력이 뛰어나고 확장 가능하며 유지 관리가 가능한 소프트웨어 시스템에 대한 필요성이 그 어느 때보다 커졌습니다.

기존의 모놀리식 아키텍처는 경직성과 복잡성으로 인해 이러한 요구 사항을 충족하지 못하는 경우가 많습니다. 높은 효율성과 유연성으로 구성 가능한 플랫폼을 지원하도록 설계된 프레임워크인 Harmony를 만나보세요.

이 기사에서는 Bit 기반의 Harmony가 최신 애플리케이션을 구축하고 유지 관리하는 방식을 어떻게 변화시키는지 살펴보겠습니다.

하모니란 무엇인가요?

Harmony는 구성 가능한 아키텍처를 생성하기 위해 맞춤화된 미니멀하면서도 강력한 종속성 주입 프레임워크입니다. 개발자가 독립적으로 개발한 Bit 구성 요소를 결합할 수 있도록 함으로써 Harmony를 통해 팀은 모듈식일 뿐만 아니라 진화하는 비즈니스 요구에 적응할 수 있는 애플리케이션을 구축할 수 있습니다. Harmony는 풀 스택 구성성을 지원하므로 프런트엔드 및 백엔드 기능을 응집력 있는 플랫폼에 통합하는 데 이상적입니다.

하모니의 주요 특징

• 플러그 가능한 측면: 측면이라고 하는 모듈식 비즈니스 기능을 플랫폼에 쉽게 통합할 수 있습니다.

• 런타임 유연성: Node.js 및 브라우저 환경에 대한 공식 지원은 다양한 사용 사례 전반에 걸쳐 호환성을 보장합니다.

구성성이 중요한 이유

구성 가능성을 통해 조직은 다음을 수행할 수 있습니다.

• 빠른 적응: 기존 시스템을 중단하지 않고 독립적으로 새로운 기능을 추가하거나 업데이트할 수 있습니다.

• 재사용성 촉진: 공유 구성요소를 여러 프로젝트에서 활용하여 중복을 줄이고 일관성을 높일 수 있습니다.

• 협업 촉진: 팀은 서로의 발끝을 밟지 않고 개별적인 측면이나 구성 요소에 대해 작업할 수 있습니다.

조화를 이루는 컴포저블 시스템 구축

앞서 언급했듯이 Harmony 시스템의 구성 요소는 Bit 구성 요소입니다. 그러나 Bit 구성 요소는 모든 소프트웨어 단위에 대한 컨테이너이므로 모든 Bit 구성 요소가 그렇지는 않습니다.

Harmony는 특정 디자인의 구성 요소를 사용하여 다른 측면에서 "서비스"를 소비하고 제공할 수 있도록 합니다. 이는 프런트엔드 전용, 백엔드 전용 또는 전체 스택 기능일 수 있습니다.

측면은 더 큰 시스템에 연결하여 전체 솔루션, 즉 새로운 애플리케이션을 형성할 수 있는 단일 비즈니스 기능을 나타냅니다.

Aspect는 '슬롯' 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

위 내용은 Harmony를 통해 컴포저블 플랫폼 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!