Qwik Starter CLI เป็นโปรแกรมเริ่มต้นง่ายๆ สำหรับคุณที่จะลองทดลองกับ Qwik โดยตรง และเพื่อทำความเข้าใจให้ดีขึ้นว่ามีความแตกต่างกันอย่างไร

CLI ประกอบด้วยตัวอย่างสี่ตัวอย่างนี้ ซึ่งจะขยายเพิ่มเติมในอนาคตอันใกล้นี้:

  1. starter: สวัสดีชาวโลกขั้นพื้นฐาน
  2. starter-builder: สวัสดีโลกพื้นฐานที่ผสานรวมกับ Qwik API ของ Builder
  3. starter-partytown: สวัสดีโลกพื้นฐานที่แสดงให้เห็นว่างานราคาแพงสามารถรันบน Web Worker ด้วย Partytown ได้อย่างไร
  4. todo: แอปพลิเคชัน TodoMVC แบบคลาสสิก

Qwik เป็นเฟรมเวิร์ก JavaScript ที่ไม่เหมือนใคร โดยเป็นเฟรมเวิร์กเดียวที่มีอยู่ในปัจจุบันที่สามารถไฮเดรตที่ไม่เป็นระเบียบในระดับส่วนประกอบ

ด้วยวิวัฒนาการของ JavaScript และเฟรมเวิร์ก JavaScript ปัจจุบันเว็บไซต์สมัยใหม่ต้องการJavaScript จำนวนมหาศาลจึงจะสามารถโต้ตอบได้ และยิ่งไซต์ของเราเติบโตขึ้นเท่าใด เราก็ยิ่งเห็นความซับซ้อนของไซต์เพิ่มมากขึ้น ซึ่งท้ายที่สุดแล้วต้องใช้ โค้ดมากขึ้น ซึ่งส่งผลเสียต่อ ประสิทธิภาพการเริ่มต้น ของไซต์ การมี JavaScript มากเกินไปมีผลกระทบหลักสองประการต่อไซต์ ได้แก่

  1. แบนด์วิดท์เครือข่าย: หากไซต์ของเรามีโค้ด JS จำนวนมาก การดาวน์โหลดบนอุปกรณ์ของลูกค้าบนเครือข่ายที่ช้ากว่าจะใช้เวลานาน
  2. เวลาเริ่มต้น: เวลาเริ่มต้นของไซต์ได้รับผลกระทบ เนื่องจากโค้ด JS ทั้งหมดจำเป็นต้องได้รับการดำเนินการโดยเป็นส่วนหนึ่งของไฮเดรชั่นทุกครั้งที่โหลดหน้าเว็บ

ดังที่ได้กล่าวไว้ข้างต้น ด้วยการขจัดปัญหาคอขวดในเวลาโหลด Qwik อ้างว่าบรรลุเป้าหมายสำคัญสองประการ

  1. โหลดทันที: รวดเร็วแตกต่างจากเฟรมเวิร์กอื่นๆ คือ “กลับมาทำงานต่อได้” ซึ่งเป็นกระบวนทัศน์ใหม่ที่ทีม Qwik กำหนดไว้เพื่อให้ ความชุ่มชื้น เป็น 0 ซึ่งช่วยให้แอป Qwik สามารถโหลดโต้ตอบได้ทันที โดยไม่คำนึงถึงขนาดของแอปหรือความซับซ้อน ซึ่งหมายความว่าแอปจะโหลดได้ทันทีโดยไม่มีความล่าช้าบนเครือข่ายใดๆ
  2. ประสิทธิภาพ: Qwik บรรลุเป้าหมายนี้ด้วยการส่ง HTML ล้วนๆ และโหลด JS แบบค่อยเป็นค่อยไปตามต้องการ ซึ่งหมายความว่าไซต์มี JavaScript น้อยมากที่จะดำเนินการเมื่อโหลดและดาวน์โหลดโค้ดเมื่อมีการโต้ตอบเท่านั้น ซึ่งทำให้เป็น เฟรมเวิร์กแรก “HTML”

Qwik บรรลุเป้าหมายนี้ได้อย่างไร?

โดยพื้นฐานแล้ว Qwik บรรลุเป้าหมายนี้ผ่านสองกลยุทธ์ที่สำคัญ:

  1. ชะลอการดำเนินการและการดาวน์โหลด JavaScript ให้นานที่สุด
  2. ทำให้สถานะการดำเนินการของแอปพลิเคชันและเฟรมเป็นอนุกรมบนเซิร์ฟเวอร์และดำเนินการต่อบนไคลเอนต์

มาทำความเข้าใจว่า Qwik นำกลยุทธ์เหล่านี้ไปใช้อย่างไร

จาวาสคริปต์น้อยลง

ดังที่เราเห็นข้างต้น หนึ่งในปัญหาที่ใหญ่ที่สุดสำหรับไซต์คือ JavaScript ขนาดใหญ่ที่ต้องจัดส่งไปยังไคลเอนต์ Qwikกำจัดสิ่งนี้ทันทีโดยจัดส่งเฉพาะ JavaScript ขั้นต่ำ เปลือยไปยังไคลเอนต์ ตามทฤษฎีแล้ว แอปพลิเคชัน Qwik ต้องการ JavaScript ประมาณ 1KB เท่านั้นจึงจะสามารถโต้ตอบได้

คุณอาจคิดว่าถ้าเราไม่จัดส่งรหัส JS แล้วแอปของเราจะกลายเป็นแบบโต้ตอบได้อย่างไร จริงๆ แล้ว Qwik จัดส่ง แต่ไม่ใช่เมื่อเริ่มต้นแอปพลิเคชัน แต่จะส่งไปที่การโต้ตอบแทน Qwik ใช้ข้อมูลจำนวนมากในระหว่าง SSR เพื่อเริ่มดึงข้อมูลล่วงหน้าเฉพาะบิตของการโต้ตอบของหน้าปัจจุบันโดยเร็วที่สุด ด้วยวิธีนี้เมื่อผู้ใช้คลิกหรือโต้ตอบ JS จะถูกดาวน์โหลดแล้ว

มันคล้ายกับสิ่งที่เราเรียกว่าการโหลดแบบ Lazy Loading แต่ Qwik นำการโหลดแบบ Lazy Loading ไปสู่ระดับสูงสุดโดยการดาวน์โหลด JavaScript อย่างต่อเนื่องตามการโต้ตอบของผู้ใช้

เราทราบดีว่า ไฮเดรชั่น เป็นกระบวนการในการเริ่มต้นเฟรมเวิร์ก JavaScript หลังจากที่เซิร์ฟเวอร์แสดงผลแล้ว หลังจากเรนเดอร์ HTML บนเซิร์ฟเวอร์แล้ว เฟรมเวิร์ก JavaScript บนไคลเอนต์จะต้องได้รับการเริ่มต้นใหม่โดยการติดตั้งตัวฟังเหตุการณ์ทั้งหมดบนโหนด DOM สร้างโครงสร้างข้อมูลภายใน และกู้คืนสถานะแอปพลิเคชัน

เฟรมเวิร์ก JavaScript ปัจจุบันทั้งหมดต้องการขั้นตอนนี้เพื่อทำให้แอปพลิเคชันโต้ตอบได้ กระบวนการให้ความชุ่มชื้นนี้ค่อนข้างแพงและ Qwik จะกำจัดกระบวนการดังกล่าวออกไปโดยสิ้นเชิง ซึ่งทำให้แอปพลิเคชัน Qwik เริ่มต้นการทำงานได้ทันที เพื่อให้บรรลุเป้าหมายนี้ Qwik จึงหยุดการดำเนินการบนเซิร์ฟเวอร์ชั่วคราวและดำเนินการดำเนินการต่อบนไคลเอนต์อีกครั้ง