รู้จัก Svelte เฟรมเวิร์คจาวาสคริปต์ที่นักพัฒนาบน Stack Overflow โหวตว่ารักที่สุด

ที่มา : https://svelte.dev/ ที่มา : https://www.blognone.com/node/124506

 ในผลการสำรวจนักพัฒนาของ 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

Svelte คืออะไร มีคุณสมบัติอะไร

Svelte เป็นเฟรมเวิร์กส่วนหน้าแบบคอมไพเลอร์และภาษาแบบโอเพ่นซอร์สฟรี ซึ่งสร้างขึ้นโดย Rich Harris และดูแลโดยสมาชิกหลักของทีม Svelte Svelte ไม่ใช่ไลบรารี JavaScript แบบ monolithic ที่นำเข้าโดยแอปพลิเคชัน แต่ Svelte จะคอมไพล์เทมเพลต HTML เป็นโค้ดพิเศษที่จัดการ DOM โดยตรง ซึ่งอาจช่วยลดขนาดของไฟล์ที่ถ่ายโอนและทำให้ประสิทธิภาพของลูกค้าดีขึ้น โค้ดแอปพลิเคชันยังถูกประมวลผลโดยคอมไพเลอร์ โดยแทรกการเรียกเพื่อคำนวณข้อมูลใหม่โดยอัตโนมัติและแสดงองค์ประกอบ UI ใหม่อีกครั้งเมื่อข้อมูลที่เกี่ยวข้องถูกแก้ไข ซึ่งจะช่วยหลีกเลี่ยงโอเวอร์เฮดที่เกี่ยวข้องกับการแทนค่าระดับกลางของรันไทม์ เช่น Virtual DOM ซึ่งแตกต่างจากเฟรมเวิร์กแบบเดิมๆ (เช่น React และ Vue) ซึ่งทำงานส่วนใหญ่ในเวลารันไทม์ เช่น ในเบราว์เซอร์

คอมไพเลอร์เองเขียนด้วย JavaScript ซอร์สโค้ดได้รับอนุญาตภายใต้ใบอนุญาต MIT และโฮสต์บน GitHub ในบรรดาไลบรารีส่วนหน้าอื่นๆ ที่เทียบเท่ากัน Svelte มีรอยขนาดบันเดิลที่เล็กที่สุดเพียง 2KB

ประวัติและพัฒนาการของ Svelte

  • ต้นกำเนิด: Svelte เกิดขึ้นจากรากฐานของ Ractive.js เฟรมเวิร์คที่ Rich Harris พัฒนาไว้ก่อนหน้านี้
  • เวอร์ชัน 1: ปล่อยตัวครั้งแรกเมื่อ 29 พฤศจิกายน 2016 เป็นการนำ Ractive มาผสมกับคอมไพเลอร์
  • เวอร์ชัน 2: ปล่อยตัวครั้งที่สองเมื่อ 19 เมษายน 2018 ปรับปรุงแก้ไขจุดบกพร่องจากเวอร์ชันก่อน เช่น เปลี่ยนการใช้ double curly braces เป็น single curly braces
  • เวอร์ชัน 3: ปล่อยตัวครั้งที่สามเมื่อ 21 เมษายน 2019 พัฒนาการจัดการปฏิกิริยาใหม่โดยใช้คอมไพเลอร์ติดตามการกำหนดค่าเบื้องหลัง
  • SvelteKit: ประกาศเปิดตัว web framework ในเดือนตุลาคม 2020 และเข้าสู่รุ่นเบต้าในเดือนมีนาคม 2021
  • เวอร์ชัน 4: ปล่อยตัวครั้งที่สี่เมื่อ 22 มิถุนายน 2023 เป็นการปรับปรุงขนาดเล็กและเร็วกว่าเวอร์ชัน 3 ปรับเปลี่ยนภายในจาก TypeScript กลับมาเป็น JavaScript โดยใช้ JSDoc annotations ซึ่งสร้างความสงสัยในชุมชน นักพัฒนา Rich Harris ผู้สร้าง Svelte ได้เข้ามาชี้แจงเพิ่มเติม
  • ทีมพัฒนา:
    • Key early contributors เข้าร่วมทีมตั้งแต่เวอร์ชัน 1
    • Rich Harris และ Simon Holthausen เข้าร่วม Vercel เพื่อทำงานเต็มเวลาบน Svelte ในปี 2022
    • Dominic Gannaway จากทีมหลักของ React เข้าร่วม Vercel เพื่อทำงานเต็มเวลาบน Svelte ในปี 2023
  • SvelteKit 1.0: ปล่อยตัวครั้งแรกในเดือนธันวาคม 2022 หลังจากพัฒนานาน 2 ปี

ไวยากรณ์ของ Svelte

ไฟล์ Svelte (.svelte):

  • แอปพลิเคชันและคอมโพเนนต์ของ Svelte จะถูกกำหนดไว้ในไฟล์ .svelte ซึ่งเป็นไฟล์ HTML ที่ขยายด้วยไวยากรณ์เทมเพลตที่ยึดตาม JavaScript และคล้ายกับ JSX

ไวยากรณ์หลัก:

  • $:: ใช้สำหรับทำเครื่องหมายข้อความปฏิกิริยา (reactive statements) จะติดตามการเปลี่ยนแปลงของตัวแปรและอัพเดตส่วนที่เกี่ยวข้องใน UI
  • ตัวแปรระดับบนสุด: จะกลายเป็นสถานะของคอมโพเนนต์ (component's state)
  • ตัวแปรที่ส่งออก (exported variables): จะกลายเป็นคุณสมบัติ (properties) ที่คอมโพเนนต์ได้รับ
  • {}: ใช้สำหรับใส่โค้ด JavaScript ลงในองค์ประกอบ HTML และคอมโพเนนต์

ตัวอย่าง:

  • สารบัญ