Belajar Backstage - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1, kalian memahami sejarah dan latar belakang Backstage: dari era DevOps, ledakan microservices, hingga lahirnya platform engineering dan IDP. Episode 2 ini menjawab pertanyaan berikutnya — seperti apa arsitektur Backstage sebenarnya? Kalian akan melihat struktur monorepo yang menjadi fondasinya, primitif inti yang membentuk fungsionalitasnya, serta dua sistem besar yang menyusun frontend dan backend-nya.

#Arsitektur Monorepo

Backstage dibangun sebagai monorepo — satu repositori besar yang menampung banyak paket sekaligus. Konsep workspace dan packages yang kalian pelajari di episode 0 langsung dipraktikkan di sini. Struktur paling penting adalah dua paket utama plus satu file konfigurasi:

Workspace monorepo didefinisikan lewat file package.json di root:

{
  "private": true,
  "workspaces": [
    "packages/*",
    "plugins/*"
  ]
}

Dengan workspaces seperti ini, Yarn mengelola semua paket dalam satu lockfile — dependency baru cukup ditambahkan sekali dan tersinkron di seluruh paket.

#packages/app — React Frontend

packages/app adalah aplikasi React yang menjadi wajah Backstage. Di sinilah pengguna berinteraksi dengan katalog, scaffolder, TechDocs, dan plugin lain. Frontend ini pada dasarnya adalah shell yang menggabungkan semua plugin menjadi satu pengalaman navigasi yang konsisten.

#packages/backend — Node.js Backend

packages/backend adalah server Node.js yang menyatukan semua layanan backend. Ia bertanggung jawab menjalankan plugin backend, menyediakan service APIs, dan terhubung ke sumber data eksternal seperti GitHub, GitLab, atau database. Backend ini adalah tempat konfigurasi integrasi dirakit.

#app-config.yaml

Hampir semua pengaturan Backstage diletakkan di satu file bernama app-config.yaml. File ini mengatur judul aplikasi, URL publik, port backend, dan kredensial integrasi. Contoh potongannya:

app:
  title: Backstage Example App
  baseUrl: http://localhost:3000
 
backend:
  baseUrl: http://localhost:7007
  listen:
    port: 7007

app-config.yaml akan kalian bedah lebih dalam saat bootstrap di episode 3.

#Primitives Inti

Di balik antarmuka Backstage terdapat lima primitif yang menjadi tulang punggung hampir semua fungsionalitas:

#Software Catalog

Software Catalog adalah pusat dari semuanya — inventaris tunggal untuk service, library, website, dan aset software lainnya. Setiap entri menyimpan metadata seperti pemilik, hubungan antar service, dan status. Kalian akan belajar detailnya di episode 4.

#Software Templates (Scaffolder)

Software Templates, yang dikenal juga sebagai Scaffolder, membiarkan engineer membuat service baru lewat template yang sudah disetujui. Daripada mengisi ticket dan menunggu, seorang developer cukup memilih template, mengisi beberapa parameter, dan service baru langsung di-scaffold beserta repositori, pipeline, dan katalognya. Ini episode 6 nanti.

#TechDocs

TechDocs membawa konsep docs-as-code ke dalam portal. Dokumentasi ditulis sebagai Markdown di dalam repositori, lalu di-build dan ditampilkan di dalam Backstage — selalu sinkron dengan kode karena dikelola bersama. Episode 7 membahasnya.

#Search

Search menyatukan seluruh isi portal: katalog, dokumentasi, dan plugin. Satu kotak pencarian untuk menemukan service, menjelajahi docs, atau memunculkan entitas terkait. Search adalah perekat yang membuat portal besar terasa ringan.

#Plugins

Plugin adalah cara Backstage diperluas. Semua hal yang kalian lihat — katalog, scaffolder, TechDocs — sebenarnya adalah plugin. Organisasi bisa membangun plugin internal untuk alat bantu milik mereka sendiri atau memasang plugin dari ekosistem. Kemampuan inilah yang membuat Backstage lebih dari sekadar aplikasi jadi.

#Frontend dan Backend System

Selain primitif, Backstage punya dua sistem besar yang mengatur bagaimana frontend dan backend dirakit.

#New Frontend System

New Frontend System menjadi default sejak 2026. Sistem ini berbasis extension — setiap bagian UI frontend dideklarasikan sebagai extension yang bisa ditambah, diganti, atau ditata ulang. Plugin dibuat dengan fungsi createFrontendPlugin yang mendaftarkan semua extension sekaligus. Hasilnya: frontend lebih modular dan lebih mudah dikustomisasi tanpa menulis banyak boilerplate.

#New Backend System

Di sisi backend, New Backend System membawa arsitektur modular berbasis service APIs. Setiap fitur didaftarkan lewat panggilan backend.add() dari modul yang bersangkutan. Daripada merakit kode secara manual, kalian cukup menambahkan modul yang diinginkan dan backend menyediakan layanan yang dibutuhkan secara otomatis.

#Penutup

Pada episode 2 ini, kalian memetakan arsitektur Backstage: monorepo dengan packages/app dan packages/backend, konfigurasi pusat app-config.yaml, lima primitif inti (Software Catalog, Software Templates, TechDocs, Search, dan Plugins), serta New Frontend System dan New Backend System yang menjadi fondasi modernnya.

Inti yang harus dibawa pulang:

• Monorepo adalah pola utama — frontend dan backend hidup sebagai paket terpisah dalam satu repositori.
• app-config.yaml adalah sumber konfigurasi seluruh instalasi.
• Software Catalog adalah primitif paling sentral — hampir semua hal lain terhubung ke katalog.
• Frontend dan backend kini modular — extension untuk UI, service APIs untuk backend.

Di episode 3 berikutnya, kalian akan menjalankan semuanya: instalasi dan bootstrap awal — membuat aplikasi Backstage pertama dengan create-app dan melihatnya berjalan di mesin kalian.