Frontend นั้นง่าย... จนกว่าคุณจะได้ลงมือสร้างมันจริงๆ

คนส่วนใหญ่คิดว่าการพัฒนา Frontend เป็นเรื่องง่าย

พวกเขามักจะพูดว่า:

  • มันก็แค่หน้าจอ
  • งานจริงๆ คือฝั่ง Backend
  • AI ก็สร้างได้
  • ก็แค่ใช้ component library
  • มันก็แค่ checkbox

นักพัฒนา Frontend ทุกคนรู้ดีว่าเรื่องแบบนี้จบลงอย่างไร แค่ checkbox ง่ายๆ อันเดียวก็สามารถทำลายสัปดาห์ของคุณได้ทั้งสัปดาห์

ผมเรียนรู้เรื่องนี้ด้วยบทเรียนราคาแพงจากงานล่าสุด เราสร้างแพลตฟอร์มให้กับบริษัทตรวจสอบบัญชีแห่งหนึ่ง Project Manager คนหนึ่งขอให้เพิ่ม checkbox บน dashboard เธอ บอกว่ามันน่าจะใช้เวลาแค่สองชั่วโมง แถมยังให้เวลาผมทดสอบเต็มๆ หนึ่งวันด้วย

ผมคิดว่าเธอใจดีมาก แต่ผมคิดผิด

checkbox นั้นไม่ใช่แค่ UI element ธรรมดา แต่มันมีกฎที่เข้มงวดมาก:

  • มันจะปรากฏขึ้นเฉพาะกับประเภทลูกค้าบางกลุ่มเท่านั้น
  • มันจะแสดงก็ต่อเมื่อโปรเจกต์มีรายได้ถึงเกณฑ์ที่กำหนด
  • มันจะปรากฏขึ้นเฉพาะเมื่อโปรเจกต์ยังคงดำเนินอยู่ (active)
  • มันจะแสดงก็ต่อเมื่อที่ปรึกษาเป็นเจ้าของโปรเจกต์นั้น

จากนั้น logic ก็เริ่มซับซ้อนขึ้น การติ๊กถูกที่ช่องนั้นจะไปกระตุ้นการส่ง request ซึ่ง request นั้นต้องได้รับการอนุมัติจากผู้จัดการ ซึ่งต้องใช้:

  • API endpoints ใหม่
  • workflow การอนุมัติที่ซับซ้อน
  • การจัดการ error และ loading states
  • ระบบแจ้งเตือนใหม่

เรื่องมันแย่ลงไปอีก ผู้จัดการไม่ต้องการให้ request ค้างอยู่เฉยๆ checkbox จะต้องถูกซ่อนหากผู้จัดการไม่ได้ออนไลน์ เราจึงต้องทำระบบ real-time presence tracking

ทันใดนั้น เราก็ต้องมาจัดการกับ:

  • Database models
  • Socket connections
  • การซิงโครไนซ์ข้อมูลแบบ real-time
  • Race conditions

เราใช้เวลาถึง 30 ชั่วโมงไปกับ checkbox เพียงอันเดียว

เราไม่ได้ใช้เวลา 30 ชั่วโมงไปกับการวาดกล่องสี่เหลี่ยม แต่เราใช้เวลา 30 ชั่วโมงไปกับการแปลงกฎทางธุรกิจ (business rules) ให้กลายเป็นโค้ด

ความซับซ้อนของ Frontend มาจากความต้องการของมนุษย์ คุณต้องแก้ปัญหาเรื่อง:

  • ผู้ใช้งานที่ออฟไลน์
  • การคลิกพร้อมๆ กัน
  • การเปลี่ยนแปลงสิทธิ์การใช้งาน
  • การตอบสนองของ API ที่ล่าช้า
  • Socket ที่หลุดการเชื่อมต่อ

Component library อย่าง ShadCN นั้นยอดเยี่ยมมาก AI ก็ช่วยเรื่อง layout ได้ดี แต่สิ่งเหล่านี้ไม่ได้ช่วยแก้ปัญหาทางธุรกิจ Library ให้ checkbox กับคุณ แต่มันไม่ได้บอกว่าใครควรเห็นมัน หรือขั้นตอนการอนุมัติควรเป็นอย่างไร

ส่วนที่ยากไม่ใช่เรื่องของพิกเซล (pixels) แต่ส่วนที่ยากคือการทำความเข้าใจว่ากล่องนั้นหมายถึงอะไร

Frontend คือการเปลี่ยนความวุ่นวายของมนุษย์ให้กลายเป็นสิ่งที่คนสามารถคลิกได้ งานที่ดีที่สุดมักจะดูเหมือนง่าย เพราะมีใครบางคนใช้เวลาหลายวันเพื่อให้มันรู้สึกเรียบง่ายนั่นเอง

แล้ว "เรื่องราว checkbox ง่ายๆ" ของคุณล่ะคืออะไร?

Source: https://dev.to/mdazlaanzubair/frontend-is-easy-until-you-actually-build-something-20fb