ประสบการณ์การนำ React Native มาใช้ที่ Coinbase

ไม่นานมานี้ มีนักพัฒนาของ Coinbase แชร์บน Twitter ว่าแอป Coinbase ตัวใหม่เขียนด้วย RN ทำให้กลายเป็นประเด็นพูดถึงเล็ก ๆ (https://twitter.com/htormey/status/1392161714250993667) และตอนนี้ก็มีบทความบน Medium ที่เล่ารายละเอียดเพิ่มเติมออกมาแล้ว ตามเธรดทวีตที่เกี่ยวข้อง แม้จะมี native module อยู่บางส่วน แต่โค้ดเบสของแอปประมาณ 97% เป็น TypeScript

ด้านล่างคือสรุปแปลจากต้นฉบับ:

• ย้ายจากแอปเนทีฟ iOS และ Android ที่มีอยู่แล้ว ไปสู่ RN ในกระบวนการย้ายต้องสร้างแอปเนทีฟขนาดใหญ่ที่มีมากกว่า 200 หน้าขึ้นมาใหม่ และยังมีการสอน RN ภายในบริษัทให้กับวิศวกรเนทีฟเดิมมากกว่า 30 คนเพื่อช่วยในการเปลี่ยนผ่าน

• หลังจากทุ่มเทอย่างมาก ตัวชี้วัดสำคัญทั้งหมดเมื่อเทียบกับยุคเนทีฟ ไม่ว่าจะเป็นตัวชี้วัดด้านประสิทธิภาพ ตัวชี้วัดทางธุรกิจ คะแนนรีวิวแอป เปอร์เซ็นต์ผู้ใช้ที่ใช้งานได้โดยไม่แครชภายใน 7 วัน เวลา Cold Start และเวลาสลับแท็บ ล้วนรักษาระดับไว้ได้หรือดีขึ้น

• แอปแรกเปิดตัวในปี 2013 และพอถึงราวปี 2017 แต่ละฝั่ง Android/iOS มีทีมขนาดเล็กของตัวเอง แต่การจ้างคนยากกว่านักพัฒนาเว็บมาก และรู้สึกว่าผลิตภาพที่ได้จากความก้าวหน้าของเทคโนโลยีเว็บนั้น เทคโนโลยีฝั่งเนทีฟยังตามไม่ทัน หลังจากลองหลายครั้งแล้วไม่สำเร็จ ในปี 2018 จึงชัดเจนว่าจำเป็นต้องปรับปรุงความเร็วในการทำ iteration และอัตราการเติบโตของแพลตฟอร์มมือถือ

• Coinbase ตัดสินใจทบทวนใหม่ตั้งแต่รากฐานว่าควรสร้างผลิตภัณฑ์อย่างไร เดิมทีฟีเจอร์หลักถูกจัดเป็นทีมตามสายงาน โดยมีแบ็กเอนด์ 2 คน และฝั่งไคลเอนต์อีกแพลตฟอร์มละ 2 คน (Web, Android, iOS) ทำให้หนึ่ง vertical ต้องใช้คนมากเกินไป จึงเริ่มตั้งคำถามว่าจะลดจำนวนวิศวกรขั้นต่ำของหนึ่งทีมฟีเจอร์จาก 8 คนเหลือประมาณ 5 คนได้ไหม และให้นักพัฒนาไคลเอนต์ครอบคลุมได้หลายแพลตฟอร์มหรือไม่

• คาดหวังว่าการทำแบบนี้จะช่วยผ่อนคลายข้อกำหนดขั้นต่ำของการจัดทีม ทำให้พัฒนาได้มีประสิทธิภาพขึ้น และเพิ่มจุดเชื่อมต่อระหว่างนักพัฒนาไคลเอนต์ด้วยกัน แน่นอนว่าความมีประสิทธิภาพอย่างเดียวไม่พอ แต่ต้องทำให้ประสิทธิภาพและคุณภาพที่ลูกค้ารับรู้ดีขึ้นด้วย จึงจะคุ้มค่ากับการลงทุนนี้

• ตอนนั้น Coinbase มีทีมเว็บแพลตฟอร์มที่ใช้ React และค่อนข้างเติบโตเต็มที่อยู่แล้ว หลังจากพิจารณาทางเลือกแบบ cross-platform หลายแบบ จึงเลือก RN เพราะอิงกับเทคโนโลยีเดิมที่คุ้นเคยและดูมีเส้นทางที่ชัดเจนสำหรับการรวมเว็บกับมือถือ อีกทั้งยังต้องย้ายจากแอปเนทีฟที่ใช้งานอยู่แล้ว จึงใช้เวลาหลายเดือนล่วงหน้าเพื่อประเมินเทคนิคและวางกลยุทธ์สำหรับการย้ายแบบค่อยเป็นค่อยไปและไม่สะเทือนมาก

• เริ่มจาก greenfield ที่ไม่จำเป็นต้องเชื่อม RN กับเนทีฟก่อน ภายใน Coinbase เอง มีผลิตภัณฑ์เว็บชื่อ Pro ซึ่งตอนนั้นยังไม่มีบนมือถือ และมีความซับซ้อนสูง มีฟีเจอร์จำนวนมากที่เน้นประสิทธิภาพ เช่น กราฟราคาแบบเรียลไทม์และ depth chart จึงตัดสินใจลองสร้างแอป Pro ด้วย RN ก่อน โดยตั้งสมมติฐานว่าถ้าสร้าง Pro ด้วย RN ได้ดี ฟีเจอร์ที่เหลือซึ่งซับซ้อนน้อยกว่าและต้องการประสิทธิภาพไม่หนักเท่า ก็น่าจะย้ายตามมาได้ไม่ยาก

• ขั้นต่อมาคือเอา onboarding flow ที่ Pro กับแอปเดิมใช้ร่วมกัน มาทำด้วย RN แล้วต่อเข้ากับแอปเนทีฟเดิม เนื่องจากมีหลายภูมิภาคที่ให้บริการ ส่วน onboarding จึงเป็นหนึ่งในส่วนที่ซับซ้อนที่สุดของแอป และเดิมเป็นส่วนที่แก้ไขได้ยากมาก หวังว่าการสร้างใหม่ใน Pro จะช่วยรีแฟกเตอร์ของเดิมไปพร้อมกันได้ด้วย

• สุดท้ายก็นำประสบการณ์และความรู้จากสองขั้นก่อนหน้า มาใช้เขียนแอปเนทีฟเดิมใหม่ด้วย RN ตอนวางแผนช่วงแรกยังไม่แน่ใจว่าจะเป็น full rewrite หรือจะค่อย ๆ เพิ่มสัดส่วน RN เข้าไปในแอปเนทีฟเดิม และตั้งใจจะตัดสินใจจากผลลัพธ์ของสองขั้นก่อนหน้า

• หลังวางกลยุทธ์แล้ว ก็เปิดตัวแอป Pro บนมือถือในเดือนตุลาคม 2019 และผลลัพธ์ดีกว่าที่คาด ทั้งผลทางธุรกิจและการเรียนรู้ว่าปัญหาด้านประสิทธิภาพอยู่ตรงไหนและควรแก้อย่างไร พวกเขาพอใจกับผลิตภาพที่ RN มอบให้มาก และยังยืนยันได้ด้วยว่าวิศวกรเว็บสามารถทำงานบน RN ได้อย่างมีผลิตภาพภายในเวลาไม่นาน

• จากแรงหนุนนี้จึงเริ่มเขียน onboarding flow ใหม่ด้วย ซึ่งก็ทำเป้าหมายได้เช่นกันทั้งด้านธุรกิจและคุณภาพของแอป

ผลลัพธ์ของการเขียน onboarding flow ใหม่เองนั้นดี แต่ก็ทำให้ตระหนักว่าการเอา RN ไปต่อเข้ากับแอปเดิมเป็นเรื่องยาก

เมื่อเทียบกับการทำเฉพาะเว็บหรือเฉพาะเนทีฟ ผลิตภาพก็ไม่ดี ทำให้มีวิศวกรจากทั้งสองฝั่งที่รู้สึกว่า “ถ้าอย่างนั้นจะใช้ RN ไปทำไม” (คล้ายกับกรณีของ Airbnb มาก และพวกเขาก็ได้เรียนรู้มากจากการพูดคุยกับวิศวกรของ Airbnb โดยตรง)

• สุดท้ายจากบทเรียนเหล่านี้ จึงสรุปได้ว่าแนวทางแบบ brownfield ที่พาเนทีฟกับ RN ไปด้วยกันคือรากของปัญหาทั้งหมด และตัดสินใจเขียนแอปเดิมทั้งตัวใหม่ด้วย RN

• จากสองแพลตฟอร์ม มองว่าการย้ายแอป Android น่าจะยากกว่าในด้านคุณภาพ ประสิทธิภาพ และผลิตภาพ จึงเลือก Android เป็นเป้าหมายแรกในการเขียนใหม่ จากประสบการณ์ก่อนหน้า คาดว่า full rewrite จะใช้เวลาประมาณ 6 เดือน แต่ประเมินว่าผลประโยชน์ที่จะได้มีมากกว่าต้นทุน

• เริ่มเขียนแอป Android ใหม่ในเดือนมีนาคม 2020 และใช้เวลาจริงประมาณ 6 เดือน จากนั้นการเขียน iOS ใหม่ก็ตามมาและเสร็จในเดือนมกราคม 2021 โดยทั้งสองแพลตฟอร์มมีผลลัพธ์ที่ดีในตัวชี้วัดหลัก

• กลางปี 2020 Coinbase มีวิศวกร iOS 18 คน และวิศวกร Android 7 คน และ ณ เดือนพฤษภาคม 2021 รีโพซิทอรี RN ของ Coinbase มีผู้ร่วมพัฒนา 113 คน ซึ่งในจำนวนนั้นมีวิศวกรเว็บจำนวนมากที่ก่อนหน้านี้ไม่สามารถมีส่วนร่วมกับงานมือถือได้

• การฝึกอบรมเพื่อเปลี่ยนวิศวกรเนทีฟไปเป็นวิศวกร RN ดำเนินไปโดยแทบไม่มีแรงเสียดทาน และวิศวกรที่มีพื้นฐานเนทีฟเดิมก็ทำผลงานได้ดีมากในแอป RN ปัจจุบัน แม้ยังไม่สมบูรณ์แบบ แต่ก็เริ่มเป็นไปตามที่คาดไว้ตั้งแต่แรก คือในแต่ละทีมฟีเจอร์จะมี “ทีมไคลเอนต์” ชุดเดียวที่ครอบคลุมทุกแพลตฟอร์มฝั่งไคลเอนต์

• จากเดิมที่มีสามแพลตฟอร์ม (React, iOS, Android) ตอนนี้เหลือสองแพลตฟอร์ม (React, RN) และก้าวถัดไปคือพยายามลดให้เหลือ 1.5 แพลตฟอร์ม โดยมีแผนจะแชร์ทั้ง design system ระหว่างเว็บกับ RN, data layer กลางที่ใช้ GraphQL และ tooling ฝั่งโครงสร้างพื้นฐาน เป้าหมายคือให้วิศวกรหนึ่งคนสามารถปล่อยฟีเจอร์บนทุกแพลตฟอร์มทั้งเว็บและมือถือได้ โดยมี context switching ให้น้อยที่สุด

• ต่อจากนี้จะมีการแชร์บทความเกี่ยวกับ RN เพิ่มเติม ทั้งอุปสรรคทางเทคนิคและประสบการณ์ที่ได้ระหว่างทาง

[budlebee]

ทำให้นึกถึงบทความการนำ RN มาใช้ของ Laftel เลยครับ

https://ridicorp.com/story/react-native-1year-review/

[xguru]

เป็นบทความที่น่าจะช่วยบริษัทในประเทศได้มากเลยนะครับ ขอบคุณสำหรับสรุปและแปลให้ครับ!