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

Qwik เร็วสุดๆ มันอ้างว่าเป็น front-end framework ที่เร็วที่สุดในขณะนี้ ให้เวลาในการโหลดหน้าเว็บที่เร็วปานสายฟ้าแลบ โดยไม่คำนึงถึงขนาดและความซับซ้อนของไซต์ของคุณ ถือว่าเป็นความซับซ้อนระดับ O(1) เนื่องจากสามารถบรรลุประสิทธิภาพที่สม่ำเสมอตามขนาด

Qwik เวอร์ชันเสถียร 1.0 ได้รับการเผยแพร่เมื่อเร็วๆ นี้ เป็นโครงการโอเพ่นซอร์สภายใต้ใบอนุญาต MIT คุณสามารถสำรวจได้ที่เว็บไซต์ทางการและที่เก็บ GitHubสาธารณะ

บทความนี้จึงแนะนำคุณเกี่ยวกับกรอบการทำงานที่ยอดเยี่ยม คุณลักษณะ และกลยุทธ์ภายใต้ประทุน มาดำน้ำกันเถอะ

ก่อนที่เราจะไปยัง Qwik เราต้องเข้าใจก่อนว่าการเรนเดอร์เกิดขึ้นในเฟรมเวิร์ก JavaScript อย่างไร มีตัวเลือกการแสดงผลสองตัวเลือก: การแสดงผลฝั่งไคลเอ็นต์และการแสดงผลฝั่งเซิร์ฟเวอร์

การแสดงผลฝั่งไคลเอนต์

ตามชื่อของมัน เบราว์เซอร์แสดงข้อมูลทั้งหมดในไฟล์ HTML ที่ฝั่งไคลเอ็นต์ในการแสดงผลฝั่งไคลเอ็นต์

เมื่อผู้ใช้เข้าชมเว็บไซต์ เบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์เพื่อดึงไฟล์ HTML, CSS และ JS หลังจากได้รับไฟล์เหล่านี้ เบราว์เซอร์จะดำเนินการไฟล์เหล่านั้นและแสดงผลเว็บไซต์ เพื่อให้ผู้ใช้สามารถดูและโต้ตอบกับเนื้อหาได้

สิ่งนี้เกี่ยวข้องกับการดำเนินการของลอจิก การดึงข้อมูล การกำหนดเส้นทางและการสร้างเทมเพลตทั้งหมดในฝั่งไคลเอ็นต์ ผู้ใช้มักจะเห็นหน้าว่างจนกว่ากระบวนการทั้งหมดจะเกิดขึ้น

ข้อเสียที่สำคัญของแนวทางนี้คือเมื่อแอปพลิเคชันเติบโตขึ้น เวลาในการแสดงผลหน้าแรกก็จะเพิ่มขึ้น

การแสดงผลฝั่งเซิร์ฟเวอร์

ในการแสดงผลฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์จะส่ง HTML ที่แสดงผลเป็นการตอบสนอง

แทนที่จะใช้เวลาในการเรียกใช้ไฟล์ JavaScript เช่นเดียวกับการแสดงผลฝั่งไคลเอนต์ เบราว์เซอร์สามารถแสดงเว็บไซต์ได้ทันทีโดยใช้การตอบสนองนี้

สิ่งนี้จะเร่งเวลาของการเรนเดอร์เริ่มต้นให้เร็วขึ้นอย่างมาก ผู้ใช้สามารถดูเนื้อหาของเว็บไซต์ได้อย่างรวดเร็วโดยไม่ต้องจ้องที่หน้าจอว่าง

อย่างไรก็ตาม เพจนี้สามารถดูได้เท่านั้นและไม่สามารถโต้ตอบได้จนกว่าไฟล์ JavaScript จะถูกโหลดไปยัง DOM หลังจากโหลด JS แล้ว หน้าจะสามารถโต้ตอบกับผู้ใช้ได้

กระบวนการให้ความชุ่มชื้น

ดังที่เราได้กล่าวไว้ข้างต้น หน้าเว็บที่เบราว์เซอร์แสดงให้เราเห็นในตอนแรกยังไม่สามารถโต้ตอบได้ ในการโต้ตอบกับหน้าเว็บ จะต้องโหลด JavaScript ไปยัง DOM กระบวนการนี้เรียกว่าไฮเดรชั่น

สิ่งนี้เกี่ยวข้องกับการแนบตัวฟังเหตุการณ์ การกู้คืนสถานะแอปพลิเคชัน และสร้างแผนผังองค์ประกอบทั้งหมดใหม่ตั้งแต่ต้น

เทคนิคนี้ถูกใช้ในเมตาเฟรมเวิร์กเกือบทุกชนิดในปัจจุบัน เช่น Next.js, Nuxt.js, Angular เป็นต้น (ยกเว้น Astro — มันใช้การเติมน้ำบางส่วน)

ข้อเสียของกระบวนการไฮเดรชั่นนี้คือ แม้ว่าเพจจะแสดงบนหน้าจอของผู้ใช้ แต่จะไม่โต้ตอบจนกว่าจะมีการดาวน์โหลดโค้ดและดำเนินการอีกครั้ง

เมื่อจำเป็นต้องเรียกใช้โค้ด JavaScript จำนวนมาก อาจทำให้เว็บแอปพลิเคชันทำงานช้าลง

เฟรมเวิร์ก JavaScript เหล่านี้ส่วนใหญ่ดาวน์โหลดและรันโค้ดทั้งหมดพร้อมกัน ส่งผลให้เวลาในการโหลด (เวลาโต้ตอบ) ช้าลง และเป็นไปตามความก้าวหน้า O(n) เชิงเส้น

ดังนั้นเฟรมเวิร์กที่ใช้เทคนิคนี้จะสังเกตเห็นความล่าช้าในการโต้ตอบกับหน้าเว็บ

นี่เป็นปัญหาที่ Qwik แก้ไขได้อย่างแน่นอน

ทำไม Qwik ถึงเร็วจัง?

เหตุผลหลักที่ทำให้ Qwik รวดเร็วเป็นพิเศษคือการกำจัดกระบวนการไฮเดรชั่นนี้ออกไป

นำกระบวนทัศน์การเรนเดอร์ใหม่ทั้งหมดมาสู่ตารางที่เรียกว่าResumabilityซึ่งขจัดความจำเป็นในการไฮเดรชันโดยสิ้นเชิง (ไม่มีน้ำ)

Resumability คืออะไร?

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

แอป Qwik สามารถทำให้เป็นอนุกรมได้อย่างสมบูรณ์ในรูปแบบ HTML คุณสามารถกดการดำเนินการและบันทึกข้อมูลทั้งหมดและการปิดแอปพลิเคชันและแสดงทั้งหมดเป็นสตริง HTML ได้ทุกเมื่อ

จากนั้นเบราว์เซอร์สามารถดำเนินการต่อจากจุดที่เซิร์ฟเวอร์หยุดทำงาน โดยไม่จำเป็นต้องเรียกใช้ JavaScript เลย

ดังนั้นจะมีช่องว่างระหว่าง Qwik และเฟรมเวิร์กอื่นๆ อย่างมาก

เรามาคุยกันว่าสิ่งนี้เป็นไปได้อย่างไรในรายละเอียดด้วยกลยุทธ์

กลยุทธ์ของ Qwik

Qwik บรรลุเป้าหมายนี้ด้วยสองกลยุทธ์หลัก:

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

ใน Qwik ทุกอย่างสามารถโหลดได้แบบสันหลังยาว:

• ส่วนประกอบในการเรนเดอร์ (บล็อกการเริ่มต้นและบล็อกการเรนเดอร์)
• ส่วนประกอบบนนาฬิกา (ผลข้างเคียง ดาวน์โหลดเฉพาะเมื่ออินพุตเปลี่ยน)
• ผู้ฟัง (ดาวน์โหลดเฉพาะเมื่อโต้ตอบ)
• สไตล์ (ดาวน์โหลดเฉพาะในกรณีที่เซิร์ฟเวอร์ไม่ได้จัดเตรียมไว้ให้)

คำแนะนำแบบใช้โค้ด

มาดูตัวอย่างโค้ดเพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับการโหลดแบบขี้เกียจและการทำให้เป็นอนุกรม

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

คุณรู้จักรีแอคไหม? คุณรู้จักคิววิก

- เอกสารอย่างเป็นทางการ

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

คุณจะสังเกตเห็นสิ่งพิเศษที่นี่ ใช่! เครื่องหมายดอลลาร์

นี่คืออะไร$?

Qwik มีเครื่องมือเพิ่มประสิทธิภาพ มันคล้ายกับคอมไพเลอร์ สัญลักษณ์ดอลลาร์นี้บอกเครื่องมือเพิ่มประสิทธิภาพว่าฟังก์ชันต่อไปนี้ควรโหลดแบบสันหลังยาว

ซึ่งหมายความว่า JS จะไม่ถูกโหลดจนกว่าเราจะคลิกปุ่ม บันเดิล JS ที่โหลดแบบสันหลังยาวนี้มีโค้ดที่เราต้องการเรียกใช้

นอกจากนี้ยังสามารถเข้าถึงสภาพแวดล้อมคำศัพท์เพื่ออัปเดตสถานะที่อาจใช้ร่วมกันโดยส่วนประกอบอื่นๆ ซึ่งมาจากบันเดิลการโหลดแบบ Lazy Loading อื่น

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

เกิดอะไรขึ้นภายใต้ประทุน?

ตอนนี้คุณรู้ถึงความสามารถในการกลับมาใช้ใหม่แล้ว แต่มันใช้งานจริงได้อย่างไร? มาเจาะลึกกัน

หากคุณไปที่แท็บ HTML ของตัวอย่างก่อนหน้านี้ คุณจะเห็นเครื่องหมายทวิภาคจำนวนมาก (คิว :)

Qwik กำลังใส่ข้อมูลเพิ่มเติมลงใน HTML เป็นที่รู้จักกันในชื่อการทำให้ข้อมูลเป็นอนุกรมลงใน HTML เพื่อจะได้ตัดสินใจได้ในภายหลัง.

Qwik ซีเรียลไลซ์ตัวฟังเหตุการณ์เป็น DOM ในรูปแบบต่อไปนี้:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

สิ่งนี้ทำได้โดย Qwik Optimizer ดังที่ฉันอธิบายไว้ก่อนหน้านี้ Qwik Optimizer เป็นเหมือนคอมไพเลอร์

มันใช้โค้ดที่ฉันเขียน (ไฟล์ JS เหล่านั้น) ตรวจสอบและสร้างไฟล์ใหม่ตามโค้ด จากนั้นเมื่อรหัสของเราถูกทิ้งไว้ มันจะแทนที่ด้วยการอ้างอิงถึงไฟล์ใหม่นั้น

เครื่องมือเพิ่ม ประสิทธิภาพนี้เขียนด้วยภาษา Rust และคุณสามารถดูได้ที่นี่ ตรวจสอบparse.rsไฟล์ในโฟลเดอร์ core src บ่งชี้ว่าการแยกวิเคราะห์เกิดขึ้นได้อย่างไร

จากนั้นเราก็มีQwik Loader

หลังจากที่เรามีไฟล์ที่แยกจากกันทั้งหมดที่พร้อมจะโหลดแบบ Lazy Loading แล้ว เราต้องสามารถตอบสนองต่อเหตุการณ์ที่ผู้ใช้ทำและโหลดไฟล์แบบ Lazy Loading เหล่านั้นได้

นี่คือสิ่งที่ Qwik Loader ทำ

กำลังเพิ่มผู้ฟังเหตุการณ์ทั่วโลกและค้นหาเหตุการณ์ของผู้ใช้ที่ใดก็ได้ในเอกสาร

เมื่อเหตุการณ์ on-click ถูกทริกเกอร์ จะนำเข้าไฟล์ chunk.js ที่เกี่ยวข้อง

หลังจากนั้น มันจะมีโมดูลที่มีส่วนของชื่อสัญลักษณ์ (#handler_ symbol) มันขี้เกียจโหลดในไฟล์แยกต่างหาก ดังนั้นตัวโหลดจะนำไฟล์นั้นและดำเนินการ

สถานะ/ค่าจะถูกผูกมัดตามqwik/jsonการอ้างอิง (ดูเอกสารแนบด้านบน)

นั่นคือวิธีการเรียกใช้ฟังก์ชันเหตุการณ์เมื่อคลิก คุณสามารถดูลักษณะการ ทำงานของตัวโหลดนี้ได้ในที่เก็บ GitHub ที่นี่

ติดตั้งและเรียกใช้ Qwik ในสภาพแวดล้อมท้องถิ่น

มาติดตั้งสัตว์ร้ายตัวนี้บนเครื่องของเรากันเถอะ

ข้อกำหนดเบื้องต้น — คุณควรติดตั้ง Node.js ≥v16.8

คุณสามารถใช้ Qwik CLI เพื่อหมุนแอปพลิเคชัน Qwik ได้อย่างง่ายดาย

npm create qwik@latest

ใช้ได้. เรามาสร้างสิ่งนี้โดยใช้npm run build

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

ใช้ได้! ตอนนี้คุณสามารถเริ่มแอปโดยใช้npm run devเว็บไซต์เริ่มต้นได้ที่http://localhost:5173/

มาดูกันว่ามันโหลดบันเดิล JS ของเหตุการณ์ on-click ในปุ่ม Time toการเฉลิมฉลองโดยใช้ Inspect ได้อย่างไร

หากเราเปิดแท็บเครือข่าย เราจะพบเฉพาะบันเดิล JS เริ่มต้นเท่านั้น เมื่อเราคลิกที่ปุ่ม มันจะโหลดบันเดิล JS ที่เกี่ยวข้องกับปุ่มนั้น

นอกจากนี้ Qwik ยังเป็นมิตรกับนักพัฒนา เนื่องจากเราสามารถ Alt และคลิกที่ใดก็ได้เพื่อเปิดโค้ดจาก IDE ที่คุณชื่นชอบ

โบนัส — ถ้าคุณไปhttp://localhost:5173/demo/flower?pride=trueและคุณจะเห็นดอกไม้หลากสีหมุนเวียน

Qwik ให้คุณเพิ่มการผสานรวมเพื่อให้ง่ายต่อการเชื่อมต่อกับเครื่องมือและบริการของคุณ เช่น React, Tailwind CSS เป็นต้น โดยใช้npm run qwik addคำสั่ง การผสานรวมที่ รองรับแสดงอยู่ในเอกสารอย่างเป็นทางการที่นี่

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

ทรัพยากร

• เว็บไซต์ทางการ —https://qwik.builder.io
• คิววิค GitHub —https://github.com/BuilderIO/qwik
• เอกสาร —https://qwik.builder.io/docs/overview/
• การสาธิต StackBlitz —https://stackblitz.com/edit/qwik-todo-demo

แนวทางที่เป็นนวัตกรรมใหม่ของ Qwik (Resumability) นำเสนอแนวทางใหม่สำหรับเฟรมเวิร์ก JavaScript ส่วนหน้า

แน่นอนว่านี่จะเป็นกรอบการเปลี่ยนแปลงเกมสำหรับโลก มันน่าสนใจที่จะเห็นว่าสิ่งต่าง ๆ เกิดขึ้นจากที่นี่

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

ขอบคุณที่อ่าน แสดงความคิดเห็นเกี่ยวกับ Qwik มีความสุขในการเข้ารหัส!

เพิ่มระดับการเข้ารหัส

ขอบคุณที่เป็นส่วนหนึ่งของชุมชนของเรา! ก่อนที่คุณจะไป:

• ปรบมือให้กับเรื่องราวและติดตามผู้เขียน
• ดูเนื้อหาเพิ่มเติมในสิ่งพิมพ์ Level Up Coding
• หลักสูตรสัมภาษณ์การเข้ารหัสฟรี ⇒ ดูหลักสูตร
• ติดตามเรา: Twitter | LinkedIn | จดหมายข่าว