Framework Introduction & Context

• TikTok/ByteDance released Lynx - new React Native alternative with dual-threaded architecture
• Built by team including Jean (original React compiler presentation developer)
• Production-ready framework already powering TikTok apps, starting at v3.x (same version used internally)
• Open-sourced complete production stack: Lynx, React-Lynx, RS Speedy build tool, dev tools, Prim runtime

React Native Performance Limitations

• Traditional React Native uses single-threaded JS queue for all operations
• Touch events → JS queue → processing → UI state updates → native layer
• Creates bottlenecks especially on low-end Android devices
• Input lag issues when typing due to event processing blocking other operations
• JSI improvements help with memory sharing but fundamental threading issues remain

Lynx Dual-Thread Architecture

• Framework Thread: Handles UI updates and rendering (60 FPS without blocking)
• Background Thread: Runs user code, data processing, business logic
• Separates UI updates from application logic processing
• Enables heavy data processing while maintaining smooth 60 FPS UI
• Custom runtime built on QuickJS (210KB footprint) with Prim optimizations

Development Experience Features

• Uses familiar web technologies: CSS, HTML-like markup (view, text, image as globals)
• Instant hot reloading comparable to RSC experience
• Full Chrome DevTools integration with desktop debugging app
• Element inspection across iPhone/device connections
• CSS animations, transitions, selectors, variables, gradients, clipping, masking support

Threading Model & Communication

• Main Thread: Synchronous UI tasks, initial launch, high-priority event handling
• Background Thread: Default for user code, ensures main thread remains unblocked
• Cross-thread communication via runOnMainThread() and runOnBackground() APIs
• Serializable data requirements between threads (no functions/promises)
• Thread-specific directives: "main thread" prefix for props/functions

Performance Optimizations

• Instant first frame rendering (eliminates React Native loading screens)
• 2-4x faster launch times compared to web view solutions
• Custom Prim JS runtime features:
  • Optimized interpreter for faster code execution
  • Seamless object model integration
  • Custom garbage collector (non-blocking, deferred cleanup)
  • Chrome DevTools protocol implementation

Native Integration & Distribution

• True native UI rendering (not game engine like Flutter)
• Uses platform-specific native elements (buttons, tabs, notifications)
• Module Federation support for over-the-air updates without App Store review
• Separate bundle deployment for different app sections/teams
• Code push capabilities for rapid feature deployment

Framework Agnostic Architecture

• Core engine supports multiple frameworks (React usage ~50% internally)
• RS Speedy build tool based on Rust/RSPack
• Support for Svelte, Solid, Vue through separate framework packages
• Micro-frontend architecture with independent team ownership
• Custom renderer option for pixel-perfect cross-platform consistency

Development Constraints & Considerations

• Background-only code rules: event handlers, effects, ref functions
• Compiler analysis limitations require manual thread annotations
• Type safety challenges with cross-thread function passing
• Runtime errors for improper thread usage (no compile-time catching)
• Learning curve for developers unfamiliar with multi-threaded patterns

Production Usage & Ecosystem

• Powers TikTok search panels, TikTok Studio, e-commerce storefronts, live features
• Used for event-specific features (Met Gala) with rapid deployment/removal
• Supports thousands of engineers across hundreds of teams
• GitHub-based open development moving forward
• Additional UI components, graphics capabilities, custom renderer coming later

Comparison with Alternatives

• vs React Native: Better performance, threading, debugging; similar ecosystem
• vs Flutter: True native rendering, better accessibility, familiar web DX
• vs Native: Cross-platform benefits, faster development, web technology familiarity
• Addresses scale/velocity challenges for large applications with frequent updates