Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
สวัสดีครับ จะบอกว่า นานแล้วที่ไม่ได้มาเขียนบทความอะไรยาวๆ อย่างนี้ ในปี 2019 นี้ ตั้งใจไว้ว่า ถ้ามีความรู้พอที่จะมาขีดๆเขียนๆ แบ่งปันความรู้ได้ จะเอามาโน๊ตทิ้งไว้ให้เปลืองเนื้อที่ space medium ไว้บ้าง ไม่มากก็น้อย
รสนิยมชายไทย หรือ ทั่วโลกเลยกระมัง ถ้าพูดถึงผู้หญิง โดยส่วนใหญ่ก็มักจะชอบผู้หญิงที่มีรูปร่างสวย หุ่นดี ผอม รูปร่างสมส่วน ยิ่งถ้าพูดเรื่องนี้ เปรียบเทียบในโลกของ frontend framework หรือ javascript ด้วยแล้ว ขนาดไฟล์ที่เล็ก และเบา ก็เป็นปัจจัยสำคัญอย่างนึงที่ช่วยให้การทำให้เว็บไซต์ หรือแอพพลิเคชั่น มีประสิทธิภาพยิ่งขึ้น
ที่เกริ่นมาทั้งหมด … ไม่ใช่อะไรหรอกฮ่ะ จริงๆแล้ว จะลากเข้าสู่ที่มาของชื่อ svelte (https://svelte.dev) นั่นเอง
Svelte: รู้จักกันก่อน
ก่อนจะพาทุกท่านไปรู้จัก svelte ให้มากขึ้น ขอเอ่ยถึงชื่อมันก่อนก็แล้วกัน เอาคำว่า “svelte” ไปค้นจาก dictionary มันจะมีความหมายว่า slim, slender
แหล่งอ้างอิง: https://www.dictionary.com/browse/svelte
เข้าใจว่า ที่มันตั้งชื่อเช่นนี้ คิดว่า มันตั้งตามลักษณะเฉพาะ 1 ในลักษณะเด่นของตัว framework เองที่มันทำให้ “ผลผลิตสุดท้ายของมัน มีขนาดเล็กและเบา”
สังเกตุว่า ผมใช้คำว่า “ผลผลิตสุดท้ายของมัน มีขนาดเล็กและเบา” ไม่ได้หมายถึงตัว svelte framework เองหรอกนะครับที่มีขนาดเล็ก แต่เป็นผลลัพธ์ของมันต่างหาก
อ่านถึงตรงนี้อาจจะงง เดี๋ยวจะเล่าต่อไป เพื่อให้เข้าใจภาพมากยิ่งขึ้น
แล้วมันคืออะไรนะ ?
Svelte (svelte.dev) ประกาศตัวเองว่า เป็น UI Framework ที่ไม่ใช่ framework ฟังแล้วมันดูแปลกๆใช่ไหมละ
อธิบายได้แบบนี้ครับ จริงๆแล้ว ถ้าพูดถึงคำว่า framework เหล่านักพัฒนา มักจะคุ้นเคยกับคำคำนี้อยู่แล้ว
framework มีกฎเกณฑ์ รูปแบบ ข้อบังคับการเขียนโค๊ดให้นักพัฒนาเดินตาม
โดยฝั่ง frontend หรือ client side ก็มี framework ดังๆ มากมาย เช่น Vue, React, Angular, Ember, Aurelia, Marko, Preact, Inferno …. เยอะเต็มไปหมด
ซึ่ง Svelte ก็จัดว่าเป็น framework 1 ในนั้น และในขณะเดียวกัน svelte ก็ทำตัวเป็น compiler ด้วยเช่นกัน
แหล่งอ้างอิง: https://2018.stateofjs.com/front-end-frameworks/other-libraries/
อธิบายต่อ ไม่รอละนะ ….
ความเป็น framework จะปรากฎชัดอยู่ในช่วงแค่การพัฒนา build time/compile time เท่านั้น แต่จะหายไปเหลือเพียงแค่ vanilla javascript (ไฟล์ javascript
ธรรมด๊า ธรรมดา) เฉพาะตอนขึ้น production / ตอนเอาไปใช้งานจริง เสร็จงาน หรือ ตอน run time เท่านั้น
*ปัจจุบัน svelte เวอร์ชั่นล่าสุด เป็น version 3.4.1 ได้ทำการเปลี่ยน logo rebranding ใหม่ และเปลี่ยน tag line ที่ว่า ... “The magical disappeaing UI Framework” (version 2)มาเป็น “Cybernetically enhanced web apps” (version 3)
โดยความเห็นส่วนตัว รู้สึกว่า tag line ของเดิม (version 2)สื่อความเป็นตัวตนของ svelte ได้ดีกว่า
“The magical disappeaing UI Framework”
“ความเป็น UI Framework ที่อันตรธานหายไปอย่างน่าอัศจรรย์ใจ”
Virtual DOM จ่ายแพงเสมอ
Rich Harris, Graphic Editor ประจำ New York Times และ เป็นนักพัฒนาหลัก Svelte (https://svelte.dev) และ Rollup (https://rollupjs.org) กล่าวในงาน
You Gotta Love Frontend (YGLF) — Code Camp 2019 ในหัวข้อ “Rethinking Reactivity” แสดงให้เห็นว่า
Virtual DOM เป็นเทคนิคที่นำมาใช้ในการอัพเดต DOM เฉพาะจุดที่เปลี่ยนแปลง เมื่อ state ในแอพพลิเคชั่นมีการเปลี่ยน
และ React เป็น library ตัวแรกที่นำแนวคิดนี้มาใช้ และกลายเป็นแนวคิดหลัก สำหรับ main stream framwork อีกหลายๆตัว (Vue, Inferno, Preact, Marko, Aurelia, Elm)
Framework not framework
จะดีกว่าไหม ถ้าไม่ต้องโหลด core framework/library และรัน ตอน runtime เพื่อใช้ virtual dom diffing
จะดีกว่าไหม ถ้าให้นักพัฒนาสามารถเขียน code ที่สั้น ง่าย กระชับ เรียนรู้ได้ไว ในรูปแบบ declarative -> imperative แปลงเป็น javascript ธรรมดาธรรมดาที่ผ่านการ optimize ให้มีขนาดเล็กลง
“พวกคุณกำลังมาผิดทาง” คำพูดของเสนาหอย ที่มักจะได้ยินบ่อยๆ ในรายการ The Mask Singer เหมือน Rich Harris กำลังบอกแบบนั้น
ทำไมต้อง virutal dom / ทำไม browser ต้องจ่ายแพง,
Rich สร้าง svelte ที่เป็นทั้ง framework และ compiler พร้อมๆกันและทำเรื่องนี้ให้จบตั้งแต่ ตอน build time เลยซิ
บทความตอนที่ 1 เป็นเพียงการเกริ่นนำให้พอรู้จัก svelte framework พอหอมปากหอมคอ ในตอนที่ 2 เราจะมาทำความรู้จัก svelte ให้มากกว่านี้ ว่ามันสร้างความแตกต่างอย่างไร และมันดีอย่างไร ทำไมบ้างก็บอกว่า มันคือกระแสยุคใหม่ของโลก frontend ถัดจากยุคต่อจาก vue, angular, react
หมายเหตุ บทความนี้เป็นเพียงการนำเสนอ ข้อเท็จจริงและทางเลือกใหม่ในโลก frontend เท่านั้น ไม่ได้มีเจตนาให้เกิด framework war แก่สาวกค่ายใดค่ายหนี่งแต่อย่างใด
