รู้เกี่ยวกับคุณสมบัติใหม่ล่าสุดของ Angular 9

ในบทความนี้ เราจะเรียนรู้ว่ามีอะไรใหม่ใน Angular 9 เวอร์ชันใหม่นี้เพิ่งเปิดตัวไปเมื่อวันที่ 7 กุมภาพันธ์ 2020

แม้ว่าการเปลี่ยนจาก 8 เป็น 9 ดูเหมือนจะเป็นก้าวที่ยิ่งใหญ่ แต่ v9 เป็นรุ่นที่ไม่ธรรมดาซึ่งรวมถึงการแก้ไขข้อผิดพลาดด้วย

ยิ่งไปกว่านั้น ยังมีฟีเจอร์ Angular 9 ที่น่าสนใจมากมายที่เราจะพูดถึงในบทความนี้

• การพัฒนาที่เป็นผู้ใหญ่ด้วย Angular
• คุณสมบัติในตัวของ Angular
• มือถือเชิงมุมและไอวี่
• การปรับปรุงการวินิจฉัยเชิงมุม
• Type-safe และ DI ใน Angular 9
• เกณฑ์มาตรฐานเชิงมุม

ปัจจุบัน Angular เป็นเฟรมเวิร์กโอเพ่นซอร์สที่สำคัญที่สุดสำหรับการพัฒนาแอปพลิเคชันมือถือและเว็บ

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

Angular มีโรดแมปใหม่ทั้งหมด โดยจะมีเวอร์ชันหลักใหม่ออกมาทุกๆ หกเดือน

นอกจากนี้ ทีม Angular ยังทำงานได้ดีมาก ดังนั้น API จึงไม่เปลี่ยนแปลงหรือไม่บ่อยเหมือนที่ทำจาก Angular 1 ถึง 2

นี่เป็นสิ่งที่ยอดเยี่ยมเพราะช่วยให้ทุกอย่างเป็นปัจจุบันด้วยคุณลักษณะล่าสุดและแนวปฏิบัติที่ดีที่สุดที่สนับสนุนโดย JavaScript และ TypeScript

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

คุณสมบัติที่สำคัญอีกประการหนึ่งที่เราจะเน้นคือคอมไพเลอร์ Ivy คุณจะได้รับแนวคิดที่ครอบคลุมเกี่ยวกับ Ivy และความสำคัญในอนาคตของ Angular ผลลัพธ์สุดท้าย: แก้ปัญหาต่างๆ เกี่ยวกับประสิทธิภาพของแอปพลิเคชันและบันเดิลขนาดใหญ่

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

รู้เกี่ยวกับประสิทธิภาพของ JavaScript และบันเดิล

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

หากคุณเปรียบเทียบ Angular กับไลบรารีอื่นๆ เช่น Vue หรือ React แอป Angular ก็ค่อนข้างดี

ในระหว่างรันไทม์ คุณจะไม่รู้สึกถึงความแตกต่าง แม้ว่าประสิทธิภาพของ Angular จะดี แต่เวลาในการโหลดจะใช้เวลามากเพราะแอปที่เรียบง่ายก็มีขนาดใหญ่เช่นกัน

ขนาดของบันเดิล JavaScript ยังให้ความรู้เกี่ยวกับปัญหาอื่นๆ มีหลายสิ่งให้เรียนรู้ด้วย Angular เนื่องจากเป็นกรอบงานที่สมบูรณ์พร้อมอุปกรณ์การพัฒนาในตัว ในขณะที่อื่นๆ
ไลบรารี JavaScript เน้นที่ส่วนประกอบมากกว่า

ทีมงาน Angular ทำอะไรได้บ้างเพื่อบรรเทาปัญหาที่เกิดจากไฟล์บันเดิลขนาดมหึมาในเวอร์ชันที่แล้ว??

ไม้เลื้อยเชิงมุมช่วยแก้ปัญหาต่างๆ

หนึ่งในคุณสมบัติที่สำคัญที่สุดที่รวมอยู่ใน Angular 8 คือการแสดงตัวอย่างของ opt-in Ivy

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

นอกจากนี้ยังทำหน้าที่แปลส่วนประกอบเป็นคำสั่งที่เปลี่ยน DOM (Document Object Model)

คอมไพเลอร์ Ivy ถูกซ่อนไว้ และมันยังใช้ ViewEngine กับ Ivy ได้สำเร็จด้วย แต่นั่นไม่ได้เปลี่ยนวิธีที่เราทำงานกับ Angular แต่สิ่งนี้ไม่ได้เปลี่ยนวิธีการทำงานกับ Angular ของคุณ

การเปลี่ยนแปลงนี้มีผลกระทบอย่างมากต่อโค้ดที่กำลังสร้างขึ้น

การแสดงตัวอย่าง Angular 8 ช่วยให้ผู้ใช้ทำงานได้อย่างง่ายดายด้วย Ivy เมื่อใช้กับบทช่วยสอน Angular 9 ปัจจุบัน Ivy เป็นหนึ่งในตัวแสดงภาพมาตรฐาน

หากตัวแสดงภาพใช้งานง่ายและมีประสิทธิภาพ หมายความว่าคุณสามารถสร้างโค้ดน้อยลงเนื่องจากไม่ต้องการคำแนะนำเพิ่มเติม

Ivy มีบันเดิล JavaScript ที่น้อยมาก ดังนั้นจึงแก้ไขจุดอ่อนทั้งหมดที่เกี่ยวข้องกับบันเดิลของ Angular

นอกจากนี้ Ivy จะเปลี่ยนทั้งเกมเนื่องจากจะนำแอปพลิเคชัน Angular ไปสู่ระดับใหม่อย่างสมบูรณ์ในแง่ของขนาดและประสิทธิภาพ

Ivy ไม่เคยเปลี่ยนวิธีการใช้งาน Angular แต่เปลี่ยนเทคนิคทั้งหมดของการสร้างแอป

ทีมงาน Angular ให้ความสนใจกับความคิดริเริ่มต่างๆ เช่น ไดเร็กเชียลโหลดโทมของจาวาสคริปต์สมัยใหม่ที่ผสานเข้ากับแองกูลาร์

ซึ่งหมายความว่ากลุ่ม polyfill ต่างๆ ถูกปรับใช้และพัฒนาร่วมกัน

แอพมือถือ Agile พร้อม Angular Ivy

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

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

ด้วยการลดขนาดของบันเดิล JavaScript ทำให้ Ivy กลายเป็นส่วนปรับปรุงที่น่ายินดีสำหรับนักพัฒนาที่ต้องการเร่งขั้นตอนการพัฒนาให้เร็วขึ้น

การปรับปรุงการวินิจฉัยเชิงมุม

ก่อนหน้านี้ Angular Compiler ได้สร้างทั้งการวินิจฉัย API ภายในและการวินิจฉัย TypeScript อย่างไรก็ตาม การวินิจฉัย TypeScript ได้ประโยชน์จากการปรับปรุงในปัจจุบัน ซึ่งไม่ได้นำไปใช้ในการวินิจฉัย API

แทนที่จะทำงานกับหลายรูปแบบ Angular 7 จะทำให้กระบวนการนี้ราบรื่นโดยสมบูรณ์โดยการแปลงการวินิจฉัย Angular TypeScript Compiler ทั้งหมดด้วยรูปแบบ TypeScript Diagnostics ที่คล้ายคลึงกัน

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

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

การอัพเกรดใน API Extractor

Angular ขึ้นอยู่กับไลบรารีซอฟต์แวร์ต่างๆ ที่พัฒนาแยกกัน

ผู้ใช้เชิงมุมจะไม่พลาดข้อบกพร่องที่อาจเกิดขึ้นและคุณลักษณะล่าสุดจะรวมอยู่ในไลบรารีของพวกเขา

ในการตอบสนอง Angular 9 จะอัปเดต API Extractor เป็นเวอร์ชันใหม่ล่าสุด

Angular ใช้ Bazel เป็นอุปกรณ์โอเพ่นซอร์สที่ช่วยให้สามารถทดสอบซอฟต์แวร์และการสร้างระบบอัตโนมัติได้

Bazel เป็นเครื่องมือที่เกี่ยวข้องกับเวลาในการสร้างโดย Toolchain เชิงมุม

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

ไม่ใช่การอัปเดตที่น่าตื่นเต้นเลย เนื่องจากฟังก์ชันต่างๆ เช่น ตัวแยก API และการปรับปรุงบริการภาษาเป็นประจำซึ่งทำให้กรอบงานมีประสิทธิภาพและประสิทธิผล

มีอะไรในอนาคตของ Angular?

ด้วยการเริ่มต้นของ Angular 9 ชุมชนสามารถได้รับประโยชน์จากแอปพลิเคชันขนาดเล็กไปจนถึงแอปพลิเคชันที่มีประสิทธิภาพสูง และประสบการณ์ของนักพัฒนาจำนวนมาก

นักพัฒนายังมีโครงสร้างโปรเจ็กต์ที่แม่นยำยิ่งขึ้น เช่นเดียวกับไวยากรณ์ของคลีต

ทีมงานของ Angular คาดการณ์เช่นกันว่าไม่มีข้อกำหนดสำหรับการเปลี่ยนแปลงที่สำคัญใน APU

มีการเลิกใช้งานเพิ่มเติมและวิธีการอื่นในการสร้างส่วนประกอบหรือไม่?

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

ทีม Angular ยังช่วยให้คำแนะนำในปัญหาคอมไพเลอร์แบบคงที่และแพ็คเกจโมดูลอีกด้วย

ในระหว่างกระบวนการนี้ ทีมงานยังได้โยกย้าย Terser แบบย่อขนาดเพื่อให้แยกวิเคราะห์ได้ดียิ่งขึ้นสำหรับคอมไพเลอร์ Ivy ตามคำแนะนำของทีม Angular

หากคุณต้องการสร้างแอพมือถือโดยใช้ AngularJS Mobile App Development ก็เป็นเวลาที่เหมาะสมในการติดต่อ Elsner