Belajar Backstage - Frontend Plugin Development

#Pendahuluan

Di episode 16, kalian membangun pencarian yang menyatukan seluruh sumber informasi. Episode 17 ini menggeser peran kalian: dari pengguna Backstage menjadi pembuat plugin frontend. Ini awal dari Fase 5, tempat kalian memperluas portal sesuai kebutuhan organisasi. Frontend adalah wajah Backstage — plugin yang kalian tulis inilah yang dilihat dan dipakai ribuan engineer setiap hari, jadi memahami cara membangunnya dengan benar adalah keterampilan paling terlihat di seluruh series ini.

#New Frontend System

Backstage kini memakai New Frontend System sebagai cara default untuk membangun plugin frontend. Alih-alih setiap plugin mengatur dirinya sendiri secara bebas, New Frontend System memperkenalkan konsep extension — unit deklaratif yang bisa dikontribusikan dan dihubungkan satu sama lain. Plugin frontend dibuat dengan createFrontendPlugin, yang diimpor dari @backstage/frontend-plugin-api:

import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
 
const examplePlugin = createFrontendPlugin({
  id: 'example',
  extensions: [
    examplePage,
    exampleEntityCard,
  ],
});

Deklarasi ini cukup sederhana: plugin memiliki id unik dan daftar extension yang ia kontribusikan. Frontend core mencarikan extension-extension itu ke tempatnya masing-masing.

#Extension Points, Components, dan Pages

Inti New Frontend System adalah extension points: kontrak yang mendefinisikan di mana dan bagaimana sesuatu bisa disuntikkan. Ada dua sisi:

• Pihak yang mendefinisikan extension point menyatakan "di titik ini, extension tertentu bisa dipasang".
• Plugin yang mengontribusikan extension mengikat diri ke titik itu dan menyediakan konten.

Dua jenis extension yang paling sering kalian tulis adalah pages dan components:

const examplePage = createExtension({
  id: 'example.page',
  at: createExtensionPoint({ id: 'core.routes' }),
  output: {
    element: () => <ExamplePage />,
  },
});

Pages dipasang ke rute frontend, components dipasang ke lokasi lain seperti halaman entity. Dengan memisahkan "di mana" dari "apa", satu halaman bisa dipasang ulang di beberapa tempat tanpa menulis ulang kode.

#Dependency Injection

Plugin frontend jarang bekerja sendirian — ia butuh layanan dari plugin lain. New Frontend System menyediakan dependency injection: plugin mendeklarasikan dependensinya, dan framework menyuntikkan instance yang sudah terhubung. Pola ini dipakai lewat deklarasi inputs di extension:

const exampleExtension = createExtension({
  id: 'example.deps',
  at: someExtensionPoint,
  inputs: {
    cards: {
      extensionPoint: cardExtensionPoint,
      required: false,
    },
  },
  output: {
    element: ({ inputs }) => (
      <Layout>
        {inputs.cards}
      </Layout>
    ),
  },
});

Dengan dependency injection, kalian tidak perlu mengimpor instance global atau menebak cara inisialisasi — framework yang mengatur siklus hidup dan hubungan antar extension.

#React Plugin: useEntity

Mayoritas plugin Backstage berurusan dengan entity catalog. Hook useEntity menyediakan data entity yang sedang dilihat, lengkap dengan metadata dan relations-nya:

import { useEntity } from '@backstage/plugin-catalog-react';
 
const MyEntityCard = () => {
  const { entity } = useEntity();
  return (
    <Card>
      <Typography variant="h6">{entity.metadata.name}</Typography>
      <Typography>{entity.metadata.description}</Typography>
    </Card>
  );
};

useEntity adalah jembatan antara plugin kalian dan konteks entity yang sedang aktif. Tidak perlu membaca URL atau menebak entity mana yang sedang dilihat — konteks yang disediakan catalog yang menjawab.

#EntityCard dan EntityPage Extension

Untuk menampilkan konten di halaman entity, kalian menghubungkan extension ke titik ekstensi yang disediakan catalog. EntityCard muncul sebagai kartu di tab entity, sedangkan EntityPage memungkinkan menambah tab baru pada halaman entity. Dengan pendekatan ini, setiap plugin bisa "menyisipkan diri" ke halaman entity tanpa menyentuh kode core catalog — contoh terbaik dari kekuatan extension points.

#Styling dengan MUI

Untuk tampilan, Backstage memakai MUI sebagai library komponen dan styling utamanya. Sejak 2026, core Backstage menyelesaikan perpindahan dari Blueprint ke MUI — jadi semua plugin baru dan yang sedang dirawat sebaiknya memakai MUI agar konsisten dengan tema default portal.

Saat menulis plugin baru, manfaatkan komponen MUI dan tema Backstage yang sudah ada alih-alih membawa library styling sendiri — hasilnya menyatu dengan portal, bukan tempelan.

#Penutup

Episode 17 ini membuka pintu frontend plugin development: New Frontend System dengan createFrontendPlugin, extension points untuk mendefinisikan dan menerima kontribusi, pages dan components sebagai bentuk extension, dependency injection untuk menghubungkan dependensi, useEntity untuk membaca entity aktif, perluasan halaman entity lewat EntityCard dan EntityPage, serta styling dengan MUI setelah migrasi dari Blueprint.

Inti yang harus dibawa pulang:

• Plugin adalah kumpulan extension — deklarasikan dengan createFrontendPlugin, bukan inisialisasi manual.
• Extension points memisahkan definisi dari kontribusi — itulah yang membuat plugin bisa dipasang tanpa mengubah core.
• useEntity adalah jembatan ke catalog — baca entity aktif tanpa menebak konteks.
• Pakai MUI dan tema Backstage — konsistensi visual adalah bagian dari pengalaman developer.

Di episode 18 berikutnya, kalian beralih ke sisi lain: backend plugin & backend framework — createBackendPlugin dan createBackendModule, service APIs, plugin options, dan testing dengan backend-test-utils. Frontend dan backend kalian akan saling melengkapi menjadi plugin yang utuh.