เขียนเว็บด้วย Svelte น้องเล็กแต่เร็วมากกก

Sevelte คืออะไร ?

Svelte คือ JavaScript Framework เหมือนกับ React, Angular, Vue ที่ไว้ช่วยให้การพัฒนา Web แบบ Single-Page Application

ซึ่งคุณสมบัติของ Sevelte คือ

- Write less code เขียนง่าย สั้น กระชับ ถ้าเคยลองตัวอื่นแล้วมาอ่าน doc แปปเดียวก็เขียนได้แล้ว

- No virtual DOM เล็ก ไว และ overhead ต่ำกว่าเพราะไม่มี VirtualDOM

- Truly reactive Sevelte compiler ที่จะแปลงโค้ดที่เราเขียนเป็น JavaScript ธรรมดา แต่ผ่านการ optimize เป็นอย่างดี

ซึ่งในบทความนี้ผมจะอธิบายวิธีติดตั้งและการใช้งานเบื้องต้นก่อนนะครับ

Installation Svelte

Svelte นั้นสามารถติดตั้งผ่าน npx ได้เลย

npx degit sveltejs/template project-name

จากนั้นเข้าไปให้ folder ของ project แล้วทำให้โหลด dependency ของ project

cd my-svelte-project
npm install

จากนั้น run project ด้วยคำสั่ง

npm run dev

Structure เริ่มต้นของ Svelte จะประมาณนี้ครับ

มาเริ่มเขียนโค้ดกันเลย

เราจะทำการเขียนในไฟล์ที่ App.svelte นะครับ ซึ่งน่าตาไฟล์ของมันจะเป็นประมาณนี้

จากรูปข้างบน เราจะเขียนพวก state, method , หรือพวก event ต่างๆ ไว้ใน script นะครับ และ เขียนตัว css ไว้ใน style ส่วนข้างนอกจะถูกแสดงผลออกมาเป็น html ปกติเลย

State

ใช้งานง่ายนิดเดียวพวกประกาศตัวแปรไว้ใน script และการนำตัวแปรมาแสดงผลโดยการใส่ {} ครอบตัวแปรนั้น

Function

การใช้ฟังก์ชันใน Svelte นั้นง่ายมากครับเพียงแค่ เขียนไว้ในตัว script

ตัวอย่างที่ 1 : state-function

จากตัวอย่างจะเป็นการคลิกปุ่ม increase เพื่อทำการเพิ่มค่า count และคลิกปุ่ม decrease เพื่อทำการลบค่า count ซึ่งเขียนโค้ดสั้นมากกกก

if

การใช้ if จะประมาณนี้ครับ

{#if expression}……{/if}
{#if expression}…{:else if expression}…{/if}
{#if expression}...{:else}...{/if}

Bind

การใช้ bind จะใช้คำสั่ง bind: ตามด้วย property ที่เราต้องการ bind ครับ

ตัวอย่างที่ 2 : if-bind

จากตัวอย่างจะรับค่าจาก input ถ้ามากกว่า 80 จะแสดง A มากกว่า 70 จะแสดง B และนอกจากนั้น จะเป็น C

Lifecycle functions

การใช้ Lifecycle functions นั้นสามารถใช้ได้โดยการ import function นั้นมาจาก ‘svelte’ และประกาศใช้ได้เลย

ตัวอย่างที่ 3 : lifecycle function

จากตัวอย่างจะเป็นการใช้ function onMount ซึ่งจะเป็นการนับเวลาไปเรื่อยๆทุก 1 วินาที

Component

การทำ Component สำหรับไว้ใช้ซ้ำสามารถทำได้ด้วยการ นำComponent ที่เราจะทำไว้ในไฟล์ .svelte ใหม่ และ import ไฟล์นั้นมาใช้ได้เลย

ตัวอย่างที่ 4 : component

จากตัวอย่างจะเป็นการ นำ ตัวอย่างที่ 1, ตัวอย่างที่ 2, ตัวอย่างที่ 3 ทำเป็น Component ไว้ และ import เอามาใช้รวมกัน

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

ดูโค้ดเพิ่มเติมได้ที่

Khrongpop/hello-svelte

Referance

API Docs * Svelte