React Native

What it is

React Native เป็นเฟรมเวิร์กโอเพนซอร์ส (open-source ) ที่สร้างขึ้นที่ Meta สำหรับสร้างแอปมือถือแบบเนทีฟด้วย React และ JavaScript (หรือ TypeScript) คุณเขียนคอมโพเนนต์ในแบบเดียวกับที่คุณเขียนสำหรับเว็บ แต่คอมโพเนนต์เหล่านั้นจะถูกเรนเดอร์ออกมาเป็นวิดเจ็ต UI (User Interface — ส่วนที่ผู้ใช้เห็นและโต้ตอบด้วยบนหน้าจอ) แบบเนทีฟจริงของ iOS และ Android แทนที่จะเป็นเว็บวิว โค้ดส่วนใหญ่ถูกใช้ร่วมกันระหว่างทั้งสองแพลตฟอร์ม ในขณะที่คุณยังสามารถลงไปเขียนโค้ดเนทีฟเฉพาะแพลตฟอร์มได้เมื่อจำเป็น

Strengths

โค้ดเบสเดียว สองแพลตฟอร์ม — ใช้ลอจิกและ UI ส่วนใหญ่ร่วมกันระหว่าง iOS และ Android
ใช้ React ทำให้นักพัฒนาเว็บทำงานได้อย่างมีประสิทธิภาพอย่างรวดเร็ว และมีระบบนิเวศ (ecosystem) ที่ใหญ่มาก
เรนเดอร์ออกมาเป็นคอมโพเนนต์เนทีฟจริง ไม่ใช่เว็บวิว จึงให้ความรู้สึกเนทีฟอย่างแท้จริง
Fast Refresh ให้ผลตอบรับแทบจะทันทีขณะแก้ไขโค้ด
มีทางออกฉุกเฉิน (escape hatch): เขียนโมดูลเนทีฟด้วย Swift/Kotlin ได้เมื่อเจอข้อจำกัด

Trade-offs

ลองนึกภาพล่ามที่คอยแปลข้อความระหว่างคนสองคนที่พูดคนละภาษา จะมีความล่าช้าเล็กน้อยทุกครั้งที่ส่งต่อข้อความ React Native ก็มีสะพานเชื่อม (bridge) ที่คล้ายกันนี้ระหว่าง JavaScript กับโค้ดเนทีฟ ซึ่งอาจทำให้งานที่ต้องการประสิทธิภาพสูงหรือเน้นแอนิเมชันซับซ้อนขึ้นได้
ดีเพนเดนซีเนทีฟและเครื่องมือสำหรับ build อาจเปราะบางและอ่อนไหวต่อเวอร์ชัน
คุณยังคงต้องมีความรู้เฉพาะแพลตฟอร์ม (และเครื่อง Mac สำหรับ build iOS) เพื่อจัดการกับส่วนที่ยาก
ฟีเจอร์ใหม่ ๆ บางอย่างของ OS (Operating System — ซอฟต์แวร์หลักของอุปกรณ์ เช่น iOS หรือ Android) อาจตามหลังอยู่จนกว่าชุมชนหรือตัวคุณเองจะห่อหุ้ม (wrap) มันขึ้นมาใช้งานได้

When to use it

เลือกใช้ React Native เมื่อคุณต้องการให้ทีมเดียวและโค้ดเบสเดียวสามารถส่งมอบแอปเนทีฟได้ทั้งบน iOS และ Android โดยเฉพาะอย่างยิ่งหากทีมของคุณรู้จัก React อยู่แล้ว มันเหมาะอย่างยิ่งสำหรับแอปประเภทเนื้อหา อีคอมเมิร์ซ และแอปแบบ CRUD (Create, Read, Update, Delete)

Vibe coding fit

React Native เป็นมิตรต่อการเขียนโค้ดด้วยความช่วยเหลือของ AI เพราะโดยพื้นฐานแล้วมันคือ React นั่นเอง — ผู้ช่วย AI มีความเชี่ยวชาญอย่างลึกซึ้งในเรื่องคอมโพเนนต์ hook และ prop ให้บอกโมเดลให้ใช้ TypeScript ให้คอมโพเนนต์มีขนาดเล็กและไม่เก็บสถานะ (stateless) เท่าที่จะทำได้ และให้จับคู่กับ Expo เพื่อการ build และการใช้โมดูลเนทีฟที่ไร้ความยุ่งยาก ระบุแพลตฟอร์มเป้าหมายและความสามารถเนทีฟที่ต้องการไว้ตั้งแต่ต้น เพื่อให้โค้ดที่สร้างขึ้นเลือกใช้ไลบรารีที่ถูกต้อง

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}