เรียนรู้หลักการทำงานของเฟรมเวิร์ก JavaScript สมัยใหม่ด้วยการลงมือสร้างเอง

ทำความเข้าใจหลักการทำงานของเฟรมเวิร์ก JavaScript สมัยใหม่

• การลองสร้างเฟรมเวิร์ก JavaScript ของตัวเองช่วยให้เรียนรู้ได้ดีขึ้น
• "เฟรมเวิร์ก JavaScript สมัยใหม่" ในที่นี้หมายถึงเฟรมเวิร์กหลังยุค React
• เฟรมเวิร์กเหล่านี้ได้รับแรงบันดาลใจจาก React แต่พัฒนาไปในทิศทางที่คล้ายกัน

คุณลักษณะของเฟรมเวิร์กสมัยใหม่

• ใช้ reactivity สำหรับอัปเดต DOM
• ใช้การโคลนเทมเพลต (cloning templates) สำหรับเรนเดอร์ DOM
• ใช้ Web API สมัยใหม่อย่าง <template> และ Proxy

Reactivity

• มักมีการพูดกันว่า React ไม่ได้เป็นแบบ reactive
• เฟรมเวิร์กสมัยใหม่ใช้โมเดล reactivity แบบ push-based โดยให้ความสำคัญกับประสิทธิภาพ
• ใช้ Proxy เพื่อให้ DOM อัปเดตทุกครั้งที่ state เปลี่ยนแปลง

การโคลนต้นไม้ DOM (Cloning DOM trees)

• การใช้แท็ก <template> เพื่อ parse HTML หนึ่งครั้งแล้วโคลนทั้งก้อนได้อย่างรวดเร็วเป็นเทคนิคที่มีประสิทธิภาพ
• วิธีนี้ถูกใช้งานในเฟรมเวิร์ก JavaScript หลายตัว

JavaScript API สมัยใหม่

• <template> และ Proxy เป็น API ที่ช่วยในการสร้างระบบ reactivity
• ใช้ tagged template literals เพื่อทำให้ API ของ HTML template เรียบง่ายขึ้น

ขั้นตอนการสร้าง Reactivity

• Reactivity ซึ่งกำหนดการจัดการ state และการอัปเดต DOM เมื่อ state เปลี่ยน คือรากฐานของเฟรมเวิร์ก
• ใช้ Proxy เพื่อตรวจจับการเปลี่ยนแปลงของ state และใช้ queueMicrotask เพื่อจัดการการอัปเดตอย่างมีประสิทธิภาพ

ขั้นตอนการเรนเดอร์ DOM

• ใช้ฟังก์ชัน html เพื่อสร้างต้นไม้ DOM และอัปเดตอย่างมีประสิทธิภาพ
• ใช้ tagged template literals เพื่อเขียน HTML template และใช้ WeakMap เพื่อปรับแต่งการ parse HTML ให้มีประสิทธิภาพขึ้น

การรวม Reactivity เข้ากับการเรนเดอร์ DOM

• ใช้ createEffect เพื่ออัปเดต DOM ตาม state
• ทำให้ข้อความอัปเดตโดยอัตโนมัติเมื่อ state เปลี่ยน

ขั้นตอนถัดไป

• ยังมีอีกหลายวิธีในการปรับปรุงระบบเรนเดอร์ DOM
• เป้าหมายคือ parse เทมเพลตเพียงครั้งเดียว และตั้งค่า binding เพียงครั้งเดียวเพื่อลดการอัปเดตให้น้อยที่สุด

ความเห็นของ GN⁺

ใจความสำคัญที่สุดของบทความนี้คือการทำความเข้าใจแนวคิดหลักและวิธีการนำไปสร้างจริงของเฟรมเวิร์ก JavaScript สมัยใหม่ รวมถึงกระบวนการเรียนรู้ผ่านการลงมือสร้างเฟรมเวิร์กของตัวเองจริง ๆ แนวทางนี้เปิดโอกาสให้วิศวกรซอฟต์แวร์ระดับเริ่มต้นได้เข้าใจการทำงานภายในของเฟรมเวิร์กและลองนำไปใช้จริง จึงเป็นประสบการณ์การเรียนรู้ที่ทั้งน่าสนใจและมีประโยชน์

[GN⁺]

ความคิดเห็นจาก Hacker News

• สำหรับการทำความเข้าใจพื้นฐานเกี่ยวกับหัวข้อนี้ ขอแนะนำแหล่งข้อมูลต่อไปนี้:

  • Incremental computing: ลิงก์ Wikipedia
  • Self-adjusting computation: งานวิจัยของ Umut A. Acar
  • บทนำเกี่ยวกับ incremental computing ของ JaneStreet: ลิงก์บล็อก
  • เว็บกับ incremental computing: ลิงก์บล็อก
  • Self-adjusting DOM: ลิงก์บล็อก
  • Self-adjusting DOM และ diffable data: ลิงก์บล็อก
  • ร่างบทความเกี่ยวกับ incremental computing ของ Rado Kirov: Part 1, Part 2, Part 3
  • มุ่งสู่ทฤษฎีแบบรวมศูนย์ของ reactive UI: บทความของ Raph Levien

• การอธิบายความเข้าใจผิดเกี่ยวกับ React และวิธีการทำงานจริง:

  • เมื่อมีการอัปเดตสถานะ React จะสร้างใหม่เฉพาะคอมโพเนนต์นั้นและลูกของมัน ไม่ใช่ทั้งต้นไม้ virtual DOM ทั้งหมด
  • useMemo ไม่ได้ป้องกันการ re-render แต่ React.memo ทำหน้าที่นั้น
  • เหตุผลที่ React ไม่ใช่ "push-only" เป็นเพราะมันบัฟเฟอร์การอัปเดตไว้
  • ข้อดีของ signals คือเฟรมเวิร์กรู้ว่าคุณสมบัติใดของ DOM ควรถูก re-render แต่สิ่งนี้ไม่ได้หมายความว่าเป็น reactivity เสมอไป

• มุมมองเชิงบวกต่อ Svelte และกรณีการใช้งาน:

  • คอมไพเลอร์ของ Svelte มีความยืดหยุ่นสูง และสามารถประมวลผลเทมเพลต Svelte ได้ในแบบพิเศษ
  • มีการแชร์ประสบการณ์สร้าง Svekyll (โคลนของ Jekyll ซึ่งเป็นเครื่องมือบล็อกแบบสแตติก) ด้วย Svelte

• มุมมองที่หลากหลายเกี่ยวกับเฟรมเวิร์กแบบ reactive:

  • มีการแนะนำแหล่งข้อมูลเกี่ยวกับเฟรมเวิร์กแบบ reactive อย่าง Solid
  • มีการแชร์ประสบการณ์การเขียน web renderer/framework เพื่อทำความเข้าใจ reactivity ของ solid-js
  • มีการแนะนำสื่อการเรียนรู้สำหรับการลอง implement React ด้วยตนเอง

• คำถามและการถกเถียงเกี่ยวกับ reactivity ของ React:

  • มีคำถามว่าจะทำให้ React เป็น "reactive" ได้อย่างไร
  • มีความเห็นว่าควรยับยั้งการพัฒนา JS framework ตัวใหม่เพิ่มเติม

• คำถามที่โยนไปยังผู้มีประสบการณ์สูงด้านฟรอนต์เอนด์เฟรมเวิร์ก:

  • มีคำถามเกี่ยวกับ framework/library ที่รองรับ effect system สำหรับงานด้าน rendering