Svelte คืออะไร? มาทำความรู้จัก Framework ตัวนี้กันเถอะ

ในระหว่างที่กำลังนั่งคุยกับเพื่อนเรื่อง Website platform ที่ได้ทำไปกันอย่างทรหดกว่า 4 เดือนที่ผ่านมาด้วย React อยู่ๆเพื่อนก็พูดถึง “Svelte” ขึ้นมา พร้อมกับประโยคเงื่อนไขที่ไม่สามารถย้อนเวลาแก้ไขได้ “ถ้าใช้ Svelte งานคงเสร็จภายในสองเดือน” ตอนนั้นผมได้ยินครั้งแรกพร้อมกับความสงสัย Svelte คืออะไร แล้วมันออกเสียงยังไงวะ แล้วมันต่างจาก React หรือ Framework ตัวอื่นอย่างไร หลังจากผมไปศึกษามาก็เริ่มรู้สึกอยากจะย้อนเวลากลับไปแก้ไขงานตัวเองที่ติดบัคเป็นอาทิตย์ นั่นจุดกำเนิดบทความนี้ขึ้นมา ซึ่งวันนี้เราจะมาหาคำตอบกัน

What is Svelte ?

” I can confidently say that Svelte has been the easiest JavaScript component library to learn and start putting to use in a productive way “

Jeff Delaney, from Svelte Realtime Todo List with Firebase

Svelte คืออะไร?

Svelte เป็น framework ที่ใช้ในการออกแบบ User interface เหมือนกับ framework อื่นที่มีกฎเกณฑ์, รูปแบบและข้อบังคับการเขียน code ให้นักพัฒนา front-end เช่น React, Angular, Vue ปัจจุบัน Svelte พัฒนามาจนถึงเวอร์ชั่น 3.38.2 แล้วซึ่งในเวอร์ชั่นแรก Svelte ยังเป็นแค่การทดสอบสมมุติฐาน ที่มีจุดประสงค์ที่จะสร้าง Compiler แปลง code ขึ้นมา เวอร์ชั่นต่อมาเป็นการอัพเกรดเล็กน้อยเพื่อให้เป็นระเบียบมากขึ้น และเวอร์ชั่นล่าสุดอย่างเวอร์ชั่น 3 ที่เป็นการยกเครื่องใหม่เพื่อสร้างประสบการณ์พัฒนาที่เอกลักษณ์ และเหตุใดกันเล่าทำให้ Svelte แตกต่างจาก framework อื่นและมีแนวโน้มจะเป็น UI framework ที่เป็นที่นิยมในอนาคต

3 สิ่งที่ทำให้ Svelte แตกต่าง

1. Flexible and write less code

Svelte เป็น Compiler นั่นหมายความว่า code ในไฟล์ Svelte จะถูกแปลงจาก Hybrid language ที่ผสมระหว่าง HTML, CSS, JavaScript ให้เป็น lower-level optimize file แทน ซึ่งมันจะคล้ายกับวิธีคอมไฟล์ C# เป็น bytecode แต่ Svelte จะผสมทั้ง 3 ภาษาเข้าด้วยกัน นั่นทำให้การเขียน code มีความยืดหยุ่นมากขึ้น รวมทั้งยังเป็นประโยชน์ต่อเว็บเบราว์เซอร์อีกด้วย นอกจากความยืดหยุ่นในการเขียน code แล้ว Svelte ยังมีเป้าหมายในการลดจำนวน code ที่เขียนลงด้วย ยกตัวอย่างเช่น code บวกเลขข้างล่างของ 3 framework ทั้ง React, Vue และ Svelte

React

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Vue

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

Svelte

<script>
	let a = 1;
	let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

จะเห็นได้ว่า React code มีจำนวนที่เยอะกว่า Svelte ถีง 3 เท่า ซึ่งเป็นเรื่องปกติที่ความแตกต่างจะชัดเจนขนาดนีี้ จากที่ผมได้ทำการศึกษามา องค์ประกอบของ React มักจะมีจำนวนมากกว่า Svelte ประมาณ 40 %

2. No virtual DOM

DOM(Document Object Model) คือ interface ที่กำหนดโครงสร้างของเว็บไซต์ มันจะนำ HTML มาเปลี่ยนเป็นโครงสร้างที่สามารถจัดการและเข้าถึงได้ ในส่วนของ Virtual DOM จะเป็นการเพิ่ม concept ในการจำลอง DOM ขึ้นมาในหน่วยความจำและนำมาใช้ในการอัพเดต DOM เฉพาะจุดที่เปลี่ยนแปลงเมื่อ state ในแอพพลิเคชั่นมีการเปลี่ยนแปลง เมื่อสร้าง Virtual DOM แล้วจะรวมตัวกับ DOM และแสดงผลออกมาเป็น User Interface ที่เราเห็นกัน

ในอดีต 6 – 7 ปีก่อน Vitrual DOM ถือว่าเป็นเทคโนโลยีใหม่ที่มีความเร็วสูงมาก แต่ปัจจุบันเว็บไซต์มีการพัฒนาที่มากขึ้นทำให้เกิดผลกระทบของ DOM ที่ซ้ำกันในหน่วยความจำซึ่งจะส่งผลให้ประสิทธิภาพการทำงานแย่ลงได้แต่ Svelte มีแนวทางที่แตกต่างออกไป นั่นคือการไม่ใช้ Virtual DOM นั่นทำให้แอพพลิเคชั่นมีประสิทธิภาพที่ดีขึ้นอีกด้วย

3. CSS scope

ความแตกต่างระหว่าง CSS ใน Svelte และ CSS ใน framework อื่นๆคือ Svelte จะนำ CSS จากแต่ละ component มาแบ่งให้เป็น CSS แต่ละไฟล์ในช่วงระหว่าง build ยกตัวอย่างเช่นใน React จะเป็นการจัดเรียงแต่ละ component ทั้ง markup และ JavaScript ส่วน Svelte จะเป็นการรวบรวมแทนทั้ง markup และ JavaScript ให้อยู่ใน”.svelte” ไฟล์เดียว ซึ่งจะคล้ายกับ Vue

Svelte จะสร้างชื่อ class ที่ไม่ซ้ำกันขณะที่ compile เพื่อสร้างความแน่ใจว่า style แต่ละ element จะไม่เกิดความขัดแย้งซึ่งกันและกัน นั่นแสดงว่าเพื่อนๆสามารถที่จะใช้ selector โดยไม่จำเป็นโยงกับ class name อีก

เปรียบเทียบ Svelte กับ framework อื่นๆ

เราจะทำการเปรียบเทียบ Svelte กับ React, Vue, Angular โดยใช้ เกณฑ์ 2 ข้อในการพิจรณา ได้แก่

• 1.Popularity
• 2.Performance

1. Popularity

เมื่อเอา Svelte มาเปรียบเทียบความนิยมกับ framework ดังๆ ณ ปัจจุบัน(React, Vue, Angular) จะเห็น Svelte ยังไม่เป็นที่นิยมอยู่มาก อาจเพราะ Svelte ยังเป็นแค่น้องใหม่ในวงการ framework เหมือนกับ React, Vue, Angular ในช่วงแรกที่ยังไม่ค่อยมีคนรู้จักกัน

2. Performance

ในการเปรียบเทียบ Performance บน website ของ framework ผมจะใช้ตาราง 3 ตัวในการเปรียบเทียบได้แก่ Speed test, Startup test, Memory allocation test ซึ่งเราตารางมาจาก Interactive Results เพื่อเปรียบเทียบ

Speed test

จากสีโดยรวมในตารางจะเห็นได้ว่า Svelte และ Vue มี performance ที่ดีที่สุดในหมวดนี้ โดยทางด้านซ้ายจะเป็น action ส่วนขวาจะเป็นผลลัพธ์เวลาเฉลี่ย ในส่วนตารางบรรทัดสุดท้าย Slowdown geometric เป็นตัวชี้วัดของ performance และความเร็วโดยรวมของแต่ละ framework ซึ่งเราจะสรุปได้ว่า

1. Vue – 1.17 slowdown geometric mean
2. Svelte – 1.19 slowdown geometric mean
3. React & Angular – 1.27 slowdown geometric mean

Startup test

จากตาราง ชัดเจเลยว่าในหมวดหมู่นี้ Svelte ชนะอย่างชัดเจน ซึ่งสรุปได้ว่า

1. Svelte
2. Vue
3. React
4. Angular

Memmory allocation test

ผลลัพธ์เหมือนกับ Startup test Svelte ยังคง Top ฟอร์มอีกตามเคย Vue และ React ค่อนข้างใกล้เคียงกัน ส่วน Angular ในหมวดนี้ Performance ก็ยังคงต่ำสุดเช่นเคย

1. Svelte
2. Vue
3. React
4. Angular

Let's start first project !!!

หลังจากศึกษาเรียนรู้มาพอสมควรเพื่อนๆ คงจะเริ่มสนใจ Svelte กันเข้าแล้ว งั้นเรามาเริ่มสร้าง Svelte project กันดีกว่าครับ

1. ขั้นแรกสำหรับใครที่ยังไม่เคยติดตั้ง node js สามารถดาวน์โหลดที่ node js

2. สร้างโปรเจ็ค Svelte ใน Visual code เริ่มจากการเปิด Termianl ใน VS ก่อน คลิ๊กที่ View บน Tabbar ตามด้วย Terminal

3. พิมพ์ใน Terminal เพื่อติดตั้ง Svelte พร้อมตั้งชื่อ Project

npx degit sveltejs/template project-name

4. ทำการ change directory ไปที่ไฟล์ Project ที่สร้างไว้

cd .\project-name\

5. ติดตั้ง Dependencies อื่นๆใน ไฟล์ package.json

npm install

6. โฟลเดอร์ node-module จะปรากฏขึ้นมาใน โฟลเดอร์ Project ที่เราสร้างไว้

7. run application

npm run dev

8. เปิด Website ขึ้นมา ด้วยการ Ctrl+Click ที่ Local link

9. ซึ่งจะปรากฏประโยคที่เราคุ้นเคยกันอย่าง Hello world ขึ้นมาบนจอ

การเขียนพวก State, Method , หรือพวก Event ต่างๆ จะเขียนใน <script> ส่วนการเขียน CSS จะเขียนใน <style> ส่วนข้างนอกจะถูกแสดงผลออกมาเป็น HTML ปกติ เพื่อนๆสามารถศึกษา Svelte เพิ่มเติมทั้งในรูปแบบ แบบฝึกหัด และ Document ได้ที่เว็บไซต์ Svelte tutorial และ Svelte docs นะครับ

สรุป

สุดท้ายนี้ต้องยอมรับว่า Svelte ยังเป็นแค่น้องใหม่มากในวงการ fronted framework (เพิ่งออก svelte v.3 ช่วง 21 เมษายน 2562 นี่เอง) ต้องใช้ระยะเวลาพอสมควรในการพัฒนา การจะยึด framework นี้เพื่อใช้ในการหางานก็คงไม่ใช่ความคิดที่ดีแน่ อย่างล่าสุด Svelte ก็พึ่ง update ให้ใช้ Typescript ได้เอง แต่ด้วยการมาของ Svelte จะต้องสร้างการเปลี่ยนแปลงให้วงการ front-end ในอนาคต ไม่มากก็น้อย ซึ่งนั่นรวมถึงการเป็น mainstream framework อีกด้วย

ขอบคุณเนื้อหาอ้างอิงจากเว็บไซต์

• React vs Vue vs Angular vs Svelte
• Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
• Getting Acquainted With Svelte, the New Framework on the Block