Svelte.js และแนวคิดแบบ Compiler First

Compiler First in Svelte คือแนวคิดที่ทำให้ Framework Svelte.js แตกต่างจาก React.js และ Vue.js ด้วยการใช้ตัว Compiler แปลงโค้ดให้ทำงานอย่างมีประสิทธิภาพตั้งแต่ขั้นตอน Build ไม่ต้องพึ่ง Virtual DOM เหมือนเฟรมเวิร์กอื่น ส่งผลให้แอปพลิเคชันเบา โหลดเร็ว และจัดการการเปลี่ยนแปลงของ UI ได้ตรงจุดยิ่งขึ้น เหมาะสำหรับผู้เริ่มต้นและผู้ที่ต้องการพัฒนาเว็บที่มีประสิทธิภาพสูง

ในโลกการพัฒนาเว็บสมัยใหม่ เฟรมเวิร์กอย่าง React.js และ Vue.js ได้รับความนิยมอย่างสูงจากแนวคิดการบริหารจัดการ UI ผ่าน Virtual DOM ซึ่งช่วยให้การปรับปรุงหน้าจอเป็นไปอย่างเป็นระบบและลดความยุ่งยากของนักพัฒนา อย่างไรก็ตามเมื่อขนาดโปรเจกต์ใหญ่ขึ้น การใช้ Virtual DOM ก็ยังมีภาระบางอย่างที่หลีกเลี่ยงไม่ได้ เช่น การต้องเปรียบเทียบโครงสร้าง Virtual DOM เดิมกับ Virtual DOM ใหม่ (Diffing) ทุกครั้งที่ข้อมูลเปลี่ยน

Svelte เสนอแนวทางใหม่ที่เรียกว่า Compiler First ซึ่งแตกต่างจากเฟรมเวิร์กส่วนใหญ่ โดยเน้นให้ Compiler ทำงานหนักแทนเบราว์เซอร์ในขั้นตอน Runtime ผลลัพธ์คือเว็บที่เบา เร็ว และมีการจัดการ UI อย่างตรงไปตรงมา

Virtual DOM ใน React.js และ Vue.js

ก่อนทำความเข้าใจ Svelte.js เราต้องมองวิธีที่ React.js และ Vue.js จัดการ UI

Virtual DOM คืออะไร

Virtual DOM คือโครงสร้างข้อมูลที่เป็นตัวแทนของ DOM จริงในหน่วยความจำ เมื่อข้อมูลเปลี่ยน เฟรมเวิร์กจะมำการ

1. สร้าง Virtual DOM ใหม่
2. เปรียบเทียบกับ Virtual DOM เดิม (Diffing)
3. อัปเดตเฉพาะส่วนที่จำเป็นลงใน DOM จริง

สิ่งนี้ช่วยลดปริมาณการแตะต้อง DOM โดยตรง ซึ่งเป็นกระบวนการที่ค่อนข้างช้า

ตัวอย่างโค้ดใน React.js

function Counter() {
  const [count, setCount] = React.useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

เมื่อกดปุ่ม Count React.js จะทำการ

• สร้าง Virtual DOM ใหม่
• เปรียบเทียบกับของเดิม
• อัปเดตเฉพาะข้อความในปุ่ม

แล้ว Compiler First ใน Svelte ต่างอย่างไร?

แทนที่ Svelte.js จะใช้ Virtual DOM เหมือนเฟรมเวิร์กหลัก ๆ มันเลือกใช้วิธีการที่เรียกว่า

Compile โค้ดเป็น JavaScript ที่แก้ไข DOM ตรงตามที่ต้องการ

นั่นคือโค้ดของ Svelte.js หลังจากการ Comiple จะไม่ต้องมีการเปรียบเทียบ Virtual DOM เลย เพราะตัว Compiler รู้ตั้งแต่ตอน Build แล้วว่าต้องอัปเดต DOM ส่วนไหนเมื่อข้อมูลเปลี่ยน

ทำให้ผลลัพธ์คือ

• โหลดเร็วกว่า
• ขนาดแอปเล็กกว่า
• Runtime เบาลงมาก
• ประสิทธิภาพไม่ลดลงแม้ UI ซับซ้อน

---

การทำงานของ Svelte

ตัวอย่างโค้ดใน Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Count: {count}
</button>

สิ่งที่ Compiler จัดการใน Background

เมื่อ Build โปรเจกต์ Svelte.js จะแปลงโค้ดด้านบนเป็นโค้ด JavaScript ที่คล้ายกับตัวอย่างโค้ดด้านล่าง

button.addEventListener('click', () => {
  count += 1
  button.textContent = `Count: ${count}`
})

ทำให้ผลลัพธ์คือ

• ไม่ต้องมี Virtual DOM
• ไม่ต้อง Diffing
• ไม่ต้องมีการจัดการซ้ำซ้อน

สรุป

Compiler First คือปรัชญาที่ผลักภาระจาก Runtime ไปให้ Compiler จัดการตั้งแต่แรก ทำให้ Svelte กลายเป็นเฟรมเวิร์กที่เรียบง่ายแต่ทรงพลังสำหรับผู้เริ่มต้นและนักพัฒนาที่ต้องการประสิทธิภาพสูง

แม้ React.js และ Vue.js จะมี Ecosystem ใหญ่กว่า แต่ Svelte.js เสนอทางเลือกที่น่าสนใจสำหรับผู้ที่ต้องการประสบการณ์พัฒนาแบบเบา รวดเร็ว และชัดเจน