Python FastHTML: Örneklerle Başlangıç Kılavuzu

Python ile modern web arayüzleri oluşturmak çoğu zaman yalnızca temel bir arayüzü çalıştırmak için bile birden fazla katman, şablon motoru, JavaScript araçları ve ön uç çerçeveleriyle uğraşmak anlamına gelir. FastHTML daha odaklı bir yaklaşım sunar: arayüzleri doğrudan kod içinde tanımlamanıza olanak tanıyan, dili terk etmeyi ya da ekstra karmaşıklık yönetimini gerektirmeyen, sade, Python-öncelikli bir çerçeve.

Bu makale FastHTML’ın nasıl çalıştığını, temel tasarım ilkelerini ve bununla nasıl gerçek dünyadan uygulamalar geliştirebileceğinizi — basit sayfalardan tamamen etkileşimli, veri odaklı arayüzlere kadar — inceler.

Dalmadan önce arka uç geliştirme temelinizi güçlendirmek istiyorsanız, temel web kavramları ve araçlarına genel bakış için DataCamp’teki şu Python backend development tutorial kaynağına göz atmanızı öneririm.

FastHTML nedir?

FastHTML, web arayüzü geliştirmeyi basitleştirmek için tasarlanmış sadeleştirilmiş bir Python çerçevesidir. Kapsamlı JavaScript bilgisi veya birden fazla şablon dosyası yönetme gereksinimini ortadan kaldırarak geliştirme, test ve performanstaki yaygın zorlukları ele alır.

Birçok Python geliştiricisi, tam bir JavaScript yığınının karmaşıklığına girmeden web arayüzleri oluşturmak ister. FastHTML bu ihtiyaca yanıt verir ve geliştiricilerin yalnızca birkaç özlü Python satırıyla yönlendirmeleri ve HTML bileşenlerini tanımlamasını sağlar.

Basit arayüzlerin ötesinde, geliştiriciler kimlik doğrulama, önbellekleme, veritabanı entegrasyonu ve özel stil gibi özellikleri dahil ederek FastHTML ile oluşturulan uygulamaları kolayca genişletebilir; bu da işlevselliği ve kullanıcı deneyimini önemli ölçüde iyileştirir.

FastHTML’ın Özellikleri ve Faydaları

FastHTML’ın birçok özelliği ve faydası vardır. Geliştirme, test ve performansla ilgili pek çok zorluğu aşar.

FastHMTL’ın birçok özelliği ve faydası vardır.

• Yalnızca Python ile geliştirme: Ek JavaScript işlevselliğine gerek yoktur, yalnızca Python yeterlidir. Bu da daha az dosya ve daha az kalıp kod içeren yalın projelerle sonuçlanır.
• Minimum bağımlılık: FastHTML yalnızca birkaç harici kütüphaneye dayanır; bu da yükseltmeleri kolaylaştırır ve bakımı daha az karmaşık hâle getirir.
• Güvenlik. Daha az bağımlılık, daha küçük bir saldırı yüzeyi demektir. 
• Birleşik istemci/sunucu yığını: Mantık ve arayüz için tek bir dil ve çerçeve kullanmak, bağlam değiştirmeyi azaltır ve geliştirmeyi hızlandırır.
• Yerel Python nesneleri olarak HTML öğeleri: FastHTML, özel JavaScript olmaksızın HTMX öznitelikleri aracılığıyla HTML öğelerini Python nesneleri olarak kullanmanıza olanak tanır.
• Eşzamanlı olmayan istek işleme: FastHTML, düşük gecikme ve yüksek eşzamanlılık sağlayan asenkron istek işlemeyi destekler.
• Esnek dağıtım: Tamamlanan uygulamalar, Python’ı destekleyen herhangi bir platforma dağıtılabilir.

FastHTML, ayrı şablon dosyaları, yardımcı betikler ve varlık boru hatları yönetme gibi tipik olarak web arayüzü geliştirmeyle ilişkilendirilen karmaşıklığı azaltır. Birleşik Python yığını sayesinde test karmaşıklığı önemli ölçüde azalır; geliştiriciler arka uç, ön uç ve uçtan uca doğrulama aşamalarını basitleştirebilir.

Temel mimari ilkeler

FastHTML, Pythonik HTML soyutlama katmanı, ASGI standardı ile entegrasyon ve HTMX odaklı etkileşim olmak üzere temel mimari ilkeler üzerine inşa edilmiştir.

Pythonik HTML soyutlama katmanı

FastHTML, her standart HTML öğesini karşılık gelen bir Python işlevi olarak temsil eder. Örneğin, HTML etiketi <div> Python’daki Div(...) işleviyle yansıtılır, <a> ise A(..., href=...) olur vb. 

Python öğe işlevlerine geçirilen konumsal argümanlar, ortaya çıkan HTML yapısında alt öğeler olarak işlenir. Örneğin,

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

şu HTML çıktısını üretir: 

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

Anahtar sözcük argümanları HTML özniteliklerine dönüşür. Örneğin, şu Python kodu

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

şuna dönüştürülür

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

cls anahtar sözcüğünün HTML’deki class özniteliğine eşlendiğine dikkat edin. Öznitelik adlarındaki alt çizgiler (hx_get) kısa çizgilere (hx-get) dönüştürülür. 

FastHTML serileştirmeyi erteler; bu sayede yönlendirmeler, ham HTML dizgileri yerine Python nesneleri döndürebilir. Çerçeve, yalnızca son adımda, yanıt gönderilmeden hemen önce Python nesne ağacını HTML’e dönüştürür. Bu tasarım, mantığı temiz tutar ve manuel dize işlemeden arındırır.

FastHTML, tür güvenli şablonlama ve öznitelik işleme avantajları sunar; bu da daha anlaşılır ve sürdürülebilir kod sağlar. Öğenin API’leri ve öznitelikleri işlev veya sınıf tanımlarında görünür, bu da kodu kendi kendini açıklayan hâle getirir. Python-güvenli adlar (hx-post → hx_post) manuel dize işleme ihtiyacını ortadan kaldırır.

Yeniden düzenleme daha güvenli ve daha güvenilirdir. Bir parametreyi yeniden adlandırmak kullanım yerlerini otomatik olarak günceller. Ayrıca, birim testleri doğrudan bileşen nesnelerini oluşturup doğrulayabilir; işlenmiş HTML üzerinde regex’lere güvenmeye gerek kalmaz.

Asenkron sunucu geçidi arabirimi (ASGI) entegrasyonu

FastHTML, Python için topluluk tarafından yürütülen bir standart olan ve web sunucuları ile uygulamalar arasında engellemeyen, olay güdümlü iletişimi sağlayan ASGI ile entegre olur. ASGI, web yığınının çekirdeğinde asenkron işlemleri destekleyerek modern Python web çerçevelerine güç verir.

Uvicorn gibi web sunucuları ASGI belirtimine uyar; bu da uyumluluk ve ölçeklenebilirlik sağlar. Starlette ve FastHTML gibi çerçeveler, sağlam yönlendirme, ara katman (middleware) ve üst düzey API’ler sunmak için ASGI üzerine inşa edilir.

Bu mimari, yüksek eşzamanlılık, HTTP, WebSocket ve sunucu kaynaklı olaylar için yerleşik destek ve verimli, olay güdümlü istek işleme sağlar. Bir asyncio olay döngüsü kullanarak ASGI uygulamaları, bağlantı başına bir işletim sistemi iş parçacığı yükünü önler; bu da birkaç iş parçacığının binlerce istemciyi idare etmesine olanak tanır. Standartlaştırılmış kapsam (scope) nesnesi ve engellemeyen tasarım, işleyicilerin başka istekleri yavaşlatmadan G/Ç için beklemesini mümkün kılar.

HTMX odaklı etkileşim

HTMX kütüphanesiyle, standart HTML özniteliklerini hx-* öznitelikleriyle genişletebilirsiniz. Bu öğeler, HTTP istekleri göndermenizi ve sayfa içeriğini sunucudan dönen parçalarla dinamik olarak değiştirmenizi sağlar. Özel JavaScript yazmanıza gerek yoktur. 

FastHTML ile Başlarken

FastHTML ile başlamak oldukça basittir. Aşağıdaki bölümlerde temel adımları özetledik. 

Kurulum ve yapılandırma

FastHTML’ı kurmak için pip install python-fasthtml komutunu kullanın.

İlk uygulama

Bir başlık ve bir mesaj gösteren basit bir uygulama oluşturalım.

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()

Dosyayı python app.py yazarak terminalde çalıştırın. 

Bağlantıyı açmak için Ctrl’le tıklayın. Şöyle bir sayfa göreceksiniz:

Bir yönlendirme tanımlama

Uygulamamıza bir Hakkında sayfası ekleyelim. Aşağıdaki kodu kullanın:

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()

A("About", href="/about") satırı, ana sayfadan hakkında sayfasına bir bağlantı oluşturur. @app.get("/about") dekoratörü, hakkında sayfası için yönlendirmeyi tanımlar.

Temel uygulama

FastHTML’da, yeniden kullanılabilir arayüz kalıpları basit Python işlevlerine kapsüllenmiştir. Bu işlevler, iç içe geçmiş bileşen nesneleri döndürür; böylece bir Card veya Navbar gibi bileşenleri çağrılabilir nesneler olarak ele alabilirsiniz. 

İşaretlemeyi, öznitelikleri ve stili tek bir yerde tanımlamak uygulama genelinde tutarlılık sağlar. Bu işlevleri içe aktarıp kullandığınızda, görsel ya da davranışsal değişiklikler otomatik olarak yayılır. 

Bu yaklaşım, tekrarlanan kodu azaltır ve ön yüzünüzü herhangi bir Python modülü kadar kolay test edip yeniden düzenlemenizi sağlar.

Bunu göstermek için iki basit kart görüntüleyen bir sayfa oluşturalım.

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"
    )

Card işlevi, argüman olarak bir title ve bir body dizgesi alır ve temel stili olan bir kart öğesi döndürür. home yönlendirmesinde bu bileşen, kodu çoğaltmadan iki kez kullanılır. Card’ı bir kez tanımlar ve ihtiyaç duydukça tekrar kullanırız; bu da uygulama genelinde tutarlı işaretleme ve stil sağlar.

Bu şekilde arayüz bileşenleri oluşturmanın çeşitli faydaları vardır.

• Azaltılmış tekrar: İşaretlemeyi ve stili bir kez belirleyin ve bileşeni gerektiği yerde kullanın. Güncellemeler veya hata düzeltmeleri otomatik olarak yayılır.
• Tutarlı arayüz tasarımı: Bileşeninizin her örneği aynı yapı, sınıflar ve davranışı korur. Bu da uygulama genelinde bir örüntü ve his sağlar.
• Basitleştirilmiş bakım: Daha küçük ve DRY bir kod tabanı, yönetilecek daha az dosya, daha az kalıp kod ve daha verimli geliştirme demektir.

İleri Düzey Kullanım

Bu bölümde, FastHTML’da form işleme, doğrulama ve hata geri bildirimi kalıpları dahil olmak üzere ileri düzey teknikler ele alınmaktadır. Python sınıfları ve yapılandırılmış bileşenlerden yararlanarak temiz ve test edilebilir kodla sağlam, kullanıcı dostu formlar oluşturabilirsiniz.

Form işleme ve doğrulama

FastHTML, Python sınıflarından otomatik olarak HTML formları üreterek ve form gönderimlerini işlemek için basit veri bağlama sağlayarak form işlemeyi kolaylaştırır. 

Örneğin, aşağıdaki kodu ele alın.

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}")
    )

Bu kod, form için aşağıdaki HTML’i üretir. FastHTML, uyumlu alan adlarını varsayarak form verilerini otomatik olarak Profile nesnesine ayrıştırır. Arka planda bu, Starlette tarzı form ayrıştırmaya ve özel bir doğrulama katmanına dayanabilir.

<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>

Form gönderildikten sonra FastHTML, form verilerini Profile nesnesine ayrıştırır. Ardından profile yönlendirmesi, gönderilen değerleri doğrudan data nesnesinden gösteren bir onay sayfası döndürür. Bu yaklaşım, form işlemeyi basitleştirir, kalıp kodu azaltır ve uygulama genelinde güçlü veri türlemesini sağlar.

Form girdilerini doğrulamak her zaman iyi bir fikirdir. Doğrulama mantığını eklemek için /profile yönlendirmesini aşağıdaki gibi yeniden yazın.

@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}")
    )

name eksikse, email eksikse ya da age negatifse kullanıcı net bir hata mesajı alır. 400 durum kodlu bir HTTPException yükselterek uygulama, belirli doğrulama hatasını iletir; bu da kullanıcının formu tekrar göndermeden önce girdiyi düzeltmesine yardımcı olur.

Eksik veya hatalı verileri ele almanın daha sağlam bir yolu, açık hata kontrolü yapmak ve kullanıcı dostu geri bildirim sunmaktır. Örneğin, kodu aşağıdaki gibi yeniden yazın.

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="you@example.com"
                )
            ),
            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()

Kullanıcı gerekli bir alanı atladığında ya da geçersiz bir girdi verdiğinde, gönderilen değerler ve her alanın yanında uygun hata mesajlarıyla birlikte form yeniden işlenir. Bu yaklaşım, neyin düzeltilmesi gerektiğini açıkça belirterek kullanıcı deneyimini iyileştirir.

Tüm alanları doldurup gönderdiğinizde aşağıdakine benzer bir ekran görürsünüz.

Kimlik doğrulama ve oturum yönetimi

Kimlik doğrulama akışlarını uygulama

FastHTML’da oturum verileri, bir Python sözlüğü gibi davranan request.session nesnesi aracılığıyla yönetilir. session['user_id'] = 123 gibi anahtar-değer çiftleri atayarak oturumda veri saklayabilirsiniz. Oturum verilerini almak için read (user_id = session.get('user_id')) kullanın. Tüm oturum verilerini temizlemek için session.clear() çağrısı yapın.

Arka planda FastHTML, oturum sözlüğünü imzalı bir çereze serileştirir ve bu çerez istekler arasında kalıcıdır. Bu yaklaşım, kullanıcı kimlik doğrulaması ve oturum durumunu tanıdık Python kalıplarıyla yönetmenizi sağlar.

Kimlik doğrulama iş akışları taslağı

Bir kimlik doğrulama iş akışı oluşturmak için şu adımları izleyin.

1. Oturumları yapılandırın: Güçlü bir secret_key ile SessionMiddleware ekleyin. Yapılandırıldıktan sonra request.session her işleyicide kullanılabilir.
2. Kullanıcı modeli ve parola yönetimi: Kullanıcı adı ve password_hash içeren bir kullanıcı şeması (dataclass, Pydantic model ya da ORM) tanımlayın. Parolaları saklamak ve doğrulamak için bir karma işlevi (ör. hashlib, pbkdf2_hmac, bcrypt) kullanın.
3. Kayıt akışı*: Bir kayıt formu sunmak için GET /register yönlendirmesi oluşturun. * POST /register ile form girdilerini doğrulayın, parolayı karma hâline getirin, kullanıcı kaydını oluşturun, session['user_id'] değerini atayın ve korumalı bir sayfaya veya panoya yönlendirin.
4. Oturum açma akışı*: Giriş formunu göstermek için GET /login yönlendirmesi oluşturun.* Kimlik bilgilerini doğrulamak için POST /login kullanın. Başarılı olursa session['user_id'] yazın ve yönlendirin; başarısız olursa formu bir hata mesajıyla yeniden işleyin.
5. Yönlendirmeleri koruma: session.get('user_id') kontrol eden bir yardımcı işlev ya da dekoratör oluşturun. Kullanıcı kimliği doğrulanmamışsa /login sayfasına yönlendirin; aksi hâlde istenen yönlendirmeye erişime izin verin.
6. Oturumu kapatma akışı: GET /logout yönlendirmesinde, session.clear()` çağırarak oturum verilerini kaldırın ve kullanıcıyı giriş ya da ana sayfaya yönlendirin.

Veritabanı entegrasyonu

Nesne-İlişkisel Eşleyici (ORM), sınıfları veritabanı tablolarına eşler; böylece ham SQL yerine yerel nesnelerle sorgu yapabilirsiniz. Popüler seçenekler arasında SQLAlchemy ve Django’nun ORM’i bulunur. 

FastHTML, herhangi bir asenkron uyumlu Python ORM’i veya sorgu kütüphanesiyle entegre olan "ORM-benzeri" bir arayüze sahiptir. Varsayılan olarak SQLite kullanır, ancak herhangi bir veritabanı arka ucu ile entegre olabilir. Örneğin, aşağıdaki kodu düşünün.

# 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()

Bir FastHTML uygulamasında, verileri seçtiğiniz veritabanı katmanında sorgular ve sonuçları işlemek için FastHTML bileşenlerine aktarırsınız. Örneğin, veritabanınızdan kayıtları aldıktan sonra, bir yönlendirme işleyicisinde bunların üzerinden döngü kurarak tablolar, listeler veya özel kartlar gibi HTML yapıları oluşturabilirsiniz.

En iyi uygulamalar hâlâ geçerlidir: yalnızca gerekli alanları seçin, filtreleme ve sıralamayı veritabanı düzeyinde yapın ve büyük sonuç kümelerini sayfalandırın. FastHTML, veri işlemesini projeniz için en iyi araçlara bırakarak temiz, dinamik ön yüzler oluşturmanıza odaklanmanıza yardımcı olur.

Performans Optimizasyon Stratejileri

FastHTML kullanırken en iyi sonuçları elde etmenin birkaç yolu vardır. Aşağıda bu önerilerden bazılarını özetledik. 

Önbellekleme mekanizmaları

Önbellekleme, uygulamanızın farklı katmanlarında yinelenen çalışmayı önleyerek performansı iyileştirir. Tarayıcı ve CDN düzeyinde, görseller, betikler ve stil sayfaları gibi statik varlıklar için önbellek denetimi başlıklarını kullanın. 

Web çerçevenizde tüm yönlendirme yanıtlarını veya maliyetli bölümleri önbelleğe alabilirsiniz. FastHTML uygulamanız içinde, tüm yönlendirme yanıtlarını veya pahalı bileşenleri önbelleğe alarak yineleyen isteklerin veritabanını yeniden sorgulamadan veya şablonları yeniden üretmeden hızla dönmesini sağlayabilirsiniz.

Python’da, dekoratörler kullanarak işlev düzeyinde önbellekleme uygulayabilirsiniz. Örneğin, yerleşik functools.lru_cache dekoratörü, kullanıcı verilerini getiren bir yardımcı işlevi bellekleyebilir. Örneğin, bu dekoratörü veritabanı çağrılarını önbelleğe almak için kullanabilirsiniz:

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))

Asenkron görev kuyrukları

Web uygulamaları, zaman alan görevleri istek döngüsünden ayırarak duyarlı kalır. Rapor üretmek, e-posta göndermek veya veri işlemek için sunucuyu engellemek yerine bu görevler kuyruğa alınır ve arka planda çalıştırılır. 

Bu yaklaşımla, uygulamanız kullanıcıya anında bir yanıt gönderirken, ayrı süreçlerde veya iş parçacıklarında çalışan işleyiciler, kuyruktaki görevleri asenkron olarak yürütür.

FastHTML, Starlette’in BackgroundTasks bileşeniyle entegrasyon sağlayarak arka plan görev yürütmesini destekler. İşte kullanıcı kaydından sonra hoş geldiniz e-postası göndermeyi gösteren bir örnek.

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.")

Gerçek Dünya Uygulamaları

FastHTML, çok çeşitli web uygulamalarına güç verebilen çok yönlü bir çerçevedir. FastHTML kullanarak bir e-ticaret platformu ve bir veri panosu oluşturma yaklaşımını nasıl ele alabileceğinize bakalım.

E-ticaret platformu taslağı

FastHTML ile bir e-ticaret platformu oluşturalım. Önce temel verilerinizi ORM sınıfları veya Python dataclass’ları olarak modelleyin: ürünler, kullanıcılar ve sepet öğeleri. 

Ürün kayıtlarınız üzerinde dönen bir ürün listeleme sayfası oluşturun. Her ürün için, ürünü, görseli, adı, fiyatı ve bir "Sepete Ekle" düğmesini göstermek üzere bir Card gibi yeniden kullanılabilir bir Python bileşeni kullanın. Bu düğme, tüm sayfayı yeniden yüklemeden öğeyi kullanıcının oturum sepetine eklemek için istek göndermesini sağlayan hx_post ve hx_target gibi HTMX özniteliklerini içerir.

Alışveriş sepeti, sunucuda kullanıcının session sözlüğünde saklanır. Site başlığınıza, öğeler eklendikçe ya da kaldırıldıkça HTMX ile dinamik olarak güncellenen bir sepet özet bileşeni ekleyin. 

Sepet sayfası, her sepet öğesini ve genel toplamı işlemek için oturum verilerini okur. Ayrıca doğrulama için bir Python sınıfına bağlanan bir ödeme formu sunar. Kullanıcı formu gönderdiğinde uygulamanız bir sipariş kaydı oluşturur ve oturum sepetini temizler.

Veri panosu uygulaması

FastHTML’da bir veri panosu, etkileşim ve gerçek zamanlı güncellemeler için HTMX kullanarak Python bileşenlerini veri kaynaklarınızla birleştirir. Arka uç mantığınız (ör. asenkron yardımcı işlevler, önbellekli CRUD yardımcıları veya ORM sorguları) gerekli verileri getirir. 

Buradan yeniden kullanılabilir bileşenlerle bir sayfa tasarlarsınız. Bunlar; sorguları daraltmak için filtre kontrolleri (açılır menüler, tarih seçiciler veya arama kutuları gibi), temel metrikleri göstermek için KPI kartları, kayıtları listelemek için veri tabloları veya eğilimleri ve karşılaştırmaları görselleştirmek için grafik gömülerini içerebilir. 

Her bileşen yerel Python kodu olarak yazılır; genellikle bir Div, Table veya özel bir Card bileşenidir. FastHTML, bu nesneleri yanıt anında otomatik olarak HTML’e dönüştürür.

HTMX, panoların etkileşimli olmasını sağlar. Örneğin, filtre bileşenleri, sunucudan filtrelenmiş verileri istemek için hx_get ve hx_post kullanarak, tam sayfa yeniden yüklemesi gerektirmeden tabloları veya grafikleri dinamik olarak güncelleyebilir. 

Geleneksel Çerçevelerle Karşılaştırmalı Analiz

FastHTML, hem geliştirmeyi hem de performansı sadeleştirerek Django ve Flask gibi geleneksel çerçevelerden ayrışır. Kurulum süresi, kod verimliliği ve performans karşılaştırmaları gibi temel etkenler üzerinden nasıl kıyaslandığını inceleyelim.

Geliştirme hızı

FastHTML, Django ve Flask gibi çerçevelere kıyasla iki önemli avantaja sahiptir: kurulum süresi ve kod verimliliği.

Kurulum süresi

Django’nun “pilleri dahil” yaklaşımı, ilk sayfanızı sunmadan önce birkaç adım gerektirir: paketi kurun, django-admin startproject çalıştırın, ayarları yapılandırın ve bir uygulama tanımlayın. Bu, çoğu zaman birkaç dosya ve epeyce kalıp kod yazmayı gerektirir.

Flask daha yalındır. pip install sonrası, tek bir dosyada birkaç yönlendirme yazabilirsiniz. Ancak yine de Jinja şablonlarını, statik klasörleri yapılandırmanız ve etkileşim için JavaScript eklemeniz gerekir.

FastHTML ile kurulum minimumdur.

1. pip install python-fasthtml uvicorn komutunu çalıştırın.
2. Yönlendirmeleri ve Pythonik HTML bileşenlerini tanımlayın. Bunu tek bir dosyada yapabilirsiniz.
3. serve() çağrısı yapın.

Ayrı bir şablon motoru veya statik klasör yapılandırması gerekli değildir. Hemen inşa etmeye başlayabilirsiniz.

Kod verimliliği

Django ile, basit bir “Hello, world” sayfası bile birden fazla dosya gerektirir: views.py, urls.py, settings.py, templates/hello.html ve ayrıca ORM ile yönetim iskeleti.

Flask bu süreci tek bir dosyaya indirger, ancak yine de HTML’i Jinja şablonlarında veya satır içi dizgilerde elle yazmanız ve etkileşim için JavaScript eklemeniz gerekir.

FastHTML, arayüzünüzü Python nesneleri olarak tanımlamanıza olanak tanır; böylece dosyalar veya diller arasında geçiş yapmanız gerekmez. HTMX, özel betikler olmadan bildirimsel olarak etkileşimi ele alır. Sonuç olarak daha az kod satırı, ayrı şablonlar veya statik varlık boru hatları olmadan ve hem işaretleme hem de davranış için tek bir test edilebilir yüzey elde edersiniz.

Performans karşılaştırmaları

Karşılaştırmalı çalışmalar, yüksek eşzamanlılık altında asenkron çerçevelerin, eşzamanlı çalışanlara göre daha iyi performans gösterdiğini ortaya koyar. Örneğin, Flask, Django, Quart ve FastAPI’nin karşılaştırıldığı bir performans testinde, asenkron çerçeveler (Quart ve FastAPI) saniye başına anlamlı derecede daha fazla istek işledi. 

Bu durum, G/Ç işlemlerinin tamamlanmasını beklemeden aynı anda birden fazla isteği yönetmelerine olanak tanıyan engellemeyen istek işleme mekanizmalarına bağlanır.

Karşılaştırma tablosu 

FastHTML’ın daha köklü çerçevelerle nasıl kıyaslandığını daha iyi anlamak için, aşağıdaki tablo FastHTML, Flask ve Django arasında kurulum süresi, kod verimliliği ve performans özelliklerindeki temel farkları özetlemektedir.

Sonuç

FastHTML, Python nesnelerinin esnekliğini asenkron yürütmenin gücüyle birleştirerek web uygulamaları oluşturmaya taze ve Pythonik bir yaklaşım sunar. Ayrı şablon dosyaları, statik varlık boru hatları ve ön uç çerçeveleri ihtiyacını ortadan kaldırarak geliştirmeyi sadeleştirir ve dinamik, etkileşimli arayüzleri hızlı ve verimli bir şekilde oluşturmanıza imkân tanır.

Etkileşim için HTMX, performans için ASGI ve asenkron uyumlu ORM’lerle sorunsuz entegrasyon sayesinde FastHTML; e-ticaret platformlarından veri panolarına ve ötesine kadar modern web projeleri için uygundur. Minimal kurulum, azaltılmış kalıp kod ve birleşik kod tabanı, Django ve Flask gibi geleneksel çerçevelere hafif ve üretken bir alternatif arayan geliştiriciler için çekici kılar.

Python tabanlı web geliştirmeye yönelik ilgili araç ve yaklaşımları keşfetmek isteyen okurlar için aşağıdaki kaynaklar yararlı birer sonraki adımdır.

• FastAPI’ye Giriş
• Python ile API’ler Oluşturma
• Python NiceGUI: Güçlü Web Arayüzlerini Kolayca Oluşturun
• FastAPI Eğitimi: FastAPI Kullanımına Giriş