เทคโนโลยีและการพัฒนาอ่าน 13 นาที

Flutter, React Native หรือ Native ทำแอปมือถือควรเลือกแบบไหน

Flutter, React Native หรือ Native เลือกยังไงให้คุ้มในระยะยาว เกณฑ์จากทีมที่ทำแอปจริงทั้งสองแบบ ว่าเมื่อไหร่ควรเลือกตามความถนัดของทีม และเมื่อไหร่ควรยอมเลือกต่าง

คำตอบสั้นที่สุดคือ ให้เลือกตามทีมที่จะดูแลแอปต่อ ถ้าทีมเขียน JavaScript หรือ TypeScript อยู่แล้ว React Native มักคุ้มที่สุด แต่มีงานบางแบบที่ควรยอมเลือกต่างจากความถนัด เราทำแอปมาทั้งสองแบบ ทั้งแอป React Native ที่ใช้งานจริงในองค์กร และแอปร้านค้าออนไลน์ PetPaw ที่เขียนด้วย Flutter ทั้งที่ทีมถนัด React Native มากกว่า บทความนี้เล่าว่าเราใช้เกณฑ์อะไรตัดสิน

สามทางนี้ต่างกันตรงไหน

Native

เขียนแยกสองชุด ใช้ Swift สำหรับ iOS และ Kotlin สำหรับ Android ได้ความสามารถของเครื่องครบทุกอย่างทันทีที่ Apple หรือ Google ปล่อยออกมา แต่ต้องมีสองทีมหรือทีมที่เก่งทั้งสองภาษา ทุกฟีเจอร์ต้องทำสองรอบ และต้องทดสอบสองรอบ

React Native

เขียนด้วย JavaScript หรือ TypeScript และแนวคิดแบบ React ชุดเดียวแล้วได้ทั้ง iOS และ Android ตัวแอปใช้ component จริงของระบบปฏิบัติการ หน้าตาจึงกลมกลืนกับเครื่อง จุดแข็งที่ใหญ่ที่สุดคือใช้ภาษาเดียวกับเว็บและหลังบ้านได้ ทีมที่ทำเว็บด้วย React อยู่แล้วเริ่มได้เร็ว

Flutter

เขียนด้วยภาษา Dart ชุดเดียวแล้วได้ทั้งสองระบบเหมือนกัน แต่ต่างตรงที่ Flutter วาดหน้าจอเองทุกพิกเซลด้วย engine ของตัวเอง ไม่ได้ยืม component ของระบบ หน้าตาจึงเหมือนกันทุกเครื่อง และคุมการแสดงผลได้ละเอียด แลกกับการที่ทีมต้องเรียน Dart ซึ่งแทบไม่มีใครใช้นอกจาก Flutter

เกณฑ์ข้อแรก: ใครจะดูแลแอปนี้ต่อ

แอปไม่ได้จบวันที่ขึ้น Store ต้องแก้บั๊ก เพิ่มฟีเจอร์ และอัปเกรดตามรอบของ iOS กับ Android ไปอีกหลายปี ค่าใช้จ่ายส่วนนี้รวมกันมักมากกว่าค่าทำครั้งแรก เทคโนโลยีที่ทีมถนัดจึงสำคัญกว่าเทคโนโลยีที่ดูดีที่สุดบนกระดาษ

  • ทีมเขียน JavaScript หรือ TypeScript อยู่แล้ว เลือก React Native ใช้ภาษาเดียว และใช้ type กับโค้ดบางส่วนร่วมกับเว็บและหลังบ้านได้
  • ทีมมีคนเขียน Flutter อยู่แล้ว เลือก Flutter ไม่มีเหตุผลให้เปลี่ยน
  • ยังไม่มีทีมเลยและจ้างภายนอกทำ ให้ถามว่าเมื่อสัญญาจบ ใครจะรับช่วงต่อ แล้วเลือกเทคโนโลยีที่คนนั้นดูแลได้
  • องค์กรมีทีม iOS และ Android แยกกันอยู่แล้ว Native อาจเป็นทางที่ต่อยอดง่ายที่สุด

เมื่อไหร่ที่ควรเลือกต่างจากความถนัด

แอป PetPaw เป็นตัวอย่างที่เราเลือกสวนหลักของตัวเอง หลังบ้านของ PetPaw เป็น Node.js และระบบจัดการร้านเป็น React ทีมเราถนัด React Native มากกว่า แต่ตัวแอปลูกค้าเลือก Flutter เพราะงานหลักของแอปคือการเลื่อนดูการ์ดสินค้าจำนวนมากที่มีรูปทุกใบ

  • หน้ารายการสินค้าต้องเลื่อนลื่นแม้การ์ดแต่ละใบมีรูป ราคา และป้ายโปรโมชัน ซึ่งเป็นหน้าที่ลูกค้าใช้เวลามากที่สุด
  • รูปสินค้าต้องจำไว้ในเครื่อง (image cache) เปิดซ้ำแล้วไม่ต้องโหลดใหม่ ทั้งเร็วขึ้นและประหยัดเน็ตของลูกค้า
  • แผนในอนาคตมีวิดีโอสินค้า ซึ่งยิ่งทำให้การคุมการแสดงผลเองทั้งหมดของ Flutter คุ้มขึ้น

แอปที่ขายของผ่านหน้าจอ ความลื่นของหน้ารายการสินค้าคือยอดขายโดยตรง เราจึงยอมจ่ายค่าเปลี่ยนภาษาของทีมเพื่อสิ่งนี้ ตอนนี้แอปมีทั้งบน App Store และ Google Play มี 21 ฟีเจอร์หลักตั้งแต่ตะกร้าข้ามร้าน ชำระเงิน ติดตามพัสดุ ไปจนถึงคืนสินค้า และมีไฟล์เทสต์อัตโนมัติกว่า 170 ไฟล์คุมไว้

กลับกัน แอปที่เป็นฟอร์ม รายการงาน และหน้ารายละเอียดเป็นหลัก เช่น แอปช่างภาคสนามหรือแอปอนุมัติเอกสาร ความต่างด้านการแสดงผลแทบไม่มีผล ข้อได้เปรียบเรื่องทีมของ React Native จึงชนะขาด

เมื่อไหร่ที่ Native คุ้มกว่า

  • ฟีเจอร์หลักพึ่งความสามารถเฉพาะของเครื่องหนัก ๆ เช่น AR, ประมวลผลภาพจากกล้องแบบเรียลไทม์ หรือคุยกับอุปกรณ์ Bluetooth ตลอดเวลา
  • ต้องใช้ฟีเจอร์ใหม่ของ iOS หรือ Android ตั้งแต่วันแรกที่ออก โดยไม่รอให้ library ตามทัน
  • ต้องทำ widget หน้าจอหลัก แอปบนนาฬิกา หรือส่วนเสริมอื่นของระบบเป็นส่วนสำคัญ
  • ทำระบบเดียวจริง ๆ เช่น แอปที่ใช้บนแท็บเล็ต Android ของบริษัทอย่างเดียว

แอปธุรกิจส่วนใหญ่ไม่เข้าข้อไหนเลย และถ้าเข้าแค่ฟีเจอร์เดียว ทั้ง React Native และ Flutter ก็เขียนส่วนนั้นเป็น Native แยกแล้วเรียกใช้ได้ ไม่จำเป็นต้องทำทั้งแอปเป็น Native

ต้นทุนระยะยาวที่ทุกทางต้องจ่าย

ไม่ว่าจะเลือกทางไหน แอปต้องอัปเกรดตามรอบของระบบปฏิบัติการทุกปี Android ขยับเกณฑ์ target API และ Apple ขยับเวอร์ชัน Xcode ที่ใช้ส่งแอปขึ้น Store สิ่งที่ต่างกันคือความเสี่ยงที่มาจาก library ภายนอก

React Native และ Flutter พึ่ง library จากชุมชนสำหรับงานอย่างกล้อง แผนที่ และจัดการไฟล์ library ที่คนดูแลเลิกทำคือต้นทุนก้อนใหญ่ที่สุดตอนอัปเกรด เราเจอเรื่องนี้เต็ม ๆ ตอนยกแอป React Native ที่ค้างมาสี่ปีขึ้นเวอร์ชันใหม่ ซึ่งต้องเปลี่ยน library หลายตัวและรื้อระบบเปลี่ยนหน้าจอทั้งแอป วิธีลดความเสี่ยงคือเลือก library ที่ยังมีคนดูแลอย่างสม่ำเสมอตั้งแต่แรก และอัปเกรดทีละปี ไม่ปล่อยให้ค้าง

ห้าคำถามก่อนตัดสินใจ

  1. ใครจะดูแลแอปนี้ในอีกสามปีข้างหน้า และเขาเขียนภาษาอะไร
  2. หน้าจอที่ผู้ใช้ใช้เวลามากที่สุดคืออะไร เป็นฟอร์มและรายการ หรือเป็นรูป วิดีโอ และ animation
  3. มีฟีเจอร์ไหนที่ต้องพึ่งความสามารถเฉพาะของเครื่องหนัก ๆ ไหม
  4. มีเว็บหรือหลังบ้านที่อยากใช้โค้ดและคนร่วมกันไหม
  5. ต้องการทั้ง iOS และ Android หรือระบบเดียว

ถ้าตอบข้อแรกได้ชัด ส่วนใหญ่ก็ได้คำตอบแล้ว อีกสี่ข้อมีไว้หาเหตุผลที่หนักพอจะเลือกต่างจากความถนัดของทีม ถ้าหาไม่เจอ ก็เลือกตามทีม

คำถามที่พบบ่อย

Flutter กับ React Native อันไหนเร็วกว่า
สำหรับแอปธุรกิจส่วนใหญ่ เร็วพอทั้งคู่จนผู้ใช้แยกไม่ออก ความต่างจะเริ่มเห็นในหน้าที่มีรายการยาวและรูปจำนวนมาก หรือ animation หนัก ๆ ซึ่ง Flutter คุมการแสดงผลได้ละเอียดกว่าเพราะวาดหน้าจอเองทั้งหมด
ทำด้วย React Native แล้ว เปลี่ยนเป็น Flutter ทีหลังได้ไหม
ได้ แต่เท่ากับเขียนหน้าจอใหม่ทั้งหมด เพราะคนละภาษาและคนละวิธีวาดหน้าจอ ส่วนที่ใช้ต่อได้คือหลังบ้านและ API การเปลี่ยนจึงควรมีเหตุผลหนักจริง ถ้าแค่แอปเก่าและช้า การอัปเกรดเวอร์ชันมักถูกกว่ามาก
ใช้โค้ดร่วมกับเว็บได้ไหม
React Native ใช้ TypeScript, type ของข้อมูล และ logic บางส่วนร่วมกับเว็บที่ทำด้วย React ได้ Flutter ทำเว็บได้เหมือนกัน แต่เหมาะกับหน้าแบบแอปหลังล็อกอินมากกว่าเว็บที่ต้องติดอันดับ Google
ไม่มีทีม dev ในองค์กรเลย ควรเลือกอะไร
เมื่อไม่มีทีมให้ยึด ให้ดูว่าแอปเน้นอะไร ถ้าเน้นรูป วิดีโอ รายการสินค้ายาว ๆ หรือ animation เช่น แอปขายของหรือแอปคอนเทนต์ Flutter ได้เปรียบ ถ้าเน้นฟอร์ม ขั้นตอนอนุมัติ รายการงาน หรือต้องทำเว็บคู่กันไปด้วย เช่น แอปพนักงานหรือแอปบริการลูกค้า React Native เหมาะกว่า และถ้าหัวใจของแอปคือความสามารถเฉพาะของเครื่อง เช่น AR หรืออุปกรณ์ Bluetooth ค่อยพิจารณา Native

ผลงานจริงที่เกี่ยวกับเรื่องนี้

อยากให้ช่วยดูเคสของคุณโดยเฉพาะไหม

เล่าโจทย์มาคร่าว ๆ ได้เลย เราตีกรอบงบและระยะเวลาให้ฟรีตั้งแต่คุยครั้งแรก

บทความที่เกี่ยวข้อง

เทคโนโลยีและการพัฒนา

อัปเกรดแอป React Native เวอร์ชันเก่า ต้องทำอะไรบ้าง บทเรียนจากงานจริง

Day1Solution.tech

แอป React Native รุ่นเก่าเริ่มมีปัญหาบน Android ใหม่ และแก้ต่อยากขึ้นทุกปี เล่างานอัปเกรดแอปองค์กรจริงจาก 0.64 เป็น 0.82 ว่าเปลี่ยนอะไร แก้อะไร และทดสอบยังไง

อ่านบทความ21 นาที
อัปเกรดแอป React Native เวอร์ชันเก่า ต้องทำอะไรบ้าง บทเรียนจากงานจริง
เทคโนโลยีและการพัฒนา

Vibe code แอปมาเองแล้ว จะ scale ระบบต่อยังไงไม่ให้พัง

Day1Solution.tech

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

อ่านบทความ12 นาที
Vibe code แอปมาเองแล้ว จะ scale ระบบต่อยังไงไม่ให้พัง
โน้ตบุ๊กเปิดหน้าจอโค้ดโปรแกรมวางอยู่บนโต๊ะทำงานข้างสมุดบันทึก
ธุรกิจและงบประมาณ

ค่าจ้างเขียนโปรแกรมเท่าไหร่ วิธีประเมินงบก่อนเริ่มโปรเจกต์

Day1Solution.tech

ทำไมบริษัทซอฟต์แวร์ถึงตอบราคาทันทีไม่ได้ ตัวแปรอะไรบ้างที่กำหนดราคาจริง ช่วงราคาที่เจอในตลาดไทยเป็นเท่าไหร่ และต้องเตรียมอะไรไปคุยถึงจะได้ตัวเลขที่แม่น

อ่านบทความ13 นาที
ค่าจ้างเขียนโปรแกรมเท่าไหร่ วิธีประเมินงบก่อนเริ่มโปรเจกต์

พิมพ์เพื่อค้นหาในบริการ ผลงาน ผลิตภัณฑ์ บทความ ข่าว ทีมงาน และคำถามที่พบบ่อย