Reflex: Membangun Aplikasi Web Full-Stack dengan Python Murni
Reflex memungkinkan Anda membangun aplikasi web lengkap — frontend, backend, dan basis data — tanpa keluar dari Python. Berbeda dengan tool yang berorientasi dashboard, Reflex mengompilasi komponen Python Anda menjadi frontend React/Next.js sementara logika aplikasi berjalan di backend FastAPI, sehingga Anda mendapatkan manajemen state, routing, dan persistensi yang sesungguhnya. Tutorial ini membahas arsitektur, model state, komponen, routing, handler async, akses basis data, dan deployment menggunakan satu contoh task manager yang utuh.
Apa Itu Reflex dan Bagaimana Cara Kerjanya
Reflex (sebelumnya Pynecone) adalah framework untuk membangun aplikasi web full-stack di mana Anda hanya menulis Python. Saat proses build, komponen yang Anda deskripsikan dalam Python dikompilasi menjadi frontend React/Next.js. Saat runtime, state aplikasi Anda berada di kelas-kelas Python yang dijalankan di backend FastAPI. Browser dan backend berkomunikasi melalui koneksi WebSocket: interaksi pengguna memicu event handler di server, server mengubah state, dan hanya state yang berubah yang dikirim kembali ke klien untuk me-render ulang komponen yang terdampak.
Model ini berbeda dari Streamlit. Pada Streamlit, setiap interaksi menjalankan ulang seluruh skrip dari atas ke bawah, dan Anda mengelola persistensi melalui st.sessionstate. Reflex justru menyimpan objek state berumur panjang per sesi klien dan memperbarui UI secara reaktif — hanya bagian yang terikat ke state var yang berubah saja yang diperbarui. Anda mendapatkan nuansa single-page application dengan routing sisi klien, ditambah backend nyata yang bisa Anda hubungkan dengan basis data dan background task.
Sekilas Arsitektur
- Frontend: Komponen Python dikompilasi menjadi komponen React yang di-render oleh Next.js. Styling dipetakan ke CSS/Tailwind di balik layar.
- Backend: Server FastAPI meng-host kelas
Statedan event handler Anda. - Transport: Sebuah WebSocket membawa event dari klien ke server dan delta state kembali.
- Basis data (opsional): Integrasi SQLModel bawaan (SQLite secara default) yang dapat diakses dari event handler.
Browser (React/Next.js) <-- WebSocket --> Backend FastAPI (State Python + handler)
|
Basis data (SQLModel)
Instalasi dan Penyiapan Proyek
Reflex membutuhkan Python 3.10 atau lebih baru. Buat environment terisolasi, lalu instal paketnya.
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install reflex
Verifikasi instalasi
reflex --version
Inisialisasi proyek baru di dalam direktori kosong. Perintah init menyusun struktur dan meminta Anda memilih template; pilih template kosong untuk memulai dari awal yang bersih.
mkdir taskmanager && cd taskmanager
reflex init
Saat diminta, pilih template "blank"
Struktur Proyek
Setelah inisialisasi, Anda mendapatkan tata letak seperti berikut:
taskmanager/
├── taskmanager/
│ └── taskmanager.py # Aplikasi Anda: state, komponen, halaman
├── assets/ # File statis (gambar, favicon)
├── rxconfig.py # Konfigurasi aplikasi (nama, dburl, dll.)
└── requirements.txt
File rxconfig.py mendeklarasikan nama aplikasi dan konfigurasi seperti URL basis data serta port frontend/backend.
import reflex as rx
config = rx.Config(
appname="taskmanager",
dburl="sqlite:///taskmanager.db",
)
Menjalankan dalam Mode Pengembangan
Jalankan server pengembangan. Reflex mengompilasi frontend, menjalankan backend FastAPI, dan menyajikan aplikasi dengan hot reload.
reflex run
Frontend di http://localhost:3000, backend di http://localhost:8000
Model State
State adalah inti dari Reflex. Anda mendefinisikan state dengan menurunkan kelas dari rx.State. Atribut kelas dengan anotasi tipe menjadi state var — nilai reaktif yang disimpan per sesi klien. Method pada kelas state adalah event handler: keduanya berjalan di backend dan merupakan satu-satunya tempat yang seharusnya mengubah state.