มีอะไรใหม่ใน Angular 11 และอะไรกำลังจะมา (What’s new, What’s next in Angular 11)

Siwat Kaolueng
9 min readDec 3, 2020

Original Link: https://perjerz.netlify.com/post/th-what-new-in-angular-11 (soon)

ในบทความนี้จะบอกคุณเกี่ยวกับ

  • การออก Version ใหม่ใน Angular
  • ของใหม่ใน Angular 11 (New) ที่น่าสนใจ
  • ของที่กำลังจะมา (Coming soon) ที่น่าสนใจ

มาเริ่มกันเลย

การออก Version ใหม่ใน Angular

ขณะนี้เป็นเวลา 4 ปีแล้วครับที่ Angular อยู่กับเรามาและในวันที่ 14 กันยายนเป็นวันคล้ายเกิดของ Angular

แฮปปี้เบิร์ดเดย์ย้อนหลังนะแองกูล่า 🅰️🎂🎉🥳

https://twitter.com/angular/status/1305565655811457024

Angular 2.0 ถูก Release ในวันที่ 14 กันยายน 2014 โดยการ Release ถูกแบ่งเป็น 3 ส่วนคือ major.minor.patchเช่น เวอร์ชั่น 7.2.11 หมายถึง

  • Major Version 7 — หมายถึงการเปลี่ยน Version ที่มีฟีเจอร์ใหม่ โดยที่พวกเราต้องรัน Script บางอย่าง, แก้ Code, ทดสอบ(Test) และเรียนรู้ API ใหม่
  • Minor Major 2 — หมายถึงการเปลี่ยน Version ที่มีฟีเจอร์ใหม่ขนาดเล็กถูกพัฒนาเพิ่มเข้าไปมี Backward Compatable แก้ Code เล็กน้อยเพื่อใช้ API ใหม่
  • Patch level 11 — หมายถึงการเปลี่ยน Version ที่แค่แก้บัค ไม่ต้องแก้ไข Code

Preview releases

Angular จะปล่อย Preview อะไรที่กำลังจะมาโดยแบ่งเป็น 2 ประเภทคือ Next และ Release Candidates (rc) สำหรับ Major และ Minor Release โดย

  • Next — อยู่ระหว่างการพัฒนาและทดสอบโดย tag ต่อท้ายด้วย-next เช่น 8.1.0-next.0
  • Release candidate — Feature สมบูรณ์อยู่ในช่วงทดสอบสุดท้ายโดย tag ต่อท้ายด้วย-rc เช่น8.1.0-rc.0

Document ล่าสุดของ Versionnext หรือrc อยู่ที่ next.angular.io.

Release Cycle

  • ทุก 6 เดือน Major Version จะถูกอัพเดท
  • มี 1–3 Minor Version สำหรับ Major Release
  • Patch release และ pre-release (next or rc) ถูกปล่อยเกือบทุกสัปดาห์

Support policy and schedule

มาพูดถึงการ Support แก้บัคต่างๆกันบ้าง

ทุก Major release ถูกดูแลเป็นเวลา 18 เดือน

  • 6 เดือนแรก จะเป็น active support จะเป็นการออก updates and patches ปกติ
  • 12 เดือนต่อมาจะเป็น long-term support (LTS) โดยแก้บัคเฉพาะช่องโหว่ความปลอดภัยหรือ Regression ที่เกิดจาก 3rd Party เช่น Browser ออก Version ใหม่
Angular — Angular versioning and releases

Angular versions ^4.0.0, ^5.0.0, ^6.0.0 and ^7.0.0 ไม่ได้ถูก Support แล้ว

จากตารางจะเห็นได้ว่า Version 8 จะหมด LTS ในวันที่ 28 พฤศจิกายนี้ต้องรีบอัพกันแล้วนะครับ ไม่ต้องพูดถึง 4,5,6,7 หมด LTS ไปนานแล้ว

ในขณะที่ทุกท่านกำลังเขียนโค๊ดกันอยู่ Hacker ก็ทำงานอยู่เหมือกันครับ คือหาช่องโหว่ ซึ่ง Hacker อาจเจอช่องโหว่ใน Dependency เก่าๆที่ Angular ใช้แล้วโจมตีทำให้ Web Application หรือธุรกิจท่านเสียหายได้

อ่านข้อมูลเพิ่มเติมได้ที่ Angular — Angular versioning and releases

ของใหม่ใน Angular 11 (New)

TypeScript

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html

TypeScript 4.0 เวอร์ชั่นเกือบล่าสุดมาแล้ว Version 4.0 นี้มีฟีเจอร์ที่น่าสนใจเช่น

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4–0.html#variadic-tuple-types
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4–0.html#variadic-tuple-types
  • Variadic Tuple Types (Variadic แปลได้ประมาณว่ารับได้หลายตัวๆ)
    Variadic — Wikipedia กล่าวคือตอนนี้ ใช้ Spread (…) กับ Generic ได้
    ที่เมื่อก่อนต้องเขียน Overload กันเหนื่อย
  • Labeled Tuple Elements ตั้งชื่อใน Tuple ได้
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#labeled-tuple-elements
  • unknown on catch Clause Bindings
    ทำให้ e ใน catch เป็น unknown แทน any เพื่อสร้างความเข้มงวดโดยให้เราไป type narrowing ใน runtime
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#unknown-on-catch-clause-bindings
  • Short-Circuiting Assignment Operators &&=, ||=, and ??=
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#short-circuiting-assignment-operators

เหมือน += -=

  • /** @deprecated */ Support
    support /** @deprecated * JSDoc comment แล้วขีดฆ่าให้ด้วย
  • Convert to Optional Chaining
https://typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#convert-to-optional-chaining

และฟีเจอร์อื่นๆ
อ่านต่อได้ที่ TypeScript: Documentation — TypeScript 4.0 (typescriptlang.org)

https://github.com/angular/angular/pull/39571#pullrequestreview-538074021

ส่วน TypeScript 4.1 เพิ่ง merge ไปสดๆร้อนๆ รอออ Release Version ต่อไป

Angular CLI

  • Angular Team เคลมว่า build ngcc ทุกครั้งที่เรา npm install (แปลง Code Libray ViewEngine เป็น Ivy Compatable) ได้เร็วขึ้น 2–4x faster และ Compile เร็วขึ้นด้วยความสามารถของ TypeScript 4.0
Version 11 of Angular Now Available | by Mark Techson | Nov, 2020 | Angular Blog
  • ตอน ng serve port ถูกใช้แล้วหรอ? ปัญหานี้จะหมดไปเพราะ Angular CLI จะถามว่าใช้ port อื่นแทนไหม
https://twitter.com/manekinekko/status/1327733156838043648/photo/1
  • หลัง ng build เสร็จรายงานผลลัพธ์ของ Chunks ไฟล์แบ่งประเภท จัดตารางให้อ่านง่ายขึ้น

Lint

  • Lint, Linter — static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs — Wikipedia ง่ายคือเป็นเครื่องมือไว้หา error ใน code เพราะมนุษย์ทำงานผิดพลาดได้
    ใช้คอมพิวเตอร์หรือโปรแกมหาความผิดพลาดให้เราดีกว่าซึ่ง Angular Team กำลังจะเลิกใช้ TSLint
https://github.com/palantir/tslint/issues/4534

ซึ่ง TSLint จะ deprecated แบบสุดแล้วธันวาคมนี้

https://github.com/angular/angular-cli/issues/13732#issuecomment-719724640

Hot Module Replacement(HMR)

แก้โค๊ดเท่าไหน Build ใหม่แค่ Component นั้นๆ ใน Development หลายคนน่าจะเบื่อเวลาเราแก้ Code แล้วต้องรอให้ CLI Build Project ขึ้นมาแล้วหน้าจอก็จะ Refresh (Live Reload) จะเห็นภาพชัดมากๆในโปรเจคขนาดใหญ่ที่ Build นานมาก (ทำ Lazy Load ช่วยได้เช่นกัน) แต่ด้วยเทคโนโลยี Hot Module Replacement จะช่วยให้คุณไม่ต้องเสียเวลารอ Refresh ทั้งหน้า โดยที่ตรงที่คุณแก้จะถูกแก้ไขแค่ส่วนนั้น

ดูตัวอย่างได้ที่ Using HMR in Angular 11 — YouTube

https://medium.com/echohub/implementation-of-hmr-hot-module-replacement-to-angular-project-f7bca523bd16

โดยที่สมัยก่อนถ้าหากคุณจะใช้ HMR รูปภาพด้านบนคือ Code ที่คุณต้องเพิ่มและแก้ลงไปเพื่อใช้งาน HMR ซึ่งก็ทำให้หลายๆคนขี้เกียจ Setup (หนึ่งในนั้นคือผม)

ด้วยพลังแห่ง Angular CLI 11 เพียงใช้คำสั่งด้านบนปสามารถใช้ HMR ได้เลย

Trusted Type

https://web.dev/trusted-types/

Trusted Type คือเครื่องมือที่จะมาช่วยป้องกันดักจับ DOM XSS (DOM Cross-site scripting) ซึ่ง DOM XSS คือช่องโหว่ความปลอดภัยติด OWASP 10 ที่เกิดขึ้นจากการที่ User ที่ใช้ Browser ส่งค่าอะไรบางอย่าง (ข้อความ input, URL จาก fragment #) เข้ามาที่ Browser เพื่อ Parse (เช่นeval()function เค้าถึงไม่แนะนำให้ใช้กัน, set .innerHTML)แล้ว Browser มันไปรัน JavaScript ที่ไม่พึงประสงค์ได้

ยกตัวอย่างเช่น เราสร้าง What You See Is What You Get (WYSIWYG)

File:Content full.png — Wikimedia Commons

แล้วมี Hacker ส่งข้อความมาให้เรา บอกให้เราไปสร้างบทความนี้ให้หน่อย ซึ่งส่วนใหญ่ข้อความจะเป็น HTML เพราะใส่สีจัดตัวหนาได้ ข้อความนั้นยาวมาก เราไม่ได้ดูละเอียด โดยที่เค้าแอบฝัง Script บางอย่างลงไป <script>send me your all local storages</script> ซึ่งเราก็กดปุ่มสร้างบทความ ซึ่งระบบนั้นอาจจะมีการ Preview ข้อความนั้นขึ้นมาโดยการ Parse HTML นั้นด้วยคำสั่ง .innerHTML = ข้อความมะกี๊ที่มี script แฝง โดยปราศจากการ Sanitization นำ script พวกนั้นออกก่อน
LocalStorage ของเราก็จะถูกส่งมาให้ Hacker นั้นทันที หรือถ้าแย่กว่านั้นระบบนี้เก็บข้อความนี้ไว้ใน Database โดยที่ไม่ได้ Sanitize แล้วมี User คนอื่นเข้ามาดูบทความนี้โดยที่หน้าแสดงบทความก็ยังคงต้องใช้ innerHTML = ข้อความนั้น ก็โดนขโมย LocalStorage เหมือนกัน

แล้ว Trusted Type เข้ามาช่วยยังไง กล่าวคือเมื่อ Browser เปิดฟีเจอร์นี้ Developer จะไม่สามารถanElement.innerHTML = 'ข้อความนั้นแล'; ได้ตรงๆอีก Browser จะฟ้อง Error

สิ่งที่ต้องทำก็คือไปครอบข้อความนั้นผ่าน Trusted Type ก่อนถึงจะสามารถใช้ข้อความนั้นได้ พูดง่ายคือใช้ Type System ป้องกัน XSS เข้าไป

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
createHTML: string => string.replace(/\</g, '&lt;')
});
}
const trustedHTML = escapeHTMLPolicy.createHTML('ข้อความที่มี Script');
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = trustedHTML; // '&lt;img src=x onerror=alert(1)>' // ผ่าน

โดยที่ Trusted Type นั้น Support Chrome 83+ Version เก่ากว่านั้นต้องใช้ polyfills

สามารถติดตามสถานะได้ภาพด้านล่าง

https://github.com/angular/angular/pull/39222

ปกติเวลาเรา binding เช่น [href], [innerHTML]=, interpolation {{}} Angular จะ escape หรือ sanitize ให้อยู่แล้ว แต่มี

กรณีที่เราบอกเฮ้นาย Angular ไว้ใจค่าที่เราส่งไปได้ไม่ต้อง Sanitize นะ

abstract class DomSanitizer implements Sanitizer {   
abstract bypassSecurityTrustHtml(value: string): SafeHtml
abstract bypassSecurityTrustStyle(value: string): SafeStyle abstract bypassSecurityTrustScript(value: string): SafeScript abstract bypassSecurityTrustUrl(value: string): SafeUrl
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl
}

เช่นกรณีก่อน upload รูป เราต้องการ Preview รูปนั้นก่อนซึ่งต้อง this.previewImage = URL.createObjectURL(event.target.files[0]); แล้วเราจะได้ blob:http//somewhere.com/abcdefg ที่ต้องไป binding กับ <img src=previewImage /> ซึ่งถ้าเราไม่ bypassSecurityTrustResourceUrl
Angular จะงงมันคืออะไรไอไม่เข้าใจต้องเป็น SafeResourceURL (extends จาก SafeValue) ใน console log มันจะแจ้ง

WARNING: sanitizing unsafe URL value blob:https://angular-blob-to-safe-url.stackblitz.io/a3b12df3-a1fe-4672-9f35-b3a857589dcc (see http://g.co/ng/security#xss)

แล้วถ้าไปดู image src จะพบว่ายังเป็น unsafe:blob:https://angular-blob-to-safe-url.stackblitz.io/a3b12df3-a1fe-4672-9f35-b3a857589dcc (see http://g.co/ng/security#xss) ทำให้รูปไม่ขึ้น

ตัวอย่าง
angular-blob-to-safe-url-n3k768 — StackBlitz

สรุปแล้ว Angular ไปเกี่ยวไงกับ Trusted Type ผมเข้าไปอ่าน Source code แล้วพบว่าหลังจาก Sanitize เสร็จแล้วจะทำการ wrap Trusted Type ซึ่งถ้าวันนึง Browser เปิด Trusted Type default เราก็ไม่แทบต้องทำอะไร ใช้งานได้ปกติ

angular/sanitization.ts at 2ae3fa009e60f627112ed4108a831d176fb384fd · angular/angular (github.com)

อ่านรายละเอียดเพิ่มเติมได้ที่ Angular — Security

ของที่กำลังจะมา (Coming Soon)

Angular DevTools

https://youtu.be/fM0BjroWGws?t=20344

Chrome Extension ใน Chrome Dev Tools พัฒนาโดยทีม Rangle กับ Angular Team โดย Minko Gechev (Software Engineer at Google) ออกมา Sneak Peek ให้ดูในงาน NG Rome ซึงรายละเอียดที่เปิดเผยออกมาคือมันถูกพัฒนาต่อยอดมาจาก Angular Augury (rangle.io) ที่เอาไว้ debug Angular ซึ่งอัพเดทล่าสุดเมื่อธันวาคม 2019 ผมเคยใช้แล้วรู้สึกเฉยๆ ดูในโค๊ดเอาเองดีกว่า แต่คิดว่าก็เหมาะไว้ดูภาพรวม Project ได้ ซึ่งตัว Angular DevTools ที่ออกใหม่นี้ความเจ๋งที่เพิ่มเข้าไปคือสามารถ Profiling ดู Change Detection Cycle ได้เหมาะกับ App ที่ต้องการ Optimize Performance
ตอนนี้อยู่ใน Stage Prototype ยังไม่ได้กำหนดวันปล่อยของ รอต่อไป

Experimental Webpack 5 Support

เปิดให้ลองใช้ Webpack 5 ได้เป็นแบบ Opt-in วิธีการคือใส่คำสั่งนี้ลงใน package.json

"resolutions": {
"webpack": "5.4.0"
}

ถ้าใช้ yarn ก็ใส่คำสั่ง yarnแล้ว ng build --prodได้เลย

ถ้าใช้ npm ต้องลง npm-force-resolutions เพื่อล็อค Version Transitive Dependency (Dependency ของ Dependency) ที่เราระบุใน Resolutions

npm install -D npm-force-resolutions

แล้วใส่คำสั่งข้างล่างลงใน package.json แล้ว npm iจะใช้ได้

...
"preinstall": "npx npm-force-resolutions",
...

Webpack 5 เคลมตัวเองว่าดีขึ้นยังไงบ้าง

  • Build เร็วขึ้นด้วย persistent caching
  • ปรับปรุง long term caching ด้วย algorithms/defaults ที่ดีขึ้น
  • ปรับปรุง tree shaking/better code generation ให้ดีขึ้น
  • ปรับปรุงให้เข้ากันได้ดีกับ Web platform

แต่ก็มีประเด็นอยู่

สมัยก่อน Webpack สามารถรัน Node.js Module ใน Browser ได้ด้วยพลังแห่ง polyfills แต่เพราะ Ecosystem พัฒนาไป หลาย Module ถูกเขียนเพื่อสำหรับ Web แล้ว (ESM) Webpack 5 เลย poloyfills เพื่อลด bundle size ซึ่งทำให้บาง Module ที่อาจใช้ Node.js Module อยู่ใน Web หรือ Angular ใช้งานไม่ได้ นั้นจงเป็นเหตุผลที่ทีม Angular เปิด Webpack 5 เป็น Opt-in และ Angular Team ไม่แนะนำให้รัน Webpack 5 ใน Production

และนี่ก็คือสิ่งที่เกิดขึ้นตอน Build Angular Project แบบเปล่าไม่ได้ลงอะไรเพิ่ม (ng new) ด้วย

Webpack 5 ใน Windows 10

Webpack 4.44.2ใน OSX

Build ด้วย Webpack 4.44.2

Webpack 5.4.0 ใน OSX

Build ด้วย Webpack 5.4.0

ใหญ่ขึ้น 23.65 kB ซะงั้น ?

รอไปก่อนครับ

The Microfrontend Revolution: Module Federation in Webpack 5 — ANGULARarchitects

Module Federation

เป็นอานิสงค์จาก Webpack 5 ที่สามารถให้เราใช้ฟีเจอร์นี้ได้ คำถามแล้วมันคืออะไรหละ

Module Federation คือการบอกว่าบางจุดใน Application เรานั้นยังมีจุดที่ยังไม่รู้ ณ เวลา Compile Time แต่เราจะโหลดอีก Module (เป็นอีกแอพย่อยหนึ่ง อาจจะมองว่า คล้ายๆแปะ iframe เข้ามา หรือหน้าแยกก็ได้) เข้ามา โดยที่ตอนโหลด Module เข้ามานั้น เราจะใช้ Dependency หรือ Library ร่วมกันที่มีอยู่แล้วใน Application หลักซึ่งทำให้ไม่ต้องโหลด Dependency ซ้ำซ้อน

https://github.com/angular-architects/module-federation-plugin/blob/main/packages/mf/README.md

ยกตัวอย่างเช่นจากรูปด้านบนเรามี Application run อยู่ที่ port 5000 แล้วในนั้นหน้าเรามี Application ย่อยที่อีกทีมพัฒนา port 3000(ทำ Microfrontend [แยกกันทำโดยอิสระจากกัน แต่ตอนรวมอาจจะมี Script บางอย่างเล็กน้อยเพื่อรวมกันได้])แล้วต้องการจะเอามาใส่ ซึ่งปกติใช้ iframe เราจะโหลด Bundle ซ้ำสองรอบทั้งของ Application หลักและ Application ย่อย แต่ Module Federation จะบอกให้เราระบุว่ามี Depedency ไหนบ้างที่ใช้ร่วมกันจะได้ไม่โหลดซ้ำซ้อน

อ่านรายละเอียดเพิ่มเติมได้ที่ The Microfrontend Revolution: Module Federation in Webpack 5 — ANGULARarchitects

Strictly Typed Reactive Forms

สิ่งนี้เป็นสิ่งที่ผมรอมานานแล้วกล่าวคือใช้ Type System มาลดความผิดพลาดในการสร้าง FormGroup, FormControl ได้เพราะตอนนี้เวลาเราจะเรียกใช้ FormControl จาก FormGroup เราใช้คำสั่ง form.get('key') ซึ่งมีโอกาสบ่อยมากที่เราพิมพ์ผิดใน key หรือ ตอนใช้ form.controls.key ใน template แล้ว Angular Language Service ยังไม่สามารถทำงานดักจับการพิมพ์ผิดของเราได้

ใน Angular Ecosystem พอจะมี Library ที่คนทำไว้อยู่บ้างแล้วเช่น

แต่ความรู้สึกผมคือสิ่งนี้มันควรจะทำมาจาก Reactive Form เองไม่ต้องมีใครมาครอบมัน ผมเลยไม่ได้ใช้ Library ข้างนอก รอวันที่ Angular Team support และวันนั้นใกล้มาถึงแล้ว

https://github.com/angular/angular/pull/38406

ติดตามสถานะได้จากลิงค์ด้านบน

Optional NgModules

https://github.com/angular/angular/issues/37904#issuecomment-731351748

NgModule เป็น Concept หนึ่งใน Angular ที่มือใหม่งงที่สุด ผมเคยงงมาก่อนเหมือนกัน มีหลายคนใน Ecosystem มีความเห็นว่าถกเถียงกันให้ NgModule ออกไป

ปัญหาของ NgModule คือทำหลายอย่างมากเกินไปกล่าวคือ

  • บอก Compilation Scope ให้ Angular Compiler ซึ่งจำเป็นทั้งตอน Development และตอนเขียน Unit Testing เพื่อที่จะลอง Environment ทั้งหมดใน Component ว่าต้องการ Depedency อะไรบ้าง ต้อง Mock อะไรบ้าง (ซึ่งก็มีแนวคิดเอา Dependency ไปแปะใน Metadata ของ Component ชื่อว่า deps อ่านต่อได้ที่ feat(core): introduce local scope & make NgModules optional in ivy by mgechev · Pull Request #27481 · angular/angular (github.com) ซึ่งสำหรับผมว่าแยก Depedency ออกมาอีกไฟล์ที่นามสกุล .module.ts ดีกว่าไปรวมทุกอย่างใน .component.ts)
  • ใช้ในการ Code-Splitting หรือ Lazy Load Feature (แก้ด้วย component level code-splitting แทนได้อยู่ใน Roadmap)
  • Configure Dependency Injection (คิดว่า Angular Team ควรจัดการตรงนี้)
  • จัดกลุ่มของฟีเจอร์ (แก้ด้วยแนวคิด Workspace แทน แยก Apps, Library ออกจากกัน แทนได้)

ส่วนตัวผมชอบแนวคิด NgModule ตัว NgModule เพิ่ม Declarative, Readability ในการบอกว่าใน Component นี้มี ใช้อะไรบ้างและให้ Component อื่นใช้อะไรบ้าง แต่แนวคิดนี้ต้องใช้ความขยันเล็กน้อยในการแยก 1 Component — 1 Module

https://twitter.com/mgechev/status/1330473521718435840

ซึ่ง Angular Team บอกว่าในอนาคตคงมีทางออกทั้งสองฝั่งสำหรับคนที่ใช้ และไม่ใช้ NgModule

Zone.js opt-out

Zone.js คือสุดยอดความสะดวกสบายที่ทำให้ Angular Developer ไม่ต้องเขียนโค๊ดเพิ่มในการ Sync Angular & DOM State เข้าด้วยกันผ่านการไปเรียก ChangeDetection (tick) อีกที
Zone.js ไป Monkey Patching async method เช่น setTimeout/Promise/EventTarget/EventTask(change, input, blur, …)…
อ่านรายละเอียดเพิ่มเติมได้ที่
angular/STANDARD-APIS.md at master · angular/angular (github.com)

ถ้าไม่มี Zone.js เราต้องคอย manual Sync Angular & DOM (detectChange, tick) เอง โค๊ดเราจะเต็มไปด้วย detectChange, tick

ซึ่งการมี Zone.js ก็แลกมาด้วยกับ Bundle Size ของ Polyfills ที่ใหญ่ขึ้นเล็กน้อยและ Debug ยากขึ้นเพราะ Stack Trace มี Zone เข้ามาเกี่ยวข้อง

ซึ่งใน use case ทั่วไป ข้อมูลบนหน้าจอไม่เยอะมาก ไม่ซับซ้อน Zone.js ทำงานตามปกติ Sync state ให้เรา ผู้ใช้ไม่รู้สึกกระตุก แต่ใน use case ที่หน้าซับซ้อนเราก็อยากจะจัดการเองไม่อยากให้ Zone.js ซึ่งคือ JavaScript รันเพราะมัน Block UI

Angular — NgZone

ทีม Angular ได้บอกวิธีปิด Zone.js ไว้แล้วแต่ความลำบากคือเราต้องจัดการ Change Detection ซึ่งทีม Angular กำลังออกแบบและเตรียมแผนให้กับคนที่จะออกจาก Zone.js ด้วยวิธีไม่ลำบากมาก ผมตั้งสมมุติฐานว่าใช้แนวคิด Reactive Push-base Architecture (RxJS, rx-state) แทนซึ่งก็ต้องไปเข้าใจ Reactive อยู่ดี

Moving off of Zones and building to target ES2018. · Issue #38782 · angular/angular (github.com)
angular with tsconfig target ES2017 async/await will not work with zone.js · Issue #31730 · angular/angular (github.com)

Zone.js ใน Angular มีปัญหาหนึ่งก็คือไม่สามารถขยับไป tsconfig build target ไป ES2017 ได้ (เพื่อใช้ความสามารถโดย Native Syntax ของ Browser) เพราะ native async/await ไม่สามารถถูก monkey patch ได้อย่างถูกต้อง เลยไปทำให้ RxJS ที่มีแผนจะขยับ target ไป ES2018 เพื่อลด Bundle Size และ Support AsyncIterable ไม่ได้ไปด้วย (ถ้า Angular จะใช้ RxJS version ใหม่) ตอนนี้ก็ได้แต่รอ

อ่านรายละเอียดเพิ่มเติมได้ที่ Angular Roadmap

ประวัติของผู้เขียน

Siwat Kaolueng เป็นที่ปรึกษาเรื่อง Web และ Angular ให้กับองค์กรขนาดใหญ่ไม่ว่าจะเป็นบริษัทรับทำการตลาดและบริษัทพลังงานชื่อดัง
โดยความตั้งใจคือส่งมอบวิธีการ แนวคิด เครื่องมือ สถาปัตยกรรม และลงมือปฏิบัติร่วมกับทีมพัฒนา เพื่อให้ Web Application สร้างได้เร็ว ดูแลต่อง่าย และใช้งานได้อย่างมีประสิทธิภาพ

สนใจให้ผมไปช่วยออกแบบสถาปัตยกรรม (Architecture) วิเคราะห์ แก้ปัญหา ทำ Web Application ที่ใช้ได้นานๆ หรือพัฒนา Skill คนในทีมติดต่อได้ที่ siwat.kaolueng@gmail.com หรือ Facebook JaMe Siwat Kaolueng

--

--