ก่อนเกิด React.js และ Vue.js ในการสร้างเว็บแอปพลิเคชันขนาดใหญ่และการบำรุงรักษา เป็นเรื่องค่อนข้างท้าทาย ด้วยเหตุผลบางประการ ไฟล์ของ JavaScript นั้นจัดมีการจัดระเบียบและการนำไปปรับใช้ยากในหลาย ๆ ครั้ง
สิ่งนี้ได้เปิดประตูสู่การพัฒนาใหม่อย่างไม่ต้องสงสัย ข้อพิสูจน์ที่ดีที่สุดคือ แม้ว่าในปี 2016 จะมีเฟรมเวิร์ก JS เพียง 4 framework แต่จำนวนนี้เพิ่มขึ้นเป็น 10 framework ภายในปี 2021
และในขณะที่ React และ Vue ได้เปลี่ยนนักพัฒนา Frontend ให้เป็นดาวเด่นด้านประสิทธิภาพ ผู้สร้าง Svelte.js ได้เสนอมุมมองใหม่ทั้งหมด
Svelte และ SvelteKit คืออะไร
เช่นเดียวกับ React และ Vue ตัว Svelte มันเป็น JavaScript Framework /Library และทั่วไปเป็นชุดของส่วนประกอบ(Component) เครื่องมือ(Tool) และกฎสำหรับสร้างโครงสร้างของเว็บไซต์และแอปพลิเคชันสมัยใหม่โดยใช้ JavaScript อย่างไรก็ตาม Svelte ได้พัฒนาวิธีดั้งเดิมของตัวเองเพื่อให้นักพัฒนาสร้างสิ่งที่พวกเขาต้องการ เนื่องจากแนวทางใหม่นี้ บางครั้ง Svelte จึงถูกอธิบายว่าเป็นคอมไพเลอร์(Complier) นี่ต้องร้อง Wow เลย
React และ Vue ใช้ DOM เสมือนในเบราว์เซอร์ (virtual DOM) ซึ่งนำไปสู่ข้อบกพร่องด้านประสิทธิภาพบางอย่าง DOM (Document Object Model) เป็นอินเทอร์เฟซสำหรับเว็บเพจ เป็น API ที่อนุญาตให้โปรแกรมอ่านและจัดการเนื้อหาโครงสร้างและสไตล์ของหน้าเว็บ คุณสามารถเปรียบเทียบสิ่งที่เก็บในข้อมูลในหน่วยความจำชั่วคราวสำหรับการเปลี่ยนแปลงอินเทอร์เฟซได้
อย่างไรก็ตาม Svelte ไม่ได้ใช้ DOM เสมือน (virtual DOM)แต่จะคอมไพล์โค้ดเป็น Vanilla JS ที่เล็ก(tiny) และบริสุทธิ์(pure) แทน ผลที่ตามมาคือ โค้ดทำงานเร็วขึ้นกว่าเดิมมากตั้งแต่เริ่มต้น ทำให้ Application ใด ๆ ที่เราพัฒนาขึ้นมามีศักยภาพ เบาในการใช้งาน(Lightweight) และเป็นมิตรกับผู้ใช้ นี่เป็นข้อแตกต่างแรกและโดดเด่นที่สุดที่ Svelte ได้นำเสนอต่อโลกแห่งการเขียนโค้ด
SvelteKit คืออะไร ?
Svelte นำเสนอแนวทางที่มีประสิทธิผลเพื่ออำนวยความสะดวกในการสร้างอินเทอร์เฟซส่วนหน้า(frontend interfaces) Framework ของ SvelteKit เป็นตัวสร้างไซต์แบบสแตติก(Static) สำหรับ Jamstack(เป็นสถาปัตยกรรมที่ปฏิวัติวงการสำหรับการสร้างแอพและเว็บไซต์ มีความหลากหลาย ทันสมัย และให้ความยืดหยุ่นและอิสระอย่างมากแก่คุณในการสร้างผลิตภัณฑ์ขั้นสุดท้ายที่สมบูรณ์แบบ นอกจากนี้ยังมอบประสบการณ์ที่ยอดเยี่ยมให้กับนักพัฒนาอีกด้วย แต่ถ้าคุณยังใหม่กับ Jamstack อาจจะงง ๆ หน่อย) เช่นเดียวกับที่ Next มีประโยชน์เมื่อทำงานกับ React สำหรับ SvelteKit จะเป็นที่ต้องการอย่างมากสำหรับนักพัฒนา Svelte มีการแสดงผลฝั่งเซิร์ฟเวอร์(server-side rendering) การแยกโค้ด(code-splitting) ส่วนประกอบสำหรับแพลตฟอร์มแบบไร้เซิร์ฟเวอร์(components for serverless platforms) การกำหนดเส้นทาง(routing ) และคุณลักษณะอื่นๆ อีกมากมาย
อย่างไรก็ตาม สิ่งที่แตกต่างกันคือ SvelteKit นำเสนอแนวทางที่แตกต่างจาก Frontend Framework อื่น ๆ ที่นิยมอย่าง React, Vue หรือ Angular เนื่องจากเฟรมเวิร์กเหล่านี้ส่วนใหญ่ทำงานในเบราว์เซอร์ของผู้ใช้ เช่น การจัดการ DOM เสมือน(Virtual Dom) แต่ Svelte จะผ่านขั้นตอนการคอมไพล์ ผลลัพธ์ที่ได้คือ JavaScript ประสิทธิภาพสูงและเป็นมิตรกับเบราว์เซอร์ด้วยขนาดแพ็คเกจที่เล็ก
แม้ว่ากระบวนการสร้างแอปพลิเคชันด้วย Svelte จะเป็นนวัตกรรมที่ใหญ่ที่สุดของเฟรมเวิร์ก แต่ก็เรียนรู้ได้ง่ายมาก มีเอกสารประกอบที่ยอดเยี่ยม และมาพร้อมกับคำรับรองประสบการณ์ที่ยอดเยี่ยมจากนักพัฒนาทั่วโลก
แล้ว Jamstack คืออะไร
ประวัติ Jamstack เริ่มต้นในปี 2016 (2559) เมื่อแนวคิดของ Jamstack ถูกนำเสนอสู่กระแสหลักที่ Smashing Conf โดย Matt Biilmann ผู้ร่วมก่อตั้งและ CEO ของ Netlify
ตั้งแต่นั้นเป็นต้นมา Jamstack ก็ได้พัฒนาเป็นสถาปัตยกรรมการพัฒนาเว็บแบบเนทีฟบนระบบคลาวด์(cloud-native web development architecture) ที่มีประสิทธิภาพ ซึ่งช่วยให้ผู้ใช้สามารถปรับใช้เว็บไซต์และแอปด้วยแนวทางปฏิบัติที่ดีที่สุด
คุณสามารถใช้สร้างเว็บไซต์และแอปประเภทใดก็ได้ ไม่ว่าจะเป็นไซต์ขนาดใหญ่สำหรับแพลตฟอร์มอีคอมเมิร์ซ(E-Commerce Platform) บล็อก(Blog) สำหรับผลิตภัณฑ์ของคุณ เว็บไซต์ที่มีเนื้อหาเข้มข้น(content-rich) หรือเว็บไซต์ส่วนตัวของคุณ (personal website)
'JAM' ใน Jamstack ย่อมาจากสถาปัตยกรรมการพัฒนาเว็บสมัยใหม่ที่ใช้ JavaScript, API และ Markup ฝั่งไคลเอ็นต์ แต่ด้วยความเป็นไปได้ของโครงสร้างพื้นฐานที่หลากหลาย จึงเป็นสุดยอด Framework อย่างแท้จริงท่ามกลางสถาปัตยกรรมการพัฒนาเว็บไซต์ (ต้องรอดูหลังจากนี้ต่อไปว่าจริงไหม)
JAMSTACK SITES กับ WEB DEVELOPMENT STACKS อื่น ๆ
Jamstack เป็นสแต็คการพัฒนาเว็บที่ทันสมัย ชุดพัฒนาซอฟต์แวร์คือชุดเครื่องมือที่ใช้ในการพัฒนาเว็บแอปและเว็บไซต์ แม้ว่าอาจดูเหมือนว่าไม่มีอะไรพิเศษที่ทำให้ Jamstack แตกต่างจากเฟรมเวิร์กอื่นๆ แต่จริงๆ แล้วมันต่าง และนั่นคือ — Jamstack เป็นแบบคงที่(static) แต่ในขณะเดียวกันก็เป็นแบบไดนามิก(dynamic) ด้วยอะไรจะขนาดนั้น
พูดง่ายๆ ก็คือ สถาปัตยกรรมใช้เวิร์กโฟลว์ของ Git และเครื่องมือสมัยใหม่เพื่อให้บริการเนื้อหา ไปยัง CDN (Content Delivery Networks) และทำให้เป็นไดนามิกผ่าน API และฟังก์ชันไร้เซิร์ฟเวอร์(Serverless)
สรุปแล้ว Jamstack ช่วยให้คุณสร้างแอพและเว็บไซต์ที่ทันสมัยและเป็นมิตรกับผู้ใช้ได้อย่างยืดหยุ่นมากขึ้น นอกจากนี้ยังช่วยให้แน่ใจว่าลูกค้าและผู้ใช้ของคุณจะพบว่าการย้ายไซต์มาใช้บริการหรือมาใช้แอปของคุณเป็นเรื่องง่าย
Jamstack มันทำงานอย่างไร?
การทำความเข้าใจวิธีการทำงานของ Jamstack อาจไม่ใช่เรื่องง่าย โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่เข้าใจเทคโนโลยี(มือใหม่มาก ๆ) ดังนั้นมาวิเคราะห์ฟังก์ชันหลักเพื่อทำความรู้จักให้ดีขึ้นและเข้าใจว่ามันทำงานอย่างไร
J=JavaScript, A=APIs, M= Markup
JavaScript (จาวาสคริปต์)
JavaScript (JS) เป็นหนึ่งในภาษาโปรแกรมยอดนิยมและเทคโนโลยีหลักของ WWW (World Wide Web) นอกจากนี้ยังคิดว่าเป็นภาษาที่ดีที่สุดสำหรับผู้เริ่มต้นเขียนโค้ด
พลังของมันคือการให้ชีวิตแก่หน้าเว็บ — JavaScript แปลงเว็บไซต์แบบคงที่(static) เป็นเว็บไซต์เชิงโต้ตอบ(dynamic) ที่ช่วยดึงดูดผู้เข้าชมและปรับปรุงประสบการณ์ของผู้ใช้ (User Experience) ไปในตัว
โดยทั่วไปแล้ว JS เป็นองค์ประกอบพื้นฐานสำหรับเว็บไซต์และแอปพลิเคชันเชิงโต้ตอบที่มีความไดนามิก (dynamic)
เว็บไซต์แบบสแตติก(Static Website) และไดนามิกเพจ(Dynamic Page) ต่างกันอย่างไร และเหตุใดจึงมีความสำคัญ
เพจแบบสแตติกคือเพจที่มีเนื้อหาคงที่ซึ่งไม่มีการเปลี่ยนแปลงบ่อยครั้ง ตัวอย่างเช่น หน้าเพจ html ธรรมดา,บล็อก โพสต์ ไม่ต่อฐานข้อมูลใด ๆ ในทางตรงกันข้าม เนื้อหาในหน้าไดนามิกมักจะเปลี่ยนแปลงบ่อย เช่น เว็บไซต์อีคอมเมิร์ซ หรือหน้าสภาพอากาศ หน้าแดชบอร์ดแสดงผลพวก BI Report
มันทำงานอย่างไรในระดับเทคนิค เมื่อเซิร์ฟเวอร์ได้รับการร้องขอสำหรับเว็บเพจแบบสแตติก(Static Page)จะไม่มีกระบวนการเพิ่มเติมเกิดขึ้น เรียกแล้วก็แสดงผล ส่วนเนื้อหาไดนามิก ในขณะที่เซิร์ฟเวอร์ได้รับคำขอ ตัวเซิร์ฟเวอร์จะปรับการแสดงผลตามค่าที่ส่งเข้ามาให้กระทำการใด ๆ ตามที่ผู้ใช้งานร้องขอ
เหตุใดจึงสำคัญเมื่อพูดถึง Jamstack เนื่องจากไซต์ Jamstack เป็นไฟล์แบบคงที่(static) แต่ API สามารถเข้าถึงได้ผ่าน HTTPS ด้วย JavaScript และทำให้เว็บไซต์ Jamstack มีการทำงานแบบไดนามิก(dynamic) รากฐานที่สำคัญของ Jamstack คือความคงที่(static) เมื่อใช้ JavaScript และ API ในส่วนของผู้ใช้ปลายทาง จะกลายเป็นสภาพแวดล้อมแบบไดนามิก(dynamic)และโต้ตอบได้
Svelte กำลังได้รับความนิยมมากขึ้น
Svelte ได้รับการพัฒนาครั้งแรกในปี 2559 โดย Rich Harris ซึ่งเป็นบรรณาธิการกราฟิกของ The New York Times เขายังเป็นที่รู้จักในด้านการพัฒนา Ractive, a UI library, Rollup, a bundler module, Buble และ ES2015 transpiler
นอกจากคุณสมบัติของเขาในฐานะนักพัฒนาแล้ว Harris ยังมีบทบาทอย่างมากในชุมชนนักพัฒนา JS เขาปรากฏตัวบน Twitter ซึ่งเขามักจะมีส่วนร่วมในการโต้วาทีเกี่ยวกับระบบนิเวศ(ecosystem) ของ JavaScript โดยมีความคิดเห็นที่ชัดเจนและเป็นผู้มีส่วนร่วมที่ดี
เขายังเป็นนักพูดที่ยอดเยี่ยมและสร้างแรงบันดาลใจ เขาเดินทางไปพบปะและประชุมเพื่อพูดคุยเกี่ยวกับ Svelte และ SvelteKit บ่อย ๆ ปฏิเสธไม่ได้ว่าการแสดงตัวตนบนโซเชียลเน็ตเวิร์กและการพบปะนั้นมีส่วนช่วยอย่างมากในการทำให้ Svelte มีชื่อเสียง เขาทำให้ผู้คนพูดคุยกัน และทำให้พวกเขาเหล่านั้นอยากรู้มากขึ้นในวิธีแก้ปัญหาของเขา(Harris)
Svelte เริ่มมีชื่อเสียงครั้งแรกในเดือนเมษายน 2019 เมื่อเวอร์ชัน 3 เปิดตัว โปรเจ็กต์ในเวลานั้นถึง 32,000 ดาวบน GitHub ซึ่งถือว่าประสบความสำเร็จอย่างมาก
ความนิยม Svelte
ตอนนี้สำหรับความนิยมนั้นไม่มีข้อพิสูจน์ใดที่ดีไปกว่าสิ่งเหล่านี้:
Svelte มีถึง 64.8k ดาวบน GitHub ในการเปรียบเทียบ Next.js ซึ่งเป็นหนึ่งในตัวเลือกที่ได้รับความนิยมมากที่สุดในตลาด มีถึง 99.2k
ปัจจุบัน SvelteKit ถือเป็นเฟรมเวิร์กที่มีคนชื่นชอบมากขึ้นเรื่อย ๆ
การใช้ Svelte เพิ่มขึ้นจาก 8% เป็น 20% ในช่วง 2 ปีที่ผ่านมา ซึ่งบ่งชี้ถึงการเติบโต 150%
การรับรู้ Svelte เพิ่มขึ้นจาก 75% เป็น 94% ในช่วง 2 ปีที่ผ่านมา
Svelte มีอัตราความพึงพอใจที่สูงกว่า React หรือ Vue และเป็น Frontend Framework ที่น่าสนใจที่สุดในช่วง 3 ปีที่ผ่านมา
Svelte เป็นเฟรมเวิร์กที่ได้รับความนิยมมากที่สุดในบรรดาผู้ตอบแบบสอบถาม 66,000 คน
Svelte มอบอัตราความพึงพอใจสูงสุดให้กับนักพัฒนา
Svelte เป็นตัวเลือกแรกสำหรับนักพัฒนาเมื่อพูดถึงการตั้งชื่อเฟรมเวิร์กที่พวกเขาต้องการเรียนรู้ในอนาคต(เมืองไทยอาจจะยังน้อย รอดูต่อไป)
Svelte และ Vercel
สิ่งที่น่ายินดียิ่งกว่าคือ ปัจจุบันการพัฒนา Svelte ก็ยังเพิ่งถูกซื้อโดย Vercel ยักษ์ใหญ่ด้านการพัฒนาเว็บ
Vercel เป็นผู้เผยแพร่ Static Internet Sites สำหรับธุรกิจและมืออาชีพ เป็นแพลตฟอร์มคลาวด์สำหรับการปรับใช้แบบไร้เซิร์ฟเวอร์ (Serverless) ช่วยให้นักพัฒนาสามารถโฮสต์เว็บไซต์และบริการบนเว็บที่ปรับใช้ได้ทันที (deploy instantly) ปรับขนาดอัตโนมัติ (scale automatically) และไม่ต้องเฝ้าติดตาม (require no monitoring) ทั้งหมดนี้เพียงมีการกำหนดค่าเพียงเล็กน้อย
Vercel เป็นที่รู้จักในด้านแนวทางที่แปลกใหม่ ได้สร้างตำแหน่งทางการตลาดในฐานะผู้สร้าง Next.js ทั้ง Vercel และ Harris เห็นพ้องต้องกันถึงเป้าหมายทางธุรกิจในอนาคตและการพัฒนาเครื่องมือ Svelte และ SvelteKit
จนถึงตอนนี้ Harris ได้แบ่งเวลาระหว่างการทำงานกับ Svelte และการเป็นบรรณาธิการภาพที่ The New York Times เมื่อพิจารณาองค์ความรู้และประสบการณ์อันกว้างขวางของ Vercel ไม่ต้องพูดถึงนักลงทุนรายใหญ่หลายรายที่ให้การสนับสนุน Framework ตัวนี้เหมาะเป็นอย่างยิ่งสำหรับความร่วมมือครั้งใหม่นี้ Svelte และ SvelteKit จะสามารถเติบโตได้อย่างไร้ขีดจำกัด
โปรดติดตามตอนต่อไป
){kind=link}