Sparkling & Lynx (TikTok 크로스플랫폼)

개요

Sparkling은 TikTok이 자사 Lynx 엔진을 프로덕션 규모로 운용하기 위해 구축한 인프라 프레임워크를 오픈소스로 공개한 것. React Native에 Expo가 필요하듯, Lynx에 Sparkling이 필요. 앱 스캐폴딩·빌드·네이티브 브릿지·내비게이션 통합. TypeScript 선언만 쓰면 Kotlin/Swift 코드 자동 생성. Apache 2.0.

GitHub: https://github.com/nicklxz/nicklxz-nicklxz-nicklxz (TikTok 공식)
라이선스: Apache 2.0
상태: 퍼블릭 베타
관계: Lynx (렌더링 엔진) + Sparkling (인프라 레이어)

Lynx vs Sparkling 관계

React Native 생태계:
  React Native (렌더링) + Expo (인프라) = 앱

TikTok 생태계:
  Lynx (렌더링) + Sparkling (인프라) = 앱

Lynx만으로는:
  ✗ 빌드 파이프라인 없음
  ✗ 네이티브↔JS 통신 없음
  ✗ 페이지 내비게이션 없음
  ✗ 스토리지·미디어 접근 없음

Sparkling이 제공:
  ✓ CLI (빌드·실행·스캐폴딩)
  ✓ Sparkling Method (타입 안전 브릿지)
  ✓ URL 스킴 내비게이션
  ✓ 빌트인 모듈 (Storage, Media, Navigation)

CLI 명령 (빠른 시작)

# 프로젝트 생성 (Android/iOS 네이티브 셸 포함)
npm create sparkling-app@latest my-app
 
# Lynx 번들 빌드
npx sparkling build
 
# 빌드→설치→실행 한 번에
npx sparkling run:android
npx sparkling run:ios
 
# 핫 리로드 개발 서버 (포트 5969 = LYNX 키패드)
npx sparkling dev
 
# 환경 진단 (Node, JDK, SDK, Xcode 등)
npx sparkling doctor
 
# 의존성 자동 등록
npx sparkling autolink

Sparkling Method ⭐ (타입 안전 브릿지)

개념

TypeScript .d.ts 선언 작성
  ↓ sparkling-method-cli codegen
Kotlin/Swift 코드 + TS 구현 자동 생성
  ↓ 네이티브 로직만 구현
JS에서 바로 호출

예시

// 1. TypeScript 선언만 작성
declare module "sparkling-camera" {
  export function takePhoto(options: {
    quality: number;
    facing: "front" | "back";
  }): Promise<{ uri: string }>;
}

# 2. 코드젠 실행
npx sparkling-method-cli codegen
# → Kotlin·Swift 추상 클래스 자동 생성

// 3. 네이티브 로직만 구현 (Kotlin)
class CameraMethod : AbstractCameraMethod() {
    override fun takePhoto(quality: Int, facing: String): PhotoResult {
        // 네이티브 카메라 API 호출
    }
}

// 4. JS에서 호출
import { takePhoto } from "sparkling-camera";
const result = await takePhoto({ quality: 90, facing: "back" });

빌트인 Method

모듈	기능
router	페이지 내비게이션
storage	키-값 저장소
media	카메라·앨범·파일

URL 스킴 내비게이션

hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home

구조:
  hybrid://         ← 통합 스킴
  lynxview_page     ← Lynx 페이지 타입
  ?bundle=...       ← 번들 파일
  &title=...        ← 페이지 제목
  &custom=...       ← 커스텀 파라미터

→ Lynx 페이지와 네이티브 화면을 동일하게 라우팅
→ 멀티페이지 구조 (각 페이지 = 독립 번들)

기존 앱에 점진적 도입 (Brownfield)

Android

// 1. Maven 의존성 추가
implementation("com.tiktok.sparkling:sparkling:2.0.0")
 
// 2. 초기화
HybridKit.init()
 
// 3. Sparkling 컨테이너 열기
Sparkling.build(context).navigate()

iOS

// 1. CocoaPods
pod 'Sparkling', '2.0.0'
 
// 2. 컨트롤러로 푸시
let vc = SPKRouter.create(withURL: "hybrid://...")
navigationController?.pushViewController(vc)
 
// 3. 또는 뷰로 임베드
let containerView = SPKContainerView()

→ 새 앱 + 기존 앱 모두 지원

vs 다른 크로스플랫폼

항목	Sparkling+Lynx	React Native+Expo	Flutter	Skip
개발사	TikTok	Meta+Expo	Google	독립
언어	JS/TS	JS/TS	Dart	Swift
렌더링	네이티브 (Lynx)	네이티브 브릿지	Skia	네이티브
브릿지	Sparkling Method (자동 코드젠)	Turbo Modules	FFI	트랜스파일
프로덕션 검증	TikTok 자체 사용	다수	다수	성장 중
상태	퍼블릭 베타	안정	안정	v1.7+
라이선스	Apache 2.0	MIT	BSD	오픈소스

→ Sparkling+Lynx의 niche: “TikTok 규모에서 검증된 네이티브 렌더링 + 자동 브릿지”

기술 환경

항목	요구사항
Node.js	^22 \|\| ^24
패키지 매니저	pnpm v10.26.0
Android	JDK 11+, android-34 SDK
iOS	Xcode 16+, Ruby ≥2.7 <3.4, CocoaPods
언어	TypeScript, Swift, Kotlin, JavaScript

프로젝트 구조

sparkling/
├── packages/sparkling-sdk         # 코어 SDK
├── packages/sparkling-method      # 브릿지 SDK
├── packages/methods               # 빌트인 (Navigation, Storage, Media)
├── packages/sparkling-app-cli     # 빌드·실행 CLI
├── packages/create-sparkling-app  # 스캐폴딩
├── packages/sparkling-method-cli  # 코드젠 도구
├── packages/sparkling-types       # GlobalProps 타입
└── packages/playground            # 로컬 개발용

의의

1. TikTok의 프로덕션 인프라 공개
   - 10억+ 사용자 앱에서 검증된 코드
   - 실제 대규모 운영 노하우

2. "TS 선언만 쓰면 네이티브 코드 자동 생성"
   - 브릿지 코드 수작업 ❌
   - 타입 안전 보장

3. Brownfield 지원
   - 기존 앱에 점진적 도입 가능
   - 전면 재작성 불필요

4. React Native+Expo 대안
   - 같은 포지션, 다른 렌더링 엔진
   - Lynx = TikTok의 네이티브 렌더러

Bigstones

Explorer