แยกการพัฒนา Back-end กับ Front-end ออกจากกันเถอะครับ

เรื่องมีอยู่ว่า…

ช่วงสองปีที่ผ่านมา ผมได้ยุ่งกับ JavaScript เยอะมาก ปัญหาอย่างหนึ่งที่เจอในหลายๆทีมคือการเขียนโค้ด JavaScriptโดยผูกติดกับโค้ดฝั่งเซอร์ฟเวอร์ ไม่ว่าโค้ดฝั่งแบ็คเอ็นด์จะเป็น Java, .Net, หรือกระทั่ง JavaScript เอง

ผูกติดกันนี่คือยังไง คือทีมจะเขียนโค้ดฝั่งเซอร์ฟเวอร์มาในระดับหนึ่งก่อน ตกลง Interface (API) พอให้เรียกได้ เวลาฝั่งฟร้อนท์เอ็นด์ทำงาน ก็รันโค้ดของฝั่งแบ็คเอ็นด์ทั้งหมดบนเซอร์ฟเวอร์ แล้วพัฒนา JavaScript บนโค้ดพวกนั้น

แล้วไง?

โค้ดฝั่งเซอร์เวอร์มันไม่นิ่งครับ แม้จะตกลง API กันเรียบร้อยแล้ว (1) API ก็อาจจะมีการเปลียนแปลง หรือ (2) โค้ดฝั่งเซอร์ฟเวอร์เกิดรวนขึ้นมา ฝั่งฟร้อนท์เอ็นด์จะทำงานยังไง?

สำหรับโปรเจ็คเล็กๆ ทำงานแค่ไม่กี่คน ผลกระทบอาจจะไม่เยอะมาก แต่โปรเจ็คใหญ่ที่มีการแบ่งโปรแกรมเมอร์ฝั่งแบ็คเอ็นด์กับฟร้อนท์เอ็นด์ชัดเจน เราจะเจอปัญหาคอขวด ถ้างานฝั่งแบ็คเอ็นด์เกิดดีเลย์ขึ้นมา งานฝั่งฟร้อนท์เอ็นด์ก็จะช้าตามไปด้วย หากถ้ามีการแยกทีมพัฒนาในองค์กรณ์กันอย่างชัดเจน อาจมีการชี้นิ้วใส่กันแถมให้อีก

ฝ่ายฟร้อนท์เอ็นด์อาจแก้ปัญหาโดยการใช้ Mock ใน unit test มาแก้ขัดไปก่อน สะสม technical debt กันไป พอมาถึงตอน Integration ก็จะถึงจุดไคลแม็กซ์ ได้หามรุ่งหามค่ำกัน

อีกเรื่องหนึ่งก็คือถ้าโค้ดฝั่งแบ็คเอ็นด์ซับซ้อนมาก เวลาทดสอบหรือรัน E2E Test มันจะ (3) ช้า ครับ ฟังดูเหมือนเล็กๆน้อยๆ แต่เวลาเทสต์รันนานนี่เสียสมาธินะครับ เทสต์เสร็จนี่จำไม่ได้แล้วว่าจะทำอะไรต่อ

แก้ไขยังไง

ผมแนะนำให้ Mock Response ฝั่งเซอร์ฟเวอร์ครับ เครื่องมือที่ผมเคยใช้ก็มี

  1. SoapUI (http://sourceforge.net/projects/soapui/) ใช้ mock XML/JSON response อันนี้ใช้ง่ายมาก ผมนั่งจิ้มๆอยู่ครึ่งช.ม.ไม่ต้องอ่านแมนนวล ข้อเสียคือมันต้องโหลดโปรแกรมมาติดตั้ง เลย Automate ยากหน่อย
  2. APIMocker (https://github.com/gstroup/apimocker) อันนี้เป็นตัวที่ผมใช้อยู่เวลาเขียนโค้ดฝั่งฟร้อนท์เอ็นด์ ผมชอบตรงที่มันเป็น JavaScript หมด Automate E2E Test ควบกับ Grunt ได้เลย (มี Grunt plugin)

เครื่องมือทั้งสองตัวไม่ได้ซับซ้อนถึงขนาดต้องเขียนโปรแกรมได้ แค่กำหนด Config แล้วสั่งให้มันทำงาน หลังจากนั้นลองเปิด URL แล้ว GET ดูมันจะส่ง JSON หรือ XML ที่กำหนดไว้มาให้

อย่าจำกัดแค่สองตัวนี้นะครับ ถ้าไม่ตรงเสป็ค ลอง Google ดู มันมี Tool อยู่หลายตัวมาก

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: