React Conf 2025 (Day 2)

ต่อจากบทความก่อนหน้า นี่คือสรุปเซสชันต่าง ๆ ในวันที่สองของ React Conference 2025

วันที่สองเน้นไปที่เซสชันที่เกี่ยวข้องกับ React Native เป็นหลัก

หากอยากดูรายละเอียดทั้งหมด แนะนำให้อ่านบทความตามลิงก์ต้นทาง!

• React Native Keynote

  • จำนวนดาวน์โหลด React Native เติบโต 100% (สัปดาห์ละ 4 ล้านครั้ง), รุ่น 0.82 เปิดใช้ New Architecture เป็นค่าเริ่มต้นและรองรับการทดลองใช้ Hermes V1
  • เพิ่ม React Strict DOM และ DOM APIs เพื่อการบรรจบกันกับเว็บ พร้อมแชร์กรณีความสำเร็จจาก Shopify/Starlink เป็นต้น
  • Expo SDK 54, ปรับปรุงแผงประสิทธิภาพของ DevTools และรองรับการขยายไปยังแพลตฟอร์มอนาคตผ่านการฝัง Vega OS

• React Native, Amplified

  • Vega OS ของ Amazon: ระบบปฏิบัติการบน Linux ที่ฝัง React Native มาในตัว รองรับอุปกรณ์อย่าง Fire TV และช่วยเพิ่มประสิทธิภาพการใช้ทรัพยากร 30%
  • React Native for Vega(@amazon-devices/react-native-kepler) ช่วยแชร์ไลบรารีข้ามแอปและประหยัดพื้นที่จัดเก็บ 10-12MB
  • Vega Developer Tools เปิด Public Beta, รองรับการพอร์ตผ่าน Rock และเร่งการพัฒนาด้วยเครื่องมือ AI (Amazon Q, Kiro)

• React Strict DOM

  • เพื่อแก้ปัญหาความแยกระหว่างเว็บกับเนทีฟ จึงมี react-strict-dom: polyfill สำหรับ HTML/CSS ที่ช่วยสร้าง React UI เดียวได้ ("Learn Once, Write Once")
  • ในแอป Facebook VR ของ Meta ประสบความสำเร็จในการแชร์โค้ดเว็บ 60% และเพิ่มประสิทธิภาพแบบเนทีฟได้ 2.5 เท่า
  • อนาคต: ขยายการรองรับ DOM API เป็น 63%, รวมระบบแอนิเมชัน/สไตลิงข้ามแพลตฟอร์ม และปรับให้เหมาะกับการฝึก AI

• Reimagining Lists in React Native

  • เพื่อแก้ปัญหา Blanking List (เนื้อหาหายระหว่างสกรอลล์) จึงทดลองใช้ <VirtualView />; องค์ประกอบนี้ควบคุมลำดับความสำคัญของการเรนเดอร์แบบ synchronous/async ได้
  • เพิ่มประสิทธิภาพรายการแบบ virtualized ด้วย Virtual Collections, แยกโหมด visible/prerender และมีแผนจัดทำเอกสารในรุ่น 0.83
  • การทำให้ New Architecture เป็นค่าเริ่มต้นช่วยยกระดับประสิทธิภาพสู่ระดับเฟรมเวิร์ก UI บนมือถือ พร้อมเปิดรับฟีดแบ็กจากชุมชน

• React Everywhere: Bringing React Into Native Apps

  • เพื่อก้าวข้ามข้อจำกัดของ WebView (UX แย่ลง, คอขวดด้านประสิทธิภาพ) จึงมี React Native Brownfield: การค่อย ๆ แทรก RN view เข้าไปในแอปเนทีฟเดิม
  • ใช้เครื่องมือ rock เพื่อ bundle แอป RN เป็น AAR/XCFramework และแชร์โค้ดแบบ universal ด้วย react-strict-dom/Nativewind
  • เพิ่มประสิทธิภาพข้ามแพลตฟอร์มสูงสุดด้วย ownership แบบทีมเดียวและกลยุทธ์ย้ายจาก WebView → RN

• How Parcel Bundles React Server Components

  • Parcel v2.14 รองรับ RSC: รวม server/client module graph เข้าด้วยกัน, สร้าง proxy และทำ preload อัตโนมัติผ่าน directive "use client"
  • กำจัด Network Waterfalls: dynamic import ฝั่งเซิร์ฟเวอร์แบบ zero latency, จัดการ CSS side effect และปรับ code splitting ให้เหมาะสม
  • ทำ RSC แบบไม่ผูกกับ framework ที่ชั้น bundler และเพิ่มประสิทธิภาพ/ความยืดหยุ่นด้วยการใช้ SSR แบบเลือกได้

• Designing Page Transitions

  • ใช้ View Transitions API เพื่อทำแอนิเมชันระหว่างหน้าแบบ server-rendered: opt-in ด้วย <ViewTransition /> และมี crossfade ให้เป็นค่าเริ่มต้น
  • ปรับแต่งทิศทาง/องค์ประกอบที่แชร์ร่วมกันด้วย Custom Link ของ Next.js และเพิ่ม UX ที่ลื่นไหลด้วย motion blur/easing
  • ทำแอนิเมชันภาพนิ่งประสิทธิภาพสูงผ่าน browser pseudo-elements และลดความซับซ้อนของการพัฒนาด้วยการมอบหมาย coordination ให้ React

• Build Fast, Deploy Faster—Expo in 2025

  • Expo SDK 54: เปิดใช้ React Compiler เป็นค่าเริ่มต้น, รวมเอฟเฟ็กต์เนทีฟอย่าง liquid glass ได้ทันที และ EAS Build เร็วขึ้น 4 เท่า
  • ดีพลอยได้ใน 5 นาทีด้วยระบบอัตโนมัติ EAS Deploy/TestFlight และ Expo Launch สำหรับเปิดตัวบน App Store แบบ one-click
  • รองรับ native CSS (เข้ากันได้กับ Tailwind) และมีเดโม AI Copilot ที่สร้างแอป Pokédex ได้ใน 40 วินาที

• The React Router take on RSC

  • เปิดใช้ RSC ผ่านปลั๊กอิน Vite และนำไปใช้กับแอปเดิมแบบค่อยเป็นค่อยไป: แปลง loader → async Server Component
  • ใช้ RSC แยกอิสระตาม nested routes, ทำ form/action ให้ง่ายขึ้นด้วย Server Actions และต้องระวัง "use client"
  • ยืดหยุ่นต่อการทำงานแบบ full-stack ด้วย routing/data loading แบบ type-safe และการรองรับการผสม client-server

• RedwoodSDK: Web Standards Meet Full-Stack React

  • เฟรมเวิร์ก web standards ที่สร้างบน Vite: route functions, interrupters/middleware และปรับแต่งให้เหมาะกับ Cloudflare Workers
  • รองรับ server-first RSC streaming, WebSockets แบบเรียลไทม์, no-JS SSR → hydration → View Transitions
  • ดีพลอยด้วยคำสั่งเดียวผ่าน pnpm release และควบคุมเอกสารได้ครบถ้วนด้วยการรวม Durable Objects/DB

• TanStack Start

  • full-stack แบบ client-first: routing/data loading แบบ type-safe บน TanStack Router และสามารถเปิด/ปิด SSR ได้
  • สร้างแอปด้วย CLI, มี server functions/middleware, API routes แบบ file-based และรวม add-ons (Prisma/Neon)
  • อัปเกรดเป็น full-stack โดยยังคงแพตเทิร์นแบบ SPA และเน้นเสถียรภาพของ ecosystem React ผ่านการพัฒนาที่ขับเคลื่อนโดยชุมชน

• What's The Framework of the React Future?

  • เสวนาพาเนล: แนวทางของ Next.js (Partial Prerendering), Remix (RSC เป็นสิ่งจำเป็น), Expo (universal), TanStack Start (type-safe) กำลังค่อย ๆ บรรจบกัน
  • การผสาน AI/LLM: โมเดลภายในเครื่อง, โปรโตคอล MCP และ streaming SSR กำลังพลิกโฉมการพัฒนา/การดีพลอย
  • วิสัยทัศน์ของ React Foundation: การบรรจบกันของเมตาเฟรมเวิร์ก, signals/external store และความจำเป็นของการควบคุมประสิทธิภาพอย่างละเอียด

• Async React (continued)

  • แก้ปัญหาแอป TODO แบบ synchronous: ปรับปรุง UX ที่กระตุกด้วย Transitions/Suspense/useOptimistic และใช้แอนิเมชัน View Transitions
  • แพตเทิร์น action props (React 19): จัดการ transition/mutation อัตโนมัติ พร้อมสถานะ loading ในตัว
  • Async React WG: มาตรฐานด้าน router/data/design และสถาปัตยกรรม async แบบประกาศได้เพื่อ UX ที่เป็นมิตรทั้งกับ AI และมนุษย์