- ใช้ Vue2 มาตลอด 2 ปี และตัดสินใจย้ายเพราะตอนนี้ไม่มีการดูแลรักษาแล้ว
- ลังเลระหว่าง Vue 3 กับ Svelte ก่อนจะสรุปเหตุผลว่าทำไมจึงเลือก Svelte
เปรียบเทียบ Svelte กับ Vue 3
- ในแบบสำรวจนักพัฒนา JavaScript ค่า retention ของ Svelte ดีกว่า
- Svelte
- รองรับ Type ได้ดีกว่า และจำกัดการเข้าถึงแบบ global
- (ในความเห็นส่วนตัว) ไวยากรณ์ดูสง่างามและเป็นมิตรกับผู้ใช้มากกว่า
- ใช้งานได้ตรง ๆ โดยไม่ต้องมี HTML เพิ่มเติมอย่าง
<template>
- สไตล์ถูกทำ scope ให้อัตโนมัติ
- ไม่จำเป็นต้องใช้ computed property เพื่ออัปเดตข้อมูล แค่เขียนฟังก์ชัน
=> ก็พอ
- เพิ่มปลั๊กอิน JavaScript แบบล้วนได้ง่ายกว่า
- คอมไพล์โดยไม่ใช้ virtual DOM ทำให้ปรับแต่งได้ดีกว่าและทำงานเสร็จได้เร็วกว่า
- อัปเดตข้อมูลอัตโนมัติได้ผ่านตัวแปรที่ประกาศไว้
Svelte ก็มีข้อเสียเหมือนกัน
- ชุมชนยังเล็กกว่าเมื่อเทียบกัน (เพราะออกมาในปี 2019)
ย้ายอย่างไร?
- ช่วงเวลา: ทำการย้ายในเดือนสิงหาคมซึ่งเป็นช่วงที่ผู้ใช้แอปมีจำนวนน้อยลง
- ระยะเวลา: ใช้เวลา 2 สัปดาห์ในการย้ายทุกไฟล์จาก Vue ไปเป็น Svelte
- จำนวนผู้พัฒนา: นักพัฒนา frontend 2 คนทำงานเต็มเวลา 2 สัปดาห์ และอีก 1 คนทำเต็มเวลา 1 สัปดาห์ รวมเป็น 3 คน
- เวิร์กโฟลว์: ใช้ Notion แจกตั๋วงานให้นักพัฒนา เขียนคอมโพเนนต์ใหม่ใน Storybook และให้นักพัฒนาแต่ละคนเขียนหน้าที่รับผิดชอบใหม่ด้วย Svelte
- เพราะเป็นสตาร์ทอัป ไฟล์ที่ต้องทำจึงไม่ได้มีเป็นหลักพัน ทำให้งานค่อนข้างง่าย
อย่างไรก็ตาม มีการย้ายโดยยอมรับความเสี่ยงในช่วงที่ SvelteKit ยังพัฒนาอย่างต่อเนื่องอยู่ ทำให้เพียง 1 เดือนหลังย้ายก็ต้องทำการเปลี่ยนแปลงครั้งใหญ่ แต่ทีม SvelteKit มี migration guide ที่ยอดเยี่ยม จึงปรับตัวเข้ากับอัปเดตใหม่ได้ไม่ยาก และในเดือนกันยายนทีม SvelteKit ก็ประกาศว่าเฟรมเวิร์กเข้าสู่สถานะ RC แล้ว ทำให้มั่นใจเรื่องเสถียรภาพได้มากขึ้น
- โครงสร้างไฟล์และคอมโพเนนต์: "folder-based routing" ของ SvelteKit ช่วยได้มาก สามารถแยกแต่ละหน้าออกเป็นหน้ารองและนำชื่อตัวแปรมาตรฐานอย่าง
loading และ submit กลับมาใช้ซ้ำได้ อีกทั้ง layout ยังถูกรวมเข้ากับ route ที่เกี่ยวข้อง ทำให้เข้าถึงได้ง่ายขึ้น
ได้อะไรบ้าง?
- ประสิทธิภาพที่ดีขึ้นและลื่นไหลขึ้น
- ประสบการณ์ของนักพัฒนาที่ดีขึ้น
- การรันโค้ดที่รวดเร็ว
- เปิดใช้และใช้งาน SSR ได้
- โค้ดกระชับและเข้าใจง่าย
- แก้ปัญหาข้อผิดพลาดจาก type checking
ยังไม่มีความคิดเห็น