แนะนำ AngularJS - Developer Guide

โลกของการเขียนเว็บเปลี่ยนไปแล้วครับ โปรแกรมเมอร์อย่างเราๆต้องปรับตัวให้ทันตามโลก วันนี้ผมขอแนะนำให้ทุกท่านได้รู้จักกับ AngularJS ... แล้วมันคืออะไรกัน? ในบทความนี้ ผมจะอธิบายทุกอย่างให้ท่านเห็นภาพรวมทั้งหมดของ AngularJS ครับว่า มันเกิดมาเพื่ออะไร ทำไมเราต้องใช้มัน มีคุณสมบัติเด่นอะไรบ้าง ถ้าพร้อมแล้ว มาเริ่มกันเลยครับ :)

Angular คืออะไร ?

AngularJS เป็น framework ที่ออกแบบมาเพื่อสร้างเว็บแอพพลิเคชั่นแบบ dynamic ครับ โดยใช้ Concept แบบ MVC หรือ Model-View-Control ช่วยให้เราขยายขีดความสามารถของ HTML ธรรมดาๆ ด้วยการใช้ Components ได้ นอกจากนี้ ยังสามารถการผูกข้อมูลระหว่าง View กับ Model(ใครยังไม่เข้าใจคอนเซ็ปต์ MVC เดี๋ยวผมจะอธิบายในบทความต่อไปครับ) โดยใช้ Data Binding รวมทั้งการใช้ Dependency Injection เพื่อช่วยลดโค้ดของเราครับ ต้องการทำงานส่วนใหนก็แค่ดึง Dependency เข้ามาที่แอพของเรา มองมันง่ายๆว่าเป็นเหมือน Library ในแบบฉบับของ AngularJS แล้วกันครับ

อย่างที่เรารู้กันครับว่า HTML เป็นภาษาที่ใช้ทำโครงสร้างเว็บเพจแบบ Static ธรรมดา หากเราต้องการสร้างเว็บ Application เรามีทางเลือกสองอย่างครับ ที่จะทำให้เราสร้างเว็บแอพลิเคชั่นได้ง่ายขึ้นคือ

• ใช้ Library - พูดให้เข้าใจง่ายๆคือ เป็นตัวที่รวม Function ที่ใช้งานบ่อยๆในการเขียนเว็บแอพลิเคชั่นครับ โดยที่เราไม่ต้องมาเริ่มต้นเขียนโค้ดเองทั้งหมดแบบเริ่มต้นจากศูนย์ Library ที่ใช้งานกันบ่อยที่สุดคงหนีไม่พ้น jQuery ครับ สรุป การใช้ Library โค้ดของเราจะเป็นศูนย์กลาง เวลาต้องการทำงานที่ซับซ้อนเฉพาะจุดถึงจะเรียกใช้ Library ครับ เช่นการเพิ่มคลาส ลบคลาส ของ jQuery เป็นต้น
• ใช้ Framework - แปลเป็นไทยก็คือ "กรอบการทำงาน" ใช่แล้วครับ Framework จะเป็นตัววางกรอบการทำงานของแอพเราทั้งหมด การทำงานที่เป็นโครงสร้างพื้นฐานทุกอย่าง Framework จะเป็นคนจัดการแทนเราครับ เราเพียงแค่เขียนโค้ดควบคุมแอพของเราในส่วนที่ Framework กำหนดมา เท่านี้ก็เรียบร้อยครับ สรุป แทนที่โค้ดของเราจะเป็นศูนย์กลางในการทำสิ่งต่างๆ Framwork จะเป็นศูนย์กลางการทำงานของ Web Application ของเรา ส่วนโค้ดของเราจะถูก Framework เรียกใช้งานอีกทีนึง ซึ่ง AngularJS อยู่ในข้อที่ 2 เป็น Framework ครับ

นอกจากนี้ Angular ยังช่วยลดช่องว่างระหว่างโครงสร้าง HTML ธรรมดา และความสามารถที่ Application ต้องการซึ่ง HTML ธรรมดาไม่ตอบโจทย์ โดยการสอนให้ Browser รู้จักการเขียน HTML ด้วย Syntax แบบใหม่ ที่จะขยายขีดความสามารถให้ HTML ธรรมดาเมพขึ้น เช่น

• การผูกข้อมูล หรือ Data Binding
• การควบคุมโครงสร้าง DOM เช่น Repeat, แสดงหรือซ่อนชิ้นส่วน DOM
• การตรวจสอบข้อมูลในฟอร์ม
• ขยายขีดความสามารถ Element แบบเดิมๆด้วยการเพิ่ม Behavior ให้ Element เช่นการกำหนด Even Handling
• การจับ Elements มามัดรวมกันทำเป็น Components เพื่อให้โค้ดของเราสามารถ Reuse ได้นั่นเองครับ

ทางออกที่สมบูรณ์แบบในฝั่ง Client Side

ที่ผมบอกไปยังไม่ใช่ความสามารถทั้งหมดของ Angular ครับ เว็บแอพลิเคชั่นที่สมบูรณ์แบบต้องประกอบด้วย 4 ส่วนหลักๆครับ คือ CRUD หรือ Create Read Update และ Delete หากใช้ AngularJS ทุกอย่างจะเป็นเรื่องง่ายขึ้น Angular วางโครงสร้างทุกอย่างให้เราแล้วครับ เราสามารถจัดการกับ DOM และ AJAX ได้อย่างง่ายดาย เพื่อสร้าง Web Application ให้มีความสามารถทั้ง 4 อย่างนี้(CRUD) ซึ่งโครงสร้างของ Angular ก็ออกแบบมาอย่างยืดหยุ่น ไม่แข็งทื่อเกินไปจนเอาไปใช้ลำบาก ร่ายซะยาว เรามาดูเครื่องมือที่ Angular เตรียมไว้ให้กันดีกว่าครับ

1. Angualr ให้เครื่องมือสำหรับสร้างเว็บแบบ CRUD อย่างครบครัน เช่น Data-Binding, Template Directive พื้นฐาน, ตรวจสอบฟอร์มข้อมูล, Routing แบบ Single Page Design, Deep Link, การทำ Components เพื่อจะได้เอาโค้ดมาใช้ใหม่ได้ และ Dependency Injection
2. การ Test โปรแกรม ไม่ว่าจะเป็น Unit-Testing  หรือแบบ End To End Testing ครับ
3. Seed Application ที่มีโครงสร้าง Directory และ script สำหรับ Testing เตรียมไว้ให้ ทำให้เราเขียนเว็บแอพได้อย่างง่ายดายมากขึ้น ใครสนใจก็ไป clone จาก GitHub Angular-Seed ได้ครับ

Angular ไม่ เหมาะกับงานประเภทใหน ?

อย่างที่เรารู้กันไปแล้วนะครับว่า Angular ออกแบบมาเพื่อใช้กับ Web Application แบบ CRUD และเว็บแอพลิเคชั่นเกือบทั้งหมดก็เป็นแบบ CRUD ครับ แต่เว็บแอพบางประเภทก็ไม่ได้มี concept แบบ CRUD ครับ เช่น เกมส์ หรือ Text Editor ซึ่งเว็บแอพประเภทนี้จะต้องจัดการกับ DOM เป็นหลัก ทำให้แอพพวกนี้อาจจะไม่เหมาะที่จะใช้ Angular ครับ เว็บไซต์หลักของ Angular แนะนำว่า การทำงานระดับล่าง(Low Level)แบบนี้ ใช้ jQuery จะเหมาะกว่าครับ ดังนั้น ก่อนจะเอา Angular ไปใช้ใน Project อย่าลืมถามตัวเองนะครับว่า..."เฮ้ย!!! Angular มันจะเหมาะกับงานของเราหรือเปล่าฟร้ะ" ฮร่าาา

สรุปความสามารถของ Angular

หลังจากอ่านกันมาตั้งนาน หลายคนอาจจะเริ่มมึนๆว่าตกลงมันทำอะไรได้บ้าง เพราะความสามารถมันเยอะเหลือเกิน เดี๋ยวผมจะสรุปภาพรวมความสามรถของ Angular ในหัวข้อนี้ครับ

• Angular แยกส่วน Logic ของโปรแกรม ออกจากส่วน View ใน HTML ตามแบบฉบับของ MVC(หรือ MVW ก็แล้วแต่ครับ) ซึ่งจะทำให้เราเทสโปรแกรมได้ง่ายขึ้น
• ช่วยให้เราแยกการทำงานร่วมกันระหว่าง Server Side และ Client Side ได้อย่างเป็นระบบมากขึ้น ซึ่งการทำงานทั้งสองส่วนนี้จะทำงานคู่ขนานกันได้อย่างไรที่ติครับ
• ไม่ต้องมานั่ง Register Callback เอง ถ้าต้องมานั่งทำเองมันจะเป็นตัวถ่วงโค้ดเรามาก Angular จะมาช่วยให้เราลดโค้ดของเราไปได้มากเลยครับ
• ไม่ต้องมานั่งจัดการกับ DOM เอง ก่อนหน้านี้เราต้องมานั่งจัดการกับ DOM เองกันใช่มั้ยครับ เช่น โหลดข้อมูลแบบ AJAX แล้วมาอัพเดทที่ DOM ซึ่งค่อนข้างยุ่งยาก แล้วก็ชอบเกิด Error ด้วย Angular ช่วยให้เราไม่จำเป็นต้องไปยุ่งกับ DOM เองเลยครับ เดี๋ยวพี่ Angular เค้าจัดการกับ View ให้ครับ

สำหรับในบทความนี้จะมีเนื้อหาเพียงเท่านี้ครับ เพื่อให้ท่านผู้อ่านเห็นภาพรวมของ AngularJS ว่ามันเกิดมาเพื่ออะไร ทำอะไรได้บ้าง งานใหนเหมาะ งานใหนไม่เหมาะกับ Angular ในบทความต่อไป ผมจะนำเสนอเกี่ยวกับ Data Binding ครับ ถ้าผ่านแล้วชอบ อย่าลืมกดไลค์กันด้วยนะครัช คุคิคุคิ