[แปล] เรื่องการนำ React มาใช้ของ Airbnb

เช้านี้อ่านบทความเรื่อง How Airbnb use React สัมภาษณ์กับคุณ Leland Richardson ตั้งแต่ต้นปีที่แล้ว (นานเลยนะ) ซึ่งเป็น Lead Engineer ที่ Airbnb และเป็น contributor หลักของ Enzyme มาดูกันว่า ทำไมถึงเลือก React มาใช้ ? ใช้งาน React อย่างไรบ้าง ? มีอุปสรรคและความท้าทายอะไรบ้าง ? จึงทำการแปลและสรุปสิ่งที่น่าสนใจไว้นิดหน่อย ถึงจะเก่าหน่อยแต่คิดว่าน่าจะมีประโยชน์

เรื่องแรกที่น่าสนใจคือ การเริ่มนำ React มาใช้ในการพัฒนาอย่างไร ?

จะหาคนมาทำอย่างไร ? มีการสอนและแบ่งปันกันอย่างไร ? ซึ่งเป็นเรื่องที่เป็นปัญหาอย่างมากสำหรับหลาย ๆ องค์กร !!

โดยแบ่งเป็น 4 ส่วนคือ ส่วนที่ 1 สำหรับพนักงานใหม่ จะมีการจัด Bootcamp ระยะเวลา 3 สัปดาห์ เพื่อเตรียมความพร้อมทั้งเครื่องมือและ process ที่จำเป็นต่าง ๆ ส่วนที่ 2 มีการจัดการสอนภายในอยู่แล้ว ซึ่งใคร ๆ ก็สามารถเข้าร่วมได้ ส่วนที่ 3 น่าสนใจมาก ๆ คือ ใช้งาน Slack เป็นหลัก ซึ่งมีสิ่งต่าง ๆ ครบครัน เหมือนกับเป็น Internal Stack overflow นั่นเอง นั่นคือทุกคนพร้อมช่วยกันถามและตอบปัญหาต่าง ๆ รวมทั้งประวัติการพูดคุยต่าง ๆ สามารถค้นหาได้ง่ายอีกด้วย ซึ่งเป็นประโยชน์ต่อทีมมาก ๆ ส่วนที่ 4 ที่น่าสนใจเข้าไปอีกคือ วัฒนธรรมของการทำ Code Review ซึ่งบอกไว้ว่า เป็นวิธีการที่ดีมาก ๆ สำหรับการเรียนรู้สิ่งใหม่ ๆ ทำให้ความสามารถพัฒนาไปได้เร็วมาก

ดังนั้นเรื่องของ internal process/training มันจึงสำคัญมาก ๆ ถ้าหายากนัก ก็สร้างกันขึ้นมาเองเลย

เรื่องที่สอง ข้อได้เปรียบของ React ที่เห็นได้ชัดสุด ๆ คืออะไร ?

เนื่องจาก React ออกแบบในรูปแบบ component ดังนั้นเรื่องของ reusability และ portability จึงเด่นมาก อีกทั้งเอื้อต่อการ reactoring อีกด้วย

เรื่องที่สาม มีข้อดีก็ต้องมีข้อเสียกันบ้างสำหรับการใช้งาน React ?

สำหรับผู้เริ่มต้นนั้นมักจะงงและสับสนเกี่ยวกับการจัดการ state ต่าง ๆ เพิ่มเติมทั้ง props ทั้ง state อ่านไปอ่านมาเจอ Flux, Redux และอื่น ๆ อีกมากมาย รวมทั้ง ecosystem ที่อาจจะทำให้มึนงงไปได้หลายวัน โดยที่ทีมจัดการ state ต่าง ๆ ของ React app ด้วย alt library มีคำถามว่า ใช้งาน Relay และ GraphQL หรือไม่ ? ตอบเลยว่ายัง

เรื่องที่สี่ เขียน JavaScript ตามมตรฐานใด ?

ใช้งาน ES6 ซึ่งมีรูปแบบหรือ coding style ตามนี้

เรื่องที่ห้า ทดสอบ React App กันอย่างไร ?

เป็นสิ่งที่น่าสนใจมาก โดยแบ่งเป็นดังนี้

• ใช้ Mocha สำหรับ Test Runner
• ใช้ Chai สำหรับการ assertion หรือตรวจสอบผลการทำงาน
• ใช้ Enzyme สำหรับการทดสอบ React library

ส่วนเครื่องมือที่ขาดไปไม่ได้เลยก็คือ lint ซึ่งแนะนำให้ลองเขียน custom rule เองให้เห็นนะ ช่วยลดความผิดพลาดต่าง ๆ ได้มากมาย

เรื่องที่หก จัดการ style ต่าง ๆ กันอย่างไร ?

สั้น ๆ คือ ใช้ SCSS (Sassy CSS)

เรื่องที่เจ็ด ทำการจัดการเรื่องของ rounting ของ React App กันอย่างไร ?

มีหลาย ๆ ส่วนใช้งาน react-router แต่ส่วนใหญ่จะไม่จัดการด้วย JavaScript นะ

มาถึงตรงนี้น่าจะพอทำให้เห็นการนำ React มาใช้ในการพัฒนาระบบบ้างนะครับ ขอให้สนุกกับการ coding ครับ