Sparkling - โครงสร้างพื้นฐานข้ามแพลตฟอร์มของ TikTok

• TikTok เปิดซอร์สเลเยอร์โครงสร้างพื้นฐานที่สร้างขึ้นเพื่อ ใช้งาน Lynx engine ในระดับโปรดักชัน ภายในแอปของตนเอง โดยรวมตั้งแต่ app scaffolding, build, native bridge ไปจนถึง navigation
• เปรียบเหมือนที่ React Native ต้องมี Expo, Sparkling คือเฟรมเวิร์กโครงสร้างพื้นฐานระดับโปรดักชันสำหรับรันแอปจริงบน Lynx engine
• สามารถสร้าง โปรเจ็กต์แอป Lynx ที่สมบูรณ์พร้อม native shell ของ Android/iOS ได้ทันทีด้วยคำสั่ง CLI เพียงคำสั่งเดียว และทำ build → install → run ได้ครบในครั้งเดียว
• ใช้ Sparkling Method เพื่อสร้าง JS↔native bridge แบบ type-safe โดยอัตโนมัติจากการเขียนเพียง TypeScript declarations สำหรับสร้างโค้ด Kotlin/Swift
• ใช้ navigation ด้วย URL scheme แบบรวมศูนย์ ในรูปแบบ hybrid:// เพื่อจัดการ routing ระหว่างหน้า Lynx และหน้าจอ native ภายใต้ระบบเดียว

---

ตำแหน่งของ Sparkling: ความสัมพันธ์กับ Lynx

• Lynx คือ cross-platform UI rendering engine ที่ TikTok เปิดเผยออกมา เป็นเฟรมเวิร์กที่ให้เขียนโค้ดในลักษณะคล้าย React แล้วเรนเดอร์หน้าจอ Android/iOS แบบ native rendering
• เนื่องจาก Lynx เองเป็นเพียง "rendering engine" การใช้งานแอปจริงจึงยังต้องมีโครงสร้างพื้นฐานเพิ่มเติม เช่น build pipeline, การสื่อสารระหว่าง native↔JS, page navigation, การเข้าถึง storage/media
• Sparkling ทำหน้าที่เป็น เลเยอร์โครงสร้างพื้นฐาน นี้ และเป็นเฟรมเวิร์กแอปที่ทำงานอยู่บน Lynx engine
• เช่นเดียวกับที่ใช้ React Native อย่างเดียวสร้างแอปได้ยากและต้องพึ่ง Expo, การใช้ Lynx เพียงอย่างเดียวก็ยากต่อการรันแอประดับใหญ่ และ Sparkling คือสิ่งที่มาเติมช่องว่างนี้
• ปัจจุบันอยู่ในสถานะ public beta และกำลังขยาย API พร้อมปรับปรุงเอกสาร

CLI สำหรับ app scaffolding และ build

• npm create sparkling-app@latest my-app บรรทัดเดียวเพื่อ สร้างโปรเจ็กต์ที่สมบูรณ์ พร้อม native shell ของ Android/iOS
• npx sparkling build สำหรับ build Lynx bundle, และ npx sparkling run:android/run:ios สำหรับ build → install → run ในครั้งเดียว
• npx sparkling dev สำหรับรัน hot reload development server (พอร์ตเริ่มต้น 5969 ซึ่งมาจากตัวเลขที่กดคำว่า LYNX บนแป้นโทรศัพท์)
• npx sparkling doctor สำหรับ ตรวจสอบสภาพแวดล้อมการพัฒนาอัตโนมัติ เช่น Node.js, JDK, Android SDK, Xcode, CocoaPods
• npx sparkling autolink สำหรับ ลงทะเบียน dependency ของโมดูล Sparkling Method ใน Gradle/Podfile โดยอัตโนมัติ และสร้างโค้ด native registry
• npx sparkling copy-assets สำหรับ คัดลอก bundle ที่คอมไพล์แล้ว ไปยัง resource directory ของ Android/iOS

Sparkling Method — JS↔native bridge แบบ type-safe

• เพียงเขียน function declarations ลงในไฟล์ TypeScript .d.ts, แล้ว CLI (sparkling-method-cli codegen) จะ สร้างโค้ด native ฝั่ง Kotlin/Swift และ implementation ฝั่ง TS โดยอัตโนมัติ
• เพียงสืบทอด abstract class ที่ถูกสร้างขึ้น แล้ว เขียนเฉพาะ business logic ฝั่ง native ก็สามารถเรียกใช้จาก JS ได้ทันที
• มี Method แบบ built-in ให้ใช้งาน เช่น Navigation (router), Storage (key-value store), Media (กล้อง/อัลบั้ม/ไฟล์)
• ชื่อแพ็กเกจอยู่ในรูปแบบ sparkling-<module> และชื่อเมธอดใช้คอนเวนชัน <module>.<action> (เช่น router.open)
• หลังเผยแพร่ผ่าน npm แล้ว ฝั่งผู้ใช้รวมเข้าระบบได้ด้วยเพียง npm install + npx sparkling autolink

unified navigation แบบอิง scheme

• ใช้ URL scheme แบบรวมศูนย์ ในรูปแบบ hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home เพื่อทำ routing ให้หน้า Lynx และหน้าจอ native ได้แบบเดียวกัน
• ใช้โครงสร้าง multi-page ที่แต่ละหน้ามี bundle entrypoint แยกอิสระ เหมาะกับการออกแบบสำหรับแอปขนาดใหญ่
• ในฟังก์ชัน navigate() นอกจากคีย์ที่กำหนดไว้ล่วงหน้าแล้ว ยังสามารถส่ง custom parameters ผ่าน scheme URL ได้ด้วย

การผสานรวมแบบค่อยเป็นค่อยไปกับแอปเดิม (Brownfield)

• ไม่ใช่แค่แอปใหม่เท่านั้น แต่ยังสามารถ ฝังคอนเทนเนอร์ Sparkling ลงในแอป Android/iOS เดิม เพื่อค่อย ๆ นำไปใช้ได้
• Android: เพิ่ม Maven artifact (com.tiktok.sparkling:sparkling:2.0.0), จากนั้น initialize ด้วย HybridKit.init() → เปิดคอนเทนเนอร์ด้วย Sparkling.build(context).navigate()
• iOS: เพิ่ม CocoaPods (pod 'Sparkling', '2.0.0'), จากนั้นใช้ SPKRouter.create(withURL:) เพื่อ push controller หรือใช้ SPKContainerView เพื่อ ฝัง view
• คัดลอกไฟล์ .lynx.bundle ที่ build แล้วไปยัง assets ของแอป native และระบุ bundle ที่ต้องการด้วยพารามิเตอร์ bundle=

โครงสร้างโปรเจ็กต์

• packages/sparkling-sdk: Sparkling SDK แกนหลัก
• packages/sparkling-method: Sparkling Method SDK (JS↔native bridge)
• packages/methods: แพ็กเกจ Sparkling methods แบบ built-in (Navigation, Storage, Media)
• packages/sparkling-app-cli: CLI สำหรับ build และ run แอป Sparkling
• packages/create-sparkling-app: CLI สำหรับ app scaffolding
• packages/sparkling-method-cli: เครื่องมือ codegen ของ Sparkling Method
• packages/sparkling-types: รวม type definition ของ GlobalProps ไว้ในแพ็กเกจเดียว
• packages/playground: แอป Playground สำหรับพัฒนาในเครื่อง

เทคโนโลยีสแตกและสภาพแวดล้อม

• Node.js ^22 || ^24, สภาพแวดล้อม pnpm v10.26.0
• Android: ต้องใช้ JDK 11 ขึ้นไป และ SDK android-34
• iOS: ต้องใช้ Xcode 16+, Ruby ≥2.7 <3.4 และ CocoaPods
• ใช้หลายภาษา เช่น TypeScript, Swift, Kotlin, JavaScript
• ลิขสิทธิ์ Apache 2.0

[freedomzero]

Lynx - เครื่องมือพัฒนาแอปเนทีฟบนพื้นฐานเทคโนโลยีเว็บ - GeekNews
Lynx - 웹 기술 기반 네이티브 앱 개발 도구

ไม่เห็นขึ้นในบทความที่แนะนำให้อ่านร่วมกันครับ