ทำไมการเขียนแอปด้วย React Native ถึงประหยัดงบพัฒนาได้เกือบเท่าตัว

เชื่อไหมว่าโปรเจกต์ที่ผมรับมาล่าสุด แทนที่จะต้องจ้างทีม iOS 1 ทีมและทีม Android อีก 1 ทีมเพื่อทำแอปหน้าตาเหมือนกันเป๊ะ ผมกลับใช้ทีมเล็กๆ เพียงทีมเดียวที่มีทักษะ Web Development ทำงานเสร็จในเวลาที่น้อยกว่าเดิม 40% และงบที่เหลือก็เอาไปถมเพิ่มในส่วนของฟีเจอร์ที่ลูกค้าต้องการจริงๆ แทนที่จะเสียไปกับค่าแรงคนสองกลุ่ม สิ่งที่ผมจะแชร์ในวันนี้คือวิธีที่ผมทำ โดยอ้างอิงจากประสบการณ์การเขียนโปรแกรมตลอด 10 ปีที่ผ่านมา

1. เปลี่ยนความคิดจากการเขียนแอปด้วย Swift/Kotlin มาเป็น JavaScript

การเขียนแอปแบบดั้งเดิม (Native Development) บังคับให้คุณต้องเรียนรู้ภาษาที่ต่างกันโดยสิ้นเชิง แต่ React Native (เฟรมเวิร์กที่ใช้ JavaScript ในการสร้างแอปมือถือ) ยอมให้คุณใช้ทักษะเดิมที่มีอยู่แล้วมาจัดการกับทั้งสองแพลตฟอร์ม

npx [email protected] init MyAwesomeApp --version 0.73.0

คำสั่งข้างต้นคือการสร้างโปรเจกต์เวอร์ชัน 0.73.0 ซึ่งใช้ Metro Bundler เป็นตัวจัดการไฟล์ ส่วนประกอบสำคัญคือการเลือกเทมเพลตมาตรฐาน ผลลัพธ์คือโครงสร้างไฟล์ ios และ android ที่ถูกสร้างขึ้นอัตโนมัติ หากเจอ Error ว่า command not found ให้ตรวจสอบว่าได้ติดตั้ง Node.js เวอร์ชัน 18+ หรือยัง

2. ใช้ Shared Logic จัดการ Business Logic ครั้งเดียวจบ

หัวใจของการประหยัดงบคือการไม่เขียนโค้ดซ้ำ (Don't Repeat Yourself) เราจะเก็บส่วนคำนวณหรือการเรียก API ไว้ในไฟล์เดียวที่แอปทั้งสองฝั่งใช้ร่วมกันได้

// services/api.js
export const fetchData = async () => {
  const res = await fetch('https://api.example.com/data');
  return res.json();
};

โค้ดนี้ใช้ Fetch API มาตรฐานของ JavaScript เพื่อดึงข้อมูล ถ้าคุณแก้ไข URL ในนี้ ทั้งแอป iOS และ Android จะเปลี่ยนตามทันทีโดยไม่ต้องไปแก้โค้ดฝั่ง Native ผลลัพธ์ที่ได้คือ JSON object หากรันแล้วขึ้น Network Request Failed ให้เช็คว่าเปิดใช้งาน App Transport Security (ATS) ใน iOS หรือยัง

3. Component-Based Architecture คือกุญแจสำคัญ

เราไม่ได้เขียนหน้าจอใหม่ทุกครั้ง แต่เราสร้าง Component (ส่วนประกอบหน้าจอที่นำกลับมาใช้ใหม่ได้) ซึ่งจะทำให้ UI ของคุณเป็นมาตรฐานเดียวกันทั้งแอป

const CustomButton = ({ title, onPress }) => (
  <TouchableOpacity onPress={onPress}>
    <Text>{title}</Text>
  </TouchableOpacity>
);

บรรทัด TouchableOpacity คือ Wrapper ที่ทำให้ปุ่มมีเอฟเฟกต์กดแล้วยุบโดยอัตโนมัติ วิธีนี้ผมเลือกใช้เพราะประหยัดเวลาทำ UI Kit ได้มหาศาล หากเห็นข้อความ Invariant Violation มักเกิดจากการลืม import ตัว Component เข้ามาในหน้าหลัก

4. ประหยัดงบด้วยการทำ Hot Reloading

ในสมัยก่อนถ้าจะแก้สีปุ่ม ต้องรันแอปใหม่บน Simulator ใช้เวลารอ 2-3 นาที แต่ React Native มี Fast Refresh ที่ทำให้เห็นผลลัพธ์ภายในไม่กี่มิลลิวินาทีหลังกด Save ซึ่งลดเวลา Idle time ของทีมงานลงได้มหาศาล

5. การเลือกใช้ Third-party Libraries ที่ต้องระวัง

อย่าพยายามเขียนโค้ดทุกอย่างเอง ให้ใช้ไลบรารีที่ Community รองรับดีๆ เช่น react-navigation สำหรับการเปลี่ยนหน้าจอ สิ่งที่ผมแนะนำคือให้เช็ค GitHub Stars และจำนวน Issue ที่เปิดอยู่เสมอ ถ้าไลบรารีไหนไม่อัปเดตเกิน 1 ปี ให้ตัดทิ้งทันที อย่าเอามาทำโปรเจกต์จริง

6. ทดสอบผ่าน Expo หรือ CLI ตามความเหมาะสม

ผมแนะนำให้ใช้ CLI (Command Line Interface) ถ้าต้องการควบคุม Native Modules เอง แต่ถ้าเป็นแอปทั่วไป Expo (เครื่องมือครอบ React Native ให้ใช้ง่ายขึ้น) จะประหยัดงบกว่ามากเพราะลดภาระการตั้งค่าเครื่องมือลงได้เยอะ

7. เมื่อไหร่ที่ไม่ควรใช้ React Native

หากแอปของคุณต้องใช้ CPU หนักๆ เช่น การตัดต่อวิดีโอแบบเรียลไทม์ หรือการประมวลผลกราฟิก 3D ขั้นสูง ผมไม่แนะนำให้ใช้ React Native เพราะ Overhead ของ JavaScript Bridge จะทำให้แอปกระตุก ในกรณีนั้นการใช้ Swift หรือ Kotlin โดยตรงยังคงเป็นคำตอบที่ดีกว่า

ตอนนี้คุณมีเครื่องมือและแนวคิดในมือแล้ว สิ่งที่ควรทำต่อคือลองรันคำสั่งในหัวข้อแรก แล้วลองสร้างหน้าจอง่ายๆ สักหน้าด้วยตัวเองครับ