Rumah > hujung hadapan web > tutorial js > Membina Platform Boleh Gubah dengan Harmoni

Membina Platform Boleh Gubah dengan Harmoni

Patricia Arquette
Lepaskan: 2024-12-22 22:17:15
asal
608 orang telah melayarinya

Dalam landskap digital yang serba pantas hari ini, keperluan untuk sistem perisian yang boleh suai, berskala dan boleh diselenggara adalah lebih besar berbanding sebelum ini.

Seni bina monolitik tradisional sering gagal memenuhi permintaan ini kerana ketegaran dan kerumitannya. Masukkan Harmony, rangka kerja yang direka untuk mendayakan platform boleh gubah dengan kecekapan dan fleksibiliti tinggi.

Dalam artikel ini, kami akan meneroka cara Harmony, dikuasakan oleh Bit, mengubah cara kami membina dan mengekalkan aplikasi moden.

Apakah Harmoni?

Harmoni ialah rangka kerja suntikan kebergantungan yang minimalis namun berkuasa yang disesuaikan untuk mencipta seni bina boleh gubah. Dengan membolehkan pembangun mencantumkan komponen Bit yang dibangunkan secara bebas, Harmony membenarkan pasukan membina aplikasi yang bukan sahaja modular tetapi juga boleh disesuaikan dengan keperluan perniagaan yang berkembang. Harmony menyokong kebolehkomposisian timbunan penuh, menjadikannya ideal untuk menyepadukan fungsi bahagian hadapan dan bahagian belakang ke dalam platform yang padu.

Ciri-ciri Utama Harmoni

  • Aspek Boleh Pasang: Ciri perniagaan modular, dipanggil aspek, boleh disepadukan dengan mudah ke dalam platform.

  • Fleksibiliti Masa Jalan: Sokongan rasmi untuk Node.js dan persekitaran penyemak imbas memastikan keserasian merentas pelbagai kes penggunaan.

Mengapa Kebolehkomposan Penting

Kebolehkompakan memperkasakan organisasi untuk:

  • Suaikan Cepat: Ciri baharu boleh ditambah atau dikemas kini secara bebas tanpa mengganggu sistem sedia ada.

  • Menggalakkan Kebolehgunaan Semula: Komponen yang dikongsi boleh dimanfaatkan merentas berbilang projek, mengurangkan pertindihan dan meningkatkan konsistensi.

  • Memupuk Kerjasama: Pasukan boleh bekerja pada aspek atau komponen terpencil tanpa memijak jari kaki satu sama lain.

Membina Sistem Boleh Gubah dengan Harmoni

Seperti yang dinyatakan, blok binaan sistem Harmoni ialah komponen Bit. Walau bagaimanapun, oleh kerana komponen Bit adalah bekas untuk mana-mana unit perisian, tidak setiap komponen Bit akan berfungsi.

Harmoni menggunakan komponen dengan reka bentuk khusus untuk membolehkan mereka menggunakan dan menyediakan "perkhidmatan" kepada dan dari aspek lain. Ini boleh menjadi ciri hujung hadapan sahaja, hujung belakang sahaja atau ciri tindanan penuh.

Satu aspek mewakili satu keupayaan perniagaan yang boleh dipalamkan ke dalam sistem yang lebih besar untuk membentuk penyelesaian penuh, aplikasi baharu.

Building Composable Platforms with Harmony

Aspek memanjangkan aspek lain dengan mendaftar ke API 'slot' mereka. Penyongsangan kawalan ini membolehkan pasukan mengarang ciri atau keupayaan perniagaan dengan overhed minimum memandangkan aspek tersebut bertanggungjawab untuk penyepaduan, bukan sistem yang menyusunnya.

Sebagai contoh, apl Harmony berikut ialah kedai dalam talian untuk pakaian peluncur air.

Pasukan yang bertanggungjawab untuk kedai dalam talian itu memutuskan untuk menambah blog pada tapak mereka. Selepas mencari Aspek yang sesuai pada platform Bit, mereka terjumpa aspek Blog ini. Memutuskan mereka mahu menggunakannya, mereka menambahkannya pada aplikasi Hamrony mereka:

/**
 * @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;
Salin selepas log masuk

Building Composable Platforms with Harmony

Aspek Blog mendaftarkan dirinya ke platform dalam beberapa cara:

  1. Ia memanjangkan skema GraphQL sistem dengan nod untuk mendapatkan semula kandungan. Ini dilakukan dalam NodeJS Runtime.

  2. Ia memanjangkan penghalaan sistem dengan laluan /blog. Ini dilakukan dalam Masa Jalan Penyemak Imbas.

  3. Ia memanjangkan pengepala dengan item tambahan pautan 'Blog' ke /blog. Ini dilakukan dalam Masa Jalan Penyemak Imbas.

Masa Jalan 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;
Salin selepas log masuk

Masa Jalan Penyemak Imbas

**
 * @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;
Salin selepas log masuk

Aspek blog dalam contoh ini menggunakan sistem pengurusan kandungan Kandungan. Ia menawarkan "bahasa" yang koheren untuk perkhidmatan yang dibeli dalam ekosistem aspek syarikat, memastikan mereka boleh berkomunikasi dengan berkesan dan berfungsi dengan lancar bersama-sama.

/**
 * @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,
      },
    }));
  };
}
Salin selepas log masuk

Langkah seterusnya

Terokai skop "Blog" (dengan aspek blog)

Lawati skop Bit ini untuk meneroka aspek demo dan salin (salin)nya ke ruang kerja Bit anda untuk bermula dengan cepat.

Lawati skop Blog


Building Composable Platforms with Harmony

Terokai skop "Gelombang Pakaian" (dengan platform Harmony)

Lawati skop Apparel Waves


Building Composable Platforms with Harmony

Lawati dokumentasi rasmi Bit

Building Composable Platforms with Harmony

sedikit. Perisian boleh gubah.

Bit ialah sistem binaan untuk pembangunan perisian boleh gubah.

Membina Platform Boleh Gubah dengan Harmoni bit.dev

Atas ialah kandungan terperinci Membina Platform Boleh Gubah dengan Harmoni. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan