ตอนนี้เรารู้แล้วว่า Svelte กำลังได้รับความนิยมและคำชื่นชมมากขึ้น เรามาค้นหาสาเหตุบางประการที่อยู่เบื้องหลังเทรนด์นี้กัน ทำไม Vercel จึงซื้อ Svelte ร่วมกับ SvelteKit
1. Svelte.js อนุญาตให้สร้างแอปพลิเคชันที่มีขนาดเล็กมากเมื่อคอมไพล์แล้ว มันไม่ได้ฝังรันไทม์ เช่น React หรือ Vue
2. ซอร์สโค้ดนั้นเข้าใจง่ายสำหรับนักพัฒนา Svelte.js รวบรวม Logic (JavaScript) โครงสร้าง (HTML) และสไตล์ (CSS) ไว้ในไฟล์เดียวกัน สิ่งนี้ทำให้โค้ดง่ายต่อการอ่านและบำรุงรักษา Guillermo Rauch ผู้ก่อตั้งและ CEO ของ Vercel ถึงกับกล่าวว่า Svelte ตามความเห็นของเขานั้นเรียนรู้ได้ง่ายกว่า React มาก ถึงขั้นกล่าวว่ามันสมบูรณ์แบบกว่าที่เคยมีมา (อันนี้ก็ไปเจาะลึกกันเอาเอง แฟนพันธ์แท้แต่ละค่ายไม่ค่อยยอม)
3. องค์ประกอบดังกล่าวข้างต้นถูกรวบรวมในไฟล์ .svelte เนื่องจาก Svelte.js ไม่ได้ฝัง DOM เสมือน (Virtual DOM) จึงทำงานเหมือนกับคอมไพเลอร์ (Complier) จึงเร็ว
4. เมื่อสร้างแอป Svelte ส่วนประกอบทั้งหมดจะถูกรวบรวมเป็นโมดูล JavaScript อิสระ นักพัฒนาสามารถตรวจสอบการทำงานและความเสถียรของโปรแกรมที่คอมไพล์ได้ตลอดเวลาโดยใช้หน้าต่างแสดงตัวอย่าง (preview window) สิ่งนี้ทำให้สคริปต์สุดท้ายเบาและรวดเร็วในการรัน ประสิทธิภาพของมันคาดว่าจะเร็วกว่า React และตัวอื่น ๆ หลายเท่า (รอดูพัฒนาการต่อไป)
5. ในฐานะนักพัฒนาเว็บ คุณจะไม่ต้องกังวลเกี่ยวกับส่วนประกอบ CSS ที่ไวต่อข้อผิดพลาด คุณสามารถใช้มาร์กอัป HTML หรือไฟล์ XML แบบง่ายที่ Svelte.js จะตีความให้ (interpreted)
6. ประการสุดท้าย มีข้อได้เปรียบเล็กน้อย ช่วยให้ Svelte ได้รับความนิยม:
มีความเสี่ยงน้อยที่จะเกิดผลข้างเคียงด้านกราฟิก เนื่องจากสไตล์ของส่วนประกอบ Svelte แต่ละรายการถูกแยกให้มีผลกับ component เท่านั้น ไม่ส่งผล parents หรือ children
Svelte รองรับ ES2018 ดังนั้นคุณสามารถใช้ฟังก์ชันลูกศรและคุณสมบัติเล็กๆ น้อยๆ ที่สวยงามอื่นๆ ได้
คุณสมบัติ Svelte จากมุมมองของนักพัฒนา
แม้ว่าเราจะได้รับข้อมูลเชิงลึกเกี่ยวกับความเหมาะสมของ Svelte และ SvelteKit มาบ้างแล้ว เรามาดูกันว่าประสบการณ์ของนักพัฒนาเป็นอย่างไร สำหรับหลาย ๆ คน Svelte เป็นวิวัฒนาการขั้นต่อไปในระบบนิเวศ(ecosystem) ของ JavaScript Framework ที่มีการพัฒนาอย่างรวดเร็ว ทำไมถึงเป็นเช่นนั้น ?
จากมุมมองของนักพัฒนาการเขียนด้วย Svelte ดูเหมือนจะง่ายกว่ามาก ยิ่งไปกว่านั้น ไม่ต้องหาอะไรมาหักล้าง โดยเฉพาะนักพัฒนาที่เบื่อกับอะไรที่เป็นนามธรรมและรหัสมาตรฐานที่จำเป็นซึ่งเฟรมเวิร์กที่มีอยู่บังคับให้นักพัฒนาต้องเรียนรู้ นี่เป็นด้านที่ใช้งานได้จริงของเครื่องมือนี้
จากความคิดเห็นในเว็บไซต์อย่าง Dev หรือ GitHub ไม่นานนักเราจะได้เห็นความคิดเห็นของนักพัฒนาจำนวนมาก เช่น:
“Svelte is simple, powerful and elegant. And you're going to love it!”
ต่อไปนี้คือเหตุผล 10 ประการที่นักพัฒนาซอฟต์แวร์แนะนำ Svelte ให้กับนักพัฒนาเว็บใหม่ทุกรายที่เริ่มเรียนรู้การเขียนโปรแกรม:
1. ส่วนประกอบเข้าใจง่าย (Components Easy to Understand)
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ในบทความนี้ Svelte ถือเป็นโครงร่างที่ชัดเจนและเรียบร้อยโดยไม่มีการเพิ่มเติมที่ไม่จำเป็น ในกระบวนการเขียนโค้ดและการออกแบบไม่เคยง่ายอย่างนี้มาก่อน ทำให้นักพัฒนามีความสุข(ขนาดนั้นเชียว) และส่งผลให้โครงการดำเนินไปอย่างราบรื่นยิ่งขึ้น
2. โค้ดกระชับและไฟล์สะอาด (Concise Code and Light Files)
ตรรกะในการเขียนนั้นเรียบง่ายและอ่านได้ง่ายในเวลาเดียวกัน ท้ายที่สุด ยิ่งคุณเขียนโค้ดน้อยลงเท่าใด ข้อผิดพลาดก็จะยิ่งปรากฏขึ้นน้อยลงเท่านั้น เช่นเดียวกับ React ตัว SvelteKit ให้คุณมีฟีเจอร์การแยกโค้ดซึ่งรองรับการโหลดแอปที่เร็วขึ้น
3. การตอบสนองด้วยข้อความที่ติดเลเบล (Responsiveness with Labeled Statements)
เมื่อใดก็ตามที่คุณต้องการให้ค่าตัวแปรของคุณได้รับการอัปเดตและคำนวณใหม่ตามตัวแปรอื่นๆ คุณสามารถใช้คำสั่ง responsive เพียงใส่เครื่องหมายดอลลาร์($) ไว้หน้าตัวแปรที่คุณต้องการโต้ตอบ
ในแง่ Business Logic นั้นหมายถึงขั้นตอนการเข้ารหัสนั้นราบรื่นขึ้น การสร้างอินเทอร์เฟซที่ตอบสนองต่อเว็บแอปพลิเคชันเป็นหนึ่งในส่วนที่สำคัญที่สุดของโครงการทั้งหมดในปัจจุบัน เนื่องจากควรปรับขนาดได้สำหรับทั้งเว็บและอุปกรณ์พกพา ฟีเจอร์เล็กๆ น้อยๆ นี้ทำให้นักพัฒนารู้สึกหงุดหงิดน้อยลงมาก และทำให้มั่นใจว่ากระบวนการทั้งหมดได้รับการปรับให้เหมาะสมยิ่งขึ้น
4. การจัดการสถานะแบบ Global ที่เรียบง่ายนอกกรอบ (Simple Out-Of-The-Box Global State Management)
ในการสร้างแอป Svelte ไม่จำเป็นต้องใช้เครื่องมือการจัดการสถานะของบุคคลที่สาม(third-party) ที่ซับซ้อน เช่น Redux หรือ Vuex คุณเพียงแค่กำหนดตัวแปรเป็นที่เก็บแบบเขียน(write)/อ่าน(read) ได้ และใช้ในไฟล์ .svelte ทั้งหมดที่มีเครื่องหมาย $ นำหน้า
มีรายการตรวจสอบ ช่วยสำหรับการเข้าถึงจำนวนมากที่ใช้งานใน Svelte และให้คำแนะนำโดยไม่สร้างความรำคาญ ยิ่งไปกว่านั้น ด้วย Svelte Stores คุณไม่ต้องกังวลว่าหน่วยความจำจะรั่วไหล เพราะตัวแปรของ Store ที่นำหน้าด้วยเครื่องหมาย $ จะทำหน้าที่สมัคร(auto-subscribe) และยกเลิก(unsubscribe) การสมัครโดยอัตโนมัติ
5. โหมดการเข้าถึงในตัวและการตรวจสอบ CSS ที่ไม่ได้ใช้ (Built-in Accessibility and Unused CSS Checks)
Svelte ต้องการทำให้อินเทอร์เน็ตเป็นสถานที่ที่ดีขึ้น โดยจะช่วยคุณ ด้วยเคล็ดลับที่มีประโยชน์ในโค้ด ตัวอย่าง เช่น เมื่อใดก็ตามที่คุณลืมใส่แอตทริบิวต์ alt บนแท็ก Svelte จะแสดง "A11y: องค์ประกอบควรมีการเตือนแอตทริบิวต์ alt" ให้คุณ เพื่อให้โค้ดมีความกระชับมากที่สุดเท่าที่จะเป็นไปได้และเพื่อหลีกเลี่ยงการเหลือโค้ดย่อย Framework นี้ยังทำเครื่องหมายตัวเลือก CSS ที่ไม่ได้ใช้ให้คุณเมื่อใดก็ตามที่ไม่มีมาร์กอัป(Markup) ที่เกี่ยวข้องในคอมโพเนนต์(Component) และมีความหมายต่อธุรกิจของคุณอย่างไร? นักพัฒนาอ้างว่าสิ่งนี้ทำให้งานของพวกเขาง่ายขึ้นมาก Svelte ทำการแก้ไขเล็กน้อยระหว่างดำเนินงาน ซึ่งทำให้แน่ใจว่าข้อบกพร่องที่อาจเกิดขึ้นในไฟล์จะมีจำนวนน้อยลง
6. ส่วนประกอบจะถูกส่งออกโดยอัตโนมัติ (Components Are Exported Automatically)
เมื่อใดก็ตามที่คุณต้องการใช้ส่วนประกอบ A ในส่วนประกอบ B โดยปกติแล้วคุณจะต้องเขียนโค้ดเพื่อส่งออกส่วนประกอบ A ก่อน เพื่อให้สามารถนำเข้าส่วนประกอบ B ได้ ด้วย SvelteKit คุณไม่ต้องกังวลว่าจะลืมส่งออก คอมโพเนนต์ .svelte จะถูกส่งออกโดยอัตโนมัติตามค่าเริ่มต้นเสมอ และพร้อมที่จะนำเข้าโดยคอมโพเนนต์อื่นๆ เป็นผลให้กระบวนการทั้งหมดทำงานเร็วขึ้นและจำนวนข้อบกพร่องที่อาจเกิดขึ้นจะลดลงอย่างมาก นอกจากนี้ การใช้การแสดงผลฝั่งเซิร์ฟเวอร์ยังช่วยให้สร้างและแสดงส่วนหน้าของเว็บไซต์หรือแอปได้เร็วขึ้น
7. สไตล์ถูกกำหนดโดยค่าเริ่มต้น (The Style Is Set by Default)
เช่นเดียวกับไลบรารี CSS-in-JS สไตล์ Svelte จะถูกขยายตามค่าเริ่มต้น ซึ่งหมายความว่าชื่อคลาส svelte จะแนบไปกับสไตล์ของคุณ เพื่อไม่ให้สไตล์ของคุณรั่วไหลและมีอิทธิพลต่อสไตล์ของคอมโพเนนต์อื่นๆ แน่นอน คุณมีตัวเลือกในการใช้ Global Style โดยเพียงแค่เติมคำนำหน้าด้วย :global()modifier หรือใช้ไฟล์ .css หากคุณต้องการ พูดง่ายๆ ก็คือ เร่งกระบวนการออกแบบทั้งหมดให้เร็วขึ้นอย่างมาก ในขณะเดียวกันก็ทำให้มีความเหนียวแน่นมากขึ้นในเวลาเดียวกัน นักพัฒนาชื่นชอบและส่งผลให้โครงการทำงานได้อย่างมีประสิทธิภาพมากขึ้น
8. #await Blocks
สำหรับเว็บแอปส่วนใหญ่ คุณจะต้องจัดการข้อมูลแบบอะซิงโครนัส (Asynchronous) เพื่อแสดงข้อมูลที่เป็นประโยชน์แก่ผู้ใช้ของคุณ
ข้อได้เปรียบของ {#await} Blocks คือคุณไม่ต้องกำหนดสถานะเพิ่มเติมสำหรับ state ที่ได้รับการแก้ไข/ถูกปฏิเสธ คุณสามารถกำหนดตัวแปรแบบอินไลน์(variables inline) ในเทมเพลตของคุณ
9. แอตทริบิวต์ทางลัดของการส่งค่า Properties (Shortcut Attributes for Passing Props)
ในกรณีที่มีชื่อ accessory name เหมือนกับชื่อตัวแปร เราสามารถส่งต่อไปยังคอมโพเนนต์เป็นแอตทริบิวต์ทางลัด เช่น {message} ไม่แตกต่างจากการใช้ message=”{message}” แต่มีความกระชับมากกว่า
คุณสามารถดูแอตทริบิวต์ class:round ที่ใช้กับปุ่ม โดยพิจารณาว่า round นั้นเป็นจริงหรือเท็จ นี่อาจกลายเป็นส่วนประกอบที่ใช้ซ้ำได้ง่ายโดยที่คุณส่งค่าของ round จากภายนอก เพื่อกำหนดรูปแบบของส่วนประกอบแบบมีเงื่อนไขได้
10. เอฟเฟกต์และแอนิเมชั่นในตัว (Built-in Effects and Animations) Svelte มาพร้อมกับโมดูลเอฟเฟกต์อันทรงพลัง:
• slender/motion effects เช่น tweened และ spring
• svelte/transition effects เช่น fade, blur, fly, slide, scale และ draw
• svelte/animated effects เช่น flip
• svelte/easing effects เช่น bounce, cubic, elastic และอีกอื่น ๆ
แอนิเมชันเป็นส่วนของการพัฒนาเว็บไซต์ที่คุณมักจะมองหาแหล่งอ้างอิงภายนอกเพื่อจัดการให้คุณ ดังนั้นจึงเป็นเรื่องดีที่คุณสามารถนำไปใช้ได้ทันที ด้วย Svelte ขนาดของเว็บไซต์หรือแอปของคุณจะลดลงเนื่องจากมีการเปลี่ยนภาพและภาพเคลื่อนไหวในตัว Total Solution เลย
*****เมื่อใดที่คุณไม่ควรใช้ Svelte และ SvelteKit*****
ก่อนที่เราจะพูดถึงหัวข้อนั้น มันอาจจะเป็นประโยชน์สำหรับคุณที่จะได้รับข้อมูลที่เฉพาะเจาะจงมากขึ้นเกี่ยวกับการพัฒนา Jamstack
แม้จะมีข้อดีแต่การใช้ Svelte ก็มีข้อเสีย รูปแบบการใช้ DOM events อาจสร้างความรำคาญ เนื่องจากต้องปฏิบัติตามไวยากรณ์เฉพาะของ Svelte แทนการใช้ไวยากรณ์ JS ที่กำหนดไว้แล้ว คุณไม่สามารถใช้ onClick ได้โดยตรงเหมือนใน React แต่คุณต้องใช้ไวยากรณ์พิเศษ ซึ่งอาจสร้างความหงุดหงิดให้กับนักพัฒนาที่เคยทำงานกับ .js frameworks หากมีนักพัฒนาในลักษณะนี้ในทีมของคุณ คุณอาจต้องแน่ใจว่าพวกเขาตกลงที่จะเปลี่ยนไปใช้ Svelte
Svelte ไม่รองรับการอัปเดตการอ้างอิงและการกลายพันธุ์ของอาร์เรย์ นักพัฒนาต้องดูแลสิ่งนี้อย่างจริงจังและตรวจสอบให้แน่ใจว่ามีการกำหนดอาร์เรย์ใหม่เพื่อให้อินเทอร์เฟซผู้ใช้ได้รับการอัปเดต ซึ่งอาจทำให้กระบวนการเขียนโค้ดทั้งหมดช้าลงอย่างมาก และทำให้เกิดจุดบกพร่องที่อาจเกิดขึ้นในผลิตภัณฑ์ขั้นสุดท้าย
Svelte เป็นเฟรมเวิร์กใหม่ที่เพิ่งได้รับการสนับสนุนจากชุมชนนักพัฒนาเพียงเล็กน้อย และเช่นเดียวกันกับ SvelteKit ดังนั้นจึงไม่รองรับปลั๊กอินและการผสานรวมที่หลากหลายซึ่งอาจจำเป็นสำหรับแอปที่ใช้งานจริงจำนวนมาก อย่างไรก็ตาม ด้วยการสนับสนุนจาก Vercel ปัญหานี้อาจหมดไปในไม่ช้า
เมื่อพิจารณาทั้งหมดนี้และมุมมองที่กว้างขึ้น เฟรมเวิร์กที่พัฒนาอย่างรวดเร็วนี้ไม่ใช่ตัวเลือกที่ดีที่สุดในสถานการณ์ต่อไปนี้:
ทีมขนาดใหญ่ที่ไม่ต้องการสร้างคุณสมบัติพิเศษทั้งหมด ไม่ควรพิจารณา Svelte.js ขอแนะนำให้หันไปใช้ Vue เนื่องจากมีเราเตอร์และไลบรารีการจัดการสถานะที่ยอดเยี่ยมกว่า
หากคุณมีเฟรมเวิร์กใช้แล้วในทีม เช่น Vue หรือ React อยู่แล้ว ก็ไม่มีเหตุผลที่แท้จริงที่จะเปลี่ยนไปใช้ Svelte เนื่องจากมันไม่มีคุณสมบัติใด ๆ ของเฟรมเวิร์กเหล่านั้น (ก็แน่นอนมันเทียบตรง ๆ ไม่ได้ ถ้าคุณไม่ได้คิดจะใช้คุณสมบัติเด่นของ Svelte แต่เชื่อเถอะถ้าทำต่อมันเจ๋งกว่า)
แม้ว่า Svelte จะใกล้เคียงกับ Vanilla.js มากกว่าเฟรมเวิร์กอื่น ๆ แต่ก็ยังแนะนำให้เรียนรู้ Vanilla.js ก่อน เพื่อให้มีความเข้าใจที่ดีขึ้นเกี่ยวกับ Svelte และเฟรมเวิร์กอื่น ๆ ทั้งหมด
