- Angular v21 เป็นการอัปเดตครั้งใหญ่ที่มาพร้อมความสามารถสำคัญอย่าง Signal Forms, Angular Aria, MCP server, Vitest และ Zoneless change detection เพื่อตอบรับยุคของการพัฒนาเว็บที่มี AI เป็นศูนย์กลาง
- Signal Forms คือการจัดการฟอร์มแบบ reactive บนพื้นฐานของ Signals พร้อมความปลอดภัยด้านชนิดข้อมูลและการตรวจสอบความถูกต้องแบบอิงสคีมา
- Angular Aria เป็น ไลบรารีคอมโพเนนต์ UI แบบ headless ที่ให้ความสำคัญกับการเข้าถึงเป็นอันดับแรก โดยมี 8 แพตเทิร์นและ 13 คอมโพเนนต์ที่ปรับแต่งให้เข้ากับสไตล์ของนักพัฒนาได้
- Vitest ถูกนำมาใช้และทำให้เสถียรในฐานะ test runner เริ่มต้น ขณะที่ zone.js ถูกถอดออกจากชุดที่รวมมาโดยค่าเริ่มต้น ทำให้แนวทาง Zoneless กลายเป็นมาตรฐาน
- หัวใจสำคัญของเวอร์ชันนี้คือการยกระดับประสบการณ์นักพัฒนาและความสามารถด้านการผสาน AI ผ่านเว็บไซต์เอกสารใหม่ รวมถึง AI tutor และเครื่องมือ MCP server
ภาพรวมฟีเจอร์หลัก
- Angular v21 ยกระดับความสามารถครั้งใหญ่สำหรับการสร้าง สภาพแวดล้อมการพัฒนาที่มี AI ช่วยเหลือ และ เว็บแอปพลิเคชันที่ขยายต่อได้
- เวอร์ชันใหม่นี้เน้นที่ Signal Forms, Angular Aria, MCP server, Vitest และ Zoneless change detection
- แอปพลิเคชันใหม่จะ ไม่รวม
zone.js มาโดยค่าเริ่มต้น และหันไปใช้แนวทาง Zoneless แทน
- Angular CLI ตั้งค่า Vitest เป็น test runner เริ่มต้น โดยยังคงรองรับ Karma และ Jasmine
- MCP server ที่สามารถทำงานร่วมกับ AI agent ได้ถูกทำให้เสถียรแล้ว ทำให้ LLM ใช้งานความสามารถล่าสุดของ Angular ได้
Signal Forms (ฟีเจอร์ทดลอง)
- Signal Forms คือ ไลบรารีจัดการสถานะฟอร์มแบบ reactive ที่สร้างบนพื้นฐานของ Signals
- โมเดลของฟอร์มถูกกำหนดเป็น signal และซิงก์กับฟิลด์โดยอัตโนมัติ
- มี ความปลอดภัยด้านชนิดข้อมูล และ ตรรกะการตรวจสอบแบบอิงสคีมา ในตัว
- ใช้
form() และ directive [field] เพื่อผูกกับเทมเพลต
- สามารถ bind กับคอมโพเนนต์แบบกำหนดเองได้โดยไม่ต้องใช้
ControlValueAccessor
- มีแพตเทิร์นการตรวจสอบพื้นฐาน เช่น การตรวจสอบอีเมลและการจับคู่ด้วย regular expression และสามารถเพิ่ม validator แบบกำหนดเองได้
- ขณะนี้ยังอยู่ใน ระยะทดลอง และจะมีการปรับปรุงเพิ่มเติมจากฟีดแบ็ก
Angular Aria (ตัวอย่างสำหรับนักพัฒนา)
- Angular Aria คือ ไลบรารีคอมโพเนนต์ UI แบบ headless ที่ให้ความสำคัญกับการเข้าถึงเป็นอันดับแรก
- มี 8 แพตเทิร์น (Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree) และ 13 คอมโพเนนต์
- ทุกคอมโพเนนต์มาในสถานะ ไม่มีสไตล์ เพื่อให้ปรับแต่งได้อย่างอิสระ
- คำสั่งติดตั้ง:
npm i @angular/aria
- ทีม Angular นำเสนอ 3 แนวทางสำหรับการพัฒนาคอมโพเนนต์
- Angular Aria: คอมโพเนนต์ headless ที่เน้นการเข้าถึง
- CDK: ให้ behavior primitives เช่น Drag & Drop
- Angular Material: คอมโพเนนต์สำเร็จรูปสไตล์ Material Design
MCP server และการผสาน AI
- MCP server คือเซิร์ฟเวอร์เครื่องมือช่วย AI ที่ฝังอยู่ใน Angular CLI และใน v21 ได้ ก้าวสู่สถานะเสถียร
- ความสามารถหลัก
- get_best_practices: ให้แนวปฏิบัติที่ดี
- search_documentation: ค้นหาเอกสารทางการ
- find_examples: ให้ตัวอย่าง Angular ล่าสุด
- onpush_zoneless_migration: สร้างแผนการย้ายไปใช้ Zoneless
- ai_tutor: ผู้ช่วยเรียนรู้ Angular ที่ขับเคลื่อนด้วย AI
- MCP server ช่วย แก้ปัญหา knowledge cutoff ของ LLM ทำให้ใช้งานฟีเจอร์ใหม่อย่าง Signal Forms และ Angular Aria ได้
Vitest เป็น test runner เริ่มต้น
- Vitest ถูกทำให้เสถียรในฐานะ test runner เริ่มต้น ของ Angular
- สามารถรันได้ด้วยคำสั่ง
ng test
- Karma ถูกเลิกใช้ไปตั้งแต่ปี 2023 ส่วน Jest และ Web Test Runner มีกำหนดถูกถอดออกใน v22
- โปรเจกต์เดิมยังคงใช้ Karma/Jasmine ต่อได้
- รองรับ การย้ายอัตโนมัติ ด้วยคำสั่ง
ng g @schematics/angular:refactor-jasmine-vitest
Zoneless change detection
- เดิม zone.js ใช้การ patch browser API เพื่อทำ change detection แต่มีข้อจำกัดด้านประสิทธิภาพ
- Signals-based Zoneless change detection ถูกเปลี่ยนให้เป็นค่าเริ่มต้นใน v21
- ณ ปี 2024 แอปใหม่ภายใน Google มากกว่าครึ่งใช้ Zoneless
- ตามข้อมูลจาก HTTP Archive มีแอปสาธารณะมากกว่า 1,400 แอปที่ใช้ Zoneless
- ข้อดีของ Zoneless
- Core Web Vitals ดีขึ้น, ขนาด bundle ลดลง, debugging ง่ายขึ้น, และ รองรับการประมวลผลแบบ asynchronous ได้ดีขึ้น
- แอปเดิมสามารถอ้างอิง คู่มือการย้ายระบบ หรือใช้เครื่องมือ
onpush_zoneless_migration ของ MCP server ได้
เอกสารและประสบการณ์นักพัฒนาที่ดีขึ้น
- มีการปรับโฉมเว็บไซต์ angular.dev ใหม่ทั้งหมด
- หน้า landing page ใหม่และโครงสร้างเอกสารที่เน้นแนวคิดสมัยใหม่
- เพิ่ม AI development resource hub (angular.dev/ai)
- อัปเดตคู่มือ Signals tutorial, routing, DI, Material theming และ Tailwind CSS
- สามารถค้นหาเอกสารล่าสุดได้ผ่านเครื่องมือ
search_documentation ของ MCP server
การปรับปรุงเพิ่มเติม
- อัปเดต CLDR library เป็น v47 (ปรับปรุงรูปแบบสกุลเงินและวันที่)
- รองรับ regular expression ในเทมเพลต, มี Signals formatter ในตัว และสามารถปรับแต่ง IntersectionObserver options ได้
- มี การทำ generic ให้ SimpleChanges, ปรับปรุง KeyValue pipe และ เพิ่ม utility classes ของ Material
- CDK Overlay ปรับไปใช้ popover มาตรฐานของเบราว์เซอร์เพื่อเพิ่มการเข้าถึง
- Angular DevTools เพิ่ม การแสดงภาพ Route และกราฟ Signal
การมีส่วนร่วมจากชุมชน
- นับตั้งแต่ v20 มีผู้ร่วมพัฒนา 215 คน ที่มีส่วนกับ codebase ของ Angular
- ผลงานเด่น
- Jaime Burgos: ปรับปรุงการย้ายระบบและการวินิจฉัย
- Angelo Parziale: เพิ่ม migration สำหรับการแปลง NgClass/NgStyle
- Hryhorii Avcharov: เพิ่มแท็บ Transfer State ใน DevTools
- Luke Beach, Ruslan Lekhman, Cédric Exbrayat, Younes Jaaidi และคนอื่น ๆ: ปรับปรุงฟีเจอร์ด้าน Vitest และ CDK
อื่น ๆ
- จะประกาศผลโหวตมาสคอต Angular ใน งานปล่อยเวอร์ชันบน YouTube วันที่ 20 พฤศจิกายน 2025
- ทีม Angular วางแผนพัฒนาสภาพแวดล้อมการสร้างเว็บแอปที่ ขยายต่อได้และสร้างความมั่นใจได้ อย่างต่อเนื่องผ่าน Signal Forms และ Angular Aria
- สามารถอัปเกรดเป็นเวอร์ชันล่าสุดได้ด้วยคำสั่ง
ng update
2 ความคิดเห็น
สำหรับภาษาหรือเฟรมเวิร์กที่ประสิทธิภาพของ LLM ต่ำลง เขาเลยให้บริการ MCP server แบบนั้นเพื่อยกระดับคุณภาพของคำตอบหรือเปล่าครับ
การรองรับ MCP server แบบทางการดูน่าสนใจดี ไม่แน่ใจว่า React ก็มีอะไรคล้าย ๆ กันไหม