Jaynarol Blog

Angular 2 : ฉบับปูพื้น

สวัสดีครับ หลังจากบทความก่อนๆผมได้ลงรายละเอียดเกี่ยวเรื่อง ES6 ไปพอสมควร

เพราะผมกะวางไว้เป็นแนว เพื่อปูพื้นให้กับบทความของ Angular 2 ในอนาคตนั่นเอง

ผมเชื่อหลายๆคนต้องเคยได้ยินชื่อหรือรู้จักเจ้า Angular มาบ้างแล้ว

โดยบทความนี้ผมได้เรียบเรียงเองใหม่ทั้งหมด หากตรงไหนอ่านแล้วงงๆก็สามารถสอบถามได้ครับ

 

 

ต้นกำเนิด AngularJS

ก่อนจะไปเรื่องหลัก ผมอยากกล่าวถึงต้นกำเนิดสักนิด เพื่อให้เห็นความเป็นมาและให้เกียรติผู้พัฒนาครับ…

 

ในปี 2009 เมื่อเพื่อนของนาย Misko Hevery ซึ่งเป็น Web designer (ไม่ใช่ Web Developer)

อยากจะได้เว็บที่สามารถส่งอีเมลได้

โดยถ้ามองจากคนทั่วไป มันไม่น่ามีอะไร ก็แค่ใช้ CMS ง่ายๆ หรือพัฒนาเองด้วย PHP ก็มีคนสอนเยอะแยะ แปปเดียว

แต่สำหรับ Misko Hevery มันคือจุดเริ่มต้นของไอเดีย ไอเดียที่ทำให้เกิด AngularJS

 

เขากลับมานั่งคิดว่าเว็บที่ข้อมูลเป็น Static 100% แต่ต้องการฟีเจอร์เพิ่มอีก 1 อย่างคือ “ส่งอีเมลได้”

ทำให้มันต้องขึ้นไปประมวลผลทั้งหมดบน Server? ทำให้มันต้องใช้ CMS?

ทำไมเราไม่แยกส่วนการทำงานของ font-end  / back end ออกจากกัน แล้วให้ Server ทำงานเท่าที่จำเป็นเท่านั้นละ?

Web Designer ก็ทำงานง่าย / Web Developer ก็ทำงานง่าย วินๆใสๆ ชัดๆ

ซึ่งนั่นคือเมื่อปี 2009 (และแน่นอนว่าในปัจจุบันแนวคิดนี้เป็นเรื่องที่ได้รับความนิยมมากและแทบปฎิวัติการทำเว็บ)

 

ต่อมา Misko Hevery ก็ได้ใช้เวลา free time ของเขาที่ Google นั่งคิดและพัฒนา AngularJS ขึ้นมา

ไม่นานเขาก็ได้รับการสนันสนุนจาก Google และทำมันเป็นงานเต็มเวลาในที่สุด

ข้ามมาในปี 2012 ในที่สุด AngularJS 1.0 ก็ได้เปิดตัวต่อสายตาชาวโลกในฐานะ Framework จาก Google

แน่นอนว่ามันได้รับเสียงตอบรับล้นหลามจากนักพัฒนาต่างๆทั่วโลก และ สร้างความฮือฮาเป็นอย่างมาก

 

 

ขอสรุปสั่นๆ AngularJS คือ?

AngularJS คือ Framework ที่ทำงานอยู่บนฝั่งผู้ติดต่อ (Client Side) โดยมีแกนขับเคลื่อนหลักคือภาษา JavaScript

 

แล้ว AngularJS ดียังไง?

หลักการเดิมของเว็บปกติ เมื่อเรามีการปฏิสัมพันธ์กับเว็บไซต์

Browser (ซึ่งอยู่บนฝั่ง Client) จะส่งคำขอไปยัง Server

จากนั้น Server จะทำงานประมวลผล “ต่างๆนาๆ” และส่งหน้าเว็บหน้าใหม่กลับมา “ทั้งหน้า”

คำว่า ต่างๆนาๆ ในที่นี้คือ Server ต้องตรวจสอบสิทธิ์ใหม่ Query ข้อมูลใหม่ ประมวลผลและจัดการ Template ใหม่

ดังที่เราอาจจะเคยเห็น เช่นเว็บ Shopping บางเว็บ การเพิ่มจำนวนสินค้าเพียง 1 ชิ้นต้องโหลดใหม่ทั้งหน้า

และอีกหลายๆตัวอย่างที่มันสามารถทำงานด้วย JavaScript ได้เลยเช่นการ Sort / Filter table

 

ดังนั้น สิ่งแรกที่เราควรรู้เกี่ยวกับ AngularJs คือ มันมองแต่ละส่วนในหน้าเว็บแยกเป็น Component (แนวคิด Angular 2)

อยากเปลี่ยนแปลงข้อมูลตรงไหนก็แค่เรียกขอ file html ใหม่จาก Server เฉพาะส่วนนั้น

(file html เป็น static ไม่ต้องใช้การประมวลผลบน Server และสามารภ cache ได้)

อยากประมวลผลข้อมูลตรงไหน ในหน้าเว็บ ก็สามารถใช้ JavaScript “เข้ามาช่วยทำงาน” ได้เลย

คำว่า เข้ามาช่วยทำงาน นี่แหละคืออีกสิ่งที่ AngularJs เตรียมไว้ให้ (ขอยังไม่ลงรายละเอียดในตอนนี้)

 

ทีนี้พอเราใช้ AngularJs คล่องๆและจัดการมันได้อย่างถูกต้อง

เราจะเห็นว่า Server เป็นเพียง Adapter ของ Database เท่านั้นเอง (กรณีแยก file server ต่างหาก)

เราจำเป็นต้องเชื่อมต่อกับ Server ก็ต่อเมื่อต้องการจัดการข้อมูลใน Database หรือการตรวจสอบสิทธิ์เท่านั้น

จึงเป็นข้อดีอีกจุดที่ทำให้เราไม่ต้องยึดติดกับ Server เราสามารถเปลี่ยนโครงสร้าง เปลี่ยนภาษา เปลี่ยนฐานข้อมูล

โดยที่ ไม่มีผลใดๆทั้งสิ้นกับ AngularJs (front-end)

เรียกได้ว่าแยกกันเด็ดขาด นักพัฒนาก็ทำงานง่าย การปรับปรุงงานก็ง่าย อะไรๆก็ง่ายไปหมด

 

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

การขยายไปยัง platform อื่นๆเช่นแอฟบนมือถือ (ซึ่งก็มีหลาย OS อีก) ให้มาเชื่อมต่อกับ Server ตัวเดิม (แนวคิด Service)

ก็สามารถทำได้อย่างง่ายดาย ช่วยลดทรัพยากรและแรงงานไปอีกบานตะไทเลย

 

ใครยังไม่เห็นภาพสามารถลองไปกดเล่นที่เว็บนี้ได้ครับ

http://themicon.co/theme/angle/v3.3.1/backend-angular

 

 

ทำไมต้องเวอร์ชั่น 2? แล้วเวอร์ชั่น 1 ละ?

เนื่องจาก AngularJS (เวอร์ชั่น 1) ได้เจอข้อจำกัดต่างๆนาๆประการของ Pure JavaScript

ทำให้รูปแบบของโค้ดทำความเข้าใจยาก และเป็นยาพิษต่อนักพัฒนามือใหม่อย่างมาก

อีกทั้งด้วยการที่ input ทุกส่วนเป็น Two-way Data Binding โดย default

ทำให้นักพัฒนาที่ไม่ชำนาญ เผลอสร้าง watching จำนวนมากในระบบ และส่งผลต่อ perfomance ในท้ายที่สุด

 

เจ้า Angular 2 จึงปรับปรุงโครงสร้างใหม่ทั้งหมด จนแทบจะเรียกได้ว่าเป็นคนละ Framework กันไปเลย

เปลี่ยนจาก Pure JavaScript มาใช้ TypeScript ของ MicroSoft เป็นภาษาหลัก (เป็นการรวมตัวที่คาดไม่ถึงจริงๆ)

มีการมองภาพรวมและ Life Cycle ของระบบต่างจากเดิม เช่น Controller เปลี่ยนเป็น Component

 

สรุปคือ โค้ดสะอาดขึ้น เขียนง่ายขึ้น ทำงานเร็วขึ้น (ซึ่งแน่นอน ก็ของใหม่กว่านี่)

 

* เนื่องจาก Angular 2 ยังเป็นเวอร์ชั่น Beta 9 (ณ เวลาที่เขียนบทความ) อาจมีการเปลี่ยนแปลงได้อยู่

จึงต้องระวังจุดนี้ไว้ด้วยครับ

** แต่ถึงจะ Beta ก็ถือได้ว่าเริ่มนิ่งมากๆแล้วแหละครับ (ถ้าเทียบกับ Alpha) อีกทั้ง Google เองก็ใช้ Angular 2

กับระบบของตัวเองอย่าง AdWords, Google’s internal CRM system แล้วด้วย 

 

 

ปิดท้าย

บทความนี้ดูสั้นๆแต่ผมกลับใช้เวลาพอสมควร เพราะอยากให้ผู้อ่านเห็นภาพโดยไม่ต้องพูดถึงทฤษฎีมาก

ความตั้งใจจากนี้คือจะเขียนรายละเอียดต่างๆของ Angular 2 เช่นพวก Component, Directive, Service

แต่เนื่องจาก Angular 2 ถือว่ายังใหม่และผมก็เพิ่งเริ่มศึกษา อาจใช้เวลาเรียบเรียงนานสักนิดกว่าจะครบ

และที่สำคัญคือ อาจมีข้อผิดพลาดบ้าง

ดังนั้น หากอนาคตใครเห็นข้อผิดพลาดตรงไหนก็แล้วแต่ อยากรบกวนให้ช่วยท้วงติงด้วยครับ

เพื่อที่จะได้นำเสนอข้อมูลที่ถูกต้องที่สุดให้ผู้อ่านท่านอื่นๆต่อไป

บทความหน้า ผมจะมาลงลึกเรื่องการเตรียมตัวเพื่อเริ่มพัฒนาเว็บด้วย Angular 2

ไว้เจอกันครับ…