ว่าง ๆ มาลองพัฒนาระบบฝั่ง frontemd ด้วย Svelte กันหน่อย
ไม่ต้องสนใจว่าคืออะไร
เขียน code มาดูผลไปเลยดีกว่า
มาเริ่มกันเลย
การติดตั้งและสร้าง project ตาม official webไปเลย
ทำการเขียน code แบบง่าย ๆ คือ counter นั่นเอง
แต่เพิ่มเติมคือ การส่งค่า number ผ่าน props เข้าไปยัง component App ดังนี้
คำอธิบาย
ไฟล์ 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 เข้าไป
จากการทำงาน พบว่ามีการจัดการ state ให้แบบง่าย ๆ เลย
นั่นคือค่าเปลี่ยนแล้ว การแสดงผลก็เปลี่ยนให้ด้วย
เรื่องของ Store และ Reducer ใน Svelte
การเปลี่ยนค่า state ตรง ๆ แบบ two-way อาจจะไม่ค่อยถูกใจ
มาลองดูพวก store และ reducer กันบ้าง
ซึ่งก็มี store ให้ทั้ง writeable และ readable ไปจนถึง derived ให้ใช้งาน
และสามารถ subscribe ตัวแปรเพื่อดูค่าได้อีกด้วย
ผลที่ได้ก็พอไหวอยู่นะ ใช้เวลาศึกษาและเขียนตามไม่นาน
พบว่าถ้าเคยเขียนพวก react, angular มาบ้างแล้ว
สามารถนำแนวคิดมาเทียบเคียงกันได้เลย
แต่ code ที่เขียนออกมา จะแตกต่างกันออกไป
เป็นอีกหนึ่งทางเลือกที่น่าสนใจ
ศึกษาไว้กันดีกว่าครับ
