angular

บอกเล่าเรื่องราวของ Angular ที่มาที่ไปรวมถึงข้อดี ข้อเสียของ Angular กัน

By KDBEER | Last updated Oct 7, 2020
ทำความรู้จักกับ-Angular-ดูตัวอย่างเว็บไซต์-และติดตั้งโปรแกรมสำหรับเริ่มพัฒนา-5ed999b3ec76f739efc66146

ในบทความนี้ ผมจะเล่าประวัติย่อๆ ของ Angular รวมถึงข้อดีข้อเสียของ Framework นี้ และก็จะพาผู้อ่านเริ่มต้นพัฒนาเว็บไซต์ด้วย Angular ซึ่งมีตัวอย่างผลงานให้ดูด้วย จะเป็นเว็บไซต์สำหรับแสดงรูปภาพของน้องแมว (Admin เป็นทาสแมวจ้า 555) 

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

บทความนี้มีอะไรบ้าง

  1. ประวัติความเป็นมาของ Angular
  2. ข้อดี ข้อเสีย
  3. Reference

1. ประวัติความเป็นมาของ Angular 

ก่อนที่จะมาเป็น Angular ในทุกวันนี้ เราเคยรู้จักกับ library ที่ชื่อว่า Angular JS ที่ถูกปล่อยออกมาในปี 2009 เชื่อใหมว่าครับว่าตอนแรกนั้นมันเป็นเพียงแค่ Side Project หรือก็คือโปรเจคที่ทำกันเองโดยนักพัฒนา 2 ท่าน โดยไม่มีใครจ้าง และนักพัฒนา 2 ท่านนั้นชื่อว่า Misko Hevery และ Adam Abrons พวกเขาพยายามที่จะสร้างเครื่องมือที่ทำให้ Web Designer จัดการทั้ง Frontend และ Backend ได้

ตอนที่คุณ Hevery มาทำงานที่ Google และกำลังพัฒนาสิ่งที่เรียกว่า  Google Feedback หลังจากที่เขียนโค๊ดไปกว่า 17,000 บรรทัด ในระยะเวลา 6 เดือน เขาก็ได้พบว่ามันยากเหลือเกินที่จะ Test และแก้ไขระบบ เขาได้ทำการพนันกับหัวหน้าของเขา ว่าเขาสามารถที่จะเขียนโค๊ดใหม่ทั้งหมดเลย โดยใช้เวลาแค่ 2 อาทิตย์ ถึงแม้จะเสียดายที่เขาต้องแพ้พนัน เพราะเขาใช้เวลาไป 3 อาทิตย์ แต่สิ่งที่ได้มาคือเขาสามารถลดโค๊ดจาก 17,000 บรรทัด เหลือเพียง 1,500 บรรทัดเท่านั้น ด้วยความช่วยเหลือของ Angular JS และความสำเร็จจากสิ่งที่เขาทำ ทำให้ Angular.js กลายเป็น Open Source ถูกพัฒนาต่อและเติบโตอย่างรวดเร็ว

จาก Angular.JS สู่ Angular

ถึงแม้ว่า Angular.js จะนำฟีเจอร์ใหม่ๆ มาสู่โลกของ Web Development ก็ตาม แต่ว่ามันก็มีความไม่สมบูรณ์แบบอยู่นะ ยกตัวอย่างเช่น

  • มันมีความซับซ้อน มีหลายวิธีที่ซ้ำซ้อน เพื่อจะทำงานอย่างเดียวกันนั้น
  • เกิดความไม่แน่นอนของ Change Detection
  • Scale ลำบาก
  • ถ้า User ไปปิด Javascript คือ เจ้ง!!
  • Performance แย่ ถ้า App มีขนาดใหญ่

ปัญหาเหล่านี้แหละครับ ทำให้นักพัฒนาตัดสินใจที่จะเขียน Framework ใหม่ทั้งหมด จนเกิดเป็น Angular เวอร์ชั่น 2.xx และจากนั้นเขาก็เลิกเรียกว่า Angular.JS แต่เรียกว่า Angular เฉยๆ แทน 

ซึ่งแต่เดิมที่ใช้ Javascript อย่างเดียว เวอร์ชั่นใหม่ได้สร้าง Framework ขึ้นมาใหม่ โดยมีเสาหลัก 3 อย่างคือ

  1. Typescript เป็น Superset ของ Javascript แต่มีความ Type safe มากกว่า อีกทั้ง Coding Style ยังเหมาะกับคนที่เขียน OOP มาก่อนด้วย
  2. RxJS เป็น library สำหรับ reactive programming และ Angular ใช้ในการ Stream Data
  3. Zone.JS เป็น asynchronous operations ใช้ในการบอกกับ Angular ว่าตอนนี้การทำงานอยู่ State ใหนแล้ว สมมติเรายิง API ไปหา Backend Angular จะรู้ว่าตอนนี้นั้นกำลังอยู่หรือว่า request หรือได้ข้อมูลกลับมาแล้ว เป็นต้น

2. ข้อดี ข้อเสีย ของ Angular (เทียบกับ Framework อื่น)

ข้อดี

  • Angular เป็น Component Base ทำให้โค๊ดมีคุณภาพสูง component มีความคล้าย MVC แต่ว่าจะเน้นที่การ reusability ซึ่งทำให้เราได้ประโยชน์ดังนี้
    • Reusability
    • Readability
    • Unit-test friendly
    • Maintainability
  • Typescript ความดีงามของมันคือมันเป็น Javascript ที่สามารถระบุ Type ของตัวแปรได้ครับ ทำให้โค๊ด Clean กว่า, มีเครื่องมือจัดการที่ดีกว่า, และสามารถ scale ได้ง่ายกว่า
  • RxJS มีคนเปรียบเทียบไว้ว่ามันคือโรงงานประกอบร่างรถยนต์ของ Henry Ford ยกตัวอย่างการจะ Render หน้าเว็บไซต์ที่มีข้อมูลมหาศาลเลย RxJX จะช่วยให้เราค่อยๆ โหลดละประกอบ Data แทนที่จะโหลดมาแค่ครั้งเดียว
  • Hign Performance
    • Hierarchical dependency injection เราสามารถพบความสามารถนี้ได้ใน Service ของ Angular
    • Angular Universal ทำให้สามารถ render App บน Server แทนที่จะ render บนเครื่องของ Client หรือที่เขาเรียกกันว่า Server Side Render (SSR)
    • Ivy renderer ก่อนจะมาถึง Angular เวอร์ชั่น 9 เรามี render engine ที่ชื่อว่า renderer2 เรารู้กันดีว่า template ของ Angular นั้นเขียนขึ้นมาจาก HTML + Typescript ซึ่ง Browser ไม่เข้าใจหรอกว่าเราเขียนอะไรให้มันอ่าน จึงต้องมี renderer2 ที่ช่วยแปลงไปเป็น Javascript ที่ browser สามารถที่จะเข้าใจได้ ซึ่งข้อเสียของมันคือทำตอน runtime หรือตอนที่หน้าเว็บกำลังโหลด แน่นอนว่ามันทำให้การโหลดนาน และไฟล์มีขนาดใหญ่ แต่การมาของ Ivy Engine นำสิ่งที่เรียกว่า ​Tree Shaking มาด้วย ตอนที่มีการเปลี่ยนหน้าเว็บ Ivy จะรู้ว่าตรงไหนบ้างที่เปลี่ยน และโหลดเฉพาะ Chunk (Angular จะแบ่งโค๊ดเป็น javascript ไฟล์เล็กๆ ตาม ​Module เรียกว่า chunk) ที่ต้องการมาเท่านั้น และ chunk ที่โหลดมา ส่วนที่ไม่ได้ใช้ มันตัดทิ้งให้อีกด้วย
  • Google Long-Term Support
  • Angular Material เป็น Frontend Framework ที่ล้อมาจาก Material Design
  • Angular CLI หรือก็คือ Command line tool ของ Angular ถ้าเราใช้จนคล่องแล้ว บอกเลยว่า ชีวิตนี้ง่ายขึ้นมากๆ
  • Ecosystem ที่ดีต่อใจ กล่าวคือ ถ้าเราตัดสินใจพัฒนาเว็บด้วย Angular เราจะมี Commuity ที่คอยตอบคำถาม ผมกล้ายืนยันเลยว่า ปัญหาที่คุณเจอ ไปค้นหาใน Google นี่ มีวิธีแก้แน่นอน นอกจากนั้น IDEs อย่าง Vs Code ก็ดีมากๆ และมีเครื่องมืออีกมากมายเลยที่คอยช่วยให้เราทำงานง่ายขึ้น
  • Angular elements
  • Angular directives

แล้วข้อเสียละ ?

  • Community มีความปั่นป่วน อ้างอิงจาก 2018 StackOverflow Developer Survey เราพบว่า Angular เคยเป็นคู่แข่งของ React JS แต่พอมาในปี 2019 พบว่าอันดับหล่นไปถึง 9 อันดับ
  • การจะอัพเดทจาก Angular.JS ไปเป็น Angular ค่อนข้างลำบากเลยทีเดียวแหละ
  • Angular มี Learning Curve ที่ค่อนข้างสูง

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

Reference

Tags