มีอะไรใหม่ใน Angular 7 บ้าง

Angular 7 มาแล้ว !

Angular 7 มาแล้ว พร้อมกับของเล่นใหม่มากมาย โดยใน Official Post ของคุณ Stephen Fluin จั่วหัวเอาไว้ว่า

“เวอร์ชั่นนี้เป็นเวอร์ชั่นใหญ่ที่ครอบคลุมไปทั้ง platform ประกอบด้วย Core Framework, Angular Material, และ Angular-CLI โดยที่เลขเวอร์ชั่นจะถูกอัพเดทให้สอดคล้องกันด้วย”

สำหรับ theme ของรอบนี้นั้น เท่าที่ไปลองอ่านจาก issue ต่างๆใน GitHub มา จะออกไปทางด้านความเร็วและความเสถียรเป็นหลัก โดยเน้นให้สามารถใช้กับเวอร์ชั่นเก่าๆได้ (Backward Compatible) หรือถ้าจำเป็นต้องอัพเดทจริงๆ ก็ควรจะง่าย, รวดเร็วและไม่ปวดหัว เราไปดูกันเลยดีกว่าว่ามี feature ใหม่ๆอะไรบ้าง

มาเริ่มโดยการอัพเดทเวอร์ชั่นกันก่อน

ไม่ยากเลย ก็แค่

ng update @angular/cli @angular/core

เสร็จแล้ว ง่ายกว่าเมื่อก่อนเยอะ

สำหรับใครที่กำลังพัฒนา application ที่ซับซ้อนมากๆ หรืออัพเดทจากเวอร์ชั่นเก่าๆ ผมแนะนำให้ใช้บริการ Angular Update Guide ซึ่งช่วยได้มากในตอนที่ผมพยายามอัพเดทจาก Angular 4 เป็น Angular 6 ก่อนหน้านี้ แน่นอนว่าการอัพเดทเป็น Angular 7 ก็ถูก implement ลง Angular Update Guide แล้วเช่นกัน

ขึ้น Project ใหม่แบบชิวๆกับ CLI Prompt

ปกติเวลาขึ้น project ใหม่ด้วย Angular-CLI ผมมักจะลืมตั้งค่าให้ flag ต่างๆเป็นประจำ (เช่น flag สำหรับบอก CLI ให้ใส่ SASS หรือใส่ routing พื้นฐานมาให้ด้วย) ทำให้ต้องมานั่งลบสร้างใหม่ตลอด เพราะขี้เกียจไปไล่แก้แต่ละไฟล์เอง

CLI Prompt ที่เพิ่มมาใหม่ตัวนี้ทำให้เวลาเราสั่ง ng new หรือ ng add จะมีการถามเลยว่าอยากให้เพิ่ม feature อะไรลงไปไหม

มีถามใน Angular-CLI เลยไม่ต้องมานั่งจำ Flag

ลองเล่นโดยการลง CLI เวอร์ชั่นใหม่สุดก่อน

npm install -g @angular/cli@latest

นอกการจากใส่ CLI Prompt มาในเวอร์ชั่นนี้ เรายังได้ คู่มือการใช้ Angular-CLI ใน Angular.io มาอีกด้วย (ซักที)

เพิ่มประสิทธิภาพ

การเพิ่มประสิทธิภาพในเวอร์ชั่นนี้จะเน้นการแจ้งเตือนเรื่องขนาดของ bundle และการกำจัดขยะที่ไม่ได้ใช้ออกจาก production build ซึ่งส่วนตัวแล้วผมชอบมาก เพราะ developer ส่วนใหญ่มักจะลืมสิ่งเล็กๆน้อยๆที่สำคัญแต่ไม่แจ้งเตือนเป็น error กันประจำ

กำหนด Budget

เราสามารถกำหนดสิ่งที่เรียกว่า budget ใน angular.json เพื่อให้ CLI คอยเตือนเราเมื่อขนาด bundle ของเราใหญ่จนน่าเป็นห่วง หรือแม้กระทั่งแสดง error เมื่อใหญ่เกินจนรับไม่ได้

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

โดยเราสามารถดูขนาดของ bundle ที่ build ได้โดยใช้คำสั่ง ng serve

ขนาดใหญ่เกิน user ก็ต้องรอ load นาน

เอา reflect-metadata ออกจาก Production Build

ทีม Angular ค้นพบว่ามี developer หลายคนเผลอใส่ reflect-metadata (ซึ่งเอาไว้ใช้เฉพาะตอน development) ไปกับ production build ด้วย ซึ่งคราวนี้ Angular จะคอยเอาออกให้เราด้วยถ้าเราลืม

Angular Material

Angular Material ปีนี้มีอัพเดทใหม่ๆเยอะมาก รวมไปถึง https://material.io/ แบบใหม่ด้วย ซึ่งสำหรับผมแล้วเป็น design approach ที่โคตรเท่เมื่อเทียบกับเจ้าอื่น (คนชอบ Dark Theme น่าจะเข้าใจ)

มีความเท่แบบ Dark Theme

ถ้าใครใช้ Angular Material อยู่แล้ว หลังจากอัพเดทจะเห็นอะไรเล็กๆน้อยโดนปรับ ซึ่งพอรวมกันหลายๆอันเข้าก็ให้ความรู้สึกเหมือน application ของเราได้รับการปรับปรุงโฉมครั้งใหญ่เลยทีเดียว

ปรับเพียงเล็กน้อย แต่ส่งผลยิ่งใหญ่

Select แบบ Native ก็ใช้ Material ได้

เมื่อก่อนเวลาใช้ mat-form-field จะต้องใช้ mat-select ข้างในเท่านั้น แต่เวอร์ชั่นนี้เราสามารถใช้ select ธรรมดาซึ่งเป็น native element ได้ด้วย ซึ่งการใช้ของจาก native แทนนั้นทำให้ประสิทธิภาพของ application เราสูงขึ้นตามจำนวน select ทั้งหมดที่เรามีใน application กันเลยทีเดียว

CDK มาพร้อมของเล่นใหม่

Virtual Scrolling

CDK (หรือ Component Dev Kit) ตัวใหม่มี Virtual Scrolling มาให้ใช้แบบง่ายๆ โดยการ import ScrollingModule ใน component ของเราได้เลย ซึ่งเจ้า Virtual Scrolling นี้ทำงานโดยการแก้ไข DOM ตามการ scroll ของ user ซึ่งทำให้ application ของเราไวขึ้นมาก

<cdk-virtual-scroll-viewport itemSize="20">   
     <div *cdkVirtualFor="let item of itemsArray">{{item}}</div> 
</cdk-virtual-scroll-viewport>

ลอง inspect DOM ดูแล้วจะพบว่าลื่นขึ้นเยอะเพราะไม่มีการใส่ tag จนรก DOM อีกต่อไป

เพิ่มลด tag เองตามการ Scroll ของผู้ใช้

อ่านวิธีใช้เพิ่มเติมได้ที่ Angular Material

Drag&Drop

ตัวอย่าง Drag & Drop แบบง่ายๆ

นอกจาก Virtual Scrolling แล้ว CDK เวอร์ชั่นใหม่นี้เราสามารถสร้าง component ที่ต้องมีการ drag and dropได้ง่ายๆโดยการใช้ array ซึ่ง component ตัวนี้จะ render ให้เองแบบอัตโนมัติเมื่อเราเปลี่ยนแปลงค่าใน moveItemInArray กับ transferArrayItem

สร้าง div ครอบ 1 ที

แล้วเพิ่ม code ใน component เป็นอันเสร็จ

อ่านวิธีใช้เพิ่มเติมได้ที่ Angular Material

Angular Elements

ปกติผมไม่ค่อยนึกถึงการทำ Angular Element เท่าไหร่ เพราะมันจะเอาตัวเองไปแทรกที่ App ปลายทางเยอะ ทำให้ Standard เละไปหมด แล้วก็มาพบกับ

“Angular Elements now supports content projection using web standards for custom elements.”

— Stephen Fluin

เหยดดดดดดด

<my-custom-element>This content can be projected!</my-custom-element>

Dependency Update

มีการเปลี่ยนแปลงดังนี้

• TypeScript 3.1 เข้มข้นมากขึ้นไปอีกกับเวอร์ชั่น 3.1
• RxJS 6.3
• Node 10 แต่ 8 ก็ยังใช้ได้นะ

แล้ว Ivy ล่ะ?

Ivy หรือ Renderer ตัวใหม่ที่โคตรเร็วในตำนานนั้น ยังไม่มานะครับ (T_T) เวอร์ชั่นปัจจุบันมีให้ลองเล่นอยู่ แต่ว่าเป็นแค่ตัวทดสอบ ทาง Angular ยังไม่ได้นำมาใช้จริง

โชคดีเมื่อเดือนก่อนมี YouTube Live โดยคุณ Uri Shaked และผองเพื่อนทีม Angular เกี่ยวกับ Ivy ใครที่เสี้ยนมากๆก็สามารถไปดูเรียกน้ำย่อยกันไปพลางก่อน

สำหรับผมนั้นตั้งหน้าตั้งตารอคอยตัวนี้มาพักใหญ่ๆแล้ว อยากสัมผัสของจริงว่าจะแรงขนาดไหน

ทุกคนอยากได้ Ivy เพราะ April’s Fool ทำพิษ

เมื่อเดือนเมษาที่ผ่านมามี article เกี่ยวกับ Angular 7 และ feature ใหม่ต่างๆที่จะออกมาพร้อมกัน ซึ่งเป็นแค่การโกหกกันขำในเทศกาล April’s Fool (เมษาหน้าโง่) เท่านั้น แต่ก็มีบางคนเชื่อจริงๆเพราะมี article อื่นๆออกมาหลังเดือนเมษาแต่ใช้ content เดียวกัน และจนถึงตอน Angular 7 ออกมานี้ก็ยังมีหลายคน (รวมถึงผม) ที่คิดว่ามันจะมี Ivy ติดมาด้วย ขอบอกว่าโดนดักเต็มๆ เพราะงั้นเราควรรีบกระจายเรื่องนี้ออกไปก่อนที่จะมีคนโดนดักมากกว่านี้

โดยนอกจาก Ivy แล้วยังมี feature ดักอื่นๆอีก อย่างเช่น

• ng-compiler เวอร์ชั่นเขียนใหม่หมด
• แยก @angular/core ออกเป็น module ย่อย
• @aiStore เป็น AI สำหรับจัดการ store ใน ngrx อัตโนมัติที่รองรับกับ ngrx เวอร์ชั่นเก่าๆด้วย
• @angular/mine เอาไว้ขุด BitCoin ระหว่างที่ user ของเรากำลังใช้ application ที่เราพัฒนาด้วย Angular (รวยเละพอดี 555+)

สำหรับของใหม่ใน Angular 7 ก็มีเท่านี้ครับ โดยรายละเอียดเพิ่มเติมสามารถไปอ่านได้ที่ Official Blog ของ Angular

แล้วก็ขอฝาก blog แรกใน Medium ของผมและ blog ต่อๆไปในอนาคตด้วยนะครับ มีเรื่องเล่ามากมายที่อยากเขียนจากประสบการณ์ในงาน tech ทั้งเรื่อง การบริหารทีมด้วยระบบ Agile และ Scrum, แนวคิดในการเลือก tech stack สำหรับ product ประเภทต่างๆ, ดินแดนเสรีแห่ง Open Source, การออกแบบ infrastructure บน AWS หรือกระทั่งเรื่องการเล่นดนตรีและ Game Design และอีกมากมาย

(จะเยอะไปไหน)

ส่วนตัวตั้งใจไว้ว่าจะเขียน blog ด้าน tech ให้มากขึ้น อย่างน้อยเดือนละ 2–3 blog ถ้าเป็นไปได้ (หวังว่า) ยังไงก็ฝากติดตาม กด Follow กด Clap กันด้วยนะครับ