การติดตามทุกสิ่งที่เกิดขึ้นด้วยเฟรมเวิร์ก JavaScript อาจเป็นเรื่องยาก เอกสารนี้จะไฮไลต์สั้นๆ เกี่ยวกับเหตุการณ์ใหม่ๆ ในระบบนิเวศเฟรมเวิร์ก JavaScript ในช่วงปีที่ผ่านมาหรือไม่นั้น หากต้องการพูดคุยเกี่ยวกับหัวข้อเหล่านี้ยาวๆ ลองดูหัวข้อการนำทางระบบนิเวศของเฟรมเวิร์ก JavaScript ที่เกี่ยวข้องจากงาน Google I/O ประจำปีนี้
แนวโน้มกรอบงานและการบรรจบกัน
ดังที่แสดงในแผนภูมิ เฟรมเวิร์ก JavaScript กำลังผสานรวมฟีเจอร์และสถาปัตยกรรมที่คล้ายกันอยู่จำนวนหนึ่ง ซึ่งรวมถึงสถาปัตยกรรมแบบคอมโพเนนต์ การกำหนดเส้นทางตามไฟล์ และการรองรับ SSR สมัยใหม่ การหลอมรวมนี้แสดงให้เห็นถึง ความพร้อมและพัฒนาของระบบนิเวศในขณะที่กรอบงานเรียนรู้จากกันและกันและนำแนวทางปฏิบัติแนะนำมาปรับใช้
ในขณะเดียวกัน เทรนด์ล่าสุดหลายๆ อย่าง (เช่น คอมโพเนนต์ของเซิร์ฟเวอร์และวิธีใหม่ๆ ในการเกิดปฏิกิริยาแบบละเอียด) ก็ยังคงแยกแต่ละเฟรมออกจากกัน เพื่อให้เข้าใจแนวโน้มเหล่านี้ได้ดียิ่งขึ้น เราจะเจาะลึกไปทีละ 1 เฟรมเวิร์ก
Angular
การเปิดตัวล่าสุดของ Angular มีการเปลี่ยนแปลงที่สำคัญหลายอย่าง เช่น สัญญาณ, มุมมองที่ยืดเวลาได้, NgOptimziedImage, ปริมาณน้ำที่ไม่ทำลายระบบ และการดื่มน้ำบางส่วน ไฮไลต์บางส่วนมีดังนี้
- สัญญาณ: สัญญาณคือแนวทางที่เฟรมเวิร์กหลายๆ เฟรมเวิร์ก (รวมถึง Angular ในปัจจุบัน) ใช้สำหรับสถานะการติดตามในแอปพลิเคชัน สัญญาณ Angular จะช่วยปรับปรุงประสิทธิภาพของรันไทม์ รวมถึงการโต้ตอบกับ Next Paint (INP) ด้วยการลดจำนวนการประมวลผลที่ต้องเกิดขึ้นระหว่างการตรวจจับการเปลี่ยนแปลง
- มุมมองที่เลื่อนเวลาได้: ข้อมูลพร็อพเพอร์ตี้ที่มีเวลาเลื่อนได้ทำให้เลื่อนการโหลดคอมโพเนนต์ คำสั่ง และไปป์ที่เฉพาะเจาะจงได้ เช่น เลื่อนการโหลดทรัพยากร Dependency จนกว่าเนื้อหาจะเข้าสู่วิวพอร์ตหรือจนกว่าเทรดหลักจะไม่มีการใช้งาน
- NgOptimizedImage: NgOptimizeImage เป็นคอมโพเนนต์รูปภาพของ Angular ที่นำแนวทางปฏิบัติแนะนำสำหรับการโหลดรูปภาพมาใช้โดยอัตโนมัติ
- ภาวะน้ำไม่เสียประสิทธิภาพ: ปริมาณน้ำที่ไม่ทำลายระบบจะช่วยแก้ไขการกะพริบที่จะเกิดขึ้นเมื่อมีการสร้าง DOM ของแอป Angular ฝั่งเซิร์ฟเวอร์ที่แสดงผลใหม่ฝั่งไคลเอ็นต์
- การให้น้ำบางส่วน: ทีม Angular จะเผยแพร่ตัวอย่างการดื่มน้ำบางส่วนในเร็วๆ นี้ เมื่อมีการเติมน้ำบางส่วน โดยค่าเริ่มต้น เบราว์เซอร์จะไม่โหลด JavaScript ของหน้าเว็บเมื่อแสดงผล แต่บางส่วนของหน้าเว็บจะมีความชุ่มชื้นขณะที่ผู้ใช้โต้ตอบกับหน้า
อัสโตร
Astro เครื่องมือสร้างเว็บไซต์แบบคงที่สมัยใหม่ได้สร้างกระแสด้วยแนวทางใหม่ในการพัฒนาเว็บ Astro ได้เปิดตัวฟีเจอร์และการอัปเดตต่างๆ ที่น่าตื่นเต้น โดยเน้นที่ประสิทธิภาพและประสบการณ์ของนักพัฒนาซอฟต์แวร์เป็นหลัก
- หมู่เกาะแอสโตร: หมู่เกาะแอสโตร ช่วยให้นักพัฒนาซอฟต์แวร์สร้างคอมโพเนนต์ UI แบบอินเทอร์แอกทีฟ ที่แยกออกจากส่วนที่เหลือของหน้าเว็บ ซึ่งจะช่วยให้มีการอัปเดตและ ประสิทธิภาพสูงสุด
- การแสดงผลแบบผสม: ตอนนี้ Astro รองรับการแสดงผลแบบผสม โดยรวมข้อดีของการสร้างเว็บไซต์แบบคงที่และการแสดงผลฝั่งเซิร์ฟเวอร์เพื่อความยืดหยุ่นที่ดียิ่งขึ้น
- รูปภาพและคอมโพเนนต์รูปภาพ: Astro ได้เปิดตัวคอมโพเนนต์ "รูปภาพ" และ "รูปภาพ" ใหม่ที่ช่วยให้จัดการรูปภาพได้ง่ายขึ้นและเพิ่มประสิทธิภาพโดยอัตโนมัติ
- ดูการรองรับ การเปลี่ยนภาพ: Astro มีการสนับสนุนในตัวสำหรับ View Transitions API ที่ช่วยให้การเปลี่ยนหน้าเป็นไปอย่างราบรื่นและไร้รอยต่อ
- Astro Dev Toolbar: Astro Dev Toolbar มีชุดเครื่องมือที่มีประสิทธิภาพสำหรับการแก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพแอปพลิเคชัน Astro
โต้ตอบ
เมื่อปีที่แล้ว การเปิดตัวคอมโพเนนต์ React Servers ได้เปิดตัวแนวทางใหม่สำหรับคอมโพเนนต์ของ React นับแต่นั้นมา ทีม React ได้พัฒนาฟีเจอร์ใหม่ๆ มากมาย รวมถึงฟีเจอร์ React Compiler และ Server Actions ตลอดจนฟีเจอร์ต่อไปนี้
- คอมโพเนนต์ของเซิร์ฟเวอร์: คอมโพเนนต์ของเซิร์ฟเวอร์รีแอ็กชันคือคอมโพเนนต์ที่ดึงข้อมูลและแสดงผลบนเซิร์ฟเวอร์ก่อนที่จะสตรีมไปยังไคลเอ็นต์ วิธีนี้จะย้ายการแสดงผลไปยังเซิร์ฟเวอร์และลดจำนวนโค้ดที่จะต้องจัดส่งไปยังไคลเอ็นต์
- React Compiler: React Compiler คือคอมไพเลอร์ ที่สามารถบันทึก คอมโพเนนต์โดยอัตโนมัติ ซึ่งจะช่วยปรับปรุงประสิทธิภาพได้โดยการลดการแสดงผลซ้ำที่ไม่จำเป็น ทีม React ได้กล่าวไว้ว่านักพัฒนาซอฟต์แวร์จะสามารถนำ React Compiler ไปใช้ได้โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย
- การดำเนินการ ของเซิร์ฟเวอร์: การดำเนินการของเซิร์ฟเวอร์ทำให้เกิดการสื่อสารระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์ การดำเนินการของเซิร์ฟเวอร์จะช่วยให้คุณกำหนดฟังก์ชันฝั่งเซิร์ฟเวอร์ที่จะเรียกใช้จากคอมโพเนนต์ React ได้โดยตรง ทำให้ไม่ต้องเรียกใช้ API ด้วยตนเองและการจัดการสถานะที่ซับซ้อน ซึ่งจะมีประโยชน์อย่างยิ่งสำหรับสิ่งต่างๆ เช่น การเปลี่ยนแปลงข้อมูลและการส่งแบบฟอร์ม
- กำลังโหลด: React ได้พยายามทำ API แบบประกาศสำหรับการโหลดล่วงหน้าและการโหลดเนื้อหา เช่น สคริปต์ รูปแบบ แบบอักษร และรูปภาพ
- การแสดงผลนอกหน้าจอ: React ก็มีการแสดงภาพนอกหน้าจอด้วย การแสดงผลนอกหน้าจอคือ "ความสามารถที่กำลังจะเปิดตัวใน React สำหรับการแสดงผลหน้าจอในเบื้องหลัง โดยไม่ต้องมีค่าใช้จ่ายเพิ่มเติมด้านประสิทธิภาพ อาจมองว่าเป็นพร็อพเพอร์ตี้ CSS การแสดงเนื้อหาเวอร์ชันที่ไม่เพียงใช้กับองค์ประกอบ DOM เท่านั้น แต่ยังใช้กับคอมโพเนนต์ React ได้อีกด้วย"
รีมิกซ์
Remix ซึ่งเป็นเฟรมเวิร์กเว็บแบบครบวงจรได้รับความสนใจในชุมชนนักพัฒนาซอฟต์แวร์ Remix ได้เปิดตัวการอัปเดตที่น่าสนใจมากมายด้วยการมุ่งเน้นที่พื้นฐานเว็บและประสบการณ์การใช้งานที่ดีขึ้นสำหรับนักพัฒนาซอฟต์แวร์
- การเปิดตัวรีมิกซ์ 2.0: Remix 2.0 เปิดตัวเมื่อเดือนกันยายน 2023 ได้มีการปรับปรุงที่สำคัญและฟีเจอร์ใหม่ๆ ในเฟรมเวิร์ก
- การสนับสนุนที่เสถียรสำหรับ Vite: ตอนนี้ Remix มีการสนับสนุนที่เสถียรสำหรับ Vite ซึ่งเป็นเครื่องมือสร้างที่ทำงานได้รวดเร็วและใช้ทรัพยากรน้อย ช่วยให้การพัฒนาที่เร็วขึ้นและทำงานได้ดีขึ้น
- โหมด SPA: เปิดตัวโหมด SPA รีมิกซ์ ซึ่งช่วยให้สร้างเว็บไซต์แบบคงที่ได้โดยไม่ต้องใช้เซิร์ฟเวอร์ JavaScript ในเวอร์ชันที่ใช้งานจริง ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ใช้ฟีเจอร์ที่มีประสิทธิภาพของ Remix ได้ เช่น การกำหนดเส้นทางที่อิงตามไฟล์ การแยกโค้ดอัตโนมัติ และอีกมากมาย ในขณะที่ยังคงความเรียบง่ายในการใช้งานเว็บไซต์แบบคงที่
Next.js
การเปิดตัว Next.js 13.4 ในเดือนพฤษภาคม 2023 มีความน่าสนใจอย่างยิ่ง เนื่องจากช่วยให้เรารองรับคอมโพเนนต์เซิร์ฟเวอร์ React, สตรีมมิง และ Suspense ได้อย่างเสถียร หลังจากนั้นเป็นต้นมา Next.js จะยังคงสร้างการรองรับ React API ใหม่ๆ อย่างต่อเนื่อง (เช่น Server Actions) และปรับปรุงประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์ผ่านโครงการริเริ่มอย่าง Turbopack ไฮไลต์อื่นๆ ได้แก่
- เราเตอร์แอป: เราเตอร์แอปซึ่งมีความเสถียรใน Next.js 13.4 เป็นวิธีใหม่ในการจัดโครงสร้างและจัดการการกำหนดเส้นทางในแอปพลิเคชัน Next.js เราเตอร์แอปเป็นข้อกำหนดเบื้องต้นในการใช้ฟีเจอร์ใหม่ของ Next.js เช่น เลย์เอาต์ที่แชร์และการกำหนดเส้นทางที่ซ้อนกัน ตลอดจน React API ใหม่อย่าง React Server คอมโพเนนต์, Suspense และการกระทำของเซิร์ฟเวอร์ในแอป Next.js
Turbopack: แนวทางที่อยู่ระหว่างการทดสอบ) สำหรับการแสดงหน้าเว็บที่สร้างขึ้นจาก Suspense API ของ React การแสดงผลล่วงหน้าบางส่วนจะแสดงผลหน้าโดยใช้ Shell ที่โหลดแบบคงที่ อย่างไรก็ตาม เชลล์ยังมี "ช่องว่าง" สำหรับเนื้อหาแบบไดนามิกภายในหน้า และเนื้อหานี้จะโหลดแบบไม่พร้อมกัน วิธีนี้มอบประโยชน์ด้านประสิทธิภาพของหน้าเว็บแบบคงที่ซึ่งแคชได้ในขณะที่ยังรวมข้อมูลแบบไดนามิกลงในเนื้อหาของหน้าเว็บได้
แวว
รุ่นล่าสุดของ Vue ชื่อ Vue 3.4 มีการปรับปรุงประสิทธิภาพด้านต่างๆ ขณะนี้ Vue ก็กำลังพัฒนา Vue Vapor ซึ่งมุ่งเน้นเรื่องประสิทธิภาพด้วย ไฮไลต์ของสิ่งที่เกิดขึ้นในพื้นที่นี้มีดังนี้
- เปิดตัว Vue 3.4: ฟีเจอร์ต่างๆ รวมถึง "โปรแกรมแยกวิเคราะห์ที่เขียนขึ้นใหม่ทั้งหมดซึ่งการคอมไพล์ SFC เร็วและเร็วขึ้น 2 เท่า และระบบการตอบสนองต่อการเปลี่ยนแปลงที่ปรับปรุง ประสิทธิภาพอีกครั้ง"
- โหมด Vue Vapor: Vue ทำงานในโหมด Vapor ซึ่งเป็นกลยุทธ์การรวบรวมภาพที่มุ่งเน้นประสิทธิภาพซึ่งเลือกใช้ได้ ที่ทำงานร่วมกับคอมโพเนนต์ไฟล์เดี่ยวของ Vue โหมดไอน้ำจะสร้างโค้ดที่มีประสิทธิภาพสูงกว่าโค้ดที่ Vue Compiler สร้างขึ้นในปัจจุบัน นอกจากนี้ การใช้โหมด Vapor กับคอมโพเนนต์ทั้งหมดทำให้ไม่จำเป็นต้องใช้ Vue Virtual DOM (ซึ่งลดขนาดชุดซอฟต์แวร์)
- วันที่ 2 ถึงช่วง EOL แล้ว: วันสิ้นสุดชีวิต (EOL) ของ Vue 2 คือวันที่ 31 ธันวาคม 2023 อย่างไรก็ตาม Vue 2 ยังคงมีการใช้งานอย่างเป็นธรรม ประมาณ 50% ของการดาวน์โหลดแพ็กเกจ Vue npm เป็นการดาวน์โหลดสำหรับ Vue 2
น็อกซ์
Nuxt ใกล้จะเปิดตัว Nuxt 4 นอกจากการเผยแพร่เฟรมเวิร์กเป็นประจำของ Nuxt ในปีที่ผ่านมาแล้ว ระบบนิเวศโมดูลของ Nuxt ยังเติบโตขึ้นจนเกือบ 220 โมดูลด้วย การพัฒนาล่าสุดบางส่วนใน อุตสาหกรรมนี้ ได้แก่
- รุ่นของ Nuxt 3.x: โดยปกติแล้ว Nuxt จะจัดส่งรุ่นย่อยใหม่ๆ มาใหม่ทุกเดือน ไฮไลต์บางส่วนจากการเปิดตัวเหล่านี้ ได้แก่ การรองรับหน้า Vit 5, หน้าเซิร์ฟเวอร์เท่านั้นและหน้าเฉพาะไคลเอ็นต์, การสนับสนุน Node.js ฝั่งไคลเอ็นต์ และสตรีมเว็บแบบเนทีฟ * โมดูล Nuxt: ไฮไลต์จากระบบนิเวศของโมดูล Nuxt ประกอบด้วยการเปิดตัวโมดูล nuxt/fonts ใหม่และ nuxt/image และ Nuxt DevTools รุ่น 1.0 การเผยแพร่โมดูลที่กำลังจะมีขึ้นจะรวมถึง nuxt/scripts, nuxt/hints, nuxt/a11y และ nuxt/auth
- องค์ประกอบเซิร์ฟเวอร์ (คอมโพเนนต์ของเกาะ): Nuxt สร้างการรองรับองค์ประกอบของเซิร์ฟเวอร์อย่างต่อเนื่อง (ซึ่งยังอยู่ในขั้นทดลอง) ใน Nuxt คอมโพเนนต์ที่แสดงผลโดยเซิร์ฟเวอร์เหล่านี้สามารถใช้ภายในเว็บไซต์แบบคงที่ ซึ่งช่วยให้ใช้ IslandsArchitecture ได้
ของแข็ง
Solid ได้พยายามจัดทำSolidStart ซึ่งเป็นรุ่น 1.0 ที่มีความเสถียรของเฟรมเวิร์กเมตา SolidStart มีรีแอ็กชันแบบละเอียด, การกำหนดเส้นทางแบบ Isomorphic และการรองรับโหมดการแสดงผลที่หลากหลาย ไฮไลต์มีดังนี้
- รีแอ็กชันแบบละเอียด: ระบบปฏิกิริยาของ Solid ช่วยให้สามารถอัปเดตได้อย่างแม่นยําและประสิทธิภาพสูงสุด ช่วยให้การแสดงผลและการจัดการสถานะเป็นไปได้อย่างมีประสิทธิภาพ
- การกำหนดเส้นทาง Isomorphic: SolidStart มีวิธีในการกำหนดเส้นทางแบบรวม ทำให้นักพัฒนาซอฟต์แวร์สามารถกำหนดเส้นทางที่ทำงานได้อย่างราบรื่นทั้งบนไคลเอ็นต์และเซิร์ฟเวอร์
- โหมดการแสดงผลที่ยืดหยุ่น: SolidStart รองรับโหมดการแสดงผลต่างๆ เช่น การแสดงผลฝั่งเซิร์ฟเวอร์ การสร้างเว็บไซต์แบบคงที่ และการแสดงผลฝั่งไคลเอ็นต์ ทำให้นักพัฒนาซอฟต์แวร์มีความยืดหยุ่นในการเลือกวิธีที่ดีที่สุดสำหรับแอปพลิเคชันของตน
สเวลเต
ในปีที่ผ่านมา ทีม Svelte มุ่งเน้นที่การเปิดตัว Svelte 5 ที่กำลังจะเปิดตัว ซึ่งถือเป็นสิ่งสำคัญ ไฮไลต์อื่นๆ ได้แก่
- Svelte 5 กำลังจะเปิดตัว: นอกเหนือจาก "การเขียนใหม่ของคอมไพเลอร์และรันไทม์ของ Svelte 5" แล้ว Svelte 5 ยังเปิดตัวแนวคิดของรูนด้วย
- ประกาศเปิดตัวอักษรรูน: ฟีเจอร์รูนที่กำลังจะเปิดตัวใน Svelte 5 "รูนจะปลดล็อกรีแอ็กชันที่ละเอียดและครอบคลุม... อักษรรูนช่วยขยายขอบเขตของไฟล์ .svelte... การเกิดปฏิกิริยาของ Svelte 5 ขับเคลื่อนด้วยสัญญาณต่างๆ อย่างไรก็ตาม [ซึ่งต่างจากเฟรมเวิร์กอื่นๆ] ใน Svelte 5 สัญญาณคือรายละเอียดการใช้งานขั้นสูง ไม่ใช่รายละเอียดที่คุณโต้ตอบด้วยโดยตรง"
- เปิดตัว SvelteKit 2: SvelteKit เป็นเฟรมเวิร์กเมตาสำหรับ Svelte ฟีเจอร์ในรุ่นนี้รวมถึงการกำหนดเส้นทางแบบตื้นและการรองรับ Vite 5
ออโรรา Chrome
Chrome Aurora เป็นทีมของ Google ที่ทำงานร่วมกับเฟรมเวิร์กเว็บแบบโอเพนซอร์สที่หลากหลายเพื่อปรับปรุงประสบการณ์ของผู้ใช้ โดยเฉพาะอย่างยิ่งในเว็บ โครงการริเริ่มบางส่วนที่เรามีส่วนร่วม ในปีที่ผ่านมามีดังนี้
- รูปภาพ (next/image, NgOptimizedImage และ nuxt/image)
- ยูทิลิตีแบบอักษร (next/font, nuxt/fonts และ unjs/fontaine (ปลั๊กอิน Vi)
- การโหลดสคริปต์ (next/script และ nuxt/สคริปต์)
- การโหลดสคริปต์ของบุคคลที่สาม (บุคคลที่สาม/บุคคลที่สาม nuxt/บุคคลที่สาม และ YouTube และคอมโพเนนต์ของ Google Maps ของ Angular )
- การแสดงภาพ: (Angular SSR/ Hydration)
บทสรุป
ระบบนิเวศของเฟรมเวิร์ก JavaScript นั้นพัฒนาอย่างต่อเนื่องอย่างรวดเร็ว โดยแต่ละเฟรมเวิร์กนำนวัตกรรมและการปรับปรุงของตัวเองมาใช้ ไม่ว่าคุณจะสนใจฟีเจอร์ล่าสุดของเฟรมเวิร์กที่เป็นที่ยอมรับ เช่น Angular, React และ Vue หรือการสำรวจตัวเลือกใหม่ๆ เช่น Astro, Remix และ Solid ก็ไม่มีการพัฒนาที่น่าตื่นเต้นสำหรับการพัฒนาอย่างต่อเนื่อง
ในฐานะนักพัฒนาซอฟต์แวร์ การรับทราบข้อมูลเกี่ยวกับความก้าวหน้าเหล่านี้จะช่วยให้เรามีข้อมูลในการตัดสินใจเมื่อเลือกเฟรมเวิร์กสำหรับโปรเจ็กต์ การทำความเข้าใจจุดแข็งและฟีเจอร์ที่เป็นเอกลักษณ์ของแต่ละเฟรมเวิร์กทำให้เราสามารถเลือกเฟรมเวิร์กที่ตรงกับข้อกำหนดของโปรเจ็กต์และค่ากำหนดในการพัฒนามากที่สุด
เราหวังว่าภาพรวมนี้จะช่วยให้คุณเห็นสถานะปัจจุบันของเฟรมเวิร์ก JavaScript หากต้องการเจาะลึกมากขึ้นเกี่ยวกับหัวข้อต่างๆ ในบล็อกโพสต์นี้ โปรดดูการบรรยายไปพร้อมกันจาก Google I/O ขอให้สนุกกับการเขียนโค้ด