ว่าง ๆ ลองศึกษา Svelte กันหน่อย

ว่าง ๆ มาลองพัฒนาระบบฝั่ง frontemd ด้วย Svelte กันหน่อย
ไม่ต้องสนใจว่าคืออะไร
เขียน code มาดูผลไปเลยดีกว่า
มาเริ่มกันเลย

การติดตั้งและสร้าง project ตาม official webไปเลย

[gist id="4583b86fb038b7b491fae91c6fbcbdec" file="1.txt"]

ทำการเขียน code แบบง่าย ๆ คือ counter นั่นเอง

แต่เพิ่มเติมคือ การส่งค่า number ผ่าน props เข้าไปยัง component App ดังนี้

[gist id="4583b86fb038b7b491fae91c6fbcbdec" file="App.svelte"]

คำอธิบาย

ไฟล์ App.svelte คือ component นั่นเอง
ประกอบไปด้วย 3 ส่วนคือ

• script สำหรับ code ภาษา JavaScript สังเกตว่า props จะต้องถูก export ด้วยนะ
• style สำหรับ style sheet นั่นเอง
• ส่วนที่ 3 คือ code HTML หรือ template สำหรับ svelte

โดยจะทำการแปลงและจัดการด้วย Rollup หรือ webpack ต่อไป
แต่จากตั้วอย่างนี้จะใช้งาน Rollup

การเรียกใช้งาน component ผ่านไฟล์ main.js

โดยทำการส่งค่า number = 100 ผ่าน props เข้าไป

[gist id="4583b86fb038b7b491fae91c6fbcbdec" file="main.js"]

จากการทำงาน พบว่ามีการจัดการ state ให้แบบง่าย ๆ เลย
นั่นคือค่าเปลี่ยนแล้ว การแสดงผลก็เปลี่ยนให้ด้วย

เรื่องของ Store และ Reducer ใน Svelte

การเปลี่ยนค่า state ตรง ๆ แบบ two-way อาจจะไม่ค่อยถูกใจ
มาลองดูพวก store และ reducer กันบ้าง
ซึ่งก็มี store ให้ทั้ง writeable และ readable ไปจนถึง derived ให้ใช้งาน
และสามารถ subscribe ตัวแปรเพื่อดูค่าได้อีกด้วย

[gist id="4583b86fb038b7b491fae91c6fbcbdec" file="App2.svelte"]

ผลที่ได้ก็พอไหวอยู่นะ ใช้เวลาศึกษาและเขียนตามไม่นาน
พบว่าถ้าเคยเขียนพวก react, angular มาบ้างแล้ว
สามารถนำแนวคิดมาเทียบเคียงกันได้เลย
แต่ code ที่เขียนออกมา จะแตกต่างกันออกไป
เป็นอีกหนึ่งทางเลือกที่น่าสนใจ
ศึกษาไว้กันดีกว่าครับ