วันนี้นั่งอ่านว่าผิดหวังจาก Blazor แล้วจะไปลองเล่นอะไรดีสำหรับโฮมเพจเกม (คงไม่ interactive มาก แต่อย่างน้อยอยากทำเว็บที่ประกอบจาก component) ตอนแรกว่าจะลองศึกษา React Hooks แต่ใน documentation ก็ได้รู้จักกับ Svelte https://svelte.dev/
อันนี้มันเท่ตรงที่ UI Framework ปกติจะให้เราเป็นคนเขียนโปรแกรมตามกติกาแล้วเราจะพอดูออกว่า จังหวะนี้นั้นนี่เองที่ framework รู้ว่าเราอยากจะอัพเดทชิ้นส่วนไหน แต่ก็ไม่ได้รู้หมดเด๊ะๆขนาดนั้น ก็เลยต้องควบคู่กับการ diff DOM + อาจจะมีตัวช่วยอย่าง ID ประจำ element นิดหน่อยจะได้เปลี่ยน DOM ถูกที่ เช่นถ้า React ก็จะมีจังหวะตอน set state
แต่ Svelte ก้าวข้ามไปอีกขั้นคือเป็น compiler ซะเลย คือเว็บสุดท้ายที่ออกมาไม่มี framework ให้โหลดมาคู่กันด้วยซ้ำ เพราะโค้ดที่เราเขียนนั่นแหละกลายเป็น DOM manipulation ด้วยตัวเองไปแล้ว! (ประมาณว่าออกมาเหมือนเหมือนเราทนเขียน web app แล้วมาแก้ DOM ด้วยมือแบบไม่มีเครื่องมืออะไรเลย)
เขาก็เลยสร้าง syntax ภาษาใหม่ .svelte ขึ้นมาที่หลุดจากบ่วง JS ได้เลยไหนๆก็เป็น compiler แล้ว ทีนี้ก็ไม่ต้องมีพิธีที่รู้สึกได้ว่ากำลังครอบอยู่บน JS อีกต่อไป assignment เปล่าๆอย่าง foo = 50 อะไรงี้ compile กลายเป็น DOM change ซะงั้นได้ครับ ที่สำคัญไม่มีการ diff เกิดขึ้นด้วยซ้ำเพราะโค้ดสุดท้ายมันกำลังแก้หน้าเว็บสดๆจริงๆ เขาวิจารณ์ไว้ว่า Virtual DOM is pure overhead (https://svelte.dev/blog/virtual-dom-is-pure-overhead)
ตอนนี้ยังไม่ถึงไหนเท่าไหร่ แต่ syntax เขียนค่อนข้างสนุกดี ดูเหมือนโล่งๆไม่มีอะไรแต่ component ก็พร้อมใช้งานแล้ว ยากแค่ต้องมาทำความเข้าใจ bundler อย่าง Rollup / Webpack อีกหน่อยครับถ้าจะ extend (แต่อีกมุม มันก็คือความโปร่งใสดีว่าเว็บเราออกมาเป็นก้อนๆนี้ ไม่เหมือน Blazor ที่เป็น .dll วุ่นวายไปหมด)
*Angular ก็เป็น compiler เหมือนกัน ที่เขียนขึ้นมาสดๆยังใช้จริงไม่ได้ https://angular.io/guide/aot-compiler ไม่เหมือน React ที่เป็นสั่ง JS lib จริงๆ (แต่ก็ต้อง compile จาก JSX ก่อนอยู่ดี) แต่ทั้งคู่ไม่ได้ฉีกห่างออกจาก JS เว่อร์เหมือน Svelte
*แปลว่า ผอมเพรียว
