React Native เริ่มใช้ New Architecture ตั้งแต่เวอร์ชัน 0.76

 (reactnative.dev)
5 คะแนน โดย GN⁺ 2024-10-26 | 6 ความคิดเห็น | แชร์ทาง WhatsApp
  • React Native เวอร์ชัน 0.76 ได้เปิดตัวบน npm แล้ว โดยเวอร์ชันนี้มาพร้อมสถาปัตยกรรมใหม่เป็นค่าเริ่มต้น และรองรับฟีเจอร์ล่าสุดของ React ได้อย่างสมบูรณ์
  • สถาปัตยกรรมใหม่นี้รองรับฟีเจอร์อย่าง Suspense, Transitions, automatic batching และ useLayoutEffect รวมถึงมีการนำระบบ native module และ component แบบใหม่มาใช้ ทำให้สามารถเขียนโค้ดที่มี type safety ได้
  • นี่คือผลลัพธ์จากการเขียน React Native ใหม่ครั้งใหญ่ตั้งแต่ปี 2018 และถูกออกแบบมาเพื่อให้แอปส่วนใหญ่ค่อย ๆ เปลี่ยนผ่านไปยังสถาปัตยกรรมใหม่ได้
  • React Native 0.76 ทำให้แอปส่วนใหญ่สามารถอัปเกรดได้ด้วยความพยายามใกล้เคียงกับรีลีสก่อนหน้า และไลบรารียอดนิยมต่างก็รองรับสถาปัตยกรรมใหม่นี้แล้ว

สถาปัตยกรรมใหม่คืออะไร?

  • สถาปัตยกรรมใหม่คือการเขียนระบบหลักของ React Native ใหม่ทั้งหมด ครอบคลุมการเรนเดอร์คอมโพเนนต์ การสื่อสารระหว่าง JavaScript กับชั้น abstraction ฝั่ง native และวิธีจัดตารางงานข้ามเธรด
  • สถาปัตยกรรมเดิมสื่อสารกับแพลตฟอร์ม native ผ่าน asynchronous bridge แต่สถาปัตยกรรมใหม่ถูกออกแบบให้รองรับทั้งการอัปเดตแบบ synchronous และ asynchronous
  • สถาปัตยกรรมใหม่ประกอบด้วย 4 ส่วนหลัก ได้แก่ ระบบ native module ใหม่, renderer ใหม่, event loop และการยกเลิก bridge

native module แบบใหม่

  • เขียนด้วย C++ และเพิ่มความสามารถใหม่
    • สื่อสารกับ native runtime แบบ synchronous ได้
    • ให้ type safety ระหว่าง JavaScript และโค้ด native
    • แชร์โค้ดข้ามแพลตฟอร์มได้
    • รองรับ lazy module loading โดยค่าเริ่มต้น
  • สามารถใช้ความสามารถทั้งหมดของ native implementation ที่เขียนด้วย C++ ได้จาก API ฝั่ง JavaScript/TypeScript
  • สามารถกำหนด type contract ที่เข้มแข็งได้ด้วย Codegen
  • โมดูลจะถูกโหลดเข้า memory เฉพาะเมื่อจำเป็น ช่วยลดเวลาเริ่มต้นแอป

renderer ใหม่

  • ถูกเขียนใหม่ด้วย C++ และให้ข้อดีดังต่อไปนี้:
    • เรนเดอร์การอัปเดตบนหลายเธรดด้วยระดับความสำคัญที่ต่างกันได้
    • อ่าน layout แบบ synchronous จากอีกเธรดได้
    • ใช้โค้ด C++ ร่วมกันได้ในทุกแพลตฟอร์ม
  • ตอนนี้ลำดับชั้นของ view ถูกเก็บเป็นโครงสร้าง tree ที่ immutable
    • ทำให้จัดการการอัปเดตแบบ thread-safe ได้
    • รองรับการจัดการหลาย tree ที่กำลังดำเนินอยู่ ซึ่งแสดงเวอร์ชันต่าง ๆ ของส่วนติดต่อผู้ใช้
  • สามารถหยุดการอัปเดตที่มีความสำคัญต่ำชั่วคราว เพื่อเรนเดอร์สิ่งเร่งด่วนอย่างอินพุตจากผู้ใช้ แล้วกลับมาทำการอัปเดตที่มีความสำคัญต่ำต่อได้

event loop

  • สถาปัตยกรรมใหม่ได้นำโมเดลการจัดการ event loop ที่ชัดเจนมาใช้ เพื่อลดความแตกต่างระหว่าง React DOM กับ React Native
    • มีการใช้โมเดลประมวลผล event loop ที่กำหนดไว้อย่างชัดเจนสำหรับการจัดการงานบน JavaScript thread
  • event loop จะจัดลำดับการอัปเดตและ event อย่างคาดการณ์ได้ ทำให้สามารถขัดจังหวะการอัปเดตที่มีความสำคัญต่ำด้วย event ด่วนจากผู้ใช้ได้
  • สอดคล้องกับมาตรฐานเว็บมากขึ้น
  • จะเป็นพื้นฐานให้ฟีเจอร์ของเบราว์เซอร์เพิ่มเติมในอนาคต

การยกเลิก bridge

  • สถาปัตยกรรมใหม่ยกเลิก bridge เพื่อให้ JavaScript และโค้ด native สื่อสารกันได้โดยตรงและมีประสิทธิภาพมากขึ้น
  • การยกเลิก bridge ช่วยให้เวลาเริ่มต้นดีขึ้น ลด crash จากพฤติกรรมที่ไม่กำหนดไว้ และทำให้การรายงานข้อผิดพลาดกับการดีบักง่ายขึ้น

ฟีเจอร์ใหม่

  • Transitions
    • Transitions ซึ่งเป็นแนวคิดใหม่ใน React 18 ใช้แยกความต่างระหว่างการอัปเดตแบบเร่งด่วนและไม่เร่งด่วน
    • การอัปเดตแบบเร่งด่วนต้องตอบสนองทันที ส่วนการอัปเดตแบบ Transitions ใช้เปลี่ยน UI จากมุมมองหนึ่งไปสู่อีกมุมมองหนึ่ง
  • Automatic batching จะรวม state update ให้มากขึ้นเข้าด้วยกัน เพื่อหลีกเลี่ยงการเรนเดอร์สถานะกลาง และทำให้ React Native ทำงานได้เร็วขึ้นและลื่นไหลขึ้น
  • สถาปัตยกรรมใหม่รองรับการอ่านข้อมูล layout แบบ synchronous ผ่าน useLayoutEffect และอัปเดต UI ได้ภายในเฟรมเดียวกัน
  • สถาปัตยกรรมใหม่รองรับ Suspense ที่เปิดตัวใน React 18 อย่างสมบูรณ์ ช่วยจัดการสถานะการโหลดและให้ความสำคัญสูงกับอินพุตจากผู้ใช้

วิธีอัปเกรด

  • เมื่อต้องอัปเกรดเป็น 0.76 แอปส่วนใหญ่สามารถทำได้ด้วยความพยายามใกล้เคียงกับรีลีสอื่น ๆ เพราะมี interop layer ช่วยรองรับ
  • อย่างไรก็ตาม หากต้องการใช้ New Architecture และฟีเจอร์ concurrent ได้อย่างเต็มที่ จำเป็นต้องย้าย custom native module และ component ของตนเอง
  • สำหรับนักพัฒนาแอป
    • จำเป็นต้องอัปเกรดไลบรารี, custom native component และ custom native module ให้รองรับ New Architecture อย่างสมบูรณ์
    • ไลบรารี React Native ยอดนิยมส่วนใหญ่ได้ร่วมกันรองรับ New Architecture แล้ว
  • สำหรับผู้ดูแลไลบรารี แนะนำให้ย้ายไลบรารีไปใช้ native module และ component API แบบใหม่

สรุปโดย GN⁺

  • การเปลี่ยนผ่านไปสู่ New Architecture น่าจะเป็นหมุดหมายสำคัญของการพัฒนา React Native เพราะรองรับทั้งการอัปเดตแบบ synchronous/asynchronous แก้คอขวดจาก bridge และทำให้อ่าน layout จากอีกเธรดได้ จึงน่าจะช่วยปรับปรุงทั้งประสิทธิภาพและประสบการณ์ผู้ใช้ได้มาก
  • สิ่งที่น่าจับตาอีกอย่างคือการรองรับฟีเจอร์ Concurrent ของ React 18 อย่างสมบูรณ์ ทำให้สามารถใช้ Suspense, Transition และอื่น ๆ เพื่อสร้าง UX ที่ตอบสนองไวและเป็นธรรมชาติมากขึ้นได้
  • อย่างไรก็ตาม แอปและไลบรารีเดิมยังน่าจะต้องมีงาน migration เพื่อรองรับ New Architecture อย่างเต็มรูปแบบ แม้จะต้องทำแบบค่อยเป็นค่อยไป แต่เมื่อ migration เสร็จแล้วก็น่าจะได้รับประโยชน์จากสถาปัตยกรรมใหม่นี้อย่างเต็มที่
  • สถาปัตยกรรมนี้ถูกใช้งานแล้วในแอป Facebook และ Instagram ของ Meta และมีกรณีความสำเร็จจาก Expensify, Kraken และ BlueSky
  • โดยรวมแล้ว New Architecture ถือเป็นความก้าวหน้าครั้งใหญ่เพื่ออนาคตของ React Native และหวังว่าจะลงหลักปักฐานได้ดีด้วยความร่วมมือจากชุมชน

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

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

 
codemonkey 2024-10-28

รู้สึกเหมือนได้ยินชื่อ React Native ครั้งแรกก็นานมากแล้วเหมือนกัน ทั้งที่เริ่มต้นจาก Facebook แต่จนถึงตอนนี้ก็ยังไม่ถึงเวอร์ชัน 1 เสียที กลับน่าแปลกใจเหมือนกัน..
 
dongwon 2024-10-26

ผมไม่เคยใช้ RN เลยก็เลยสงสัย แต่จากความรู้สึกเหมือนมันน่าจะถูกปรับแต่งมาให้เหมาะกับ Android มากกว่า ทว่าที่จริงแล้วกลับทำประสิทธิภาพได้ดีกว่าบน iOS นี่น่าทึ่งดีนะครับ
 
hilft 2024-10-27

ฝั่งของเราเหมือนว่า crash เกือบทั้งหมดจะเกิดบน Android ครับ
 
nemorize 2024-10-26

บน Android มันแย่มาก... แย่ในระดับที่น่ากลัวเลย..
 
yangeok 2024-10-26

เหมือนเพิ่งเปลี่ยนเอนจินเป็น hermes ไปได้ไม่นานเอง แต่ดูท่าจะยกเครื่องใหม่อีกแล้วนะ
 
GN⁺ 2024-10-26
ความคิดเห็นจาก Hacker News

  • มีประสบการณ์พัฒนาแอป React Native และ backend API มา 4 ปี การย้ายไปใช้ Expo ช่วยแก้ปัญหาได้หลายอย่าง แต่ก็ยังมีบั๊กอยู่ iOS เสถียรกว่า Android และประสิทธิภาพก็ดีกว่า React Native เรียนรู้ง่ายและมี ecosystem ของ JS ขนาดใหญ่จึงพอจะแนะนำได้ แต่ตอนนี้กำลังใช้ Flutter อยู่

  • มีความคิดเห็นที่หลากหลายเกี่ยวกับ React Native บางคนแสดงความไม่พอใจกับ Expo และแนะนำ Kotlin Multiplatform อีกทั้งยังมีความเห็นว่าการถกเถียงบน Hacker News กำลังไร้สาระมากขึ้นเรื่อย ๆ

  • ในฐานะนักพัฒนา Flutter คิดว่า Swift UI และ Compose เหมาะกับการพัฒนาโมบายล์มากกว่า และถ้าจะเริ่มทำแอปใหม่ก็จะไม่ใช้ทั้ง Flutter หรือ React Native

  • React Native ใช้งานบน iOS ได้โอเค แต่บน Android ช้า Hermes น่าสนใจแต่ก็ยังต้องใช้ polyfill อีกมาก ตั้งตารอวันที่เว็บจะมาแทนที่ React Native

  • กำลังพัฒนา Bluesky ด้วย Expo/RN และจากการทดสอบเบื้องต้นกับสถาปัตยกรรมใหม่พบว่าประสิทธิภาพบน Android ดีขึ้น

  • มีประสบการณ์ที่ดีกับการใช้ React Native ร่วมกับ Expo และในฐานะนักพัฒนาเดี่ยว RN ช่วยให้ทำอะไรได้หลายอย่าง กำลังตั้งตารอสถาปัตยกรรมใหม่อยู่

  • ความเร็วในการเรนเดอร์ของ Flutter เร็วกว่า React Native 5 เท่า และเมื่อใช้ React บนเว็บก็เร็วกว่า

  • เห็นทวีตว่่า Capacitor มีประโยชน์สำหรับการพอร์ตเว็บแอป NextJS

  • React Native ดีขึ้นมากพอสมควรในปีนี้ และเมื่อ react-strict-dom พร้อมใช้งานก็จะนำมาซึ่งการเปลี่ยนแปลงครั้งใหญ่