For cross-platform mobile solutions, the key players have been React Native and Flutter, and this has remained the case for a while now. Many companies utilise these solutions, and the promise of writing once and deploying to both iOS and Android remains powerful. ByteDance, the parent company of TikTok, just open-sourced Lynx. Should we have this technology on our radars?

What is Lynx?

Lynx is focused on cross-platform by delivering native UI for both mobile and web from a single codebase. It promises to write once and render anywhere, offering a fresh perspective. Created by the TikTok engineering team, it has already been proof-tested by TikTok Studio, the TikTok search panel, and special events such as Disney 100. A big difference between Lynx and solutions like React Native and Flutter is that it is framework agnostic and it attempts to be more modular and flexible. So, rather than another cross-platform solution, it offers more freedom.

Under the hood, Lynx is built on a small and very lightweight JavaScript engine(PrimJS, which is built on QuickJS). Lynx also uses a Rust foundation. TikTok faces hefty performance demands, and this was a consideration during the creation of Lynx. As with React Native and Flutter, the most significant value proposition for startups with this technology is the ability to write once but keep the native feel with stable performance. The performance benefits of Lynx could be alluring.

A side-note

It is important to note that Lynx has only just been open-sourced (March 5th). As already mentioned, it is probably better to consider it a lightweight UI engine than a fully-fledged framework like React Native and Flutter. Lynx is currently designed to embed into an existing Android or iOS application, similar to how WebViews work. This does not mean this won’t be possible in the future, but it is very early days at the moment. They are exciting ones, though.

Why would you use Lynx?

Several things make Lynx stand out. It is hard to deny that the creators seem to have considered some of the biggest pain points when working with other libraries or frameworks. For example, a common complaint when using Flutter is that although there are Cupertino flavours of all major components, for some, it loses its native feel. On the other hand, React Native can come with glitches, especially if you have heavy UI demands such as animations or long lists. 

The dual threading model

This is the most eye-catching feature of Lynx. React Native primarily runs JavaScript on a single thread, which can sometimes lead to performance bottlenecks. Lynx, on the other hand, separates responsibilities into two threads. The UI thread (main thread) handles rendering and animations. The framework thread (a background thread) is the default environment for most user code, keeping the main thread responsive and non-blocking. This separation helps prevent lag and improves overall performance compared to React Native’s traditional approach. As shown below, Lynx also offers the developer fine-grained control over how to select which thread is utilised.

<view main-thread:global-bindscroll={onScroll} />

Developer experience

Lynx caters to web developers by allowing them to write real CSS as they do on the web, including transitions. This is a big deal; styling in React Native was a very different experience, as it does not allow this. Additionally, although ReactLynx is the first flavour to be released, Lynx is framework agnostic, which means it can support other frameworks such as Vue.

The developer experience is smooth, it provides instant hot reloading with Rspack, which is a Rust-based web bundler, and it is genuinely instant. Imports are not needed, so for example, you don’t have to import View and Text into each component like you did with React Native. Lastly, with ReactLynx, you can continue to structure your apps with functional components, use hooks for state management and utilise component nesting. By using these web paradigms, it offers higher velocity to startups, and the framework agnostic approach means teams can better leverage existing talent. 

Is it really native?

Unlike with React Native, Lynx does not directly bind to the native UI elements of each platform. As the elements are designed to be platform-agnostic they are rendered natively by the Lynx engine into the UI primitives for each platform, aiming for a native-like look and feel. Therefore creating a UI with a custom look and feel might be more difficult than in Flutter but easier than with React Native. If the built-in Lynx capabilities don't meet requirements, you can create custom native elements for both Android and iOS. 

What are the limitations?

We need to remember that Lynx is in its very early days. The ecosystem and community around it are very immature right now, as you would expect. React Native and Flutter have robust ecosystems around them, and this affects things like tooling, builds, and deployments. It is significant to note that the team around Lynx is very experienced, and it will be exciting to see what develops here. 

I tried running Lynx, and my experience was good. However, on iOS right now, it requires Xcode and simulators and is a somewhat manual process. When you run the application, you can use the Lynx Explorer app. It is a bit like Expo Go, and you can paste in the URL provided in the terminal when you first build the app. 

Lynx does have devtools but they require manual setup as of now. Of course when you hit errors there is little in the way of community support right now too.

Conclusion

Lynx has a lot of potential and could be a game-changer in the cross-platform world, and it will be exciting to see where it goes-the roadmap can be found here. With a cross-platform solution, you are looking for something that is open source, easy to work with and has a decent developer experience. You want an ecosystem around it, and for the experience of building and distributing apps to be as intuitive as possible. Lynx genuinely ticks many of these boxes on day one.