Sparkling - TikTok의 크로스 플랫폼 인프라

(github.com/tiktok)

TikTok이 자사 앱에서 Lynx 엔진을 프로덕션 규모로 운용하기 위해 구축한 인프라 계층을 오픈소스로 공개. 앱 스캐폴딩부터 빌드, 네이티브 브릿지, 내비게이션까지 통합 제공
React Native에 Expo가 필요하듯, Lynx 엔진 위에서 실제 앱을 운용하기 위한 프로덕션 인프라 프레임워크
단일 CLI 명령으로 Android/iOS 네이티브 셸이 포함된 완전한 Lynx 앱 프로젝트를 즉시 생성하고, 빌드→설치→실행을 한 번에 수행
TypeScript 선언만 작성하면 Kotlin/Swift 코드를 자동 생성하는 Sparkling Method로 타입 안전한 JS↔네이티브 브릿지 구현
hybrid:// 형식의 통합 URL 스킴 내비게이션으로 Lynx 페이지와 네이티브 화면 간 라우팅을 단일 체계로 처리

Sparkling의 위치: Lynx와의 관계

Lynx는 TikTok이 공개한 크로스 플랫폼 UI 렌더링 엔진으로, React와 유사한 방식으로 코드를 작성하면 네이티브 렌더링으로 Android/iOS 화면을 그려주는 프레임워크
Lynx 자체는 "렌더링 엔진"이므로, 실제 앱 운용에는 빌드 파이프라인, 네이티브↔JS 통신, 페이지 내비게이션, 스토리지/미디어 접근 등 인프라가 추가로 필요
Sparkling이 이 인프라 레이어 역할을 담당하며, Lynx 엔진 위에 올라가는 앱 프레임워크
React Native만으로는 앱을 만들기 어렵고 Expo가 필요하듯, Lynx만으로는 대규모 앱 운용이 어렵고 Sparkling이 그 갭을 메워주는 관계
현재 퍼블릭 베타 단계이며, API 확대와 문서 개선이 진행 중

npm create sparkling-app@latest my-app 한 줄로 Android/iOS 네이티브 셸이 포함된 완전한 프로젝트 생성
npx sparkling build로 Lynx 번들 빌드, npx sparkling run:android/run:ios로 빌드→설치→실행을 한 번에 수행
npx sparkling dev로 핫 리로드 개발 서버 구동 (기본 포트 5969, 전화기 키패드로 LYNX를 누른 숫자)
npx sparkling doctor로 Node.js, JDK, Android SDK, Xcode, CocoaPods 등 개발 환경 자동 진단
npx sparkling autolink으로 Sparkling Method 모듈의 Gradle/Podfile 의존성 자동 등록 및 네이티브 레지스트리 코드 생성
npx sparkling copy-assets로 컴파일된 번들을 Android/iOS 리소스 디렉터리에 복사

TypeScript .d.ts 파일에 함수 선언만 작성하면, CLI(sparkling-method-cli codegen)가 Kotlin/Swift 네이티브 코드와 TS 구현을 자동 생성
생성된 추상 클래스를 상속받아 네이티브 비즈니스 로직만 구현하면 JS에서 바로 호출 가능
빌트인 Method로 Navigation(라우터), Storage(키-값 저장소), Media(카메라/앨범/파일) 제공
패키지 이름은 sparkling-<module> 형식, 메서드 이름은 <module>.<action> (예: router.open) 컨벤션
npm으로 배포 후 npm install + npx sparkling autolink만으로 소비자 측 통합 완료

hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home 형식의 통합 URL 스킴으로 Lynx 페이지와 네이티브 화면을 동일하게 라우팅
각 페이지가 독립된 번들 엔트리포인트를 가지는 멀티페이지 구조로, 대규모 앱에 적합한 설계
navigate() 함수에서 사전 정의 키 외에 커스텀 파라미터도 스킴 URL에 전달 가능

새 앱뿐 아니라 기존 Android/iOS 앱에 Sparkling 컨테이너를 임베드하여 점진적 도입 가능
Android: Maven 아티팩트(com.tiktok.sparkling:sparkling:2.0.0) 추가 후, HybridKit.init() 초기화 → Sparkling.build(context).navigate()로 컨테이너 열기
iOS: CocoaPods(pod 'Sparkling', '2.0.0') 추가 후, SPKRouter.create(withURL:)로 컨트롤러 푸시 또는 SPKContainerView로 뷰 임베드
빌드한 .lynx.bundle 파일을 네이티브 앱 에셋에 복사하고, bundle= 파라미터로 해당 번들 지정

Lynx - 웹 기술 기반 네이티브 앱 개발 도구 - GeekNews
https://news.hada.io/topic?id=19688

함께 보면 좋은 글에 안 나오네요.