ในผลการสำรวจนักพัฒนาของ Stack Overflow ประจำปี 2021 ที่เพิ่งออกมาเมื่อต้นเดือนนี้ มีเรื่องที่เซอร์ไพร์สคือ เว็บเฟรมเวิร์คที่นักพัฒนา "รัก" มากที่สุด (most loved web framework) มีแชมป์ 2 รายได้คะแนนเท่ากันคือ ASP.NET Core และ Svelte

กรณีของ ASP.NET Core ไม่ใช่เรื่องน่าแปลกใจ เพราะเป็นแชมป์เก่าของปี 2020 อยู่ก่อนแล้ว แต่ Svelte เป็นเฟรมเวิร์คใหม่ที่ยังไม่เคยติดอันดับใดๆ มาก่อนในการสำรวจปี 2020 กลับโผล่เข้าชาร์ทมาพรวดเดียวครองอันดับหนึ่งร่วมได้ทันที ทำให้เกิดกระแสความสนใจในโครงการ Svelte เพิ่มตามมา

บทความนี้จะแนะนำข้อมูลเบื้องต้นของ Svelte ว่ามีอะไรน่าสนใจ ถึงทำให้ผงาดขึ้นมาเป็นเฟรมเวิร์คที่นักพัฒนารักที่สุดได้อย่างรวดเร็ว

Svelte เป็นเว็บเฟรมเวิร์คที่ใช้แนวคิด component แบบเดียวกับ React หรือ Vue แต่มีการทำงานเบื้องหลังที่ต่างกันมาก เพราะจริงๆ แล้ว Svelte ไม่ได้เป็นเฟรมเวิร์ค (ในความหมายดั้งเดิม) แต่มันเป็นคอมไพเลอร์ต่างหาก!

การจะเข้าใจ Svelte ว่าคืออะไรกันแน่ ต้องเข้าใจสิ่งที่ Svelte พยายามแก้ปัญหาก่อน นั่นคือ React

React: Virtual DOM

การแสดงผลเว็บเพจที่บรรยายด้วยภาษา HTML ใช้หลักการ DOM (Document Object Model) ที่มองวัตถุในแท็ก HTML/XML เป็นโมเดลต้นไม้ (tree structure) แต่ละกิ่งก้านแทนความสัมพันธ์ของแท็กที่ซ้อนกันลงไปเป็นชั้นๆ การทำงานของเว็บเบราว์เซอร์จะอ่านโค้ด HTML แล้วสร้างเป็นแผนภาพ DOM ขึ้นมา ก่อนเรนเดอร์ออกมาเป็นกราฟิกบนหน้าจอ

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

เว็บเฟรมเวิร์คยอดฮิตในปัจจุบันอย่าง React แก้ปัญหานี้ด้วยวิธีที่เรียกว่า Virtual DOM เป็นการสร้าง DOM ของตัวเองขึ้นมาในเอนจินจาวาสคริปต์ของเบราว์เซอร์ (ที่รันแยกจาก DOM ของเว็บเพจปกติ) เมื่อโค้ดต้องการเปลี่ยนค่าใดๆ ก็เปลี่ยนใน Virtual DOM ได้เลย ซึ่งทำงานได้เร็วกว่าเพราะ Virtual DOM รันอยู่ในแรมอย่างเดียวอยู่แล้ว

จากนั้น React จะหาความเปลี่ยนแปลงของ Virtual DOM สองเวอร์ชัน (ก่อน-หลังอัพเดต) เพื่อหา diff แล้วค่อยนำเฉพาะ diff ไปอัพเดตใน DOM ของเว็บเพจจริงอีกที วิธีนี้ช่วยให้ไม่ต้องอัพเดตค่า DOM ของเว็บเพจจริงทั้งอัน ช่วยแก้ปัญหาประสิทธิภาพไปได้มาก

เมื่อบวกกับฟีเจอร์สมัยใหม่อื่นๆ ของ React (เช่น component) จึงทำให้ React กลายเป็นเฟรมเวิร์คจาวาสคริปต์ยอดนิยมในเวลาไม่นาน

แผนภาพอธิบายการทำงานของ Virtual DOM จาก JavaScript in Plain English โดย Ayush Verma

Svelte: เฟรมเวิร์คที่ไม่ใช่เฟรมเวิร์ค เพราะมันคือคอมไพเลอร์

Rich Harris นักพัฒนาที่อาชีพหลักเป็นฝ่ายกราฟิกแบบอินเทอร์แอคทีฟของหนังสือพิมพ์ The New York Times (ปัจจุบันก็ยังเป็นอยู่ ผลงาน) มีแนวคิดว่าเฟรมเวิร์คสำหรับงาน frontend แบบ React มีส่วนที่สิ้นเปลือง (overhead) เยอะเกินไป แม้เว็บเฟรมเวิร์คที่มีขนาดไฟล์ประมาณ 100KB อาจเล็กกว่าไฟล์ภาพ JPG เพียงไฟล์เดียว แต่นอกจากค่าแบนด์วิดท์ส่งข้อมูล ค่าสตอเรจ แล้วยังต้องสิ้นเปลืองพลังของเบราว์เซอร์ด้วย (Virtual DOM is pure overhead)

เขาจึงมีแนวคิด frameworks without the framework แทนที่เราจะสร้างเฟรมเวิร์คเพื่อซ่อนความซับซ้อนของโค้ดจาวาสคริปต์ตอนเขียน (ตอนเขียนง่ายขึ้น โดยเฟรมเวิร์คจัดการงานที่ซับซ้อนให้ตอนรันไทม์) ก็เปลี่ยนมาเป็นการแปลงโค้ด (compile) ให้เสร็จเรียบร้อยก่อนนำไปรัน (แปลงจากโค้ดที่เขียนง่ายเป็น Vanilla JS จาวาสคริปต์แบบปกติ) แล้วนำไปรันในเบราว์เซอร์ได้เลยจะดีกว่า

แนวคิดนี้กลายเป็น Svelte ที่กระบวนการเขียนโค้ดไม่ต่างจาก React มากนัก แต่แทนที่จะให้เฟรมเวิร์ค (React) นำโค้ดไปแปลงในเบราว์เซอร์ตอนรันไทม์ให้มี overhead ซะเปล่าๆ ก็คอมไพล์ก่อนใช้ให้เสร็จก่อน ได้โค้ดจาวาสคริปต์ธรรมดาที่ machine optimized แล้วไปให้เบราว์เซอร์ใช้ต่อแทน

ผลคือขนาดไฟล์ที่ใช้งานเล็กลง (Svelte ไม่ต้องพ่วงไฟล์ของตัวมันไปด้วย เพราะออกมาเป็นโค้ดที่แปลงแล้ว) เหลือเพียงหลักไม่กี่ KB เมื่อบีบอัดแล้ว (React + ReactDOM ขนาดรวมกันประมาณ 45KB) อีกทั้งทำงานได้เร็วกว่า เพราะมันคือจาวาสคริปต์ธรรมดาๆ

แผนภาพอธิบายความแตกต่างระหว่าง Svelte กับ React จากบล็อก Bits and Pieces โดย Keshav Kumaresan

Reactive Programming โค้ดสั้นลง เขียนง่ายขึ้น

นอกจากแนวคิดเรื่องประสิทธิภาพแล้ว การที่ Svelte เป็นคอมไพเลอร์ในตัวมันเอง ทำให้ Svelte สามารถดัดแปลงตัว syntax ของภาษาได้ด้วย

Svelte เวอร์ชันแรกยังเป็นการทดสอบความเป็นไปได้ของแนวคิดการใช้คอมไพเลอร์มาแทน Virtual DOM ตัวมันเองเขียนด้วยจาวาสคริปต์ ออกช่วงปลายปี 2016 และมีอัพเดตฟีเจอร์ย่อยเป็นเวอร์ชัน 2.0 ในปี 2018

แต่หลังจากนั้น Svelte ถูกยกเครื่องใหญ่ เขียนใหม่เป็น TypeScript ในเวอร์ชัน 3.0 เมื่อปี 2019 แถมยังมาพร้อมการเปลี่ยนแปลงที่สำคัญระดับตัวภาษา (syntax) ให้เขียนโค้ดง่ายขึ้นด้วยแนวคิดที่เรียกว่า "reactivity" ซึ่งหมายถึงการปรับสถานะของตัวแปร (change state) ที่ระดับของตัวภาษาเลย

ตัวอย่างเช่น หากเราต้องการบอกคอมพิวเตอร์ว่าสถานะของตัวแปรเปลี่ยน ใน React ต้องใช้คำสั่ง setState

const { count } = this.state;
this.setState({
count: count + 1
});

แต่ด้วย syntax ของ Svelte 3.0 สามารถใช้แค่

count += 1;

เบื้องหลังการทำงาน คอมไพเลอร์ของ Svelte จะแปลงเป็นโค้ดจาวาสคริปต์ดังนี้

count += 1; $$invalidate('count', count);

ผลคือโค้ดของ Svelte 3.0 สั้นลงจากเดิม เป็นมิตรกับนักพัฒนามากขึ้น นักพัฒนาเขียนโค้ดน้อยลง (โอกาสผิดพลาดน้อยลง)​ และแน่นอนว่าใช้จำนวนบรรทัดของโค้ดน้อยลงเมื่อเทียบกับ React

การที่ Svelte มีสถานะเป็นคอมไพเลอร์​ สามารถดัดแปลง syntax ของตัวเองได้ สโลแกนของ Svelte จึงใช้คำว่า "cybernetically enhanced web apps" ซึ่งเปรียบได้กับการเป็น "ไซบอร์กดัดแปลง"​ ให้การเขียนเว็บแอพง่ายขึ้น เร็วขึ้น

เพื่อไม่ให้บทความยาวเกินไป รายละเอียดของเรื่องการออกแบบ syntax ของ Svelte อ่านได้จากโพสต์ Svelte 3: Rethinking reactivity และ Write less code รวมถึงดูคลิป Rich Harris อธิบายแนวคิดของ reactivity ตามวิดิโอด้านล่าง

หมายเหตุ: การปรับ syntax ของตัวภาษาที่ Svelte ใช้อาจช่วยให้โปรแกรมเมอร์เขียนโค้ดได้ง่ายขึ้น แต่ในมุมกลับ ก็มีเสียงวิจารณ์ว่าทำให้ภาษาไม่เป็นมาตรฐาน มีความเฉพาะตัวสูง เรียนรู้ยาก และมี "magic" ที่โปรแกรมเมอร์อาจไม่รู้ว่าจริงๆ เบื้องหลังมันทำงานอย่างไร ลักษณะเดียวกับที่ Perl โดนวิจารณ์มาตลอด

มีใครใช้ Svelte บ้าง

ข้อมูลจากเว็บไซต์ของ Svelte เองระบุว่ามีองค์กรใหญ่ๆ หลายแห่งเริ่มนำ Svelte มาใช้งานแล้ว เช่น IBM, Square, GoDaddy, Rakuten, Avast, Philips, 1Password, The New York Times (แต่ไม่ได้ระบุว่านำไปใช้กับโครงการใดบ้าง ทำให้เราไม่เห็นภาพมากนักว่าใช้เยอะแค่ไหน) และนอกจากบริษัทใหญ่ๆ ยังมีคนรวมรายชื่อโครงการย่อยๆ ที่ใช้ Svelte ให้เป็นตัวอย่างใช้อ้างอิงได้เช่นกัน

ถ้าดูจากความนิยมของ Svelte บน GitHub ก็ถือว่าค่อนข้างมาแรง มีคนให้ดาว (star) ประมาณ 5 หมื่นดาว (เทียบกับ Vue 1.87 แสน และ React 1.73 แสน) มีนักพัฒนาเข้ามาร่วม (contributors) ประมาณ 440 คน (Vue 400 คน และ React 1,500 คน) ก็น่าจะช่วยให้เบาใจได้ว่าโครงการค่อนข้างจุดติดแล้ว ไม่ถูกทิ้งร้างไปง่ายๆ ในระยะยาว

นอกจากผลสำรวจของ Stack Overflow แล้ว ผลสำรวจนักพัฒนาจากแหล่งอื่นยังออกมาคล้ายกันคือ นักพัฒนาให้ความพอใจกับ Svelte มากที่สุด ในขณะที่ความนิยมในการใช้งานจริง อยู่ประมาณอันดับ 3-4 รองจากแชมป์ตลอดกาล React และ Vue/Angular

ผลสำรวจของ State of JavaScript ปี 2020 Svelte ได้คะแนน satisfaction อันดับหนึ่ง แต่คะแนน usage ยังเป็นอันดับสี่

ผลสำรวจของ State of Frontend ปี 2020 ได้คะแนนความนิยมเป็นอันดับสี่ ตามหลัง React, Angular, Vue

จุดเด่น-ข้อจำกัดของ Svelte

โครงการ Svelte เทียบจุดแข็งของตัวเองกับ React เสมอ ดังนั้นในแง่การใช้งาน Svelte ย่อมถูกนำไปเทียบกับ React ด้วยเช่นกัน ว่ามีข้อดีข้อด้อยอย่างไร

ฝั่งของข้อดี Svelte ชูจุดเด่น 3 ข้อตามที่กล่าวไปแล้ว นั่นคือ ไม่ต้องใช้ Virtual DOM ทำให้ประสิทธิภาพดีขึ้น,​เขียนโค้ดน้อยลง และ syntax โค้ดมีฟีเจอร์ reactive ที่ตัวภาษา

ส่วนข้อจำกัดของ Svelte นอกจากประเด็นเรื่องการสร้าง syntax เฉพาะอย่างที่กล่าวไปแล้ว ปัญหาของ Svelte (รวมถึงเฟรมเวิร์ค "ผู้ท้าชิง" อื่นๆ ที่มีมากมายในท้องตลาด) ย่อมเป็นเรื่องการใช้งานและ ecosystem ที่ยังไม่แพร่หลายเท่ากับ React ที่เป็นเจ้าตลาดมานาน มีความพร้อมของเครื่องมือต่างๆ, เอกสาร และประสบการณ์ของนักพัฒนาในท้องตลาดกว่ามาก ตัวอย่างเช่น Svelte ยังโฟกัสเฉพาะการเขียนเว็บเป็นหลัก ยังไม่รองรับการเขียนแอพมือถือเต็มรูปแบบนัก (มีโครงการ Svelte Native ที่พัฒนาโดยชุมชน แต่ยังไม่ใช่ทีมหลักมาทำ, เพิ่งมี SvelteKit ชุดช่วยพัฒนาเว็บแอพแบบจริงจัง ออกมาเมื่อเร็วๆ นี้)

อย่างไรก็ตาม ความนิยมของ Svelte ที่เติบโตรวดเร็วมากในช่วงหลัง ดังที่เห็นได้จากความนิยมใน Stack Overflow น่าจะทำให้ชุมชนและเครื่องมือของ Svelte มีความพร้อมมากขึ้นในเร็ววัน และเราน่าจะเห็นองค์กรขนาดใหญ่เริ่มนำ Svelte มาใช้ในโครงการใหม่ๆ มากขึ้นเรื่อยๆ (แต่ยังคงใช้ React สำหรับโครงการเดิมที่ทำไปแล้วอยู่)