Android (Jetpack Compose)

มันคืออะไร

ลองนึกภาพการอธิบายห้องที่ตกแต่งเสร็จแล้วให้นักตกแต่งภายในฟัง ("โซฟาสีฟ้าอยู่ใต้หน้าต่าง") แทนที่จะต้องขยับเฟอร์นิเจอร์แต่ละชิ้นด้วยตัวเองทีละขั้นตอน Jetpack Compose ทำงานในแบบเดียวกัน มันคือชุดเครื่องมือสร้าง UI (User Interface — ส่วนที่แสดงบนหน้าจอของแอป) แบบ declarative (ประกาศผลลัพธ์ที่ต้องการ ไม่ใช่สั่งทีละขั้นตอน) สมัยใหม่ของ Android แทนที่จะกำหนด layout ในไฟล์ markup แยกต่างหากแล้วแก้ไขผ่านการอ้างอิง คุณจะเขียนฟังก์ชัน Kotlin แบบ composable ที่อธิบายว่า UI ควรมีหน้าตาอย่างไรสำหรับสถานะ (state) หนึ่ง ๆ และเฟรมเวิร์กจะวาดหน้าจอใหม่เมื่อสถานะนั้นเปลี่ยนไป ตอนนี้มันคือวิธีที่ Google แนะนำให้ใช้สร้างอินเทอร์เฟซแบบ native บน Android มันทำงานร่วมกับไลบรารี Jetpack ชุดใหญ่สำหรับการนำทาง (navigation), วงจรชีวิต (lifecycle), และข้อมูล

จุดแข็ง

เป็น declarative และเป็น native ของ Kotlin — UI และ logic อยู่ในภาษาเดียวกัน ไม่ต้องมี XML layout
การ recomposition ที่ขับเคลื่อนด้วย state ทำให้หน้าจอซิงค์กันโดยอัตโนมัติ
โค้ดซ้ำซาก (boilerplate) น้อยกว่าระบบ View แบบเก่า มีบล็อกการสร้าง (building block) ที่ประกอบกันได้และทรงพลัง
มีคอมโพเนนต์ Material Design, การจัดธีม, แอนิเมชัน, และการช่วยการเข้าถึง (accessibility) มาให้ในตัว
ทำงานร่วมกับโค้ดที่ใช้ View แบบเดิมได้ ดังนั้นจึงค่อย ๆ นำมาใช้ทีละส่วนได้

ข้อแลกเปลี่ยน

พฤติกรรมของ recomposition อาจซับซ้อนแบบไม่ชัดเจน การวาง state ผิดที่ทำให้เกิดการวาดซ้ำเกินจำเป็นหรือเกิดบั๊ก
ต้องใช้เครื่องมือ Android ที่ค่อนข้างใหม่ และตั้งค่า SDK (Software Development Kit — ชุดเครื่องมือและไลบรารีที่ใช้สร้างแอป) ขั้นต่ำ
โมเดลความคิด (mental model) ต่างจากแนวทาง imperative แบบเก่า จึงมีช่วงเรียนรู้
ไลบรารีเก่าบางตัวที่รองรับเฉพาะ View ยังต้องใช้ wrapper สำหรับการทำงานร่วมกัน

เหมาะกับ

Jetpack Compose เป็นตัวเลือกที่เหมาะสมสำหรับแอป Android แบบ native ตัวใหม่ ที่คุณต้องการโค้ดเบสสมัยใหม่ ดูแลรักษาง่าย และทำซ้ำได้เร็ว มันเข้ากันได้ดีอย่างเป็นธรรมชาติกับ Kotlin และ coroutines

ความเหมาะสมกับ vibe coding

Compose เหมาะกับการพัฒนาแบบมี AI ช่วย เพราะ composable เป็นฟังก์ชัน pure (ไม่มีผลข้างเคียง) ขนาดเล็กของ state — สร้าง, พรีวิว, และตรวจสอบแยกส่วนได้ง่าย ลองขอให้ผู้ช่วย AI ยก state ออกจาก composable (ส่งค่าลงมา ส่ง event ขึ้นไป) ทำให้แต่ละ composable มีจุดเน้นเดียว และขับเคลื่อนรายการ (list) ด้วยข้อมูลที่ไม่เปลี่ยนแปลง (immutable) แอนโนเทชัน @Preview ช่วยให้คุณดู UI ที่สร้างขึ้นด้วยตาได้โดยไม่ต้องรันทั้งแอป ทำให้ลูปการตรวจสอบผลลัพธ์ (feedback loop) รวดเร็วขึ้น

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) { Text("Add") }
    }
}