TitTok matrix ByteDance has open-sourced Lynx, a collection of frameworks and tools enabling the creation of native, cross-platform mobile apps using Web markup, CSS, and JavaScript. Lynx aims to deliver native performance thanks to its custom JavaScript engine and pixel-perfect UI rendering.
Lynx architect Xuan Huang explains that, inspired by Chromium, Flutter, and React Native, Lynx aims to deliver native experiences at scale and faster by addressing the growing complexity of diverse form factors and multiple-platform support which leads to "rebuild[ing] the same experiences multiple times, leading to wasted effort, siloed teams, and delayed time-to-market".
Lynx followed a similar spirit—you can think of it as an "alternative Web tailored for app development". It aims to honor the assets of web technologies while taking an opinionated approach, supporting web-like APIs and adding constraints and extensions with clear intent.
To achieve this goal, Lynx adopts markup and CSS to enable Web developers to use their skills for mobile app development. Lynx natively supports CSS animations and transitions, CSS selectors and variables for theming, and modern CSS visual effects like gradients, clipping, and masking.
On the other hand, Lynx departs from the usual single-threaded nature of the Web by statically enforcing a two-threaded model where the main thread is dedicated to privileged, synchronous, non-blocking tasks, while a background thread is used for user code. According to Huang, this approach is what enables Lynx to render the first app frame almost instantaneously, thus optimizing for the "time to first frame" (TTFF) metric, and to power highly responsive interfaces by efficiently handling high-priority events and gestures on the main thread.
Lynx is comprised of several components, including Lynx core engine; ReactLynx, a React-based frontend framework to create declarative UIs; Rspeedy, a bundler based on Rspack, a webpack-compatible bundler implemented in Rust to maximize performance; PrimJS, an optimized JavaScript engine; and Lynx DevTool, an Electron-based debugger. Lynx also offers a Web frontend to run Lynx apps in the browser.
In a Syntax FM podcast, ByteDance engineer Zack Jackson described Lynx as ByteDance's own version of React, which powers all of their apps' UI to maintain a unified architecture across diverse teams. In the official announcement, however, Huang emphasized that Lynx is not limited to React and other frontends will be open-sourced in the future.
Lynx is used for the Search panel of the TikTok apps and for TikTok Studio, the content creation and management app for TikTok creators, among other things.
Hacker News user suzakus, who described themselves as working at ByteDance, stated that some of the most important parts of the iOS and Android clients are written in C++ to be portable across platforms, while others are written in Kotlin or Swift, including most UI components. While this statement seems to reduce the prevalence of Lynx across ByteDance apps, it is compatible with Huang's description.
As a side note, Huang explained on Hacker News why ByteDance decided to reuse the name of a popular command-line Web browser, which also happens to be the oldest web browser still maintained, for its project.
The Lynx project was originally named independently without thinking this far ahead. Since so much code and so many users already rely on it, we decided to stick with the name rather than change it just for open-sourcing.
As a final note, Huang stressed ByteDance will open-source more Lynx components, including additional UI components, the custom renderer, and other frontend frameworks, and that the framework will extend to other platforms such as Desktop, TV, and IoT devices.
About the Author
