Huang says the launch tribute to projects such as PhoneGap, Cordova, Rive, Flutter, and Chromium reflected how much Lynx drew from earlier open-source work. The team wanted to contribute its work back and invite ideas to flow across the React Native, React, and Lynx communities.
Beyond React Native: Lynx's Native CSS & Two-Thread Model
Speaker
Xuan Huang of ByteDance discusses Lynx's CSS support, two-thread model, and React compatibility with a Callstack host.
Huang says teams adopting cross-platform tools often still want to use CSS, especially when moving gradually from a web codebase. Lynx also uses two threads to make rendering and interaction run on the main thread, which Huang says makes it easier to coordinate React Native content with embedded native UI, such as in a long recycling list.
Huang describes Lynx as a young open-source project, six months into its public release, with more UI components and navigation work still underway. At a student hackathon in Singapore, teams built projects including an app that uses privacy technology and AI to detect personal information in photos. He says Lynx's engine is framework-agnostic, while community projects such as Lynx View and Lynx Swift are adding JavaScript framework options.
Huang describes React Compiler as a way to reduce manual memoization and improve React's developer experience and default performance. He says the compiler's goals are separate from Lynx's two-thread model, though the team is experimenting with using it in ReactLynx. He frames React as a programming model with multiple possible implementations, and describes ReactLynx as an implementation that extends that model with two-threaded execution.
Takeaways
- When migrating from web code, preserving CSS can reduce the amount teams need to recreate.
- Coordinate cross-platform and native UI where they share a main thread, especially in complex scrolling views.
- Treat an engine and its UI framework as separate layers if you want multiple framework communities to build on the same platform.
- Compiler optimizations and runtime threading address different parts of the developer and performance model.
Mentioned in this talk
Search inside this talk
What was claimed 10
- uses
“Lynx supports CSS natively.”
YouTube Unverified1 source· Talk
- featureLynx: Two-thread model makes rendering and interactivity easier to coordinate with native UI
“it has two threads, so rendering and interactivity are on the main thread and are easier to coordinate.”
YouTube Unverified1 source· Talk
- metricLynx: Open source for six months
“We've been open source for six months.”
YouTube Unverified1 source· Talk
- metricLynx: More than half of the codebase that runs at ByteDance is not written in Lynx React
“More than half the codebase that runs at ByteDance is not written in Lynx React.”
YouTube Unverified1 source· Talk
- featureLynx React: First and most public, most-used UI layer on top of the Lynx engine
“Lynx React is the first and most public, most-used UI layer on top of the Lynx engine.”
YouTube Unverified1 source· Talk
- featureLynx: Framework-agnostic engine and platform
“the Lynx engine and platform are framework-agnostic.”
YouTube Unverified1 source· Talk
- featureReact Compiler: Optimizes rendering performance, including memoization, and aims to improve authoring experience
“The goal of React Forget, which nowadays we call React Compiler, is mostly to optimize rendering performance, especially memoization.”
YouTube Unverified1 source· Talk
- usesReact Compiler uses Lynx React
“We’re also experimenting internally with incorporating React Compiler into ReactLynx.”
YouTube Unverified1 source· Talk
- featurePreact: Compliant implementation of the React 17 specification
“you can think of Preact as a compliant implementation of the React 17 spec.”
YouTube Unverified1 source· Talk
- featureLynx React: Another implementation of React with two-threadedness added to the programming model
“it’s another implementation, as well as an expanded programming model by adding two-threadedness to the React programming model.”
YouTube Unverified1 source· Talk
