AngularJS - JavaScript MVC Framework powered by Google

AngularJS คือ JavaScript Framework อีกตัวหนึ่งที่ช่วยในการพัฒนา Web Application ในรูปแบบ MVC (Model-View-Controller) มีจุดเด่นคือ ความง่ายในการใช้งาน เขียน Code ไม่เยอะ รองรับการทำ Data Binding แบบ Bi-Direction (เวลาที่เราแก้ไข View จะส่งผลให้ Model มีการ update โดยอัตโนมัติ ในทำนองเดียวกัน เวลาที่เราแก้ไข Model ก็จะส่งผลให้ View มีการ update โดยอัตโนมัติเช่นเดียวกัน) การใช้งาน AngularJS สามารถใช้งานได้ง่าย เพราะไม่ต้องมีการ extend class อย่างเช่น Model , View , Controller ก่อนการใช้งาน (ซึ่งถือเป็นจุดเด่นที่แตกต่างจาก MVC Framework อย่าง Backbone) การนำ MVC Framework มาใช้ในการ Develop Web Application จะช่วยให้เราสามารถแยกส่วนที่เป็น Presentation (HTML) ออกจากส่วนที่เป็น Coding (JavaScript) ทำให้แก้ไขได้ง่าย การควบคุมการทำงานของ Web Application ใน Angular.js จะทำผ่าน Controller ซึ่งถือเป็นแกนหลักในการทำงาน โดยหลักในการทำงาน จะอาศัยการ binding ส่วนที่เป็น UI บนหน้าเว็บของเราเข้ากับตัว Controller จากนั้นเราจะเขียน Code สำหรับควบคุมการทำงานทั้งหมดผ่าน Controller นี้ ไม่ว่าจะเป็นการ ลบ เพิ่ม แก้ไข ข้อมูล หรือ อะไรก็แล้วแต่ ซึ่ง Code ภายในส่วนของ Controller นั้นจะมองเห็นข้อมูลของหน้าเว็บเราผ่านทาง Model (เราต้องทำการ binding UI element ให้เป็น Model ก่อน ผ่าน attribute ที่ชื่อว่า ng-model)

Web Application ที่เราพัฒนาขึ้นโดยใช้ AngularJS สามารถแบ่งการทำงานออกเป็นหลาย Controller ได้ โดยเราสามารถกำหนด config ของ Application เพื่อให้ route ไป ยัง controller แต่ละตัวได้ นอกจากนั้น เรายังสามารถพัฒนาความสามารถเพิ่มเติม โดยสร้างเป็น module ผ่านทาง factory method ที่ AngularJS เตรียมไว้ให้ ทำให้ code ของเรามีความเป็นระเบียบเรียบร้อย สำหรับ class ช่วยเหลือต่างๆที่จำเป็นก็มีเตรียมไว้ให้ใช้งาน อย่างเช่น HTTP Object เพื่อเอาไว้สร้าง AJAX Request เป็นต้น

โดยรวมๆ ถือว่าใช้งานง่ายครับ พอลองใช้งานแล้วก็รู้สึกชอบทันที เป็น Framework ที่หลวมๆ ไม่ค่อยมีกฎเกณฑ์อะไรมาก ช่วยให้เราเขียน Web Application ได้ง่ายขึ้น ไม่ต้อง extend class ต่างๆให้วุ่นวาย เขียน code น้อย เพราะการใช้ data binding จะช่วยลดการเขียน code ลงได้เยอะ เพราะเราไม่ต้อง query DOM element เพื่อทำการ update เอง แต่ตัว Framework จะจัดการให้เสร็จเรียบร้อย อันนี้เป็นความเห็นส่วนตัวของผมเอง ยังไงก็ไปลองเล่นดูกันเอาเองแล้วกันนะครับ อาจจะชอบหรือไม่ชอบไมรู้ แต่ผมชอบ!

แหล่งที่มา : http://angularjs.org

backbone.js - Change Box Color using Backbone Model

ตัวอย่างการควบคุมการเปลี่ยนสีของ div#box ด้วย Backbone Model

สำหรับตัวอย่างต่อไปนี้จะเป็นการทดลองการประยุกต์ใช้ Backbone Model มาควบคุมการเปลี่ยนสีของ Box (ซึ่งในที่นี้เราจะใช้ div#box โดยกำหนด style ให้มีขนาด 300 x 300 pixel และมี outline:1px solid black) สำหรับการเปลี่ยนสี เราจะทำผ่าน link ที่อยู่ด้านล่าง (เมื่อเรา click ที่ link แต่ละอัน div#box ก็จะเปลี่ยนสีตาม link ที่เรา click)

ในตัวอย่างนี้ div#box จะทำหน้าที่เป็นตัวแทนของ User Interface ซึ่งการเปลี่ยนแปลงของ div#box ที่จะแสดงในตัวอย่างต่อไปนี้ จะทำผ่าน Model ทั้งหมด เมื่อ Model มีการเปลี่ยนแปลง ก็จะส่งผลให้ div#box เปลี่ยนตามไปด้วย เดี๋ยวลองมาดู Code ในส่วนของ JavaScript กันก่อนนะครับ

จาก Code ตัวอย่างข้างต้น มีการประกาศ Box Model โดย extend มาจาก Backbone.Model สังเกตุในส่วนของ initialize เราจะทำการ binding change event เอาไว้ สำหรับในกรณีที่ color มีการเปลี่ยนแปลง เราก็จะทำการเปลี่ยนสีของ div#box ตาม จากนั้นเราก็มีการสร้าง instance ของ Box Model ขึ้นมา โดยกำหนดให้มีค่าสีเริ่มต้นเป็นสีขาว (#fff) บรรทัดต่อมาเป็น Code ที่เรียกใช้งาน jQuery ในการ assign click Event ให้กับ link ที่อยู่ด้านล่างของ div#box เพื่อทำหน้าที่เปลี่ยน color ใน box model ที่เราสร้างขึ้นมา

สำหรับ Code ในส่วนของ HTML สำหรับตัวอย่างนี้ มีดังต่อไปนี้

HTML ในตัวอย่างประกอบด้วย 2 ส่วน ก็คือ ส่วนแรกจะเป็นการประกาศ div#box ส่วนถัดมาเป็นส่วนของ color menu

สำหรับตัวอย่างนี้ จะสังเกตุว่าเราจะควบคุมการเปลี่ยนแปลงของ div#box ผ่าน Model ทั้งหมด ซึ่งจะทำให้ Code ส่วนใหญ่จะถูกแยกไปอยู่ข้างใน Model ไม่กระจัดกระจายออกมาข้างนอก ทำให้ Code เป็นระเบียบและแก้ไขได้ง่าย

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

แหล่งที่มา: http://backbonejs.org

backbone.js - Binding Custom Named Event to an Object

backbone.js จะช่วยให้เราสามารถ Binding Custom Event เข้ากับ Object ได้ง่ายๆ ด้วยวิธีดังต่อไปนี้

จากในตัวอย่างข้างต้น จะเห็นว่าเราได้ถ่ายทอดความสามารถของ Backbone.Events ให้กับ obj โดยการใช้ method ที่ชื่อว่า extend จาก underscore.js ทำให้ขณะนี้ obj สามารถรองรับการ Trigger และ Binding Custom Named Events ซึ่งในตัวอย่างข้างต้น เราได้ทดลอง Binding Custom Event ที่ชื่อว่า "alert" โดย bind เข้ากับ callback function ที่จะทำหน้าที่แสดง alert message ขึ้นมาเมื่อเกิด Event ที่ชื่อว่า "alert" จากนั้นเราได้เรียก method ที่ชื่อว่า trigger() ของ obj เพื่อทดลองสร้าง event ที่ชื่อว่า "alert" โดยมีการส่ง parameter เป็นชนิด String คำว่า "Hello" ไปด้วย ซึ่งจะส่งผลให้เกิด Alert Message ที่มีคำว่า "Hello" แสดงขึ้นบนหน้าจอ

สำหรับ method ที่ชื่อว่า on นั้น เรายังสามารถส่งค่า parameter ตัวที่สาม ซึ่งจะใช้เป็นค่า Context สำหรับ this ยกตัวอย่างเช่น obj.on("alert", this.render, this) ส่วนการ unbind Event นั้น เราใช้ method ที่มีชื่อว่า off โดยการส่งค่า paremeter ทุกอย่างเหมือนกับตอน binding ทุกประการ อย่างเช่น obj.off("alert", this.render, this)

แหล่งที่มา: http://backbonejs.org

backbone.js - Using Model

Model ใน backbone นอกจากจะสามารถใช้เก็บ Data ได้ ยังมีความสามารถในการทำ Binding for Change ได้ด้วย นอกจากนั้นยังสามารถ Validate Data ก่อนที่จะเก็บใน Model ได้อีกด้วย เดี๋ยวเราจะมาลองดูการใช้งาน Feature ดังกล่าวกันนะครับ

จากในตัวอย่าง เราทำการสร้าง Model ที่ชื่อว่า Person โดยการ extend จาก Backbone.Model โดยภายใน Model มีการกำหนดค่า defaults สำหรับ attribute ที่ชื่อว่า gender และ nationality

ในส่วนของ initialize เรามีการกำหนด binding ไว้ 2 ตัวคือ 'change:name' ซึ่งจะทำงานเมื่อตรวจพบว่า attribute ที่ชื่อว่า name มีการเปลี่ยนแปลง ส่วน  'error' จะทำงานเมื่อมีการ throw error ออกมาจาก Model (ซึ่งเดี๋ยวเราจะนำไปใช้ในตอน Validate) 

นอกจากนั้นเรายังการกำหนด callback function ให้กับ validate ซึ่งจะทำงานทุกครั้งที่เรามีการกำหนดค่าให้กับ attribute โดยในที่นี้เราทำการทดสอบว่า ถ้า age<18 จะคืนค่า "too youg!" กลับมา ซึ่งการคืนค่า string กลับมาดังกล่าว จะส่งผลให้มีการ throw error ออกมาจาก Model ซึ่งจะส่งผลให้ callback function ที่เรา bind เอาไว้กับ event "error" ทำงาน ซึ่งจะแสดงข้อความ error ออกมาบนหน้าจอ

สำหรับใน Model ตัวอย่างนี้ เรามีการ add custom function ชื่อว่า sayHello เข้าไปด้วย โดยจะทำหน้าที่แสดงข้อความ Hello พร้อมกับดึงค่า attribute ที่ชื่อว่า name ขึ้นมาแสดง

สำหรับใครที่สนใจ สามารถศึกษาเพิ่มเติมได้ที่นี่ครับ http://documentcloud.github.com/backbone

แหล่งที่มา:

1. http://documentcloud.github.com/backbone
2. http://backbonetutorials.com/what-is-a-model