ประสบการณ์ 5 ปีของ Shopify กับการใช้ React Native

xguru · 2025-01-20T10:25:02+09:00

Shopify ประกาศเมื่อ 5 ปีก่อนว่า React Native (RN) คืออนาคตของการพัฒนาโมบายล์ และหลังจากนั้นก็ย้ายทุกแอปไปใช้ RN ได้สำเร็จ เหตุผลหลักของการนำ React Native มาใช้ เขียนครั้งเดียวรองรับสองแพลตฟอร์ม: เพื่อลดความไม่มีประสิทธิภาพจากการต้องพัฒนาฟีเจอร์เดียวกันซ้ำสองครั้งบน iOS และ Android เพิ่มความคล่องตัวของบุคลากร: ช่วยให้นักพัฒนาสามารถสลับไปทำงานระหว่าง iOS, Android และ Web ได้อย่างอิสระ ส่งมอบคุณค่าได้มากขึ้น: ลดเวลาที่ใช้ไปกับการทำให้ฟีเจอร์เท่าเทียมกัน และส่งมอบคุณค่าให้ผู้ใช้ได้มากขึ้น ผลลัพธ์ของการเปลี่ยนผ่านที่ประสบความสำเร็จ ไม่ต้องพัฒนาฟีเจอร์เดียวกันซ้ำสองครั้ง ทำให้ประสิทธิภาพการทำงานเพิ่มขึ้นอย่างมาก วิศวกรสามารถทำงานได้ทั้งเว็บและโมบายล์ จึงทำงานได้มากขึ้นด้วยบุคลากรชุดเดิม และสร้างโอกาสการเติบโตใหม่ ๆ การรักษาความเท่าเทียมของฟีเจอร์ระหว่าง iOS และ Android ไม่ใช่ปัญหาอีกต่อไป ทำให้ส่งมอบคุณค่าได้มากขึ้น เวลาโหลดหน้าจอของแอปเร็วต่ำกว่า 500ms และมากกว่า 99.9% ของเซสชันมีความเสถียร ยังคงใช้ native code สำหรับงานที่เหมาะสมที่สุด จึงได้ประโยชน์จากทั้งสองโลก ประเด็นที่ได้เรียนรู้หลัก แอป React Native เร็ว Shopify ให้ความสำคัญกับประสิทธิภาพอย่างมาก และ CEO อย่าง Tobi Lutke ก็ย้ำว่า "ซอฟต์แวร์ที่เร็วไม่ใช่ทุกตัวจะยอดเยี่ยม แต่ซอฟต์แวร์ที่ยอดเยี่ยมทุกตัวต้องเร็ว" ก่อนเปลี่ยนมาใช้ React Native (RN) คำถามใหญ่ที่สุดคือ RN จะตอบโจทย์เป้าหมายด้านประสิทธิภาพได้หรือไม่ ดังนั้นก่อนตัดสินใจย้ายมาใช้ จึงทำการทำต้นแบบอย่างกว้างขวางเพื่อดูว่าทำได้จริงหรือไม่ ตรวจสอบงานที่ Meta กำลังทำเพื่อลด bottleneck ด้านประสิทธิภาพ และระบุจุดที่สามารถมีส่วนช่วยได้ เช่น ในส่วนของ list ตัดสินใจนำ RN มาใช้อย่างเต็มรูปแบบโดยเชื่อว่า RN จะเร็วขึ้นในไม่ช้า หลังผ่านไป 5 ปี ตอนนี้แอป RN ทำงานได้รวดเร็ว และในแอปของ Shopify ทำเวลาโหลดหน้าจอได้ต่ำกว่า 500ms (P75) และยังทำเป้าหมายด้านประสิทธิภาพที่ใกล้เคียงกันได้สำเร็จในทุกแอปอื่น การใช้แพตเทิร์นและเทคนิคที่ดีเพื่อลด bottleneck ด้านประสิทธิภาพยังคงเป็นสิ่งจำเป็น ไม่ใช่ว่า native จะเร็วเสมอไป และ RN ก็ไม่ได้ช้าเสมอไป RN พัฒนาไปมากในช่วงไม่กี่ปีที่ผ่านมา จนกลายเป็นแพลตฟอร์มสำหรับสร้างแอประดับโลกได้ คาดว่าเมื่อเฟรมเวิร์ก RN มีความสมบูรณ์มากขึ้น การสร้างแอปที่เร็วจะยิ่งง่ายขึ้น เมื่อความเชี่ยวชาญของทีมเพิ่มขึ้น ก็จะมีพื้นที่ในการสร้างแอปที่ดียิ่งขึ้นมากขึ้น ข้อดีของ hot reloading hot reloading ของ React Native (RN) เป็นฟีเจอร์ที่พลิกโฉมสภาพแวดล้อมการพัฒนา โดยสะท้อนการเปลี่ยนแปลงได้ทันที หนึ่งในปัญหาใหญ่ที่สุดของการพัฒนาแบบ native คือยิ่ง codebase ใหญ่ การเปลี่ยนแปลงเล็กน้อยก็อาจใช้เวลาหลายนาทีในการคอมไพล์และรันบน emulator หรืออุปกรณ์จริง สิ่งนี้ทำให้เสียเวลาและรบกวน flow การทำงานของนักพัฒนา hot reloading ของ RN แก้ปัญหานี้ได้อย่างสิ้นเชิง ช่วยเพิ่มทั้งประสิทธิภาพการทำงานและประสบการณ์การพัฒนาอย่างมาก ได้ความคล่องตัวของบุคลากรจาก Typescript เมื่อ Typescript ถูกใช้อย่างแพร่หลายมากขึ้น การย้ายไปมาของนักพัฒนาระหว่าง React บนเว็บและ React Native (RN) ก็ราบรื่นขึ้น นักพัฒนาเว็บ: ผ่าน RN ทำให้เริ่มงานโมบายล์ได้ง่ายกว่าการพัฒนา native บน iOS และ Android มาก นักพัฒนาโมบายล์: ผ่าน RN ทำให้เข้ามามีส่วนร่วมกับงานเว็บได้ง่าย ข้อดีของความคล่องตัวของบุคลากร มอบโอกาสการเติบโตให้วิศวกรมากขึ้น และเพิ่มความยืดหยุ่นในการจัดสรรกำลังคน เสริมความสามารถในการทำงานได้มากขึ้นด้วยบุคลากรพัฒนาชุดเดิม สร้างประสิทธิภาพและ productivity ที่มากขึ้นผ่านการแชร์โค้ดระหว่างเว็บกับโมบายล์ นักพัฒนาที่ทำงานได้หลายแพลตฟอร์มช่วยให้ปล่อยงานได้เร็วขึ้น และยังแลกเปลี่ยนไอเดียข้ามเทคโนโลยีเพื่อนำไปประยุกต์ใช้ในรูปแบบใหม่ได้ สิ่งนี้ยังช่วยสร้างวัฒนธรรมที่มองเทคโนโลยีเป็นเครื่องมือ ขยายมุมมองของทีม และสนับสนุนให้เลือกเครื่องมือที่เหมาะกับงานที่สุด นักพัฒนา native ยังจำเป็น วิศวกรโมบายล์ที่เชี่ยวชาญ iOS และ Android ยังเป็นสิ่งจำเป็นในการสร้างแอปโมบายล์ที่ยอดเยี่ยม ประสบการณ์ที่สั่งสมจากการพัฒนาผลิตภัณฑ์โมบายล์หลายตัว รวมถึงความเข้าใจเชิงลึกด้าน usability และ convention เป็นสิ่งที่ทดแทนไม่ได้ งานอย่างการเข้าถึง platform layer, การเขียน binding, การเชี่ยวชาญ build และ deployment รวมถึงการจัดการอัปเดตเวอร์ชัน React Native ต้องอาศัยความเชี่ยวชาญแบบ native นักพัฒนา native ยังจำเป็นต่อการปรับแต่งประสิทธิภาพแอปบนอุปกรณ์หลากหลายรุ่น และมอบประสบการณ์ที่สม่ำเสมอให้ผู้ใช้ทุกคน ยังจำเป็นต่อการรับมือกับฟีเจอร์ใหม่, API และการเปลี่ยนแปลงของ tooling บน iOS และ Android รวมถึงการจัดการอัปเดตเวอร์ชัน React Native การพัฒนาหลักสูตรฝึก React Native สำหรับนักพัฒนาโมบายล์แบบ native: ออกแบบให้เรียนรู้ได้ด้วยตัวเอง เพื่อช่วยให้เขียนโค้ดระดับ production ได้ มีการสนับสนุนเพิ่มเติมผ่าน Q&A session, pair programming และ code review กับนักพัฒนาที่เชี่ยวชาญ React Native เพิ่มนักพัฒนาเว็บ (ผู้เชี่ยวชาญ JavaScript, TypeScript, React) เข้าไปในทีมโมบายล์: เพื่อสร้างสมดุลของความเชี่ยวชาญที่แข็งแกร่งทั้งฝั่ง native และ React Native เมื่อเวลาผ่านไป ระดับทักษะของทั้งทีมก็ดีขึ้น การมีทีมที่ผสานนักพัฒนา native และเว็บเข้าด้วยกันอย่างลงตัว คือหัวใจของการสร้างแอปโมบายล์ที่ยอดเยี่ยมด้วย React Native native code ยังจำเป็น ไม่ควรตั้งเป้าใช้ React Native 100%: RN เป็นเครื่องมือที่มีประสิทธิภาพเพราะช่วยให้พัฒนาฟีเจอร์ส่วนใหญ่ได้เพียงครั้งเดียว แต่ไม่ใช่เทคโนโลยีที่เหมาะกับทุกสถานการณ์ กรณีที่ต้องใช้ native code การพัฒนาฟีเจอร์ล้ำสมัย: เช่น ฟีเจอร์ที่ใช้ฮาร์ดแวร์อย่างการสแกน 2D/3D และการรันโมเดล AI บนอุปกรณ์ ฟีเจอร์ที่มีข้อจำกัดด้านหน่วยความจำ: เช่น widget บนหน้าหลักและหน้าล็อก, แอปและ complication บน Apple Watch, App Intents, Siri Shortcuts งานเบื้องหลังที่ทำงานต่อเนื่องเป็นเวลานาน: ตัวอย่าง: แอป Point of Sale ของ Shopify ดาวน์โหลดและซิงก์ข้อมูลจำนวนมากในเบื้องหลัง เพื่อให้ประมวลผลธุรกรรมแบบออฟไลน์ได้ ออกแบบให้ offload งานเบื้องหลังไปยัง native code ทั้งหมด เพื่อไม่ให้กระทบต่อประสิทธิภาพของแอป RN เหมาะกับการพัฒนาฟีเจอร์ส่วนใหญ่เพียงครั้งเดียว แต่ในพื้นที่ที่ native ทำงานได้ดีที่สุด การใช้ native code คือทางเลือกที่เหมาะสม ความสามารถในการทำงานร่วมกับ native ที่ RN มีมาโดยพื้นฐาน ทำให้การผสมสองเทคโนโลยีนี้เข้าด้วยกันทำได้ง่าย สิ่งสำคัญคือต้องมองความสัมพันธ์เป็น RN ‘และ’ native ไม่ใช่ RN ‘หรือ’ native การมีทีมที่มีความเชี่ยวชาญ native เป็นสิ่งจำเป็นต่อการทำให้ความผสานนี้เกิดขึ้นได้อย่างมีประสิทธิภาพ ความยากของการดีบัก การดีบักใน React Native (RN) ยังมีด้านที่ไม่เสถียร และต้องทำงานเพิ่มเติมเพื่อให้ตั้งค่าได้ถูกต้องใน VSCode iOS และ Android มีความสามารถด้านการดีบักที่แข็งแรงและเสถียรมาให้โดยพื้นฐาน ล่าสุด Meta กำลังปรับปรุงด้วยการเขียน debugger stack ของ RN ใหม่ทั้งหมด และ debugger ใหม่ก็แสดงผลลัพธ์ที่มีแนวโน้มดี Shopify กำลังร่วมมือกับ Meta เพื่อยกระดับสภาพแวดล้อมการดีบักของ RN ให้ขึ้นสู่ระดับโลก การอัปเดต React Native ไม่ได้ seamless การอัปเดตแอปไปยัง React Native (RN) เวอร์ชันใหม่ต้องใช้แรงงานมาก และมักต้องมีการปรับโครงสร้าง codebase เพื่อแก้ปัญหานี้ Shopify ได้จัดตั้ง กลุ่มนักพัฒนาหมุนเวียนขนาดเล็ก มารับผิดชอบงานอัปเดตโดยเฉพาะ เพื่อให้ทีมที่เหลือโฟกัสกับการพัฒนาฟีเจอร์ได้ คาดว่าเมื่อเฟรมเวิร์ก RN สมบูรณ์ขึ้น กระบวนการอัปเดตจะค่อย ๆ ง่ายขึ้น เมื่อ New Architecture ถูกนำมาใช้อย่างแพร่หลายมากขึ้น ก็คาดว่าความซับซ้อนของงานอัปเดตจะลดลง การพึ่งพาไลบรารีของ third-party มากขึ้น เฟรมเวิร์ก React Native (RN) ยังไม่ครอบคลุมเท่า native จึงทำให้ต้องใช้ไลบรารี third-party มากกว่า ในช่วงไม่กี่ปีที่ผ่านมา ecosystem มีความสมบูรณ์ขึ้นมาก จนแทบทุกฟังก์ชันที่ต้องการสามารถหาไลบรารีที่ดูแลรักษาอย่างดีได้ไม่ยาก อย่างไรก็ตาม ยังต้องคอยดูแลการอัปเดตของไลบรารี third-party อย่างต่อเนื่อง และเพิ่มพื้นที่เสี่ยงต่อ supply chain attack Shopify นำ การอัปเดต dependency อัตโนมัติ มาใช้ผ่าน Dependabot พร้อม การสแกนโค้ดอัตโนมัติ เพื่อช่วยตรวจจับและป้องกันโค้ดอันตราย คาดหวังว่าเฟรมเวิร์ก RN จะมีทิศทางที่ชัดเจนขึ้น และพัฒนาไปในทางที่ให้ฟังก์ชันมาโดยพื้นฐานมากขึ้น ประโยชน์มหาศาลจากการใช้ฐานร่วมกัน ตอนที่เริ่มนำ React Native (RN) มาใช้ครั้งแรก ยังมีประสบการณ์ในการสร้างแอปโมบายล์ด้วย RN ไม่มากนัก และยังใช้ประโยชน์จากฐานร่วมที่สั่งสมจากการพัฒนาแบบ native ไม่ได้ ในช่วงแรก แต่ละทีมแก้ปัญหาของตัวเองและพัฒนาแอปของตัวเอง ซึ่งเหมาะกับการเริ่มต้นอย่างรวดเร็วและการย้ายแอป อย่างไรก็ตาม แต่ละทีมกลับต้องแก้ปัญหาเดิมซ้ำหลายครั้ง เกิดงานซ้ำซ้อนที่ไม่มีประสิทธิภาพ มีการลงทุนทั้งเวลาและความพยายามเพื่อสร้างความเชี่ยวชาญด้าน RN และตั้งใจเลือก trade-off ที่ให้ความสำคัญกับความเร็วมากกว่าความสม่ำเสมอ หลังปี 2023 เมื่อทุกแอปเริ่มเติบโตเต็มที่ ก็เริ่มเสริมความสม่ำเสมอมากขึ้น แยกองค์ประกอบร่วม (เช่น Identity, การมอนิเตอร์แบบเรียลไทม์, การวัดประสิทธิภาพ ฯลฯ) ออกมาเป็น shared library เพื่อใช้ในทุกแอป สิ่งนี้ช่วยให้ทีมต่าง ๆ ใช้โซลูชันที่มีอยู่แล้วได้ โดยไม่ต้องกลับไปแก้ปัญหาที่มีคำตอบอยู่แล้วอีก ในปี 2025 มีแผนจะขยายการแชร์โค้ดให้มากขึ้นอีก กระจายความรู้และความเชี่ยวชาญระหว่างทีม ให้ทุกแอปได้รับประโยชน์จากการปรับปรุง shared component โดยอัตโนมัติ ประหยัดทรัพยากรด้านวิศวกรรม เพื่อโฟกัสกับงานที่ส่งมอบคุณค่าให้ผู้ใช้ อนาคตของ React Native อนาคตของ React Native (RN) สดใส และ Meta ก็เป็นผู้ดูแลโครงการนี้ได้อย่างยอดเยี่ยม พร้อมส่งมอบการปรับปรุงอย่างสม่ำเสมอ ในแต่ละรีลีส เสียงตอบรับจากนักพัฒนาถูกนำไปสะท้อนใน roadmap อย่างมาก และคาดว่าการสร้างแอปที่เร็วจะยิ่งง่ายขึ้นเรื่อย ๆ Shopify มีแผนจะสนับสนุนการพัฒนาของ RN อย่างต่อเนื่อง พร้อมทั้งนำ New Architecture มาใช้ บริษัทใหญ่หลายแห่ง เช่น Microsoft, Amazon, Tesla, SpaceX และ Coinbase ต่างใช้ RN และยังมี third-party library กับ framework คุณภาพสูงออกมาอย่างต่อเนื่อง Shopify มีส่วนร่วมกับ open web, open source, open standards ผ่านสิ่งต่าง ๆ ต่อไปนี้ ร่วมเขียนโค้ดให้ RN ทำหน้าที่ co-release captain ของรีลีส RN สนับสนุนโครงการโอเพนซอร์ซที่มีอิมแพ็กต์สูง เช่น React Native Skia, Reanimated เปิดโครงการโอเพนซอร์ซ เช่น Flashlist, Restyle, Tophat นอกจากนี้ ในปี 2025 ยังมีการกลับมาเริ่มต้น React Native Working Group อีกครั้ง เป้าหมายคือรวบรวมผู้นำหลักขององค์กรที่สนับสนุน RN เพื่อระบุโจทย์สำคัญของ ecosystem, จัดลำดับความสำคัญของการลงทุน, ส่งเสริมความร่วมมือ และลดงานซ้ำซ้อน บริษัทที่เคยเข้าร่วมก่อนหน้านี้ ได้แก่ Meta, Twitter, Coinbase, Microsoft เป็นต้น หากต้องการเข้าร่วม สามารถติดต่อสอบถามได้ RN พัฒนาขึ้นอย่างมากในช่วง 5 ปีที่ผ่านมา และข้อจำกัดหลายอย่างที่เคยทำให้ลังเลในการนำมาใช้ก็หายไปแล้ว หากคุณไม่ได้ใช้ RN มาสักระยะ ตอนนี้เป็นจังหวะที่ดีที่จะลอง RN อีกครั้ง

(shopify.engineering)

32 คะแนน โดย xguru 2025-01-20 | 9 ความคิดเห็น | แชร์ทาง WhatsApp

Shopify ประกาศเมื่อ 5 ปีก่อนว่า React Native (RN) คืออนาคตของการพัฒนาโมบายล์ และหลังจากนั้นก็ย้ายทุกแอปไปใช้ RN ได้สำเร็จ
เหตุผลหลักของการนำ React Native มาใช้
- เขียนครั้งเดียวรองรับสองแพลตฟอร์ม: เพื่อลดความไม่มีประสิทธิภาพจากการต้องพัฒนาฟีเจอร์เดียวกันซ้ำสองครั้งบน iOS และ Android
- เพิ่มความคล่องตัวของบุคลากร: ช่วยให้นักพัฒนาสามารถสลับไปทำงานระหว่าง iOS, Android และ Web ได้อย่างอิสระ
- ส่งมอบคุณค่าได้มากขึ้น: ลดเวลาที่ใช้ไปกับการทำให้ฟีเจอร์เท่าเทียมกัน และส่งมอบคุณค่าให้ผู้ใช้ได้มากขึ้น
ผลลัพธ์ของการเปลี่ยนผ่านที่ประสบความสำเร็จ
- ไม่ต้องพัฒนาฟีเจอร์เดียวกันซ้ำสองครั้ง ทำให้ประสิทธิภาพการทำงานเพิ่มขึ้นอย่างมาก
- วิศวกรสามารถทำงานได้ทั้งเว็บและโมบายล์ จึงทำงานได้มากขึ้นด้วยบุคลากรชุดเดิม และสร้างโอกาสการเติบโตใหม่ ๆ
- การรักษาความเท่าเทียมของฟีเจอร์ระหว่าง iOS และ Android ไม่ใช่ปัญหาอีกต่อไป ทำให้ส่งมอบคุณค่าได้มากขึ้น
- เวลาโหลดหน้าจอของแอปเร็วต่ำกว่า 500ms และมากกว่า 99.9% ของเซสชันมีความเสถียร
- ยังคงใช้ native code สำหรับงานที่เหมาะสมที่สุด จึงได้ประโยชน์จากทั้งสองโลก

ประเด็นที่ได้เรียนรู้หลัก

แอป React Native เร็ว

Shopify ให้ความสำคัญกับประสิทธิภาพอย่างมาก และ CEO อย่าง Tobi Lutke ก็ย้ำว่า "ซอฟต์แวร์ที่เร็วไม่ใช่ทุกตัวจะยอดเยี่ยม แต่ซอฟต์แวร์ที่ยอดเยี่ยมทุกตัวต้องเร็ว"
ก่อนเปลี่ยนมาใช้ React Native (RN) คำถามใหญ่ที่สุดคือ RN จะตอบโจทย์เป้าหมายด้านประสิทธิภาพได้หรือไม่
- ดังนั้นก่อนตัดสินใจย้ายมาใช้ จึงทำการทำต้นแบบอย่างกว้างขวางเพื่อดูว่าทำได้จริงหรือไม่
- ตรวจสอบงานที่ Meta กำลังทำเพื่อลด bottleneck ด้านประสิทธิภาพ และระบุจุดที่สามารถมีส่วนช่วยได้ เช่น ในส่วนของ list
- ตัดสินใจนำ RN มาใช้อย่างเต็มรูปแบบโดยเชื่อว่า RN จะเร็วขึ้นในไม่ช้า
หลังผ่านไป 5 ปี ตอนนี้แอป RN ทำงานได้รวดเร็ว และในแอปของ Shopify ทำเวลาโหลดหน้าจอได้ต่ำกว่า 500ms (P75)
- และยังทำเป้าหมายด้านประสิทธิภาพที่ใกล้เคียงกันได้สำเร็จในทุกแอปอื่น
- การใช้แพตเทิร์นและเทคนิคที่ดีเพื่อลด bottleneck ด้านประสิทธิภาพยังคงเป็นสิ่งจำเป็น
ไม่ใช่ว่า native จะเร็วเสมอไป และ RN ก็ไม่ได้ช้าเสมอไป
- RN พัฒนาไปมากในช่วงไม่กี่ปีที่ผ่านมา จนกลายเป็นแพลตฟอร์มสำหรับสร้างแอประดับโลกได้
คาดว่าเมื่อเฟรมเวิร์ก RN มีความสมบูรณ์มากขึ้น การสร้างแอปที่เร็วจะยิ่งง่ายขึ้น
- เมื่อความเชี่ยวชาญของทีมเพิ่มขึ้น ก็จะมีพื้นที่ในการสร้างแอปที่ดียิ่งขึ้นมากขึ้น

ข้อดีของ hot reloading

hot reloading ของ React Native (RN) เป็นฟีเจอร์ที่พลิกโฉมสภาพแวดล้อมการพัฒนา โดยสะท้อนการเปลี่ยนแปลงได้ทันที
หนึ่งในปัญหาใหญ่ที่สุดของการพัฒนาแบบ native คือยิ่ง codebase ใหญ่ การเปลี่ยนแปลงเล็กน้อยก็อาจใช้เวลาหลายนาทีในการคอมไพล์และรันบน emulator หรืออุปกรณ์จริง
สิ่งนี้ทำให้เสียเวลาและรบกวน flow การทำงานของนักพัฒนา
hot reloading ของ RN แก้ปัญหานี้ได้อย่างสิ้นเชิง ช่วยเพิ่มทั้งประสิทธิภาพการทำงานและประสบการณ์การพัฒนาอย่างมาก

ได้ความคล่องตัวของบุคลากรจาก Typescript

เมื่อ Typescript ถูกใช้อย่างแพร่หลายมากขึ้น การย้ายไปมาของนักพัฒนาระหว่าง React บนเว็บและ React Native (RN) ก็ราบรื่นขึ้น
- นักพัฒนาเว็บ: ผ่าน RN ทำให้เริ่มงานโมบายล์ได้ง่ายกว่าการพัฒนา native บน iOS และ Android มาก
- นักพัฒนาโมบายล์: ผ่าน RN ทำให้เข้ามามีส่วนร่วมกับงานเว็บได้ง่าย
ข้อดีของความคล่องตัวของบุคลากร
- มอบโอกาสการเติบโตให้วิศวกรมากขึ้น และเพิ่มความยืดหยุ่นในการจัดสรรกำลังคน
- เสริมความสามารถในการทำงานได้มากขึ้นด้วยบุคลากรพัฒนาชุดเดิม
- สร้างประสิทธิภาพและ productivity ที่มากขึ้นผ่านการแชร์โค้ดระหว่างเว็บกับโมบายล์
นักพัฒนาที่ทำงานได้หลายแพลตฟอร์มช่วยให้ปล่อยงานได้เร็วขึ้น และยังแลกเปลี่ยนไอเดียข้ามเทคโนโลยีเพื่อนำไปประยุกต์ใช้ในรูปแบบใหม่ได้
สิ่งนี้ยังช่วยสร้างวัฒนธรรมที่มองเทคโนโลยีเป็นเครื่องมือ ขยายมุมมองของทีม และสนับสนุนให้เลือกเครื่องมือที่เหมาะกับงานที่สุด

นักพัฒนา native ยังจำเป็น

วิศวกรโมบายล์ที่เชี่ยวชาญ iOS และ Android ยังเป็นสิ่งจำเป็นในการสร้างแอปโมบายล์ที่ยอดเยี่ยม
ประสบการณ์ที่สั่งสมจากการพัฒนาผลิตภัณฑ์โมบายล์หลายตัว รวมถึงความเข้าใจเชิงลึกด้าน usability และ convention เป็นสิ่งที่ทดแทนไม่ได้
งานอย่างการเข้าถึง platform layer, การเขียน binding, การเชี่ยวชาญ build และ deployment รวมถึงการจัดการอัปเดตเวอร์ชัน React Native ต้องอาศัยความเชี่ยวชาญแบบ native
นักพัฒนา native ยังจำเป็นต่อการปรับแต่งประสิทธิภาพแอปบนอุปกรณ์หลากหลายรุ่น และมอบประสบการณ์ที่สม่ำเสมอให้ผู้ใช้ทุกคน
ยังจำเป็นต่อการรับมือกับฟีเจอร์ใหม่, API และการเปลี่ยนแปลงของ tooling บน iOS และ Android รวมถึงการจัดการอัปเดตเวอร์ชัน React Native
การพัฒนาหลักสูตรฝึก React Native สำหรับนักพัฒนาโมบายล์แบบ native:
- ออกแบบให้เรียนรู้ได้ด้วยตัวเอง เพื่อช่วยให้เขียนโค้ดระดับ production ได้
- มีการสนับสนุนเพิ่มเติมผ่าน Q&A session, pair programming และ code review กับนักพัฒนาที่เชี่ยวชาญ React Native
เพิ่มนักพัฒนาเว็บ (ผู้เชี่ยวชาญ JavaScript, TypeScript, React) เข้าไปในทีมโมบายล์:
- เพื่อสร้างสมดุลของความเชี่ยวชาญที่แข็งแกร่งทั้งฝั่ง native และ React Native
- เมื่อเวลาผ่านไป ระดับทักษะของทั้งทีมก็ดีขึ้น
การมีทีมที่ผสานนักพัฒนา native และเว็บเข้าด้วยกันอย่างลงตัว คือหัวใจของการสร้างแอปโมบายล์ที่ยอดเยี่ยมด้วย React Native

native code ยังจำเป็น

ไม่ควรตั้งเป้าใช้ React Native 100%: RN เป็นเครื่องมือที่มีประสิทธิภาพเพราะช่วยให้พัฒนาฟีเจอร์ส่วนใหญ่ได้เพียงครั้งเดียว แต่ไม่ใช่เทคโนโลยีที่เหมาะกับทุกสถานการณ์
กรณีที่ต้องใช้ native code
- การพัฒนาฟีเจอร์ล้ำสมัย: เช่น ฟีเจอร์ที่ใช้ฮาร์ดแวร์อย่างการสแกน 2D/3D และการรันโมเดล AI บนอุปกรณ์
- ฟีเจอร์ที่มีข้อจำกัดด้านหน่วยความจำ: เช่น widget บนหน้าหลักและหน้าล็อก, แอปและ complication บน Apple Watch, App Intents, Siri Shortcuts
- งานเบื้องหลังที่ทำงานต่อเนื่องเป็นเวลานาน:
  - ตัวอย่าง: แอป Point of Sale ของ Shopify ดาวน์โหลดและซิงก์ข้อมูลจำนวนมากในเบื้องหลัง เพื่อให้ประมวลผลธุรกรรมแบบออฟไลน์ได้
  - ออกแบบให้ offload งานเบื้องหลังไปยัง native code ทั้งหมด เพื่อไม่ให้กระทบต่อประสิทธิภาพของแอป
RN เหมาะกับการพัฒนาฟีเจอร์ส่วนใหญ่เพียงครั้งเดียว แต่ในพื้นที่ที่ native ทำงานได้ดีที่สุด การใช้ native code คือทางเลือกที่เหมาะสม
ความสามารถในการทำงานร่วมกับ native ที่ RN มีมาโดยพื้นฐาน ทำให้การผสมสองเทคโนโลยีนี้เข้าด้วยกันทำได้ง่าย
สิ่งสำคัญคือต้องมองความสัมพันธ์เป็น RN ‘และ’ native ไม่ใช่ RN ‘หรือ’ native
การมีทีมที่มีความเชี่ยวชาญ native เป็นสิ่งจำเป็นต่อการทำให้ความผสานนี้เกิดขึ้นได้อย่างมีประสิทธิภาพ

ความยากของการดีบัก

การดีบักใน React Native (RN) ยังมีด้านที่ไม่เสถียร และต้องทำงานเพิ่มเติมเพื่อให้ตั้งค่าได้ถูกต้องใน VSCode
iOS และ Android มีความสามารถด้านการดีบักที่แข็งแรงและเสถียรมาให้โดยพื้นฐาน
ล่าสุด Meta กำลังปรับปรุงด้วยการเขียน debugger stack ของ RN ใหม่ทั้งหมด และ debugger ใหม่ก็แสดงผลลัพธ์ที่มีแนวโน้มดี
Shopify กำลังร่วมมือกับ Meta เพื่อยกระดับสภาพแวดล้อมการดีบักของ RN ให้ขึ้นสู่ระดับโลก

การอัปเดต React Native ไม่ได้ seamless

การอัปเดตแอปไปยัง React Native (RN) เวอร์ชันใหม่ต้องใช้แรงงานมาก และมักต้องมีการปรับโครงสร้าง codebase
เพื่อแก้ปัญหานี้ Shopify ได้จัดตั้ง กลุ่มนักพัฒนาหมุนเวียนขนาดเล็ก มารับผิดชอบงานอัปเดตโดยเฉพาะ เพื่อให้ทีมที่เหลือโฟกัสกับการพัฒนาฟีเจอร์ได้
คาดว่าเมื่อเฟรมเวิร์ก RN สมบูรณ์ขึ้น กระบวนการอัปเดตจะค่อย ๆ ง่ายขึ้น
เมื่อ New Architecture ถูกนำมาใช้อย่างแพร่หลายมากขึ้น ก็คาดว่าความซับซ้อนของงานอัปเดตจะลดลง

การพึ่งพาไลบรารีของ third-party มากขึ้น

เฟรมเวิร์ก React Native (RN) ยังไม่ครอบคลุมเท่า native จึงทำให้ต้องใช้ไลบรารี third-party มากกว่า
ในช่วงไม่กี่ปีที่ผ่านมา ecosystem มีความสมบูรณ์ขึ้นมาก จนแทบทุกฟังก์ชันที่ต้องการสามารถหาไลบรารีที่ดูแลรักษาอย่างดีได้ไม่ยาก
อย่างไรก็ตาม ยังต้องคอยดูแลการอัปเดตของไลบรารี third-party อย่างต่อเนื่อง และเพิ่มพื้นที่เสี่ยงต่อ supply chain attack
Shopify นำ การอัปเดต dependency อัตโนมัติ มาใช้ผ่าน Dependabot
- พร้อม การสแกนโค้ดอัตโนมัติ เพื่อช่วยตรวจจับและป้องกันโค้ดอันตราย
คาดหวังว่าเฟรมเวิร์ก RN จะมีทิศทางที่ชัดเจนขึ้น และพัฒนาไปในทางที่ให้ฟังก์ชันมาโดยพื้นฐานมากขึ้น

ประโยชน์มหาศาลจากการใช้ฐานร่วมกัน

ตอนที่เริ่มนำ React Native (RN) มาใช้ครั้งแรก ยังมีประสบการณ์ในการสร้างแอปโมบายล์ด้วย RN ไม่มากนัก และยังใช้ประโยชน์จากฐานร่วมที่สั่งสมจากการพัฒนาแบบ native ไม่ได้
ในช่วงแรก แต่ละทีมแก้ปัญหาของตัวเองและพัฒนาแอปของตัวเอง ซึ่งเหมาะกับการเริ่มต้นอย่างรวดเร็วและการย้ายแอป
- อย่างไรก็ตาม แต่ละทีมกลับต้องแก้ปัญหาเดิมซ้ำหลายครั้ง เกิดงานซ้ำซ้อนที่ไม่มีประสิทธิภาพ
- มีการลงทุนทั้งเวลาและความพยายามเพื่อสร้างความเชี่ยวชาญด้าน RN และตั้งใจเลือก trade-off ที่ให้ความสำคัญกับความเร็วมากกว่าความสม่ำเสมอ
หลังปี 2023 เมื่อทุกแอปเริ่มเติบโตเต็มที่ ก็เริ่มเสริมความสม่ำเสมอมากขึ้น
- แยกองค์ประกอบร่วม (เช่น Identity, การมอนิเตอร์แบบเรียลไทม์, การวัดประสิทธิภาพ ฯลฯ) ออกมาเป็น shared library เพื่อใช้ในทุกแอป
- สิ่งนี้ช่วยให้ทีมต่าง ๆ ใช้โซลูชันที่มีอยู่แล้วได้ โดยไม่ต้องกลับไปแก้ปัญหาที่มีคำตอบอยู่แล้วอีก
ในปี 2025 มีแผนจะขยายการแชร์โค้ดให้มากขึ้นอีก
- กระจายความรู้และความเชี่ยวชาญระหว่างทีม
- ให้ทุกแอปได้รับประโยชน์จากการปรับปรุง shared component โดยอัตโนมัติ
- ประหยัดทรัพยากรด้านวิศวกรรม เพื่อโฟกัสกับงานที่ส่งมอบคุณค่าให้ผู้ใช้

อนาคตของ React Native

อนาคตของ React Native (RN) สดใส และ Meta ก็เป็นผู้ดูแลโครงการนี้ได้อย่างยอดเยี่ยม พร้อมส่งมอบการปรับปรุงอย่างสม่ำเสมอ
ในแต่ละรีลีส เสียงตอบรับจากนักพัฒนาถูกนำไปสะท้อนใน roadmap อย่างมาก และคาดว่าการสร้างแอปที่เร็วจะยิ่งง่ายขึ้นเรื่อย ๆ
Shopify มีแผนจะสนับสนุนการพัฒนาของ RN อย่างต่อเนื่อง พร้อมทั้งนำ New Architecture มาใช้
บริษัทใหญ่หลายแห่ง เช่น Microsoft, Amazon, Tesla, SpaceX และ Coinbase ต่างใช้ RN และยังมี third-party library กับ framework คุณภาพสูงออกมาอย่างต่อเนื่อง
Shopify มีส่วนร่วมกับ open web, open source, open standards ผ่านสิ่งต่าง ๆ ต่อไปนี้
- ร่วมเขียนโค้ดให้ RN
- ทำหน้าที่ co-release captain ของรีลีส RN
- สนับสนุนโครงการโอเพนซอร์ซที่มีอิมแพ็กต์สูง เช่น React Native Skia, Reanimated
- เปิดโครงการโอเพนซอร์ซ เช่น Flashlist, Restyle, Tophat
นอกจากนี้ ในปี 2025 ยังมีการกลับมาเริ่มต้น React Native Working Group อีกครั้ง
- เป้าหมายคือรวบรวมผู้นำหลักขององค์กรที่สนับสนุน RN เพื่อระบุโจทย์สำคัญของ ecosystem, จัดลำดับความสำคัญของการลงทุน, ส่งเสริมความร่วมมือ และลดงานซ้ำซ้อน
- บริษัทที่เคยเข้าร่วมก่อนหน้านี้ ได้แก่ Meta, Twitter, Coinbase, Microsoft เป็นต้น
- หากต้องการเข้าร่วม สามารถติดต่อสอบถามได้
RN พัฒนาขึ้นอย่างมากในช่วง 5 ปีที่ผ่านมา และข้อจำกัดหลายอย่างที่เคยทำให้ลังเลในการนำมาใช้ก็หายไปแล้ว
หากคุณไม่ได้ใช้ RN มาสักระยะ ตอนนี้เป็นจังหวะที่ดีที่จะลอง RN อีกครั้ง

9 ความคิดเห็น

firea32 2025-02-03

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

wkang586 2025-01-28

ผมสงสัยว่า มีฟีเจอร์เนทีฟอะไรบ้างที่ Native API ของ RN ยังครอบคลุมไม่ได้

tsboard 2025-01-23

เป็นการแชร์ประสบการณ์ที่น่าประทับใจมากครับ ตอนนี้ผมทำงานพัฒนาแอป Android ด้วย Kotlin อยู่ และบางทีก็คิดเหมือนกันว่า จำเป็นต้องไปทาง native เสมอไหม...? (ในกรณีของผมมีงานที่ต้องทำใกล้ชิดกับแพลตฟอร์ม เลยหลีกเลี่ยงไม่ได้ที่จะต้องไปทาง native) ถ้าเป็นไปได้ การเลือกแนวทางที่รองรับ cross-platform อย่าง React Native หรือ Flutter ก็น่าจะดีเหมือนกันครับ

techtech 2025-01-23

Shopify เจ๋งมากเลย@.@

felizgeek 2025-01-21

"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"แทนที่จะคิดว่า native หรือ React Native ให้คิดเป็น native และ React Native"

งานวิศวกรรมไม่มีคำว่า 100% อยู่แล้ว (ระวังพาดหัวล่อคลิกแบบ "A ดีกว่าเสมอ")
แต่ละอย่างมีทั้งข้อดีข้อเสีย และมีเครื่องมือที่เหมาะกับแต่ละสถานการณ์
บทความนี้ยังทำให้เห็นปรัชญาการสร้างทีมของ Shopify ด้วย จึงเป็นบทความที่ดีมาก

treestae 2025-01-21

แต่ผมก็ยังจะอวย Flutter อยู่ดี

mhj5730 2025-01-20

ย้ายทุกแอปไปเป็น RN หมดเลย... สุดยอดมากๆ มากๆ

genog 2025-01-20

@shopify/flash-list โคตรดีเลยครับ ขอบคุณครับ shopify

eajrezz 2025-01-20

Shopify ก็มีบทบาทสำคัญอย่างมากในระบบนิเวศของ Ruby on Rails และในระบบนิเวศของ RN ก็ยังแสดงให้เห็นถึงความก้าวหน้าที่น่าทึ่งด้วยนะครับ เป็นบริษัทที่ยอดเยี่ยมจริง ๆ