Angular คืออะไร เหมาะกับใคร งานแบบไหน
บทความนี้จะทำให้คุณเข้าใจ
- ภาพกว้างของ Angular
- เหมาะกับใคร งานแบบไหน
- ใครใช้อยู่บ้างในไทยและต่างประเทศ
- ไม่เหมาะกับงานแบบไหน
มาเริ่มกันเลย
ภาพกว้างของ Angular
ถ้าพูดถึง Technology ที่ทำ Singe Page Application (SPA) แล้ว Angular เป็นหนึ่งในตัวเลือกที่ดีในการสร้าง Web Application
จากรูปด้านบนแสดงให้เห็นถึงการนำ Angular ไปสร้าง Web Application
แกน Y บ่งบอกถึงผู้ใช้งาน (User) Web Application ยิ่งสูงแปลว่าผู้ใช้งาน Application จำนวนมาก
แกน X บ่งบอกถึงจำนวน Application ที่ถูกสร้างยิ่งชิดขวายิ่งมี Application จำนวนมาก
จากกราฟเราก็จะเห็นได้ว่ามีไม่กี่ Application บนโลกหรอกที่ผู้ใช้จำนวนมากระดับพันล้าน (นับมือได้เลย) ซึ่งจะเห็นพื้นที่ใต้กราฟว่าไม่มีสีแดงซึ่งหมายถึงไม่มี Angular Application อยู่ในนั้น
แต่ถ้าเป็น Web Application ที่ใช้ในองค์กรขนาดใหญ่ (Enterprise) ที่มีผู้ใช้ประมาณ 100–100,000 คน (มีบริษัทในไทยมีพนักงาน 1,000,000+ คน ทักมาบอกผมหน่อย) พื้นที่ใต้กราฟสีแดงจะเข้มมากนั้นหมายถึง Angular ถูกนำไปใช้สร้าง Web Application เพื่อใช้แก้ปัญหาทางธุรกิจ
ในทำนองเดียวกัน Web Application ขนาดเล็กหรือกลางที่มีผู้ใช้งาน 1–99 คน Angular ถูกนำไปใช้สร้างเครื่องมือเพื่อแก้ปัญหาหรืออำนวยความสะดวกบางอย่างเช่นกัน
Angular เหมาะสำหรับทำ Web Application “ใช้ในองค์กร” ทั้งขนาดเล็ก กลาง และใหญ่ แต่เหมาะที่สุดกับองค์กรขนาดใหญ่
ซึ่งผมจะอธิบายในหัวข้อถัดไปว่าทำไม Angular ถึงเหมาะ
Framework
Angular นั้นเป็น Web Framework นั้นหมายถึงมีเครื่องมือครบทุกอย่างให้แล้วเพียงพอที่จะใช้สร้าง Web Application ขึ้นมาโดยไม่จำเป็นต้อง
“เลือก” ใช้อะไรเพิ่ม “เอง” ซึ่งต่างจากแนวคิดของ Library ที่คุณจะต้องเลือกเครื่องมือประกอบ “เอง” ทั้งหมด ซึ่งคุณต้องมีความ “เชี่ยวชาญพอ” ที่จะเลือกของให้เหมาะกับงานของคุณ
จากรูปด้านบนจะเห็นได้ว่า Angular มี Tools ครบแทบทุกอย่าง
- Protactor & Karma — ทำ End-to-End Testing
- Forms — สร้าง Validation ให้กับ Form
- PWA — สร้าง Progress Web Application
- Augury — Chrome และ Firefox Dev Tools สำหรับ Angular apps
- Language Services — Protocol ที่ช่วยให้ Editor สามารถใช้ Auto completion, บอก Errors, Hints, และ Navigation (Go to definition)ใน Angular templates (HTML)
- Router — สร้าง Application หลายๆหน้าโดย Wrap History API ของ Browser ให้
- Elements — สร้าง Web Component ด้วย Angular เพื่อเอาไปใช้นอก Angular ได้
- CDK (Component Development Kit) — เครื่องมือสำหรับสร้าง Component เช่น Virtual Scroll, Table, Drag & Drop
- Universal — ทำ Server Side Rendering (SSR) ใน Angular
- Labs — โปรเจคทดลองใน Angular
- Compiler — Compile code ที่เราเขียนเป็น HTML, CSS, JavaScript ที่ Browser เข้าใจ
- i18n — Internalization สำหรับทำ Application หลายภาษา
- Http — สำหรับยิง Http Request โดย Wrap XMLHttpRequest(XHR)
- Material — Material Design Component ใน Angular
- Animations — สำหรับทำ Animation ใน Angular โดย Wrap CSS Transition
- CLI — Command-line interface สำหรับสร้าง App, Libray, Component, Service, Pipe, Directives และอื่นๆ
Tools ทุกอย่างนี้ถูกสร้างและดูแลโดย Google เอง ทำให้มั่นใจได้ในระดับนึงว่ามันจะยังถูกดูแลโดยสุดยอด Software Engineer และเรายังสามารถใช้งานมันต่อไปได้นานๆ
TypeScript
TypeScript พิสูจน์ตัวเองแล้วว่ามันช่วยให้ Software ที่เราสร้าง สามารถถูกดูแลในระยะยาว (Maintainability) จากการมี Type System ในการ
- ลดระยะเวลาในการอ่านและทำความเข้าใจ Code (Readability)
ทำให้ Abstraction นั้นชัดเจน (Explicit) ได้ เช่นตั้งชื่อตัวแปร user ถ้าหากไม่มี TypeScript เราก็ต้องไปเช็คเองว่าใน user มีอะไรกันแน่แต่ถ้ามี TypeScript เราสามารถรู้ได้เลยว่าใน user มีอะไรบ้าง - ทำให้เราได้ใช้ความสามารถของ Autocompletion ได้ Editor, Go to definition ย้อนกลับไปต้นทางของ Type, Refactor Type เพียงดีดนิ้ว และ แจ้ง Error นะ Compile time เพื่อลด Error ณ Runtime บางส่วนออกไปได้ นี้ยังไม่รวมถึงใช้ฟีเจอร์ใน EcmaScript ที่กำลังจะออกใหม่ก่อน
Angular ถูกสร้างโดย TypeScript ตั้งแต่แรกซึ่งนั้นทำให้ Angular เป็น Framework ที่ Support TypeScript มากที่สุด ทำให้เราสามารถใช้โดยไม่รู้สึกสะดุดเลย
ซึ่งนั้นทำให้ Angular และ TypeScript เหมาะกับโปรเจคขนาดใหญ่
อ่านเพิ่มเติมได้ที่
Angular: Why TypeScript?| by Victor Savkin | Angular (vsavkin.com)
จริงแล้ว Angular เองนั้นทำให้ TypeScript โตขึ้นมาก แต่ในมุมมองผมคือ TypeScript ก็ช่วยทำให้ Angular โตขึ้นเหมือนกัน
Oh, it was definitely Google announcing that they were going to use TypeScript with Angular. That’s kind of lost to time now. But if you look at the graphs for TypeScript, literally any graph — GitHub stars, downloads, pull requests — you can see the exact point when that Angular announcement came out. And the graph just changes. It never looks back. You can’t see that little bend in the curve anymore because the curve kept going. That was a real inflection point. And I think it’s been interesting that people thought at the time that TypeScript was going to be just what Angular people use and not much else. That didn’t turn out to be the case. Obviously, we’re still popular among Angular devs. But that was a real momentum builder for us.
Ryan Cavanaugh, Principal Engineering Lead TypeScript language at Microsoft
Talking TypeScript with the engineer who leads the team — Stack Overflow Blog
Opionionated vs Unopinionated
Opinionated มันคืออะไรกันนะ?
Opinion แปลว่าความเห็น เติม -ated กลายเป็น Adjective แปลได้ประมาณว่า “ที่มีความเห็นลงไป” เกี่ยวกับอะไร Angular นะ?
Angular เป็น Framework ที่มีเครื่องมือให้คุณใช้งานชัดเจน มีบางส่วนที่คุณเลือกหรือใส่ความเห็นได้เองบ้าง แต่เครื่องมือหลักๆ Google จะจัดไว้ให้แล้ว ความหมายคือ Angular Team ใส่ความเห็นลงไปว่าคุณควรจะใช้ Tools, Concept, Syntax, Design Pattern เหล่านี้ที่ทีมสร้างให้ ไม่ต้องไปเลือกหรือใส่ความเห็นตัวเองว่าจะใช้อะไรแทน Tools, Concept, Syntax, Design Pattern เหล่านั้น
แล้วมันดียังไง?
ในการทำ Software ในองค์กรขนาดใหญ่ ที่มีหลายทีมรวมแล้วกว่า 500 คน “ถ้า”แต่ละทีมสร้าง Software ของตัวเองโดยใช้ Tools ตามใจชอบ, ไม่มี Standard หรือ Best Practices ร่วมกัน ในการหมุนเวียนคนทั้งคนในด้วยกันเองหรือคนเข้าคนออก (Turnover) ผลลัพธ์ที่ตามมาคือจะต้อง “ใช้เวลามากขึ้น” ในการสื่อสารเพราะต้องทำความเข้าใจกับ Tools, Standard และ No Practice ใหม่ที่ไม่คุ้นชิน
แต่ถ้า “มีความเห็นลงไปตั้งแต่แรก”เลยจาก Framework ว่าในการแก้ปัญหาเรื่องนี้ “เรารู้กันตั้งแต่แรก” ว่าเราจะใช้เครื่องมือ, Standard หรือ Best Practice นี้ย่อมช่วยลด “เวลา” ไปได้เลยในการที่จะ Onboard คนใหม่เข้ามาในโปรเจ็ค
https://blog.nrwl.io/12-things-to-help-large-organizations-do-angular-right-f261a798ad6b
Dependency Injection & Object Oriented Programming & Type System
Angular นั้นมี Dependency Injection, Object Oriented Programming และ Type System (TypeScript) Concept เหมือนกับภาษา .NET (C#), Java ที่ใช้แพร่หลายใน บริษัทขนาดใหญ่ (Enterprise) และใช้กันมานานแล้ว
Depedency Injection
เป็นหนึ่งในเทคนิคของ inversion of control (I) ซึ่งอยู่ใน SOLID Principles มาจากหนังสือ Design Pattern ของ Gang of Four (GoF) ที่ว่าด้วยเรื่องของการออกแบบ Software ให้เข้าใจง่าย ยืดหยุ่น และดูแลต่อสบายใน Object Oriented Programming
โดยที่ความตั้งใจของ Dependency Injection คือได้มาซึ่ง Seperation of Concerns
ของการสร้างหรือใช้ Object Instance เพื่อ Readability และ Reusability
โดยการแยกสร้าง Dependency Object นั้นใน Class ที่จะต้องการจะใช้งานมัน
ทำให้การสร้าง Dependency Object ใน Class นั้นตรงๆมันเปลี่ยนไม่ได้ และทำให้ Test ยากเพราะว่า Dependency Object นั้นไม่สามารถถูกแทนที่ด้วย Mock Object
แต่ถ้าเราเปลี่ยนว่าใน Class นั้นๆเราขอ Dependency Object ตามนี้ไม่สนใจว่าจะได้มายังไงให้ หามาให้เอง ทำให้เรา Test ง่าย
ซึ่งใน .NET(C#), Java มีเทคนิคนี้เหมือนกัน
Decorator Pattern
Decorator Pattern เป็น 1 ใน 23 pattern ใน หนังสือ Design Pattern ของ Gang of Four (GoF) ซึ่งว่าด้วยเรื่องของการออกแบบ Software ใน Object Oriented Programming ซึ่งทำให้เราเพิ่มความสามารถของ Object, Class, Function ได้ด้วยการไปแปะไว้ที่ Decorator (Annotation) ไว้ที่หัวของสิ่งๆนั้น
จากตัวอย่างข้างบน เรามี AppComponent Class ซึ่งเป็น JavaScript Class ธรรมดาที่มี Member, Methods ทั่วไปแต่บนหัว Class เราไปแปะ @Component
เพื่อเพิ่มความสามารถ Class แล้วบอกว่า Class นี้คือ Component ที่มีรายละเอียด selector, HTML, SCSS ตามที่ระบุ
และจริงเราสามารถเขียน Decorator เองได้เช่น
เขียน Decorator แล้วแปะเพื่อให้ Function รันนอก Zone
Type System (TypeScript)
จากที่เคยได้กล่าวไว้ในย่อหน้าข้างบน Type System ช่วยให้เราทำงานได้มีประสิทธิภาพมากขึ้น ลดความผิดพลาด ดักจับข้อผิดพลาด ลดเวลาการสื่อสาร Refactor, Go to Definition ได้อย่างสะดวกสบายซึ่งเป็นเรื่องที่คุ้นชินกันอยู่แล้วใน Enterprise ที่ใช้ .NET C# หรือ Java Developer เพราะพลังของ IDE
จึงเป็นเรื่องง่ายขึ้นที่จะ Transfer Backend .NET C# หรือ Java Developer มาเป็น Angular Developer เพราะแนวคิดคล้ายๆกัน
อย่างไรก็ดีต้องเสริมความรู้ JavaScript หรือ TypeScript เพราะตัวมันเขียนได้หลายแบบ (Multi-paradigm) เช่นเราสามารถใช้ Functional Programming (Declarative — บอกว่าเราต้องการอะไรโดยไม่สนใจว่าทำยังไง) เข้าไปแก้ปัญหาบางอย่าง ทำให้อ่านโค๊ดได้ง่ายกว่า (map, filter, reduce) แทนการเขียนโค๊ดแบบ Procedural Programming (Imperative — บอกวิธีการเอง step by step เพื่อได้สิ่งที่ต้องการ), บางส่วนออกแบบเป็น Class ใช้ (Object Oriented Programming) เพื่อซ่อนความสามารถบางอย่าง (Encapsulation) และให้ใช้ผ่าน Public API เท่านั้น
แต่ละแนวคิดมีข้อดีข้อเสียของมัน ต้องเลือกให้เหมาะกับงาน
Angular CLI
สุดยอดเครื่องมือของ Angular ที่ช่วยให้
- สร้าง Project ผ่านคำสั่ง ng new
- สร้าง(Scaffolding) Component, Module, Service, Pipes, Service Worker และอื่นๆ ผ่านคำสั่ง ng generate
- เพิ่ม Library ผ่านคำสั่ง ng add โดยแก้ไข Code เราให้เรียบร้อยแทบไม่ต้อง Configure เพิ่ม
- สั่ง Linter ng lint
- สั่ง Test ng test
- ใช้ในการ Build, Serve ผ่านคำสั่ง ng build , ng serve โดยตัวมัน Abstract (ละไว้ในฐานที่เข้าใจ) ความซับซ้อนของ Webpack ไว้ให้
- Deploy Angular Application เข้าไปยัง Hosting ต่างๆเช่น (AWS, Github Pages, Vercel, Azure, Firebase Hosting
- อัพเกรด Version ของ Angualr Apps ผ่านคำสั่ง ng update
โดยปัจจุบันอัพเดทง่ายและรวดเร็วขึ้นมากเมื่อเปรียบเทียบกับเมื่อก่อน โดยรูปด้านล่างแสดงถึงการใช้เวลาอัพเกรด Version ใน Angular Application ของสายการบิน Air France KLM พบว่าเมื่อก่อนใช้เวลาเป็นเดือนแต่เมื่อ Version 7 ใช้เวลาเป็นวัน และ Version ปัจจุบัน 10 ไป 11 ใช้เวลาเป็นหลักชั่วโมง(ขึ้นอยู่กับความซับซ้อนของโปรเจค)
อ่านต่อเพิ่มเติมได้ที่ How we upgraded a website with half a billion annual users to Angular 7 in less than a day | by Mart Ganzevles | airfrance-klm | Medium
มีใครใช้ Angular บ้าง
แน่นอนคนสร้างก็ต้องใช้เองสิ Google ไง
จากรูปด้านบนใน Google เองนั้นใช้ Angular ในการสร้าง Web Application มากถึง 2600+ apps และนี่ยังหมายถึงการการันตีเวลาออกเวอร์ชั่นใหม่นั้นจะต้องทำให้ 2600+ apps ยังทำงานได้ปกติเปรียบเสมือนเป็น Test Suite ชั้นดีเลย
สามารถดูรายละเอียดเพิ่มเติมได้ที่ https://madewithangular.com/categories/google/
แล้วถามว่ามี Product ดังๆหรือบริษัทอื่นที่เชื่อถือ Angular แล้วนำมันไปใช้สร้าง Web Application มีตัวอย่างบริษัทดังนี้
- Firebase, Google Cloud Platform
- Microsoft มี Xbox และ Office Home ที่ใช้ Angular
- Playstation ใช้ Angular & NgRx ทำ Internal Tools https://twitter.com/kyledcannon/status/1165808928149491713
- American Airlines มีคนไทยทำงานอยู่ด้วย
- VMWare สร้าง Clarity Design System https://clarity.design ใช้ในองค์กร
- Deusche Bank สร้าง Design System และทำ Portal https://developer.db.com
- Citibank สร้าง Design System ใช้เอง
- Delta
- Capital One Angular — Capital One Tech — Medium
- Alibaba, Thoughtwork at China NG-ZORRO — Angular UI component library (ant.design)
แล้วในประเทศไทยหละมีบริษัทอะไรบ้าง
- Allianz Technology Thailand — Allianz Technology in Thailand | Facebook
สร้าง UI Library (Design System) Aquila Components (aposin.github.io) - Seven Peaks Software — Software Development & UX UI Design services — Seven Peaks Software
- FlowAccount — โปรแกรมบัญชี ออนไลน์ สำหรับนักธุรกิจยุคใหม่ (flowaccount.com)
- ScoutOut — สเกาท์เอาท์ | ระบบหาคน คัดกรอง และ ATS ในแพลตฟอร์มเดียว (scoutout.co)
- KBTG — KASIKORN Business — Technology Group (kbtg.tech)
- Builk One — BUILK ONE GROUP — BUILK ONE GROUP
- Exzy — EXZY Company Limited | Facebook
- Krungsri Auto — กรุงศรี ออโต้ (krungsriauto.com)
- ODDS — ODDS (facebook.com)
- ITOPPLUS — บริษัทรับทำการตลาดออนไลน์ E-Marketing ครบวงจร|ITOPPLUS
- RIS Central Group — RIS Central Group (facebook.com)
- H-LAB — H LAB | Re-Engineering the Healthcare System (hlabconsulting.com)
- เราเที่ยวด้วยกัน | หน้าแรก
- และอื่นๆอีกมากมาย
สิ่งที่น่าสังเกตคือส่วนใหญ่บริษัทที่ใช้จะเป็นองค์กรขนาดใหญ่เช่นธนาคาร (Finance), สายการบิน(Airline), ประกัน(Insurance) ซึ่งผมมีสมมุติฐานได้ว่าบริษัทเหล่านี้ไม่สามารถรับความเสี่ยงของการเปลี่ยนแปลงของเทคโนโลยีได้มากเพราะถ้าหากเกิดปัญหาแล้วความเสียหายที่เกิดทางธุรกิจนั้นสูงกว่า(เรื่องเงินทองหรือชีวิตคน)
Angular เป็น Framework ที่เครื่องมือย่อยๆ (Library) ถูกดูแลโดย Google เอง ทำให้ความเสี่ยงต่ำ
Angular จึงเหมาะกับองค์กรขนาดใหญ่ (Enterprise) ที่ต้องลดความเสี่ยงจากการเปลี่ยนแปลงของเทคโนโลยีในโลก JavaScript (เปลี่ยนแปลงอยู่ทุกวี่ทุกวัน)
สนใจให้บริษัทของท่านอยู่ใน Website ด้านบนท่านสามารถส่ง Pull Request ได้มาที่ AngularThailand/who-use-angular-in-thailand (github.com)
แล้ว Angular ไม่เหมาะกับบริษัทขนาดเล็กหรือกลาง (SMEs) หรอ?
บริษัทขนาดเล็กและกลาง (SMEs) สามารถใช้ประโยชน์ของ Angular ได้เหมือนกันในการที่ทำ Software ที่มีความคงทน ใช้ได้ในระยะยาว 2–10 ปี (ถ้า Google Cloud Platform ยังอยู่ Angular ก็ยังอยู่เช่นกัน)
คงไม่มีใครอยากทำธุรกิจหรือทำ Software ไม่นานแล้วทิ้งขว้าง เราคงอยากให้ธุรกิจหรือ Web Application ของเราทำงานไปได้นาน สร้างรายได้สำหรับจ่ายเงินเดือนพนักงานทุกคน และสร้างกำไรคืนให้กับบริษัทและนักลงทุน
แล้วโปรเจคขนาดเล็กทำใช้แค่ 1 วัน — 5 เดือนหละเช่น
- ทำ MVP ในงาน Hackathon
- เราเที่ยวด้วยกัน(เราเที่ยวด้วยกัน.com)
ความสำคัญของโปรเจคขนาดเล็กคือความเร็วในการพัฒนา
Angular เป็นหนึ่งตัวเลือกที่ดีด้วยคุณสมบัติของการเป็น Framework ที่ของครบไม่ต้องคิดหรือเลือกเยอะ Setup มาให้แล้วตั้งแต่สร้างโปรเจค (ng new) ยัน Deploy (ng deploy) ลดเวลาการสื่อสาร
อย่างไรก็ดีมักมีคนตั้งข้อถกเถียงว่า Angular ใช้เวลาเรียนรู้สูง (Learning Curve สูง) เพราะเป็น Framework มีเครื่องมือ, แนวคิด (Concept) เยอะ ซึ่งผมมองว่าถึงคุณจะใช้ Library เล็กๆเช่น React คุณก็ต้องเรียนรู้แนวคิดนั้นๆเหมือนกันไม่ว่าจะเป็น Functional Programming, Virtual DOM, JSX, Hook, หรือ Library Form (Formik), Router (React Router) คุณต้องเข้าใจมันอยู่ดี
เรียนรู้(แนวคิดหรือเครื่องมือ)เท่าที่ใช้ซิ
เช่นคุณยังไม่เข้าใจ RxJS แปลงมันเป็น .toPromise() (ในอนาคตแก้เป็น lastValueFrom(), firstValueFrom() แล้ว) หรือคุณเข้าไม่เข้าใจ ReactiveForms ก็ใช้ Template Driven Form ไปก่อน [(ngModel)] แต่อย่าลืมไปว่าคุณ Lost ความสามารถของเครื่องมือไป
แต่ละแนวคิดมีข้อดีข้อเสียของมัน ต้องเลือกให้เหมาะกับงาน
แล้ว Angular ไม่เหมาะกับงานแบบไหน
ไม่ใช่ทุกเครื่องมือที่เหมาะกับทุกงาน (One size fit all) เราคงไม่เอารถ Backhole ไปขนสินค้าส่งของ เราคงต้องใช้รถจักรยานยนต์หรือรถบรรทุกแทนไปตามความเหมาะสม เราคงใช้รถ Backhole ขุดดิน ทุบถนน
กลับมาที่รูปเดิม อย่างที่รู้กันว่าแทบไม่มี Angular Web Application ที่มี User ล้านคนขึ้นไปใช้ แล้วคำถามคือคุณสมบัติของแอพที่มีผู้ใช้จำนวนมากมีเหมือนกันคืออะไรกันนะ? คำตอบคือ
- โหลดตอนแรกเร็ว
เว็บอะไรบ้างที่ต้องโหลดตอนแรกเร็วเช่นเว็บข่าว, E-Commerce
แล้วอะไรทำให้โหลดตอนแรกเร็วบ้าง แน่นอนไฟล์ HTML, CSS, และ JavaScript (Bundle Size) ยิ่งใหญ่ ยิ่งต้องรอโหลดนาน นี่ยังไม่รวมเวลาตอน Parse อีกกว่า User จะได้ใช้ Application (Time-to-interactive) ซึ่งอันนี้เป็นข้อจำกัดของ Client-Side Rendering (ให้ Browser Render) วิธีการแก้คือลดขนาดของไฟล์ HTML, CSS, JavaScript ซึ่งหลักๆจะเป็น JavaScript มากกว่า (ใช้ Service Worker, Browser Caching เพื่อไม่ให้โหลดใหม่, CDN ยิ่งใกล้ยิ่งเร็ว อันนั้นเป็นอีกประเด็น)
ซึ่งด้วยความที่ Angular มีเครื่องมือมาครบ มีของให้ใช้ไม่ต้องเขียนเอง
ยกตัวอย่างเช่น
เรามี HttpClient ใน Angular ที่เป็น Abstraction หนึ่งสำหรับการส่ง XMLHttpRequest ช่วยให้เรา Configuration params, XSRF Token, ใช้ความสามารถร่วมกับ RxJS
เปรียบเทียบกับเราใช้ native XMLHttpRequest (xhr)xhr.open('method, url[, async[, user[, password]]]') ซึ่งเราต้องเข้าใจและเขียนโค๊ดเยอะ
หรือใช้ natvie fetch เล็กดี โค๊ดน้อย แต่เรามีข้อจำกัดคือไม่มี Upload Progress
หรือใช้ Libraryaxios ซึ่ง wrap xhr ซึ่งเขียนน้อยกว่า native xhr แต่ไม่ได้ใช้ความสามารถของ RxJS เช่น debounceTime, Type Ahead (switchMap) ถ้าจะทำต้องเขียนเองอีก
สุดท้ายแล้วเราต้องชั่งน้ำหนัก(Trade-off) เองว่าเราเขียนโค๊ดเองเราควบคุมปริมาณโค๊ดที่เราเขียนได้เพราะเรารู้ว่าใช้แค่ไหน Customize เองได้ แต่แลกมาด้วยเวลา ที่เราต้องเขียนเพิ่มเองและต้องเขียนเป็นด้วย
แล้วบางกรณีคือเขียนเองเกือบทุก use-case เท่ากับว่า ทำ Library ขึ้นมาเองเลย
แล้วทำไมเราไม่ใช้เครื่องมือที่เค้าให้มาอยู่แล้วหละ? จัดการ Router เองคงไม่สนุก, ทำ Dynamic Reactive Form Validation เองคงเหนื่อย
แต่ถ้า Library ถูกเขียนให้ดีพอที่ทำให้ Bundler, Minifier รู้ว่าส่วนนี้ไม่ได้ถูกเรียกให้เอาออกไป เราก็จะได้ใช้ข้อดีข้อทั้งสองด้านคือเขียนน้อยและ JavaScript เล็กโหลดไม่นาน
มีเทคนิคอื่นที่ช่วยให้โหลดเร็วมากขึ้นคือ
Lazy-loading Feature Moduleโหลดเฉพาะสิ่งจำเป็นตอนแรก อะไรไม่จำเป็นเอาไว้โหลดทีหลัง
การทำ Server Side Rendering (SSR) with Rehydration โดยใช้
Angular Universal ช่วยได้เช่นกันเพื่อให้ User เห็น First Contentful Paint (FCP) ก่อน(ได้แค่เห็น) แต่สุดท้ายแล้ว Time-to-Interactive (TTI) นานขึ้นไปอีก ถ้าเทียบกับการใช้ Angular ธรรมดา (Client-Side-Rendering) เพราะต้องรอทั้ง Server Side Rendering และ Client Side Rendering
- ค้นหาแล้วเจอเลย (SEO — Search Engine Optimization )
เว็บอะไรบ้างต้องค้นหาใน Search Engine แล้วเจอเป็นเว็บแรกอยู่ข้างบนๆ ซึ่งเหมือนเดิมส่วนใหญ่จะเป็นเว็บข่าว, เว็บซื้อขาย-ของ(E-Commerce), เว็บดูหนัง, Website ให้รายละเอียดทั่วไป
แล้วอะไรบ้างที่ทำให้ค้นหาแล้วเจอเลย (SEO) มีหลายปัจจัยที่มีผล (Ex. Backlink, Google PageRank Algorithm — Makrov Chains Model)
แต่เราจะพูดในเชิง Technical Frontend เป็นหลัก
- โหลดตอนแรกเร็ว (เห็น HTML DOM ไวๆ) ซึ่งวิธีแก้คือตามที่กล่าวไว้แล้ว
ถึงแม้ว่า Google บอกว่าตอนนี้ Google Bot ใช้ Chrome Version ล่าสุดซึ่ง Run JavaScript ได้แล้วได้แล้วตั้งแต่เดือนพฤษภาคมปีที่แล้วในงาน Google I/O 2019
The new evergreen Googlebot | Google Search Central Blog
แต่ยังมีข้อจำกัดบางอย่าง อ่านรายละเอียดเพิ่มเติมได้ที่
Fix Search-related JavaScript problems | Google Search Central
ถ้าให้ดีที่สุดคือ Google Bot ควรจะไม่รันหรือรัน JavaScript น้อยมากๆเพื่อให้ได้มาซึ่ง Rendered HTML
Another example would be requiring JavaScript to render the links can lead to a slower discovery of these links. — web.dev
อะไรที่มัน staticได้ก็ให้มัน staticไป
Server Side Rendering (SSR) with Rehydration
เป็นหนึ่งในเทคนิคที่เราสามารถใช้ความรู้เดิมจากการทำ Client Side Rendering บวกกับ SSR เพิ่มเข้าไป
ให้ Server Render HTML พร้อมใช้แล้วส่งไปยัง Browser ที่ขอมาซึ่ง User หรือ Google Bot จะเห็น HTML บนจอ แต่ระหว่างนั้นโหลด JavaScript ตัว Client Side เพื่อให้ User สามารถใช้งาน Application ได้ทั้งหมดเมื่อโหลดเสร็จ
ในมุมมองผมทำ Server Side Rendering (SSR) with Rehydration ใช้ Next.js ดีกว่าเครื่องมือเรื่อง SSR ครบเช่น Image Optimization, AMP Support, Localization, sitemap และอีกทั้ง Collaborate กับ Chrome Team อย่างจริงจัง
ถึงแม้ว่า Angular มี Official Library Angular Universal สำหรับทำ SSR ทำงานได้ตามปกติ แต่ความเห็นส่วนตัวของผมคือมันยังไม่สุด เครื่องมือไม่สู้ SSR ตัวอื่นๆ, ใช้ 3rd Party Library ที่ Access DOM ตรงอาจจะมีปัญหาได้, ต้องมานั่ง Handle isPlatformBrowser หรือisPlatformServerต้องระวังมากๆในการ Access Native DOM และ Developer Experience (DX)ไม่ค่อยดี หลายคนบ่นเหมือนกัน
สรุปคือผมแนะนำว่าใช้ Tools อื่นดีกว่าสำหรับ Server Side Rendering (SSR) with Rehydration (เรื่องนี้ใครไม่เห็นด้วย Comment โต้เถียงให้เหตุผลได้เลยครับ)
Prerendering
เป็นหนึ่งในเทคนิคที่เราสามารถใช้ความรู้เดิมจากการทำ Client Side Rendering แล้วแปลงมันเป็น Static HTML พร้อมใช้เลยตั้งแต่ตอน Build แล้วไปวาง Static File นี้บน Hosting โดยที่ Browser แทบไม่ต้องรัน JavaScript เพื่อให้ได้ซึ่ง HTML (ลดเวลา)
แนะนำว่าทำ Prerendering ใช้ Gastby.js, Eleventy (Google ใช้เช่น web.dev, Chrome Developers) เครื่องมือครบกว่า
ใน Angular Ecosystem พอมี Static Site Generator สำหรับทำ Prerendering อยู่ชื่อว่า Scully — Static Site Generator for Angular มันยังใหม่มากเริ่มมีเครื่องมือที่คนสร้างขึ้นแล้วแต่เครื่องมือยังไม่เยอะเท่า Gastby.js, Eleventy
อย่างไรก็ดีในไทยมีคนใช้ Scully ใน Production แล้ว (flowaccount/nx-plugins: Nx plugins built by FlowAccount team, helps deploy systems to the cloud (github.com)
เราไม่จำเป็นที่จะต้องใช้ Angular หรือ Tools อื่น เช่น Next.js ในการที่จะทำ Web Application หรือ Website ทั้งหมด ทุกส่วน
เราสามารถใช้ Next.js (SSR) หรือ Eleventy (Prerendering) ทำหน้า Landing Page เพื่อความเร็วในการโหลดหน้าแรกและ SEO
แล้วพัฒนา Web Application ด้วย Angular ในส่วนหลัง User Login เพราะเราไม่ได้ต้องการ SEO หรือเรารับได้ที่มันจะโหลดเร็วไม่เท่า Server Side Rendering และรีดความสามารถของเครื่องมือที่ครบใน Angular
ปัจจุบันมี Tools สำหรับจัดการการสร้าง Apps หลายๆแอพโดยต่างเทคโนโลยีเช่นมีทั้ง Angular และ Next.js ใน Repository เดียวกันชื่อว่า Nx — Extensible Dev Tools for Monorepos ช่วยเราได้
ผมยินดีมากที่ทุกท่านจะใช้บทความนี้ในการโน้มนาว CTO, Tech Lead, Senior Engineer ในการพิจารณาเลือกใช้เครื่องมือซึ่งคือ Angular ตามโจทย์หรือปัญหาของธุรกิจของท่าน
ก่อนจากกันไปของฝากไว้ว่า
แต่ละแนวคิดมีข้อดีข้อเสียของมัน ต้องเลือกให้เหมาะกับงาน
ประวัติของผู้เขียน
Siwat Kaolueng เป็นที่ปรึกษาเรื่อง Web และ Angular ให้กับองค์กรขนาดใหญ่ไม่ว่าจะเป็นบริษัทรับทำการตลาด, บริษัทพลังงานชื่อดัง
โดยความตั้งใจคือส่งมอบวิธีการ แนวคิด เครื่องมือ และลงมือปฏิบัติร่วมกับทีมพัฒนา เพื่อให้ Web Application สร้างได้เร็ว ดูแลต่อง่าย และใช้งานได้อย่างมีประสิทธิภาพ
สนใจให้ขอคำปรึกษา(Consulting) หรือพัฒนา Skill คนในทีม (Training) ติดต่อได้ที่ siwat.kaolueng@gmail.com หรือ Facebook JaMe Siwat Kaolueng
