HTMX + FastAPI: สร้าง Web App Python เร็ว 3 เท่า (ไม่ใช้ React)

byBoonyadol Morruchai (Senior Full-stack Developer) •11:08

0

htmx + FastAPI แทน React: สร้าง Web App Python ที่ load เร็วกว่า 3 เท่า โดยไม่ต้องเขียน JavaScript trend

ผมเคยทำงานในบริษัท Fintech ที่กำลังพัฒนาแพลตฟอร์มการลงทุนช่วงปี 2026 เรามีทีมงานที่เก่ง JavaScript มาก แต่การพัฒนาด้วย React เริ่มมีปัญหาครับ ระบบเริ่มช้าลง, การ deploy เปลี่ยนไปเป็นเรื่องยุ่งยาก และทีมงานส่วนใหญ่ไม่ค่อยถนัดเรื่อง JavaScript frontend เท่าไหร่ ผมสังเกตว่าการเปลี่ยนแปลง frontend บ่อยๆ ทำให้ทีม backend ต้องมาแก้ปัญหา frontend บ่อยมาก ซึ่งมันไม่ efficient เลย ผมและทีมได้ลองพิจารณาทางเลือกใหม่ๆ และพบว่า htmx + FastAPI เป็นทางออกที่น่าสนใจมาก

บทความนี้จะช่วยให้คุณเข้าใจว่าทำไม htmx + FastAPI ถึงเป็นทางเลือกที่ดีกว่า React ในหลายๆ สถานการณ์ โดยเฉพาะอย่างยิ่งสำหรับโปรเจกต์ที่ต้องการความเร็วในการ load ที่สูง, ความยืดหยุ่นของภาษา Python, และลดความซับซ้อนของ frontend development เราจะเจาะลึกการใช้งานจริง พร้อมตัวอย่าง code ที่สามารถนำไปใช้ได้เลย และจะบอกถึงปัญหาที่มักเจอและวิธีแก้ไข รวมถึงข้อควรระวังต่างๆ ด้วย

ทำไมต้อง htmx + FastAPI

a man sitting in a chair looking at his cell phone — Photo by Jonathan Borba on Unsplash

ก่อนอื่น เรามาทำความเข้าใจกันก่อนว่า htmx และ FastAPI คืออะไรกันครับ Htmx เป็น library ที่ช่วยให้เราสร้างเว็บแอปพลิเคชันแบบ AJAX ได้โดยไม่ต้องใช้ JavaScript frontend ที่ซับซ้อน มันใช้ attribute ของ HTML มาจัดการการ request และ response แทน ทำให้เราสามารถสร้างเว็บแอปที่ responsive ได้อย่างรวดเร็ว และ FastAPI เป็น framework สำหรับ Python ที่ออกแบบมาสำหรับการสร้าง API ที่รวดเร็วและมีประสิทธิภาพ ด้วย performance ที่ดีเยี่ยม ทำให้การทำงานร่วมกันระหว่าง frontend และ backend เป็นไปอย่างราบรื่น

จริงๆ ผมไม่ค่อยชอบวิธีที่ React ต้องใช้ JavaScript เยอะๆ ใน frontend แต่ htmx ช่วยให้เราสร้างเว็บแอปที่คล้าย React ได้ โดยไม่ต้องเขียน JavaScript มากนัก มันเป็นทางเลือกที่น่าสนใจมากสำหรับโปรเจกต์ที่ต้องการความเร็วในการพัฒนา และลดความซับซ้อนของ frontend development


import fastapi as fastapi
import htmx
from typing import Optional

app = fastapi.FastAPI()

@app.get("/")
async def index():
    return htmx.respond(
        "Hello, Htmx!",
        {'id': 'my-element'}
    )

@app.get("/data")
async def get_data(limit: int = 10):
    data = [f"Item {i}" for i in range(limit)]
    return htmx.respond(
        "",
        {'id': 'my-list'},
        data=data
    )

ตัวอย่างนี้เป็นเพียงตัวอย่างง่ายๆ ของการสร้างเว็บแอปด้วย htmx และ FastAPI เราสามารถสร้าง UI ที่ซับซ้อนได้ โดยใช้ htmx ในการจัดการการ request และ response การใช้ htmx ช่วยให้เราสามารถสร้างเว็บแอปที่ responsive ได้อย่างรวดเร็ว โดยไม่ต้องเขียน JavaScript ที่ซับซ้อน

การสร้าง API ด้วย FastAPI

FastAPI ทำหน้าที่เป็น backend ของเรา โดยเราสามารถสร้าง API endpoints ต่างๆ ได้อย่างง่ายดาย ตัวอย่างเช่น endpoint `/data` ที่เราสามารถใช้ในการดึงข้อมูลและส่งกลับมายัง frontend


import fastapi as fastapi
from typing import List

app = fastapi.FastAPI()

@app.get("/data")
async def get_data(limit: int = 10):
    data = [f"Item {i}" for i in range(limit)]
    return {"data": data}

ในตัวอย่างนี้ เราใช้ FastAPI ในการสร้าง API endpoint `/data` ที่รับ parameter `limit` เพื่อกำหนดจำนวนข้อมูลที่จะดึงมา เราใช้ `hxm.respond` เพื่อส่งข้อมูลกลับไปยัง frontend

การ render HTML ด้วย htmx

a computer on a desk — Photo by Growtika on Unsplash

Htmx ช่วยให้เราสามารถ render HTML ได้จาก backend โดยไม่ต้องเขียน JavaScript frontend ที่ซับซ้อน เราสามารถใช้ attribute ต่างๆ ของ HTML เช่น `hx-get`, `hx-trigger`, `hx-swap` เพื่อจัดการการ request และ response


  <button hx-get="/data" hx-trigger="click" hx-swap="innerHTML">Load Data</button>

ในตัวอย่างนี้ เราใช้ `hx-get` เพื่อกำหนด URL ที่จะใช้ในการ request, `hx-trigger` เพื่อกำหนด event ที่จะ trigger request (ในที่นี้คือ click), และ `hx-swap` เพื่อกำหนดว่า content ที่จะ swap คือ innerHTML

สิ่งที่ควรระวัง / ข้อผิดพลาดที่เจอบ่อย

เมื่อเราเริ่มใช้งาน htmx + FastAPI เราอาจพบกับปัญหาบางอย่างที่ต้องระวัง ตัวอย่างเช่น

CSRF (Cross-Site Request Forgery): เนื่องจาก htmx ทำงานโดยไม่ต้องใช้ JavaScript ใน frontend เราต้องระวังเรื่อง CSRF เราสามารถแก้ไขปัญหานี้ได้โดยการใช้ CSRF tokens ในการ authenticate request
CORS (Cross-Origin Resource Sharing): ถ้า frontend และ backend ของเราอยู่ใน domain ที่ต่างกัน เราอาจต้องเปิด CORS เพื่อให้การ request ระหว่าง domain สามารถทำงานได้
Caching: Htmx มีระบบ caching ในตัว แต่เราอาจต้องปรับแต่ง caching settings เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด
Version ของ Library: ตอน Python 3.11 และ htmx เวอร์ชั่น 1.5 ผมพบปัญหาเรื่อง CORS ทำให้ต้องใช้ CORS middleware เพิ่มเติม ซึ่งต้อง config ให้ถูกต้องมากๆ

สรุปและขั้นตอนต่อไป

ผมคิดว่า htmx + FastAPI เป็นทางเลือกที่น่าสนใจสำหรับโปรเจกต์ที่ต้องการความเร็วในการ load ที่สูง, ความยืดหยุ่นของภาษา Python, และลดความซับซ้อนของ frontend development การใช้งาน htmx ช่วยให้เราสามารถสร้างเว็บแอปที่ responsive ได้อย่างรวดเร็ว โดยไม่ต้องเขียน JavaScript ที่ซับซ้อน FastAPI ช่วยให้เราสามารถสร้าง API endpoints ต่างๆ ได้อย่างง่ายดาย

Next Step: ลองสร้างเว็บแอปง่ายๆ ด้วย htmx + FastAPI แล้วคุณจะเห็นว่ามันง่ายและมีประสิทธิภาพมาก ผมแนะนำให้เริ่มต้นด้วยโปรเจกต์เล็กๆ ก่อน แล้วค่อยๆ ขยายโปรเจกต์ไปยังโปรเจกต์ที่ใหญ่ขึ้น

คำถาม

คำถาม 1: Htmx เหมาะกับโปรเจกต์ประเภทไหนบ้าง? คำตอบ: Htmx เหมาะกับโปรเจกต์ที่ต้องการความเร็วในการ load ที่สูง, UI ที่มีการเปลี่ยนแปลงบ่อย, และต้องการลดการใช้ JavaScript frontend

คำถาม 2: FastAPI มีข้อดีอย่างไร? คำตอบ: FastAPI มีข้อดีคือ performance ที่ดีเยี่ยม, การพัฒนาที่รวดเร็ว, และรองรับการสร้าง API ที่มีความซับซ้อน

คำถาม 3: ต้องระวังเรื่องอะไรบ้างในการใช้งาน htmx + FastAPI? คำตอบ: ต้องระวังเรื่อง CSRF, CORS, Caching, และ Version ของ Library