Créer des plateformes composables avec Harmony

Dans le paysage numérique actuel, en évolution rapide, le besoin de systèmes logiciels adaptatifs, évolutifs et maintenables est plus grand que jamais.

Les architectures monolithiques traditionnelles ne parviennent souvent pas à répondre à ces exigences en raison de leur rigidité et de leur complexité. Entrez Harmony, un framework conçu pour permettre des plates-formes composables avec une efficacité et une flexibilité élevées.

Dans cet article, nous explorerons comment Harmony, optimisé par Bit, transforme la façon dont nous construisons et maintenons des applications modernes.

Qu’est-ce que l’Harmonie ?

Harmony est un framework d'injection de dépendances minimaliste mais puissant, conçu pour créer des architectures composables. En permettant aux développeurs d'assembler des composants Bit développés indépendamment, Harmony permet aux équipes de créer des applications non seulement modulaires, mais également adaptables à l'évolution des besoins de l'entreprise. Harmony prend en charge la composabilité full-stack, ce qui le rend idéal pour intégrer des fonctionnalités frontend et backend dans des plateformes cohérentes.

Principales caractéristiques d’Harmony

• Aspects enfichables : les fonctionnalités métier modulaires, appelées aspects, peuvent être facilement intégrées aux plateformes.

• Flexibilité d'exécution : la prise en charge officielle de Node.js et des environnements de navigateur garantit la compatibilité dans divers cas d'utilisation.

Pourquoi la composabilité est importante

La composabilité permet aux organisations de :

• Adaptez-vous rapidement : de nouvelles fonctionnalités peuvent être ajoutées ou mises à jour indépendamment sans perturber le système existant.

• Promouvoir la réutilisabilité : les composants partagés peuvent être exploités sur plusieurs projets, réduisant ainsi la duplication et augmentant la cohérence.

• Favoriser la collaboration : les équipes peuvent travailler sur des aspects ou des composants isolés sans se marcher sur les pieds.

Construire un système composable avec Harmony

Comme mentionné, les éléments constitutifs d'un système Harmony sont des composants Bit. Cependant, étant donné que les composants Bit sont des conteneurs pour n'importe quelle unité logicielle, tous les composants Bit ne feront pas l'affaire.

Harmony utilise des composants avec une conception spécifique pour leur permettre de consommer et de fournir des « services » vers et depuis d'autres aspects. Il peut s'agir de fonctionnalités frontend uniquement, backend uniquement ou full-stack.

Un aspect représente une capacité métier unique qui peut être connectée à un système plus vaste pour former une solution complète, une nouvelle application.

Les aspects étendent d'autres aspects en s'inscrivant à leur API « slot ». Cette inversion de contrôle permet aux équipes de composer des fonctionnalités ou des capacités métier avec une surcharge minimale puisque l'aspect est responsable de l'intégration, et non le système qui le compose.

Par exemple, l'application Harmony suivante est une boutique en ligne de vêtements de surfeur.

L'équipe responsable de cette boutique en ligne a décidé d'ajouter un blog à son site. Après avoir recherché un aspect approprié sur la plateforme Bit, ils sont tombés sur cet aspect de blog. Décidant de l'utiliser, ils l'ont ajouté à leur application 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;

L'aspect Blog s'inscrit sur la plateforme de plusieurs manières :

1. Il étend le schéma GraphQL du système avec un nœud pour la récupération de contenu. Cela se fait dans le runtime NodeJS.

2. Il étend le routage du système avec la route /blog. Cela se fait dans le navigateur Runtime.

3. Il étend l'en-tête avec un élément supplémentaire, un lien « Blog » vers /blog. Cela se fait dans le navigateur Runtime.

Exécution 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;

Exécution du navigateur

**
 * @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;

L'aspect blog dans cet exemple utilise le système de gestion de contenu Contentful. Il offre un « langage » cohérent pour les services achetés au sein de l’écosystème d’aspects de l’entreprise, garantissant qu’ils peuvent communiquer efficacement et fonctionner ensemble de manière transparente.

/**
 * @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,
      },
    }));
  };
}

Prochaines étapes

Explorez le périmètre "Blog" (avec l'aspect blog)

Visitez ces étendues Bit pour explorer les aspects de la démonstration et copiez-les dans votre espace de travail Bit pour commencer rapidement.

Visitez la portée du blog

Explorez le périmètre "Apparel Waves" (avec une plateforme Harmony)

Visitez le périmètre Apparel Waves

Visitez la documentation officielle de Bit

Peu. Logiciel composable.

Bit est un système de construction pour le développement de logiciels composables.

bit.dev

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!