Svelte: Introduction to svelte (ตอนที่ 2)
หลังจากบทความ Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ที่ทำให้เราได้รู้จัก svelte รู้ถึงปรัชญาและแนวความคิดที่ค่อนข้างแตกต่างจาก framework อื่นๆ
เพื่อให้สัมผัสกับ svelte มากยิ่งขึ้น ในตอนที่ 2 นี้เราจะมาติดตั้ง svelte template ตั้งแต่เริ่มต้น ลองไล่ดูโค้ดเพื่อให้เข้าใจการทำงาน โดยบทความหลังจากนี้ จะค่อยๆเรียนรู้ feature ต่างๆของ svelte ไปเรื่อยๆ จนถึงการประยุกต์การใช้งานจริง
หากใครยังไม่เคยอ่านตอนที่ 1 และยังไม่รู้จักกับ svelte มาก่อน ผมขอสรุปความเป็น svelte อีกรอบนะครับ
อะไรนะ Svelte?
Svelte เป็น javascript framework ทางเลือกอีก 1 ตัว เฉกเช่นเดียวกับที่เรารู้จัก angular, react, vue … มีเป้าหมายสุดท้ายอย่างเดียวกันคือ นำมาใช้แสดงผล UI (ด้วย javascript) เป็น client side rendering, นำมาใช้ทำ SPA (Single Page Application) แต่…สิ่งที่ svelte แตกต่างคือ
- ตัวมันเป็น compiler อันนี้ถือว่าเป็นจุดที่แตกต่างที่ชัดเจนมาก เมื่อเปรียบเทียบ กับ library หรือ framework อื่นๆ เนื่องจากไม่ได้ใช้เทคนิค virtual dom diffing ในการเปรียบเทียบจุดแตกต่างของ DOM และอัพเดต Real DOM ได้ถูกที่ ถูกจุดเมื่อ state มีการเปลี่ยนแปลง
พูดง่ายๆคือ รู้ตัวเร็ว นั่นคือ คล้ายๆกับเรายกงานที่ virtual DOM ต้องทำในช่วง run time มาให้ svelte ทำตั้งแต่ตอน build time
svelte คือ compiler ไม่ใช้ virtual dom
- เขียนโค้ดง่ายและสั้น โอกาสผิดพลาดจึงมีต่ำ (บั๊กน้อย) และช่วยให้ใช้เวลาในการพัฒนาสั้นลง โค้ดตรงไปตรงมา เป็นธรรมชาติ (ไม่มีกฎเกณฑ์ เงื่ิอนไขที่ต้องจดจำมากนัก เช่น ตรงนี้ต้องใช้แบบนี้ ตรงนั้นเขียนแบบนี้แบบนั้นไม่ได้ … )
โค๊ดสั้น บั๊กน้อย งานเสร็จไว
- เป็นมิตรกับนักพัฒนา มี DX (Developer Exprence) ดีมาก
svelte พยายามลดความเป็น framework ลงไปให้อยู่ในระดับแค่ภาษา นั่นหมายความ หากคุ้นชินกับ javascript อยู่แล้ว เป็นเรื่องง่ายมากๆ ที่จะเรียนรู้ svelte
เป็นมิตรกับนักพัฒนาและเรียนรู้ต่ำ
- ขนาดไฟล์ bundle มีขนาดเล็กมาก เพราะมันเป็นเพียงไฟล์ javascript ที่ผ่านการ compiled และ optimized มาแล้ว เราไม่จำเป็นต้องโหลด svelte เข้าไปทำงานร่วมด้วยในช่วง runtime (ซึ่งแตกต่างจาก framework อย่าง vuejs, react, angular, …)
Bundle ไฟล์มีขนาดเล็กมากๆ, Performance ดี
- Dependency ต่ำ ทำให้ความเชื่อถือได้มีสูงตามไปด้วย
ถึงแม้ว่า ณ ปัจจุบัน svelte ค่อนข้างเป็นน้องใหม่ในวงการ frontend framework (เพิ่งออก svelte v.3 ช่วง 21 เมษายน 2562 นี่เอง) ถ้าเทียบ community อย่าง react, angular, vue มันคงเทียบกันไม่ได้อย่างแน่นอน แต่ด้วยแนวคิดที่แตกต่าง นับว่ามีแนวโน้มที่ community โตเร็วในระยะเวลาอันสั้น
มีหลายคนมักจะพูดเกี่ยวกับ svelte ว่า “ต้องรอให้ ecosystem มันพร้อมเสียก่อน” โดยความเห็นส่วนตัวนะครับ จะบอกว่า
“มันจะพร้อม เมื่อคุณพร้อม” ไม่จำเป็นต้องรอ ecosystem ใดใดเลย ถ้ามันตอบโจทย์ก็ลุยได้เลยครับ
เอาล่ะ มาถึงตรงจุดนี้ คิดว่าเราน่าจะรู้จัก svelte มาสมควรแล้วละ ถึงเวลามาลองเล่นกับ svelte กันซักที
มือเปื้อนกับ Svelte
เตรียมความพร้อมก่อนใช้ svelte ด้วยการติดตั้ง svelte template ผ่าน terminal ด้วยคำสั่ง ข้างล่างดังนี้
npx degit sveltejs/template my-svelte-app && $_
npm installclone template จาก github ของ svelte official (https://github.com/sveltejs/svelte) ลงใน folder “my-svelte-app” และเข้าไปยัง “my-svelte-app” เพื่อติดตั้ง node modules package dependency ที่เหลือด้วยคำสั่ง npm install
หากยังไม่เคยติดตั้ง degit มาก่อน ให้ติดตั้ง degit ด้วยคำสั่ง
npm install -g degitref: https://www.npmjs.com/package/degit
* degit เป็น node package ที่ทำหน้าที่ clone project ล่าสุดใน git repo โดยเอาเฉพาะไฟล์ archive .gz ไม่เอา .git (git history) มาด้วย ทำให้การดึง template เริ่มต้น svelte ทำได้รวดเร็วมากยิ่งขึ้น
จากรูปข้างบนมีจุดที่น่าสังเกตุดังนี้
- svelte เป็นเพียง devDependencies ตอกย้ำว่า เราใช้งาน svelte compiler แค่ช่วงเวลา dev เท่านั้น
- Rich Harris ผู้สร้าง svelte และ rollup (ซึ่งเป็นเครื่องมือ bundle แบบเดียวกับ webpack, parcel, browserify) เพราะฉะนั้น จึงไม่แปลกที่ rollup จะถูกเลือกเป็นเครื่องมือ bundler หลักสำหรับ svelte
- npm-run-all เป็น node modules package สำหรับช่วยให้รัน task งานขนานกันหรือทำงานพร้อมๆกันได้ (run-p ในบรรทัดที่ 20)
- sirv ทำหน้าเป็น web server ที่เหมาะกับการ serve ข้อมูลจำพวก static file
เริ่ม first svelte กับ Hello World กันเถอะ
npm run dev
ก่อนที่จะลองเล่น svelte จริงๆจัง อยากให้ลองสำรวจ folder และ file ที่ติดมากับ svelte template เสียก่อนว่ามีอะไรกันบ้าง
- public folder เป็นว่าเป็น root directory project และ สำหรับวาง assets และไฟล์ตั้งต้น index.html โดยใน public จะถูก resolved path เป็นแบบ absolute path (สามารถเปลี่ยนเป็น folder อื่นได้ โดยกำหนดผ่าน option ใน sirv)
- bundle.css เป็นไฟล์ที่เกิดจากการ bundle style css ของแต่ละ component
- bundle.css.map เป็นไฟล์ sourcemap ของ bundle.css เพื่อชี้กลับไปยังต้นทางว่า css style ถูก generate จาก component ตัวไหน
- global.css เป็น ไฟล์ css style แบบ global
- index.html ไฟล์ template html เริ่มต้น
- src เก็บไฟล์ source code ของ project ไว้ทั้งหมด
- App.svelte เป็น component หลักของ application โดย component ของ svelte จะมีไฟล์นามสกุล .svelte
- main.js เป็นไฟล์ javascript หลักของ application และถูกโหลดใน index.html
จากโค้ดข้างบน
- บรรทัดที่ 1 คือ การดึงเอา App.svelte ซึ่งเป็น svelte class component หลักเข้ามา
- บรรทัดที่ 2 ทำการ instance svelte component class โดยจำเป็นต้องกำหนดค่า properties “target” เพื่อระบุ Real DOM ที่ App Component ต้องการ mount
- บรรทัดที่ 5 “props” เป็นการกำหนดค่า property ของ class ชื่อ name
จากตรงนี้ให้เราลองแก้ค่า props name จาก ‘world’ เป็น ‘mars’ สังเกตุผลลัพธ์ได้ว่าหน้าเว็บมีการเปลี่ยนแปลง โดยการ re-render ใหม่โดยอัตโนมัติ
อย่างที่เกริ่นไปตอนต้น svelte เป็นเพียง compiler และไม่ได้เป็น framework ที่ถูกนำไปใช้งานในช่วง runtime ให้เราทดลอง build project ทั้งหมด
npm run build
อยากให้สังเกตุไฟล์ bundle.js ซึ่งเป็นผลลัพธ์สุดท้ายก่อนเราจะ deploy ขึ้น production ผ่านการ compile และ optimize code ด้วย svelte , และ rollup ทำหน้าที่ในการ bundle แบบ minify มาให้ (ไฟล์ติดกันเป็นพืด)
บทสรุป
อยากให้เป็น introduction เริ่มต้นกับ svelte จริงๆ สำหรับตอนที่ 2 จึงเป็นเพียงการติดตั้งเพื่อเริ่มต้นสำหรับตอนต่อๆไป และเห็นถึงการทำงานของ svelte, การใช้ rollup ในการ bundle ไฟล์ และเห็นถึงผลลัพธ์สุดท้ายของ bundle size ของ hello world ที่มีขนาดค่อนข้างเล็กมากๆ แน่นอนมันย่อมมีผลกับประสิทธิภาพในการโหลดและทำงานของ web application ในตอนถัดๆไปจะพาท่านผู้อ่านไปรู้จัก svelte ในมุมอื่นๆ สัญญาว่าจะอัพเดตให้ไวขึ้น และบ่อยขึ้น ฝากติดตามและติชม comment ได้นะครับ
