First Impressions of Lynx

This week, ByteDance open-sourced Lynx, a family of technologies for building native UIs for mobile and web from a single codebase using web technologies. Having built apps with React Native (and React Native for web), I was naturally tempted to take a closer look.

I definitely recommend reading the introductory blog post, which provides a good overview of the project and its goals. Here are some points that stuck out to me:

  • They name React Native and Flutter as their inspiration. If you used either, many concepts will be familiar.
  • The initial release focuses on ReactLynx, the first framework flavor for Lynx. They hinted that they are already using it with other frameworks internally, so I guess they will open source more flavors soon. If executed well, this could be a welcome surprise compared to other ecosystems, potentially flattening the learning curve for web developers.
  • By the way, the initial target platforms are iOS, Android, and Web. Internally, they "already support Windows, tvOS, macOS and HarmonyOS with a self-developed rendering backend" that might be open-sourced later this year. If done well, this could be huge, and potentially be a serious alternative to Electron. Although there are some attempts with React Native (such as Microsoft's React Native for Windows + macOS), they didn't feel ergonomic the last time I checked, making them hard to justify over Electron.
  • Lynx is used in production for parts of TikTok, albeit a small subset of the app if one may believe the comments in the Hacker News thread. They call Lynx production-ready and also say that it "already powers an incredible number of businesses".
  • Lynx features a dual-threaded runtime, splitting the user scripting into a main and background thread. This apparently enables two features:
    • Instant First-Frame Rendering which means that the page can display content directly when it is loaded, without blank screens. This is very similar to what we want to achieve with Server-Side Rendering in typical React.
    • Main Thread Scripting which allows to run some high-priority JavaScript on the main thread. They mention smooth animations and gesture handling as use cases, to achieve a native-like experience.

All in all, this made me very excited to try it out. So far, I only went through their Quick Start guide, but I already like what I see:

  • The project creation feels already very mature for the initial release. Definitely more like React Native + Expo than what we had in the React Native ecosystem before that.
  • In fact, their dev command already feels super similar to Expo: it shows a QR code that you can scan with their development app LynxExplorer. All with hot-reloading, Dan would be proud.
  • LynxExplorer is provided for iOS and Android. For iOS, you have to build it yourself from source for now, though.
  • The App component looks like normal React (web) code with a bit Lynx-specific differences:
    • We are importing hooks from @lynx/react instead of react.
    • We are using view and text instead of div and span. For React Native developers: yes, these are lowercase, so they don't need to be imported from a react-native-like package.
    • In contrast to React Native, we write standard CSS in Lynx, similar to what we are used to from web development. In fact, Tailwind CSS is supported mostly out of the box. This is quite a big deal compared to React Native, where there were quite some differences between the web and native code, even with something like React Native Web.
  • At the moment, Lynx does not provide a way to build an application from scratch. This means, you have to provide your own native app wrapper that loads your Lynx views. They provide an integration guide for this. We'll see how this plays out in the long run. Thinking about the annoying manual modifications that needed to be done to the wrapper when upgrading a React Native app (React Native Upgrade Helper sends it regards), it might not necessarily be a bad thing to be forced to deal with this. Maybe it also simplifies using Lynx only for parts of the app, not sure.
  • The tooling and documentation has some rough edges, which is to be expected for an initial release. For example, at the time of writing I needed to install additional dependencies to get some commands working. Also, the web integration guide points to the built Lynx bundle and didn't document on how one might leverage the dev server for that. So don't expect a fully integrated experience yet.

Overall, I am very excited about Lynx and will definitely keep an eye on its development. It will be interesting to see how its usage feels in more complex apps and if it finds traction in the community. I for one definitely welcome the competition and hope that it will lead to a more vibrant ecosystem.