Python FastHTML: Panduan Pemula dengan Contoh

Membangun antarmuka web modern dengan Python sering kali berarti harus menangani banyak lapisan, engine templating, tooling JavaScript, dan framework front-end, hanya untuk membuat UI dasar bekerja. FastHTML menawarkan pendekatan yang lebih fokus: framework minimal yang mengutamakan Python dan menyederhanakan pengembangan dengan memungkinkan Anda mendefinisikan antarmuka langsung di kode, tanpa perlu keluar dari bahasa tersebut atau mengelola kompleksitas ekstra.

Artikel ini membahas cara kerja FastHTML, prinsip desain intinya, dan bagaimana membangun aplikasi dunia nyata dengannya—mulai dari halaman sederhana hingga antarmuka interaktif yang digerakkan oleh data.

Jika Anda ingin memperkuat fondasi pengembangan backend sebelum terjun, saya menyarankan untuk melihat tutorial pengembangan backend Python di DataCamp untuk gambaran konsep dan alat web inti.

Apa itu FastHTML?

FastHTML adalah framework Python yang ramping, dirancang untuk menyederhanakan pengembangan antarmuka web. Ia mengatasi tantangan umum dalam pengembangan, pengujian, dan kinerja dengan menghilangkan kebutuhan pengetahuan JavaScript yang luas atau pengelolaan banyak berkas template.

Banyak pengembang Python ingin membuat antarmuka web tanpa harus masuk ke kompleksitas tumpukan JavaScript penuh. FastHTML menjawab tantangan ini, memungkinkan pengembang mendefinisikan rute dan komponen HTML hanya dengan beberapa baris kode Python yang ringkas.

Di luar antarmuka dasar, pengembang dapat dengan mudah memperluas aplikasi yang dibangun dengan FastHTML dengan menambahkan fitur seperti autentikasi, caching, integrasi basis data, dan penataan gaya khusus, sehingga secara signifikan meningkatkan fungsionalitas dan pengalaman pengguna.

Fitur dan Manfaat FastHTML

FastHTML memiliki banyak fitur dan manfaat. Ia mengatasi banyak tantangan terkait pengembangan, pengujian, dan kinerja.

FastHMTL memiliki banyak fitur dan manfaat.

• Pengembangan hanya dengan Python: Anda tidak memerlukan fungsionalitas JavaScript tambahan, cukup Python. Ini menghasilkan proyek yang ramping dengan lebih sedikit berkas dan lebih sedikit boilerplate.
• Dependensi minimal: FastHTML hanya bergantung pada beberapa pustaka eksternal, sehingga peningkatan menjadi mudah dan pemeliharaan kurang kompleks.
• Keamanan. Lebih sedikit dependensi berarti permukaan serangan yang lebih kecil. 
• Tumpukan klien/server terpadu: Menggunakan satu bahasa dan framework untuk logika dan UI mengurangi perpindahan konteks, yang mempercepat pengembangan.
• Elemen HTML sebagai objek Python native: FastHTML memungkinkan Anda menggunakan elemen HTML sebagai objek Python melalui atribut HTMX tanpa JavaScript khusus.
• Penanganan permintaan asinkron: FastHTML mendukung pemrosesan permintaan asinkron yang menghasilkan latensi rendah dan operasi berkonkurensi tinggi.
• Penerapan yang fleksibel: Aplikasi yang sudah jadi dapat diterapkan di platform mana pun yang mendukung Python.

FastHTML mengurangi kompleksitas yang biasanya terkait dengan pengembangan UI web, seperti mengelola berkas template terpisah, skrip pembantu, dan pipeline aset. Kompleksitas pengujian berkurang secara signifikan karena tumpukan Python terpadu memungkinkan pengembang menyederhanakan fase validasi backend, frontend, dan end-to-end.

Prinsip arsitektur inti

FastHTML dibangun di atas prinsip arsitektur inti: lapisan abstraksi HTML yang Pythonic, integrasi dengan standar ASGI, dan interaktivitas yang didorong oleh HTMX.

Lapisan abstraksi HTML yang Pythonic

FastHTML merepresentasikan setiap elemen HTML standar sebagai fungsi Python yang sesuai. Misalnya tag HTML <div> dicerminkan oleh fungsi Python Div(...), <a> menjadi A(..., href=...) dan seterusnya. 

Argumen posisional yang diteruskan ke fungsi elemen Python dirender sebagai elemen anak dalam struktur HTML yang dihasilkan. Misalnya,

Div(
	P("Hello, world!"),
	Ul(Li("one"), Li("two"))
)Didukung oleh

akan menghasilkan keluaran HTML berikut: 

<div>
  <p>Hello, world!</p>
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>Didukung oleh

Argumen keyword menjadi atribut HTML. Sebagai contoh, kode Python

A("Docs", href="/docs", cls="button", hx_get="/info")Didukung oleh

dirender menjadi

<a href="/docs" class="button" hx-get="/info">Docs</a>Didukung oleh

Perhatikan keyword cls dipetakan ke atribut class di HTML. Garis bawah pada nama atribut (hx_get) diubah menjadi tanda hubung (hx-get). 

FastHTML menunda serialisasi, yang memungkinkan rute mengembalikan objek Python alih-alih string HTML mentah. Framework hanya mengonversi pohon objek Python menjadi HTML pada langkah terakhir, tepat sebelum mengirim respons. Desain ini menjaga logika tetap bersih dan bebas dari manipulasi string manual.

FastHTML memberikan manfaat templating yang type-safe dan penanganan atribut yang rapi, sehingga kode lebih jelas dan mudah dirawat. API elemen dan atribut muncul di definisi fungsi atau kelas, membuat kode menjadi self-explanatory. Nama yang aman untuk Python (hx-post menjadi hx_post) menghindari kebutuhan manipulasi string manual.

Refactor menjadi lebih aman dan andal. Mengganti nama parameter akan memperbarui penggunaan secara otomatis. Selain itu, unit test dapat langsung menginstansiasi dan memvalidasi objek komponen, sehingga tidak perlu bergantung pada regex terhadap HTML yang telah dirender.

Integrasi asynchronous server gateway interface (ASGI)

FastHTML berintegrasi dengan ASGI, standar yang digerakkan komunitas untuk Python yang memungkinkan komunikasi non-blocking dan event-driven antara server web dan aplikasi. ASGI mendukung framework web Python modern dengan operasi asinkron di inti tumpukan web.

Server web seperti Uvicorn mematuhi spesifikasi ASGI, memastikan kompatibilitas dan skalabilitas. Framework seperti Starlette dan FastHTML dibangun di atas ASGI untuk menyediakan routing yang tangguh, middleware, dan API tingkat tinggi.

Arsitektur ini menyediakan konkurensi tinggi, dukungan bawaan untuk HTTP, WebSocket, dan server-sent events, serta penanganan permintaan berbasis event yang efisien. Dengan menggunakan event loop asyncio, aplikasi ASGI menghindari overhead satu thread OS per koneksi, sehingga beberapa thread dapat menangani ribuan klien. Objek scope yang distandardisasi dan desain non-blocking memungkinkan handler menjeda untuk I/O tanpa memperlambat permintaan lain.

Interaktivitas yang didorong HTMX

Dengan pustaka HTMX, Anda dapat memperluas atribut HTML standar dengan atribut hx-*. Elemen-elemen ini memungkinkan Anda mengirim permintaan HTTP dan mengganti konten halaman secara dinamis dengan fragmen yang dikembalikan server. Anda tidak memerlukan JavaScript khusus. 

Mulai Menggunakan FastHTML

Memulai dengan FastHTML itu mudah. Kami telah merangkum langkah-langkah utamanya pada bagian di bawah. 

Instalasi dan penyiapan

Untuk memasang FastHTML, gunakan pip install python-fasthtml.

Aplikasi pertama

Mari kita buat aplikasi sederhana untuk menampilkan header dan pesan.

from fasthtml.common import FastHTML, serve, Div, H1, P

app = FastHTML()

@app.get("/")
def home():
    return Div(
        H1("Welcome to FastHTML"),
        P("Hello, world!")
    )

if __name__ == "__main__":
    serve()Didukung oleh

Jalankan berkasnya dengan mengetik python app.py di terminal. 

Klik kontrol pada tautan untuk membuka aplikasi Anda. Anda akan melihat sebuah halaman:

Mendefinisikan rute

Mari tambahkan halaman About ke aplikasi kita. Gunakan kode berikut:

from fasthtml.common import FastHTML, serve, Div, H1, P, A

app = FastHTML()

@app.get("/")
def home():
    return Div(
        H1("Welcome to FastHTML"),
        P("Hello, world!"),
        A("About", href="/about")
    )

@app.get("/about")
def about():
    return Div(
        H1("About"),
        P("This is the about page."),
        A("Home", href="/")
    )

if __name__ == "__main__":
    serve()Didukung oleh

Baris A("About", href="/about") membuat tautan dari beranda ke halaman about. Dekorator @app.get("/about") mendefinisikan rute untuk halaman about.

Implementasi dasar

Di FastHTML, pola UI yang dapat digunakan kembali dikemas dalam fungsi Python sederhana. Fungsi-fungsi ini mengembalikan objek komponen bertingkat, memungkinkan Anda memperlakukan widget seperti Card atau Navbar sebagai objek yang dapat dipanggil. 

Mendefinisikan markup, atribut, dan penataan gaya di satu tempat memastikan konsistensi di seluruh aplikasi. Saat Anda mengimpor dan menggunakan fungsi-fungsi ini, perubahan visual atau perilaku akan menyebar secara otomatis. 

Pendekatan ini mengurangi pengulangan kode, membuat frontend Anda semudah menguji dan merapikan seperti modul Python mana pun.

Untuk mendemonstrasikannya, mari membuat halaman yang menampilkan dua kartu sederhana.

from fasthtml.common import *

def Card(title: str, body: str):
    children = [
        H2(title, cls="card-title"),
        P(body, cls="card-body")
    ]
    return Div(
        *children,
        cls="card",
        style="background- border-radius: 0.5rem;"
    )

app = FastHTML()

@app.get("/")
def home():
    return Div(
        Card("Welcome", "A welcome card."),
        P(''),
        Card("A Second Card", "This is another card."),
        cls="page"
    )Didukung oleh

Fungsi Card menerima string title dan body sebagai argumen dan mengembalikan elemen kartu dengan penataan gaya dasar. Dalam rute home, widget ini digunakan dua kali tanpa menduplikasi kode. Kita mendefinisikan Card sekali dan menggunakannya kembali sesuai kebutuhan, memastikan markup dan gaya konsisten di seluruh aplikasi.

Ada beberapa manfaat membuat widget UI dengan cara ini.

• Pengulangan berkurang: Tetapkan markup dan gaya sekali, dan gunakan kembali komponen di mana pun diperlukan. Pembaruan atau perbaikan bug menyebar secara otomatis.
• Desain UI konsisten: Setiap instance komponen mempertahankan struktur, kelas, dan perilaku yang sama. Ini memperkuat tampilan dan nuansa yang seragam di seluruh aplikasi.
• Pemeliharaan yang disederhanakan: Basis kode yang lebih kecil dan DRY berarti lebih sedikit berkas untuk dikelola, lebih sedikit boilerplate, dan pengembangan yang lebih efisien.

Penggunaan Lanjutan

Bagian ini membahas teknik lanjutan di FastHTML, termasuk penanganan formulir, validasi, dan pola umpan balik kesalahan. Dengan memanfaatkan kelas Python dan komponen terstruktur, Anda dapat membangun formulir yang tangguh dan ramah pengguna sambil menjaga kode tetap bersih dan mudah diuji.

Penanganan formulir dan validasi

FastHTML menyederhanakan penanganan formulir dengan secara otomatis menghasilkan formulir HTML dari kelas Python dan menyediakan data binding yang sederhana untuk memproses pengiriman formulir. 

Sebagai contoh, perhatikan kode berikut.

from fasthtml.common import *
from dataclasses import dataclass

@dataclass
class Profile:
    name:str;
    email:str;
    age:int

profile_form = Form(method="post", action="/profile")(
        Fieldset(
            Label("Name", Input(name="name")),
            Label("Email", Input(name="email")),
            Label("Age", Input(name="age")),
        ),
        Button("Submit", type="submit"),
    )

# Instantiate app
app = FastHTML()

# GET / serves the form (FastHTML will serialize the component to HTML)
@app.get("/")
def home():
    return profile_form

# Simple POST handler to echo back submitted data
@app.post("/profile")
def profile(data: Profile):
    return Div(
        H1("Profile Submitted"),
        P(f"Name: {data.name}"),
        P(f"Email: {data.email}"),
        P(f"Age: {data.age}")
    )Didukung oleh

Kode ini menghasilkan HTML berikut untuk formulir. FastHTML secara otomatis mengurai data formulir ke objek Profile, dengan asumsi nama field yang kompatibel. Di balik layar, ini dapat bergantung pada penguraian formulir gaya Starlette dan lapisan validasi khusus.

<form enctype="multipart/form-data" method="post" action="/profile">
	<fieldset>
	<label>Name<input name="name"></label>
	<label>Email<input name="email"></label>
	<label>Age<input name="age"></label>
</fieldset>

	<button type="submit">Submit</button>
</form>Didukung oleh

Setelah formulir dikirim, FastHTML mengurai data formulir ke objek Profile. Rute profile kemudian mengembalikan halaman konfirmasi, menampilkan nilai yang dikirim langsung dari objek data. Pendekatan ini menyederhanakan penanganan formulir, mengurangi boilerplate, dan memastikan pengetikan data yang kuat di seluruh aplikasi Anda.

Selalu merupakan ide yang baik untuk memvalidasi masukan formulir. Tambahkan logika validasi dengan menulis ulang rute /profile sebagai berikut.

@app.post("/profile")
def submit_profile(data: Profile):
    # Form validation
    if not data.name.strip():
        raise HTTPException(status_code=400, detail="Name is required")
    if not data.email.strip() or "@" not in data.email:
        raise HTTPException(status_code=400, detail="A valid email is required")
    if data.age < 0:
        raise HTTPException(status_code=400, detail="Age must be non-negative")
    
    # If validation passes, render the result
    return Div(
        H1("Profile Submitted"),
        P(f"Name: {data.name}"),
        P(f"Email: {data.email}"),
        P(f"Age: {data.age}")
    )Didukung oleh

Jika name kosong, email kosong, atau age bernilai negatif, pengguna menerima pesan kesalahan yang jelas. Dengan melempar HTTPException dengan status code 400, aplikasi mengomunikasikan kesalahan validasi spesifik, yang membantu pengguna memperbaiki input sebelum mengirim ulang formulir.

Cara yang lebih andal untuk menangani data yang hilang atau tidak valid adalah melakukan pemeriksaan kesalahan eksplisit dan memberikan umpan balik yang ramah pengguna. Misalnya, tulis ulang kode sebagai berikut.

from fasthtml.common import *
from dataclasses import dataclass

@dataclass
class Profile:
    name: str
    email: str
    age: int

def profile_form(data=None, errors=None):
    data   = data   or {}
    errors = errors or {}
    return Form(
        Fieldset(
            Label(
                "Name",
                Input(
                    name="name",
                    value=data.get("name", ""),
                    placeholder="Your name"
                )
            ),
            Small(errors.get("name", ""), cls="error-text"),

            Label(
                "Email",
                Input(
                    name="email",
                    type="email",
                    value=data.get("email", ""),
                    placeholder="[email protected]"
                )
            ),
            Small(errors.get("email", ""), cls="error-text"),

            Label(
                "Age",
                Input(
                    name="age",
                    type="number",
                    value=str(data.get("age", "")),
                    placeholder="Age"
                )
            ),
            Small(errors.get("age", ""), cls="error-text"),
        ),
        Button("Submit", type="submit")
    , method="post", action="/profile", id="profile-form", hx_swap="outerHTML")

app = FastHTML()

@app.get("/")
def home():
    return Div(
        H1("Create Your Profile"),
        profile_form()
    )

@app.post("/profile")
async def submit_profile(request):
    form = await request.form()
    data = {
        "name":  form.get("name", "").strip(),
        "email": form.get("email", "").strip(),
    }
    errors = {}

    # Validate name
    if not data["name"]:
        errors["name"] = "Name is required. "

    # Validate email
    if not data["email"]:
        errors["email"] = "Email is required. "
    elif "@" not in data["email"]:
        errors["email"] = "Enter a valid email address."

    # Validate age
    age_raw = form.get("age", "").strip()
    try:
        age = int(age_raw)
        if age < 0:
            raise ValueError()
        data["age"] = age
    except ValueError:
        errors["age"] = "Age must be a non-negative integer. "

    if errors:
        # re-render form with submitted values and error messages
        return Div(
            H1("Create Your Profile"),
            profile_form(data, errors)
        )

    # Success path
    profile = Profile(**data)
    return Div(
        H1("Profile Submitted"),
        P(f"Name: {profile.name}"),
        P(f"Email: {profile.email}"),
        P(f"Age: {profile.age}")
    )

if __name__ == "__main__":
    serve()Didukung oleh

Jika pengguna melewatkan field yang wajib diisi atau memberikan input yang tidak valid, mereka akan melihat formulir ditampilkan ulang dengan nilai yang dikirim beserta pesan kesalahan yang sesuai di samping setiap field. Pendekatan ini meningkatkan pengalaman pengguna dengan menunjukkan dengan jelas apa yang perlu diperbaiki.

Setelah semua field diisi dan dikirim, Anda akan mendapatkan layar yang serupa dengan berikut ini.

Manajemen autentikasi dan sesi

Menerapkan alur autentikasi

Di FastHTML, data sesi dikelola melalui objek request.session, yang berperilaku seperti kamus Python. Anda dapat menyimpan data dalam sesi dengan menetapkan pasangan kunci-nilai, seperti session['user_id'] = 123. Untuk mengambil data sesi, gunakan read (user_id = session.get('user_id')). Untuk menghapus semua data sesi, panggil session.clear().

Di balik layar, FastHTML menserialisasi kamus sesi ke dalam cookie bertanda tangan, yang persisten di antarpermintaan. Pendekatan ini memungkinkan Anda mengelola autentikasi pengguna dan status sesi menggunakan pola Python yang familier.

Garis besar membangun alur kerja autentikasi

Untuk membangun alur kerja autentikasi, ikuti langkah-langkah ini.

1. Konfigurasi sesi: Tambahkan SessionMiddleware dengan secret_key yang kuat. Setelah dikonfigurasi, request.session tersedia di setiap handler.
2. Model pengguna dan penanganan kata sandi: Definisikan skema pengguna (menggunakan dataclass, model Pydantic, atau ORM) yang mencakup username dan password_hash. Gunakan fungsi hashing (misalnya, hashlib, pbkdf2_hmac, bcrypt) untuk menyimpan dan memverifikasi kata sandi.
3. Alur pendaftaran*: Buat rute GET /register untuk merender formulir pendaftaran. * Gunakan POST /register untuk memvalidasi input formulir, melakukan hash kata sandi, menyimpan catatan pengguna, menetapkan session['user_id'], dan mengalihkan ke halaman terlindungi atau dasbor.
4. Alur login*: Buat rute GET /login untuk menampilkan formulir login.* Gunakan POST /login untuk memverifikasi kredensial. Jika berhasil, tulis session['user_id'] dan alihkan; jika gagal, tampilkan ulang formulir dengan pesan kesalahan.
5. Melindungi rute: Buat fungsi pembantu atau dekorator yang memeriksa session.get('user_id'). Jika pengguna tidak diautentikasi, alihkan ke /login; jika tidak, izinkan akses ke rute yang diminta.
6. Alur logout: Di rute GET /logout, panggil session.clear()` untuk menghapus data sesi dan mengarahkan pengguna ke halaman login atau beranda.

Integrasi basis data

Object-Relational Mapper (ORM) memetakan kelas ke tabel basis data, memungkinkan Anda melakukan kueri data menggunakan objek native alih-alih SQL mentah. Opsi populer termasuk SQLAlchemy dan ORM Django. 

FastHTML memiliki antarmuka "mirip ORM" yang terintegrasi dengan ORM Python atau pustaka kueri apa pun yang mendukung async. Secara default menggunakan SQLite tetapi dapat terintegrasi dengan backend basis data apa pun. Misalnya, perhatikan kode berikut.

# Database setup (SQLite by default, but backend can change)
from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession
from sqlalchemy.orm import sessionmaker, declarative_base
from sqlalchemy import Column, Integer, String, select
from fasthtml.common import *

DATABASE_URL = "sqlite+aiosqlite:///./test.db"  # Change backend here (e.g., PostgreSQL)

engine = create_async_engine(DATABASE_URL, echo=True)
SessionLocal = sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
Base = declarative_base()

# ORM model
class User(Base):
    __tablename__ = "users"
    id = Column(Integer, primary_key=True)
    name = Column(String)

# FastHTML app
app = FastHTML()

@app.get("/")
async def list_users():
    async with SessionLocal() as session:
        result = await session.execute(select(User))
        users = result.scalars().all()
    
    return Div(
        H1("Users"),
        Ul(*[Li(user.name) for user in users])
    )

if __name__ == "__main__":
    import asyncio
    async def init_db():
        async with engine.begin() as conn:
            await conn.run_sync(Base.metadata.create_all)
    asyncio.run(init_db())
    serve()Didukung oleh

Dalam aplikasi FastHTML, Anda melakukan kueri data di lapisan basis data pilihan Anda, lalu meneruskan hasilnya ke komponen FastHTML untuk dirender. Misalnya, setelah mengambil catatan dari basis data, Anda dapat melakukan loop melaluinya di handler rute dan membangun struktur HTML seperti tabel, daftar, atau kartu khusus.

Praktik terbaik tetap berlaku: pilih hanya field yang diperlukan, lakukan penyaringan dan pengurutan di tingkat basis data, dan paginasi set hasil yang besar. FastHTML membantu Anda fokus membangun frontend yang bersih dan dinamis sambil menyerahkan penanganan data pada alat terbaik untuk proyek Anda.

Strategi Optimasi Kinerja

Ada beberapa cara untuk mendapatkan hasil terbaik saat menggunakan FastHTML. Kami telah merangkum beberapa rekomendasi ini di bawah. 

Mekanisme caching

Caching meningkatkan kinerja dengan menghindari pekerjaan berulang pada berbagai lapisan aplikasi Anda. Di tingkat browser dan CDN, gunakan header kontrol cache untuk menahan aset statis seperti gambar, skrip, dan stylesheet. 

Anda dapat melakukan cache seluruh respons rute atau bagian yang mahal di framework web Anda. Di dalam aplikasi FastHTML Anda, Anda melakukan cache seluruh respons rute atau komponen yang mahal, memastikan permintaan berulang kembali dengan cepat tanpa mengkueri ulang basis data atau meregenerasi template.

Di Python, Anda dapat menerapkan caching di tingkat fungsi menggunakan dekorator. Misalnya, dekorator bawaan functools.lru_cache dapat memoisasi fungsi pembantu yang mengambil data pengguna. Sebagai contoh, Anda dapat menggunakan dekorator ini untuk melakukan cache pemanggilan basis data:

from functools import lru_cache

@lru_cache(maxsize=64)
def fetch_user_profile(user_id):
    # simulate an expensive database call
    return db.get_user(user_id)

@app.get("/profile/{user_id}")
def profile(user_id: int):
    profile = fetch_user_profile(user_id)
    return Div(P(profile.name), P(profile.email))Didukung oleh

Antrian tugas asinkron

Aplikasi web tetap responsif dengan memindahkan tugas yang memakan waktu dari siklus permintaan. Alih-alih memblokir server saat membuat laporan, mengirim email, atau memproses data, tugas-tugas ini diantrikan dan dijalankan di latar belakang. 

Dengan pendekatan ini, aplikasi Anda mengirim respons langsung kepada pengguna sementara worker, yang berjalan di proses atau thread terpisah, memproses tugas-tugas antrian secara asinkron.

FastHTML mendukung eksekusi tugas latar belakang dengan berintegrasi dengan BackgroundTasks milik Starlette. Berikut contoh yang menunjukkan cara mengirim email sambutan setelah pendaftaran pengguna.

from fasthtml.common import FastHTML, serve, Div, Form, Input, Button
from starlette.background import BackgroundTasks

app = FastHTML()

def send_welcome_email(email: str):
    # expensive or time consuming work
    ...

@app.post("/signup")
def signup(background_tasks: BackgroundTasks, request):
    form = await request.form()
    email = form["email"]
    # schedule the email task
    background_tasks.add_task(send_welcome_email, email)
    return Div("Thanks for signing up! You will receive an email shortly.")Didukung oleh

Aplikasi Dunia Nyata

FastHTML adalah framework serbaguna yang dapat menjalankan berbagai aplikasi web. Mari lihat bagaimana Anda dapat membangun platform e-commerce dan dasbor data menggunakan FastHTML.

Blueprint platform e-commerce

Mari membangun platform e-niaga dengan FastHTML. Mulailah dengan memodelkan data utama Anda sebagai kelas ORM atau dataclass Python: produk, pengguna, dan item keranjang. 

Buat halaman daftar produk yang melakukan loop melalui catatan produk Anda. Untuk setiap produk, gunakan komponen Python yang dapat digunakan kembali, seperti Card, untuk menampilkan produk, gambar, nama, harga, dan tombol "Add to Cart". Tombol ini menyertakan atribut HTMX seperti hx_post dan hx_target, yang memungkinkannya mengirim permintaan untuk menambahkan item ke keranjang sesi pengguna tanpa memuat ulang seluruh halaman.

Keranjang belanja itu sendiri disimpan dalam kamus session pengguna di server. Di header situs Anda, sertakan komponen ringkasan keranjang yang diperbarui secara dinamis menggunakan HTMX setiap kali item ditambahkan atau dihapus. 

Halaman keranjang membaca data sesi untuk merender setiap item keranjang beserta total keseluruhan. Halaman ini juga menawarkan formulir checkout yang terhubung ke kelas Python untuk validasi. Saat pengguna mengirim formulir, aplikasi Anda membuat catatan pesanan dan mengosongkan keranjang sesi.

Implementasi dasbor data

Dasbor data di FastHTML menggabungkan komponen Python dengan sumber data Anda, menggunakan HTMX untuk interaktivitas dan pembaruan real-time. Logika backend Anda (misalnya, fungsi pembantu async, utilitas CRUD yang di-cache, atau kueri ORM) mengambil data yang diperlukan. 

Dari sana, Anda merancang halaman dengan widget yang dapat digunakan kembali. Ini dapat mencakup kontrol filter (seperti dropdown, pemilih tanggal, atau kotak pencarian) untuk mempersempit kueri, kartu KPI untuk menampilkan metrik utama, tabel data untuk mencantumkan catatan, atau sematan bagan untuk memvisualisasikan tren dan perbandingan. 

Setiap widget ditulis sebagai kode Python native, biasanya sebuah Div, Table, atau komponen Card khusus. FastHTML secara otomatis mengubah objek-objek ini menjadi HTML saat waktu respons.

HTMX memungkinkan dasbor menjadi interaktif. Misalnya, widget filter dapat menggunakan hx_get dan hx_post untuk meminta data yang telah difilter dari server, memperbarui tabel atau bagan secara dinamis tanpa memerlukan muat ulang halaman penuh. 

Analisis Perbandingan dengan Framework Tradisional

FastHTML menonjol dari framework tradisional seperti Django dan Flask dengan merampingkan pengembangan dan kinerja. Mari jelajahi bagaimana perbandingannya di faktor kunci seperti waktu penyiapan, efisiensi kode, dan tolok ukur kinerja.

Kecepatan pengembangan

FastHTML memiliki dua keunggulan utama dibandingkan framework seperti Django dan Flask: waktu penyiapan dan efisiensi kode.

Waktu penyiapan

Pendekatan “baterai-terpasang” Django memerlukan beberapa langkah sebelum Anda dapat menyajikan halaman pertama: memasang paket, menjalankan django-admin startproject, mengonfigurasi pengaturan, dan mendefinisikan aplikasi. Ini sering melibatkan beberapa berkas dan banyak kode boilerplate sebelum Anda menulis logika yang sesungguhnya.

Flask lebih ramping. Setelah pip install, Anda dapat menulis beberapa rute dalam satu berkas. Namun, Anda tetap perlu mengonfigurasi template Jinja, folder statis, dan menambahkan JavaScript untuk interaktivitas.

Dengan FastHTML, penyiapan minimal.

1. Jalankan pip install python-fasthtml uvicorn.
2. Definisikan rute dan komponen HTML yang Pythonic. Anda dapat melakukannya dalam satu berkas.
3. Panggil serve().

Tidak diperlukan engine template terpisah atau konfigurasi folder statis. Anda dapat langsung mulai membangun.

Efisiensi kode

Dengan Django, bahkan halaman “Hello, world” sederhana memerlukan beberapa berkas: views.py, urls.py, settings.py, templates/hello.html, ditambah scaffolding ORM dan admin.

Flask menyederhanakannya menjadi satu berkas, tetapi Anda masih perlu menulis HTML secara manual di template Jinja atau string inline, dan JavaScript untuk interaktivitas.

FastHTML memungkinkan Anda mendefinisikan UI sebagai objek Python sehingga tidak perlu berpindah berkas atau bahasa. HTMX menangani interaktivitas secara deklaratif tanpa skrip khusus. Hasilnya adalah lebih sedikit baris kode, tanpa template terpisah atau pipeline aset statis, dan satu permukaan yang dapat diuji untuk markup dan perilaku.

Tolok ukur kinerja

Studi tolok ukur menunjukkan framework asinkron mengungguli yang sinkron di bawah konkurensi tinggi. Misalnya, dalam perbandingan kinerja antara Flask, Django, Quart, dan FastAPI, framework asinkron (Quart dan FastAPI) menangani permintaan per detik yang jauh lebih banyak daripada rekan sinkronnya. 

Ini disebabkan oleh mekanisme penanganan permintaan non-blocking, yang memungkinkan mereka mengelola banyak permintaan secara bersamaan tanpa menunggu operasi I/O selesai.

Tabel perbandingan 

Untuk lebih memahami bagaimana FastHTML dibandingkan dengan framework yang lebih mapan, tabel di bawah ini menguraikan perbedaan kunci dalam waktu penyiapan, efisiensi kode, dan karakteristik kinerja antara FastHTML, Flask, dan Django.

Kesimpulan

FastHTML menawarkan pendekatan Pythonic yang segar untuk membangun aplikasi web, menggabungkan fleksibilitas objek Python dengan kekuatan eksekusi asinkron. Dengan menghilangkan kebutuhan akan berkas template terpisah, pipeline aset statis, dan framework frontend, FastHTML merampingkan pengembangan dan memberdayakan Anda untuk membangun antarmuka yang dinamis dan interaktif dengan cepat dan efisien.

Dengan HTMX untuk interaktivitas, ASGI untuk kinerja, dan integrasi mulus dengan ORM yang mendukung async, FastHTML sangat cocok untuk proyek web modern—mulai dari platform e-niaga hingga dasbor data dan seterusnya. Penyiapan minimal, boilerplate yang berkurang, dan basis kode terpadu menjadikannya pilihan menarik bagi pengembang yang mencari alternatif ringan dan produktif dibanding framework tradisional seperti Django dan Flask.

Bagi pembaca yang tertarik menjelajahi alat dan pendekatan terkait pengembangan web berbasis Python, sumber berikut menawarkan langkah lanjutan yang bermanfaat.

• Pengantar FastAPI
• Membangun API di Python
• Python NiceGUI: Bangun Antarmuka Web yang Kuat dengan Mudah
• Tutorial FastAPI: Pengantar Menggunakan FastAPI